Kursusplan

CSS avancerede undervisningsmaterialer

• CSS ekstra bog
• CSS introduktion
• CSS grundlæggende syntaks
• CSS avanceret syntaks
• CSS afledte valgfindere
• CSS id valgfinder
• CSS klasse valgfinder
• CSS oprettelse
• CSS baggrund
• CSS tekst
• CSS skrifttype
• CSS liste

CSS rammemodel

• CSS rammemodel oversigt
• CSS indrykning
• CSS kant
• CSS margen
• CSS margen sammenføring

CSS position

• CSS positionering oversigt
• CSS relativ positionering
• CSS absolut positionering
• CSS flydende

CSS vælger

• CSS element valgfinder
• CSS valgfinder gruppering
• CSS klasse valgfinder detaljer
• CSS ID valgfinder detaljer
• CSS egenskabs valgfinder detaljer
• CSS efterkommer valgfinder
• CSS barn element valgfinder
• CSS næstebror valgfinder

Valgfri kurser

Kursusanbefaling:

• CodeW3C.com skattekiste

CSS tekstegenskaber kan definere tekstens udseende.

Gennem tekstegenskaber kan du ændre tekstens farve, tegnafstand, justere teksten, dekorer teksten, indrykke teksten osv.

Indrykning af tekst

At indrykke første linje af afsnit på en web-side, dette er en af de mest almindelige tekstformateringseffekter.

CSS tilbyder text-indent-egenskabenDenne egenskab gør det nemt at indrykke tekst.

Ved brug af text-indent-egenskaben kan første linje af alle elementer indrykkes med en given længde, selv om længden kan være negativ.

Denne egenskab bruges oftest til at indrykke første linje af et afsnit, nedenstående regler vil indrykke første linje af alle afsnit med 5 em:

p {text-indent: 5em;}

Bemærk:Generelt kan text-indent anvendes til alle blokklasse-elementer, men kan ikke anvendes til inline-elementer, og heller ikke til erstatningskomponenter som billeder. Dog vil et billede i den første linje af en blokklasse flytte med resten af teksten på linjen.

Tip:Hvis man vil 'indrykke' det første linje af en inline-element, kan man opnå dette ved at bruge venstre indrykning eller margin.

Brug negative værdier

text-indent kan også sættes til negative værdier. Ved at bruge denne teknik kan man opnå mange interessante effekter, såsom 'hængende indrykning', hvor det første linje hænger i elementets venstre kant:

p {text-indent: -5em;}

Men vær forsigtig med negative værdier for text-indent, hvis et afsnit har en negativ værdi, kan nogle af den første linjes tekst komme uden for browserens venstre kant. For at undgå dette anbefales det at sætte en ekstern margin eller lidt indrykning for negative indrykkede værdier:

p {text-indent: -5em; padding-left: 5em;}

Brug procenter

text-indent kan bruge alle længdeenheder, herunder procenter.

Procentværdier skal relateres til den overordnede elements bredde. På den anden side, hvis indrykket værdien sættes til 20%, vil det første linjes indrykning være 20% af den overordnede elements bredde.

I nedenstående eksempel er indrykket værdien 20% af den overordnede elements bredde, hvilket svarer til 100 pixel:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

Arv

text-indent egenskaben kan arves, overvej følgende markeringer:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

Overskrivende markeringer vil også indrykke 50 pixel, fordi denne afsnit arver indrykket værdi fra div-elementet med id 'inner'.

horisontal justering

text-align er en grundlæggende egenskab, der påvirker en elementsTekstlinjerJusteringer mellem hinanden. De første tre værdier er ret direkte, men de fjerde og femte er lidt mere komplekse.

Værdierne left, right og center får teksten i elementet til at være henholdsvis venstreakteret, højrereakteret og centreret.

Vestlige sprog læses fra venstre til højre, og standardværdien for text-align er left. Teksten justeres til venstre kant, og højre kant er bølget (kaldet 'venstre til højre' tekst). For sprog som hebræisk og arabisk er text-align standard right, da disse sprog læses fra højre til venstre. Ikke overraskende centrerer center hver tekstlinje i elementet.

Tip:For at centrere blokkomponenter eller tabeller skal der sættes passende venstre og højre eksterne margener på disse elementer.

text-align:center og <CENTER>

Du kan måske tro, at text-align:center har samme effekt som <CENTER>-elementet, men det er faktisk meget forskelligt.

<CENTER> påvirker ikke kun teksten, men også centrerer hele elementet. text-align kontrollerer ikke elementets justering, men kun indholdet. Elementet selv flyttes ikke fra en ende til den anden, men kun teksten påvirkes.

