Hei!!
Endelig har vi fått litt fart på blogginnleggene. Og du lærer no å lage enkle html sider i et litt større tempo enn vi gjorde i starten! BRA!
Sist gang snakket eg litt om HTML og CSS.
For å repetere kjapt.
Denne linjen må ligge i <HEAD> - delen av html siden din for at css skal virke:
<link rel="stylesheet" type="text/css" href="style.css" />
Filen din trenger ikke hete style.css, men så lenge vi kun opererer med 1 CSS fil synes eg det er greit å bruke det som en standard. På større sider kan du om du sjekker kilden se at de har opptil flere css tilknytninger. Det kan gjerne være gunstig når man skal begynne med toppmenyer og menyer på venstresiden osv.
Det er mange veier til ROM. Som kjent fører alle veier dit. Og litt sånn er det med CSS og farger også.
I forrige blogg viste eg litt med HEX-koder. Svart og Hvit.Motsetninger av hverandre. Men det finnes jo så klart et hav av andre farger. Ikke alle farger er gode nok til å bruke på web. Derfor er det laget Charts som viser hva man kan bruke, med HEX-kodene.
For noen år tilbake ble det laget en liste med 216 gode farger å bruke på web. Stort sett skulle det holde, og det er den eg tar utgangspunkt i her.
Listen finner du her:
http://www.w3schools.com/cssref/css_colors.asp
Under overskriften 'Web Safe Colors?'
Bruk gjerne den som referanse til å begynne med, til du føler du har kontroll på CSS og farger.
Men det er flere måter å velge ut fargen på enn å bruke hex-koder som #ffffff
Du har for eksempel RGB, som står for Red, Green, Blue.
Velger du å bruke denne metoden vil det i din CSS-fil se slik ut:
body
{
background: rgb(255,0,0);
}
Som gir fargen rød. Setter du rgb(0,255,0); vil du få grønn.
Du skjønner sikkert tegningen etterhvert.
Om man tar skrittet videre kan man også definere rgba.
Bokstaven a står her for alpha channel.
Og hva er så en alpha channel? Her må eg si at eg lett kan tråkke i salaten og tar gjerne i mot innspill og forbedringer av blogginnlegget.
Men en alpha channel ifølge w3schools er en forlengelse av RGB som sier noe om gjennomsiktigheten til en farge.
Måten du bruker det på:
body
{
background: rgba(255,0,0,0.5);
}
Skalaen går fra 0.0 til 1.0.
Lek litt med denne for å få den ønskede effekten.
Så langt har vi nevnt: Hex og RGB.
Vi har enda en HSL; Hue, Saturation, Light.
Hue står for fargetone
Saturation står for metning.
I dag stoler eg på ordbøker :)
HSL skriver vi slik i CSS:
body
{
background: hsl(120, 65%, 75%)
}
Test det ut og se hvordan det virker. Også på HSL har vi en alpha channel. Da heter det HSLA.
Det siste eg vil nevne er Cross browser predefined farger.
Her er 147 farger som er predefinert med fargenavn istedet for koder.
Listen finner du her:
http://www.w3schools.com/cssref/css_colornames.asp
Skal du bruke farger på denne måten blir det slik i CSS:
body{
background: blue;
}
Det finnes veldig mange browsere. Ikke alle browsere støtter alt.
Som du sikker har merket henviser eg veldig ofte til www.w3schools.com sin sider.
Så langt har eg funnet det meste av det eg trenger der, og de kan være en grei side å bookmarke.
19.04.2012 skrev eg et blogginnlegg om Delicious.
Som er en smart måte å bookmarke sider på. Bruk denne og bookmark sidene eg har listet opp.
I dag har det vært mye å lese og lære. Men eg håper at du har fått littegrann verktøy å leke med siden din.
Neste gang tenker eg at vi snakker litt om fonter.
Som Dere alle etterhvert vet, så liker eg å friste med en liten video:
Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!
Ingen kommentarer:
Legg inn en kommentar