Slik bruker du flere stiler sammen med CSS3 - dummies

Forstå arvenes regler i CSS3 hjelper deg å lage interessante nettsteder som krever minimum vedlikehold. Ved å følge disse reglene, når vedlikehold er nødvendig, må du bare gjøre en endring, i stedet for å endre hundrevis av varer hver for seg. Det lønner seg å eksperimentere, så du kan forstå de fulle effektene av arv og effektene av å bruke flere stiler sammen.

Opprett en ny HTML5-fil med tekstredigeringsprogrammet.

Redaktøren din støtter kanskje ikke HTML5-filer. Enhver tekstfil vil gjøre.
Skriv inn følgende kode for HTML-siden.
```
Arv Eksempel p {font-familie: Arial, Helvetica, sans-serif; farge: blå; bakgrunnsfarge: Gul; margin: 0; font-style: kursiv; font-size: medium;} div p {font-style: kursiv; skriftstørrelse: større;}

Et eksempel på CSS arv







Et avsnitt utenfor.
Et avsnitt inne i en beholder.
```
Denne siden inneholder en rekke inline-stiler, som alltid har høyeste arvsprioritet. For eksempel gir den en skrifttype-familie av monospace for tagdelen av setningen. Du kan oppnå det samme ved å tilordne et klasseattributt for kode, men dette eksemplet bruker inline-stilen i stedet.

Den bruker en inline-stil for å sette tekstjusteringsstilen til venstre. Fordi standard stilen justerer tilpasningen til venstre, ser du ingen forskjell. Men hvis en annen stilendring endrer tekstjusteringen, vil denne stilen tre i kraft og forhindre bevegelse av dette avsnittet.

De interne stilmodifikasjonene vises alle innenfor taggen i elementet. Den første stilen angir de generelle egenskapene for en
tag. Legg merke til at stilen spesifikt setter skriftstilen til kursiv og skriftstørrelsen til medium.

Den andre stilen er mer spesifikk. Den setter karakteristikkene for
koder som vises som et barn av a. Følgelig sier arvelighetsregler at denne stilen vil ha forrang når arvenes regler er oppfylt, noe som betyr at skriftstørrelsen og skriftstørrelsen vil være annerledes i dette tilfellet.
Lagre filen som arvelighet. HTML.
Legg inn arvseksemplet i nettleseren din.

Du ser rollen som arv og cascading stiler spiller.
Opprett en ny CSS-fil med teksteditoren din.

Redaktøren din støtter kanskje ikke CSS-filer. Enhver tekstfil vil gjøre.
Skriv inn følgende CSS-stilinformasjon.
```
body {text-align: center; farge: DarkRed; bakgrunnsfarge: Khaki; grense: innsats; border-farge: grønn;} h1 {grense: start; border-color: Brown;} p {tekst-dekorasjon: understreke; font-familie: "Times New Roman", Times, Serif; font-stil: skrå; Skriftstørrelse: xx-stor;}
```
Koden vises som det øverste objektet på en side, slik at endringene som er notert i kroppsstilen, bør påvirke alt som ikke spesifikt overstyres senere.I dette tilfellet endrer eksemplet tekstjusteringen til senter og plasserer en mørk rød kant rundt innholdet. Bakgrunnsfargen endres også. Til slutt legger stilen en grønn ramme rundt hvert objekt.

H1-stilen overstyrer alle kroppsstiler. I dette tilfellet betyr det at du endrer grenseformene.

P-stilen overstyrer også alle kroppsstiler. Imidlertid er det ikke noen egenskaper som er de samme i dette tilfellet, så p-stilene forbedrer stilene arvet fra kroppsstilen.
Lagre filen som arvelighet. CSS.
Legg til følgende kode i området til HTML-filen.
Denne koden oppretter koblingen mellom HTML-filen og CSS-filen.
Lagre HTML-filen og last siden på nytt.

Legg merke til at alle forventede endringer er på plass. For eksempel er teksten sentrert, bortsett fra det ene avsnittet som har en inline-stil som overstyrer den sentrale teksten. Overskriften er nå i mørk rød - tekstteksten overstyrer det fargevalget, så det forblir blå. Selv om det er en ekstern p-stil for størrelsen på teksten, overstyrer den interne stilen den.

Du bør legge merke til noe annet om eksemplet. Kroppen inneholder en innfeltgrense av riktig farge og overskriften inneholder en utgangsgrense av riktig farge, fordi den har tilsidesatt standarden.

Men avsnittene har ingen kantlinje. På en gang har endringer i tagget påvirket hele dokumentet, og noen av dem gjør det fortsatt. Andre endringer påvirker imidlertid bare kroppen og ikke andre blokkelementer. Blokkelementer arver ikke noen innstillinger fra kroppsstilen.
Slett h1-stilen fra arven. CSS stilark.

Du kan også kommentere h1-stilen ved å legge til begynnelsen (/ *) og slutten (* /) kommentarsymbolene slik:
```
/ * Kommenterte å vise blokkinnstillinger. h1 {grense: start; border-farge: Brown;} * /
```
Lagre CSS-filen og last siden på nytt.

Merk at overskriften nå mangler en grense. Det viser seg at overskriften ikke overstyrer grense på kroppsnivå - det var å legge til en ny grense. Aldri anta at en kroppsstil vil gjennomføre til andre blokkeringsstiler - noen innstillinger gjør det ikke. Når du finner ut at siden din ikke ser ut som du forventet å se ut, kan du prøve å konfigurere innstillingen på et lavere blokknivå.

Du kan også se noen stilark som har tilgang til html-stilen, som påvirker taggen som inneholder taggen. Det er sant: Du kan jobbe med html-stilen for å oppnå noen effekter.

Legg til html-stilen som vises her for arven. CSS stilark.

html {border: start; border-farge: grønn; bakgrunnsfarge: Hvit;}

Lagre CSS-filen og last siden på nytt.

Du trenger sjelden å stole på html-stilen fordi det ganske enkelt ikke er nødvendig. HTML-blokken er et nivå over kroppsblokken, som vist i dette eksemplet. HTML-blokken gir deg ikke tilgang til noe som kroppsblokken ikke kan endre i de fleste tilfeller, med unntak av spesielle effekter som den som vises her.