Style nettsider Steg 1: Konfigurasjon før vi legger til stiler Steg 2
Stylenettsider
Nybegynner
Web
P DF
Introduksjon
Laossgjørenettsidenbedremednoenstiler.Idenneognesteleksjonskalvilæreosshvordanåendrefarge,tekst,størrelse
ogmer!
ViendrerhvordanensideserutgjennomåbrukeetspråksomheterCSS(somstårforCascadingStyleSheets).Deteret
veldigtenkeltspråkålære.Laossbegynne.
Steg1:Konfigurasjonførvileggertilstiler
Detfinnesmangemåterålagestilerpå,inline,i“head”,ellersomeneteget.css-dokumentsomvilinkertilfra“head”.Meni
dagskalvileggestilenei“head”påvårhtmlsidesåviikketrengeråtenkepååhåndtereflerefiler.
Sjekkliste
Åpneindex.htmlfrafoldernFelixsomvilagteiforrigeleksjon.
Iseksjonen“head”trengervienstyletag.
<style>
</style>
Allestilerskalleggesmellomdisseelementene.Genereltsercss-kodeslikut:
selector {
property: value;
}
Kandufinneknappenefor‘{‘og‘}’påditttastatur?Hvamed‘:’og‘;’?Selektorerkanværehtml-elementsom h1 , p ,
img , a .Mendekanogsåværeandretingsomvivillæreomsenere.
Steg2:Leggtilfarge
Laossleggetilfargemedhjelpavattributtetcolor!CSSerfaktiskoppfunnetavennorskgutt!
Laossendre h1 tilåværerødistedenforsvart.
<style>
h1 {
color:red;
}
</style>
LAGREfilenogVISEdeninettleserendin
Tekstenskalnåværerød!Detfinnesforskjelligemåterårepresentereenfargepå.Deter16grunnleggendefargenavn,somer
aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,ogyellow.
Prøvogendrefargentilnoeannet!Deflestenettleserestøtteritillegg130andrefargenavn,helelistenialfabetisk
rekkefølgekanderefinnepåhttp://www.w3.org/TR/css3-color/#svg-colorErdinyndlingsfargeilisten?
Menvikanbrukeendaflerefargergjennomåbrukedenheksadesimalekodenistedenfornavnet.Enheksadesimalkode
eren#fulgtav6tegndertegnenkanværesifferne0-9ellerbokstaveneA,B,C,D,E,F.Gjennomåbruke
heksadesimalekoderkanvirepresenteremerenn16millionerfarger.
Kodeklubbensinfavorittfargeer #58AB57 .Kandugjettehvilkenfargedeter?Prøvåendrenoenteksttildenfargenogse
hvordandetserutiennettleser.
LAGREfilenogVISEdeninettleserendin
Steg3:Gifargetilspesifikkeelementer
Hvaomvivilgjøresånnatordetoransjeisettningen´Pelsenhanseroransje´fåroransjefarge?Ikkeheleseksjonen,men
akkuratdetordet.
Enmåteågjøredettepåeråputtetaggenrundtordet,pådennemåten:
<span>oransje</span>
Vikandaiseksjonen head lageenstilfor span
span {
color:orange;
}
LAGREfilenogVISEdeninettleserendin
Steg4:Bakgrunn
Vikanleggetilfargepåbakgrunnenogså,ikkebarepåtekst.Foreksempel:
body {
background-color:#D2FAFC;
}
Dettevilgjøreathelebakgrunnenblirblå.Dukanvelgehvilkenfargeduønskerfraenlistepåwww.colourpicker.comsomda
generererdetnummerdutrengerogsåkanduklippeoglimedetinnidinkode.
Prøvenå:
h1 {
background-color:black;
}
Sidenvialleredehaddeen h1 deklarertifilenkanvibareputteinnattributtetbackground-colorsammenmedcolor,vitrenger
ikkeåskrivealtomigjen.
h1 {
color:red;
background-color: black;
}
## Nå skal du __LAGRE__ filen og se hvordan det ser ut. {.save}
## Morro med tekst
Kanskje skulle tittelen være __større__ og med store bokstaver. Vi kan spesifisere størrelsen på teksten gjennom å bruke `font-size
`. Verdiene kan være forskjellige, men de mest brukte er 12, 14, 16, 32, 48 og 72 piksler.
La oss prøve ut 72px for nå. (px betyr piksel)
```css
h1 {
color:red;
background-color:black;
font-size:72px;
}
Nåskalduforsøkeåendretittelentilåværekunistorebokstaverbaregjennomåbruke text-transform:uppercase; Vikanogså
gjøredenunderstreketgjennomåbruke text-decoration:underline;
NåskalduLAGREfilenogsehvordandenserut.
Erdetikkemyestørreforskjellnå?
FordesombrukerFirefoxellerChromesomnettleser.
Detfinnesfaktiskogsåenannenverdifor“text-decoration”somer“blink”.Jegkommerikketilåfortelledeghvadetgjør.Du
måtestedet. text-decoration:blink; (detblirlittmaseteetterhvert,mendeterlovågåtilbaketil“underline”hvisduvil).
Steg6.Sentreretekst(ogbilder)horisontalt
Allvårtekstvisesheltbortetilvenstre.Vikanendredetgjennomåbruke text-align:center (mankanogsåbruke´right
´(høyre),´left´(venstre)erstandard).
Fordennenettsidenvilviatallvårtekstskalværesentrert,ogdakanviskrive:(Merkdegatdenengelskemåtenåstave
senterpåercenter.)
body {
background-color: #F8FAF4;
text-align: center;
}
Ladumerketilataltpånettsidenblesentrertnårviharlagttil‘text-align:center’iseksjonen“body”?Deterfordialtinnenfor
elementet“body”arverstilen.Detteskjernåretelementerinnenforetannet,somdetteher:
<p>Har du sett Felix? <em>Vennligst</em> kontakt eieren hans</p>
Teksten“Vennligst”vilhastilenfraelementet <p> medstilenfraelementet <em> lagtpå.Detteergrunnentilatmankallerdet
cascading-stileneblirvidereførtfraetelementtilalleenesomerinnenfordem.Menværforsiktig,detfinnesnoenstilersom
ikkeblirvidereført.
NåskalduLAGREfilenogåpnedeniennettleser
Viderestudier
Hvordanvilleduendretpåsidenforåfådentilåsebedreut?Hvorforikkeprøveåbrukealledinefavorittfarger?
Finnesdinfargesometnavnellermådubrukeenheksadesimalkode?
Hvisdublirfortferdigkandugåtilbakeåleggepåstilerfortidigereleksjoner.
Lisens: CCBY-SA4.0
© Copyright 2024