Basics of CSS3 Styles - dummies

Den bedste måde at starte med stilarter i CSS3 på er at se dem blot som et middel til formatering af information på skærmen. Fordi de fleste af de oplysninger, du arbejder med, er tekst, er det nemmest at starte med tekst som grundlag for at forstå stilarter. Lad os starte med denne grundlæggende HTML5 formaterede side:

En simpel side

En simpel overskrift






Enkel tekst at gå med overskriften.

I øjeblikket er overskriften og stykket ret almindeligt. Teksten vises i hvilken standard skrifttype du har valgt til din browser. Typisk er teksten sort på en hvid baggrund, medmindre du har valgt en anden farvekombination.

På dette tidspunkt kan du begynde at spille med siden lidt for at se, hvordan du formaterer det anderledes. Følgende procedure hjælper dig med at ændre den grundlæggende side, så den ser lidt mere interessant ud. Du kan bruge ethvert tekstredigeringsprogram, du kan lide, så længe det ikke tilføjer nogen formatering. Men ved hjælp af et produkt som Komodo Edit vil opgaven blive betydeligt lettere.

1. Opret en ny HTML5-fil med din teksteditor.

   Din editor kan ikke understøtte HTML5-filer. Enhver tekstfil vil gøre. Ved hjælp af en bestemt filtype betyder det normalt, at redaktøren indsætter nogle af koden for dig automatisk, hvilket vil spare dig for at skrive tid.

2. Indtast koden for HTML-siden.

   Sørg for at indtaste koden nøjagtigt som det fremgår af dette afsnit.

3. Indsæt følgende kode umiddelbart efter tagget.

   Etiketten definerer begyndelsen af ​​en stil. Når du placerer tagget direkte på siden som denne, kaldes det en intern stil . Du kan også oprette eksterne stilark . Eksterne stilark ligger i. CSS-filer.

   Typeattributtet fortæller browseren, at tagget indeholder CSS-information i tekstformat.

4. Indtast følgende kode i feltet (mellem og indtastningerne).

   p {font-family: cursive; font-size: large; color: # 0000ff; baggrundsfarve: # ffff00;} > Dette ser kompliceret ud, men det er det egentlig ikke. P står for
   

   (afsnit) -mærket. Alt i denne post vil påvirke

   -tagerne i dit dokument.

   De krøllede braces ({}) Fortæl browseren, at alle formateringsinstruktionerne mellem dem gælder for

   -tagerne i dokumentet. Du omfatter altid de krøllede bånd som en del af stildefinitionen.

   I de krøllede bånd ser du attributters navn og værdipar. F.eks. Er font-familien navnet på en CSS-attributt, der definerer hvilken skrifttype der skal bruges. I dette tilfælde specificerer attributten standard cursive font til platformen og browseren.Ved hjælp af CSS sikrer generiske navne, at din applikation vil producere generisk kompatible resultater på alle platforme ved hjælp af en hvilken som helst browser.

   Skrifttypestørrelsen definerer en relativ størrelse. I dette tilfælde angiver stor, at du vil gøre skrifttypen stor i forhold til standardstørrelsen. Du angiver ikke en bestemt skriftstørrelse, hvilket betyder, at hver platform og browser kan gøre skrifttypen større end normalt for det enkelte miljø.

   Farveattributen angiver en rød, grøn, blå værdi, der skal bruges til skrifttypens farve. Værdien går forud for en hash (#) efterfulgt af hexadecimale farveværdier fra 0 til ff. I dette tilfælde vil skrifttypen være den lyseste blå understøttet af platformen. På samme måde angiver baggrundsfarveattributten baggrunden for teksten, som vil være gul i dette tilfælde.

   Gem siden og indlæs den i din browser.

5. Du ser effekterne af stilændringen som vist i Figur 1-2. Din side kan se anderledes ud end den på denne side, fordi din platform eller browser muligvis bruger forskellige værdier for skrifttypefamilien eller skriftstørrelsen.

   Indtast følgende kode efter p-stilen i taggen.

   

6. h1 {font-family: "Times New Roman", Georgia, serif; skrifttypestørrelse: 40px; tekst-align: center; tekst-dekoration: understrege; farve: # ff0000; baggrundsfarve: # 00ffff;}

   Denne stil påvirker
   

   -tagsposterne, og den har mange af de poster, der anvendes til

   -mærket. Bemærk dog, at denne gang indeholder skrifttypefamilieattributen tre poster: Times New Roman-værdien er den mest specifikke, efterfulgt af Georgien efterfulgt af den mindst specifikke - serif. Når du arbejder med en værdi, der indeholder mellemrum, skal du vedhæfte værdien i citater som vist.

   Ved hjælp af tre-tilgangen giver du mere kontrol over udseendet af udgangen, men det gør det stadig muligt for browsere, der ikke understøtter en bestemt skrifttype, for at gøre indholdet korrekt. Når du leverer en bestemt skrifttype, skal du sørge for, at du også leverer mindre specifikke skrifttyper til browsere, der ikke har adgang til din angivne skrifttype.

   Skrifttypestørrelsen er også anderledes. Denne gang bruger stilen en bestemt størrelse på 40 pixels. Selv om en bestemt værdi kan gøre det muligt at oprette specialeffekter på skærmen, skaber der også problemer med en bestemt værdi. En 40px-indgang fungerer fint på skrivebordet eller den bærbare computer, men kan forårsage problemer med en tablet og vil helt sikkert gøre indholdet umuligt at vise på en smartphone.

   Denne stil indeholder også nogle poster, der ændrer udseendet af teksten. Text-align attributten bestemmer, hvor teksten er placeret på skærmen, mens attributten til tekstindretning bestemmer eventuelle specielle skrifttypegenskaber. I dette tilfælde vises skrifttypen centreret på skærmen med en understregning.

   Gem siden og indlæs den i din browser.

7. Du ser effekterne af stilændringen som vist i Figur 1-3. Overskriften vises i rød tekst på en lyseblå baggrund, og stykket vises som blå tekst på en gul baggrund.