Hvordan å definere stiler for flere elementer for HTML5 og CSS3 programmering - dummies

Noen ganger kan det hende du vil ha en rekke elementer på HTML5 og CSS3-baserte nettsider for å dele lignende stiler. Ta en titt på dette eksemplet for å se dette i aksjon.

De tre øverste overskriftene har alle veldig lignende stiler. Å lage tre forskjellige stiler vil være kjedelig, så CSS inneholder en snarvei:

multiStyle. html h1, h2, h3 {text-align: center; font-familie: "Bradley Hand ITC", kursiv; bakgrunnsfarge: gul;} h3 {font-family: monospace;}

H1 Overskrift







H2 Overskrift
H3 Overskrift

Ett stilelement (den som begynner h1, h2, h3) gir all informasjonen for alle tre overskriftstyper. Hvis du inkluderer mer enn ett element i en stilvelger skilt av kommaer, gjelder stilen for alle elementene i listen. I dette eksemplet brukes den sentriske kursiv skrift med en gul bakgrunn til overskriftsnivå 1, 2 og 3 i samme stil.

Hvis du vil gjøre endringer, kan du gjøre det. Stilregler brukes i rekkefølge, slik at du alltid kan starte med generell regel og deretter endre bestemte elementer senere i stilen hvis du ønsker det.

Hvis du har flere elementer i en velgerregel, er det en stor forskjell om du bruker kommaer. Hvis du skiller elementer med mellomrom (men ikke komma), ser CSS etter et element som er nestet i et annet element. Hvis du inkluderer kommaer, gjelder CSS regelen for alle listede elementer.

Det er mulig å få enda mer spesifikt om selektorer med tegnsetting. For eksempel beskriver + selgeren søskenforholdet. For eksempel, se på følgende regel:

h1 + p

Dette målrettes kun til avsnittet som umiddelbart følger et nivå-ett overskrift. Alle andre avsnitt vil bli ignorert. Det er også andre selektorer, men de som er nevnt her, vil være tilstrekkelig for de fleste applikasjoner.

Du lurer kanskje på hvorfor utviklere trenger så mange forskjellige typer selektorer. Du kan bruke taggenavnet for de fleste elementer, og bare bruke en klasse eller ID til ethvert element som krever spesiell oppmerksomhet. Det er sant, men ett mål for CSS er å holde HTML-koden så ren som mulig. Du vil bruke strukturen på selve siden for å hjelpe deg med å bestemme stilen.