Grunnleggende om CSS3-stiler - dummier

Den beste måten å starte med stiler i CSS3 er å se dem bare som et middel til å formatere informasjon på skjermen. Fordi det meste av informasjonen du vil jobbe med, er tekst, er det lettest å starte med tekst som grunnlag for å forstå stilarter. La oss starte med denne grunnleggende HTML5-formaterte siden:

En enkel side

En enkel overskrift

Enkel tekst å gå med overskriften.

For øyeblikket er overskriften og avsnittet ganske vanlig. Teksten vises i hvilken standard skrift du har valgt for nettleseren din. Vanligvis er teksten svart på en hvit bakgrunn med mindre du har valgt en annen fargekombinasjon.

På dette tidspunktet kan du begynne å spille med siden litt for å se hvordan du formaterer det på en annen måte. Følgende prosedyre hjelper deg med å endre grunnsiden, slik at den ser litt mer interessant ut. Du kan bruke hvilken som helst tekstredigeringsprogram du liker, så lenge det ikke legger til noen formatering. Men ved å bruke et produkt som Komodo Edit, blir oppgaven betydelig enklere.

Opprett en ny HTML5-fil med tekstredigeringsprogrammet.

Redaktøren din støtter kanskje ikke HTML5-filer. Enhver tekstfil vil gjøre. Ved å bruke en bestemt filtype betyr det vanligvis at redaktøren legger inn noen av koden for deg automatisk, noe som vil spare deg for å skrive tid.
Skriv koden for HTML-siden.

Pass på at du skriver inn koden nøyaktig slik den vises tidligere i denne delen.
Sett inn følgende kode umiddelbart etter taggen.
Etiketten definerer begynnelsen på en stil. Når du plasserer taggen direkte på siden som denne, kalles den en intern stil . Du kan også opprette eksterne stilark . Eksterne stilark ligger i. CSS-filer.

Typeattributtet forteller nettleseren at taggen inneholder CSS-informasjon i tekstformat.
Skriv inn følgende kode i feltet, mellom og oppføringene:
```
p {font-family: cursive; font-size: large; color: # 0000ff; bakgrunnsfarge: # ffff00;} > Dette ser komplisert ut, men det er egentlig ikke. P står for
```
(avsnittet) tag. Alt i denne oppføringen vil påvirke
-tagsene i dokumentet.
Den krøllete braces ({}) Fortell nettleseren at alle formateringsinstruksjonene mellom dem gjelder

-tagsene i dokumentet. Du inkluderer alltid de krøllete båndene som en del av stildefinisjonen.
I de krøllete båndene ser du attributtnavn og verdipar. For eksempel er font-familien navnet på et CSS-attributt som definerer hvilken skrifttype som skal brukes. I dette tilfellet spesifiserer attributten standard skriftlig skrifttype for plattformen og nettleseren.Ved hjelp av CSS generiske navn sikrer at søknaden din vil produsere generisk kompatible resultater på alle plattformer, ved hjelp av en hvilken som helst nettleser.

Skriftstørrelsesattributtet definerer en relativ størrelse. I dette tilfellet angir stort at du vil gjøre skriftstørrelsen stor sammenlignet med standardstørrelsen. Du spesifiserer ikke en bestemt skriftstørrelse, noe som betyr at hver plattform og nettleser kan gjøre skriftstørrelsen større enn normalt for det enkelte miljø.

Fargeattributtet spesifiserer en rød, grønn, blå verdi som skal brukes til skrifttypens farge. Verdien er foran en hash (#) etterfulgt av heksadesimale fargeværdier fra 0 til ff. I dette tilfellet vil skrifttypen være den klareste blåen som støttes av plattformen. På samme måte angir bakgrunnsfargeattributtet bakgrunnen for teksten, som vil bli gul i dette tilfellet.

Lagre siden og last den inn i nettleseren din.
Du ser effektene av stilendringen som vist i Figur 1-2. Siden din kan se annerledes ut enn den på denne siden fordi plattformen eller nettleseren din kan bruke forskjellige verdier for skrifttypefamilien eller skriftstørrelsen.

Skriv inn følgende kode etter p-stilen i taggen.
h1 {font-family: "Times New Roman", Georgia, serif; skriftstørrelse: 40px; tekst-align: center; tekst-dekorasjon: understreke; farge: # ff0000; bakgrunnsfarge: # 00ffff;}
```
Denne stilen påvirker
```
-oppføringene, og den har mange av oppføringene som brukes til
-typestilen. Vær imidlertid oppmerksom på at denne gangen inneholder skriftfamilieattributtet tre oppføringer: Times New Roman-verdien er den mest spesifikke, etterfulgt av Georgia, etterfulgt av minst spesifikk - serif. Når du arbeider med en verdi som inneholder mellomrom, må du legge inn verdien i anførselstegn som vist.
Ved å bruke tre-tilgangen gir du mer kontroll over utseendet på utgangen, men gjør det fortsatt mulig for nettlesere som ikke støtter en bestemt skrift for å gjøre innholdet riktig. Når du leverer en bestemt skrift, må du sørge for at du også leverer mindre spesifikke skrifttyper for nettlesere som ikke har tilgang til den angitte fonten din.

Skriftstørrelsesattributtet er også annerledes. Denne gangen bruker stilen en bestemt størrelse på 40 piksler. Selv om en bestemt verdi kan gjøre det mulig å skape spesialeffekter på skjermen, skaper det også problemer med en bestemt verdi. En 40px-oppføring fungerer fint på skrivebordet eller datamaskinen, men kan føre til problemer med en nettbrett, og vil definitivt gjøre innholdet umulig å vise på en smarttelefon.

Denne stilen inneholder også noen oppføringer som endrer utseendet på teksten. Tekstjusteringsattributtet bestemmer hvor teksten er plassert på skjermen, mens tekstdekorasjonsattributtet bestemmer spesielle skriftfunksjoner. I dette tilfellet vises fonten sentrert på skjermen med en understreke.

Lagre siden og last den inn i nettleseren din.
Du ser virkningen av stilendringen som vist i figur 1-3. Overskriften vises i rød tekst på en lyseblå bakgrunn, og avsnittet vises som blå tekst på gul bakgrunn.