justify

Den sidste vandret justeringsegenskab er justify.

I justeret tekst placeres begge ender af tekstlinjen på elementets indre kant. Derefter justeres afstanden mellem ord og bogstaver, så længden på hver linje er præcis samme længde. Du har måske bemærket, at justeret tekst er meget almindelig inden for udskriftsområdet.

Det skal bemærkes, at det er brugeragenten (ikke CSS) der bestemmer, hvordan justeret tekst udfylder mellemrummet mellem de øvre og nedre kanter af forældrelementet. For at få flere detaljer, se CSS text-align egenskabs reference side.

Bogstaverningsafstand

word-spacing egenskabenMan kan ændre den standard mellemrummet mellem ordene. Standardværdien normal er den samme som at sætte værdien til 0.

word-spacing egenskaben accepterer en positiv længdeværdi eller en negativ længdeværdi. Hvis der gives en positiv længdeværdi, vil mellemrummene mellem ordene øges. At sætte en negativ værdi for word-spacing, vil trække det sammen:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Dette er en afsnit. Mellemrummene mellem ordene vil blive øget.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

eksempel TIY: øg eller reducer ordafstand (bogstavsinterval)

Bemærk:Hvis du vil dykke dybere ned i CSS's definition af 'ord', besøg CSS word-spacing egenskabs referenceside.

bogstavafstand

letter-spacing egenskabForskellen med word-spacing er, at bogstavafstanden ændrer afstanden mellem tegn eller bogstaver.

Som med word-spacing egenskaben inkluderer værdierne for letter-spacing alle længder. Standardnøglen er normal (dette er det samme som letter-spacing:0). Indsatte længdeværdier øger eller reducerer afstanden mellem bogstaverne med den angivne mængde:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

eksempel TIY: fastsæt tegnafstand (bogstavafstand)

tegnkonvertering

text-transform egenskabbehandling af tekstens store og små bogstaver. Denne egenskab har 4 værdier:

• none
• uppercase
• lowercase
• capitalize

Standardværdien none gør ingen ændringer ved teksten, og vil bruge den oprindelige store og små bogstaver fra dokumentet. Som navnet antyder, konverterer uppercase og lowercase teksten til hele store og hele små bogstaver. Til sidst gør capitalize kun den første bogstav i hvert ord stort.

Som en egenskab kan text-transform muligvis virke mindre vigtig, men hvis du pludselig beslutter dig for at gøre alle h1-elementer store, er denne egenskab meget nyttig. Der er ingen grund til at ændre indholdet af alle h1-elementer separat, du kan bruge text-transform til at udføre denne ændring for dig:

h1 {text-transform: uppercase}

Brug af text-transform har to fordele. Først behøver du kun at skrive en simpel regel for at udføre denne ændring, uden at ændre h1-elementet selv. Senere, hvis du beslutter dig for at skifte alle store og små bogstaver til deres oprindelige form, kan ændringen udføres mere nemt.

eksempel TIY: kontrolér tekstens store og små bogstaver

tekstdekorering

næste, diskuterer vi text-decoration egenskabDette er en meget interessant egenskab, der tilbyder mange meget interessante adfærdsmønstre.

text-decoration har 5 værdier:

• none
• underline
• overline
• line-through
• blink

Ikke overraskende tilføjer underline en understregning til elementet, ligesom U-elementet i HTML. Overline har den modsatte effekt og tegner en overstreget linje i tekstenens top. Værdien line-through tegner en贯穿线 i midten af teksten, hvilket er lig med S og strike-elementer i HTML. Blink får teksten til at blinke, hvilket ligner den kontroversielle blink-mærke, der blev understøttet af Netscape.

none-værdien deaktiverer alle dekorationer, der ellers ville blive anvendt på elementet. Normalt er teksten uden dekorationer standardudseendet, men det behøver ikke altid at være sådan. For eksempel har links som standard understregning. Hvis du vil fjerne understregningen fra et hyperlink, kan du bruge følgende CSS til dette formål:

a {text-decoration: none;}

Bemærk:Hvis du eksplicit fjerner understregningen fra linket med denne regel, er det eneste visuelle forskel mellem ankeret og normal tekst farven (mindst det er sådan ved standardindstillingerne, men det kan ikke garanteres, at farven bestemt adskiller sig).

Det er også muligt at kombinere flere dekorationer i én regel. Hvis du vil have alle hyperlinks med både understregning og overstreget, skal reglen være som følger:

a:link a:visited {text-decoration: underline overline;}

Men du skal være opmærksom på, at hvis to forskellige dekorationer matcher det samme element, vil vinderens værdi fuldstændigt erstatte den anden værdi. Overvej følgende regler:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

For de givne regler har alle h2-elementer med class stricken kun én贯穿线装饰，ingen understregning eller overstreget, fordi text-decoration værdien erstatter i stedet for at akkumuleres.

Behandling af mellemrum

white-space egenskabPåvirker hvordan brugeragenten håndterer mellemrum, linjeskift og tab-tegn i kildefilen.

Ved at bruge denne egenskab kan du påvirke måden, som browseren håndterer mellemrum mellem bogstaver og mellem linjer i teksten. I visse grad har den standard XHTML-behandling afhjulpet behandlingen af mellemrum: den kombinerer alle mellemrum til én mellemrum. Så givet følgende mærke, vises det kun én mellemrum mellem bogstaverne i webbrowseren, og linjeskift i elementet ignoreres:

<p>This     paragraph has    many
    spaces           in it.</p>

Dette kan udtrykkes eksplicit som følger:

p {white-space: normal;}

De nævnte regler fortæller browseren at håndtere som normalt: kassere unødvendige blankstregsekvenser. Hvis denne værdi gives, konverteres linjeskillekarakterer (returtegn) til mellemrum, og sekvenser af flere mellemrum i en linje konverteres til én mellemrum.

Eksempel TIY: white-space: normal

Værdien pre

Men hvis white-space sættes til pre, vil behandlingen af blankstregsekvenser i elementerne påvirket af denne egenskab være anderledes, og opføre sig som XHTML's pre-element; blankstregsekvenser ignoreres ikke.

Hvis white-space-eegenskabens værdi er pre, vil browseren bemærke ekstra mellemrum, endda returtegn. På dette område og kun på dette område kan ethvert element opføre sig som et pre-element.

Eksempel TIY: white-space: pre

Bemærk:Test viser, at IE 7 og ældre browsere ikke understøtter denne værdi, så brug venligst ikke-IE-browsere til at se eksemplet ovenfor.

Værdien nowrap

Modsat værdien er nowrap, som forhindrer teksten i elementet i at omstille sig, medmindre der bruges en br-element. Brug af nowrap i CSS er meget lig med at bruge <td nowrap> i HTML 4 til at sætte en tabelcelle til ikke at kunne omstille sig, men white-space-værdien kan anvendes på ethvert element.

Eksempel TIY: white-space: nowrap

Værdierne pre-wrap og pre-line

CSS2.1 introducerede værdierne pre-wrap og pre-line, som ikke var tilgængelige i tidligere versioner af CSS. Disse værdiers funktion er at give skabere bedre kontrol over behandling af blankstregsekvenser.

Hvis elementets white-space indstilling sættes til pre-wrap, vil teksten i elementet beholde blankstregsekvenser, men tekstlinjerne vil normalt omstille sig. Hvis indstillingen er denne værdi, vil linjeskillekarakterer i kildeteksten samt genererede linjeskillekarakterer også blive bevaret. pre-line er det modsatte af pre-wrap og vil som normal tekst sammenflette blankstregsekvenser, men beholde linjeskillekarakterer.

Eksempel TIY: white-space: pre-wrap

Eksempel TIY: white-space: pre-line

Bemærk:Vi har testet de to eksempler i IE7 og FireFox2.0-browsere, men resultatet var, at værdierne pre-wrap og pre-line ikke blev godt understøttet.

Opsummering

Følgende tabel opsummerer opførslen for white-space-egenskaben:

Tekstretning

Hvis du læser et engelsk bog, vil du læse det fra venstre til højre og fra top til bund, hvilket er engelskens strømføring. Men ikke alle sprog er sådanne. Vi ved, at gammel kinesisk læses fra højre til venstre, ligesom hebraisk og arabsk osv. CSS2 introducerede en egenskab til at beskrive dens retning.

direction-egenskabPåvirker skrivningsretningen for blokkontrolelementer, rækkeoprettelse i tabeller, den horisontale fylde af indholdet i elementets ramme og placeringen af den sidste linje i elementer med to-end justering.

Bemærk:For inline-elementer gælder det kun, når unicode-bidi-egenskabdirection-egenskaben anvendes kun, når den sættes til embed eller bidi-override.

direction-egenskaben har to værdier: ltr og rtl. I de fleste tilfælde er standardværdien ltr, hvilket viser tekst fra venstre til højre. Hvis du vil vise tekst fra højre til venstre, skal du bruge værdien rtl.

CSS tekstegenskaber

Værktøjskasse

CSS reference manual

CSS eksempler

CSS test

CSS undervisning

Sponsor links