Cursusrooster

CSS geavanceerde handleiding

• CSS课外书
• CSS Introduktion
• CSS Fundamentele Syntax
• CSS Geavanceerde Syntax
• CSS Afgeleide Selectors
• CSS id Selectors
• CSS Class Selectors
• CSS Aanmaken
• CSS Achtergrond
• CSS Tekst
• CSS Lettertypen
• CSS Lijsten

CSS box model

• CSS Box Model Overzicht
• CSS Binnenmarge
• CSS Rand
• CSS Buitmarge
• CSS Buitmarge Samenvoeging

CSS positionering

• CSS Positie Overzicht
• CSS Relatieve Positie
• CSS Absoluut Positie
• CSS Drijven

CSS selectoren

• CSS Element Selectors
• CSS Groep Selectors
• CSS Class Selectors Uitleg
• CSS ID Selectors Uitleg
• CSS Attribuut Selectors Uitleg
• CSS Nageslacht Selectors
• CSS Zoon Element Selectors
• CSS Adjacent Sibling Selectors

Verplichte cursus

Aanbevolen cursus:

• CodeW3C.com Huiswerk

De tekst-eigenschappen van CSS definiëren het uiterlijk van de tekst.

Met de tekst-eigenschappen kunt u de kleur van de tekst, de letterafstand, de uitlijning van de tekst, de decoratie van de tekst, het inspringen van de tekst enz. wijzigen.

Tekst inspringen

Het inspringen van de eerste regel van een paragraaf op een webpagina, dit is een van de meest gebruikte tekstformateringseffecten.

CSS biedt Eigenschap text-indentDeze eigenschap maakt het gemakkelijk om tekst in te springen.

Door het gebruik van de property text-indent kan de eerste regel van alle elementen ingesprongen worden met een gegeven lengte, zelfs als deze lengte negatief is.

De meest voorkomende toepassing van deze eigenschap is het inspringen van de eerste regel van een paragraaf, de volgende regel zorgt ervoor dat alle paragrafen hun eerste regel inspringen met 5 em:

p {tekst-insprong: 5em;}

Let op:Over het algemeen kan tekst-insprong worden toegepast op alle blokkelementen, maar deze eigenschap kan niet worden toegepast op inline-elementen, en ook niet op vervangende elementen zoals afbeeldingen. Als een blokkelement (zoals een paragraaf) een afbeelding heeft in de eerste regel, zal deze afbeelding samen met de overige tekst van die regel bewegen.

Tip:Als je de eerste regel van een inlines element wilt 'inspringen', kun je een linker of rechter insprong of marges gebruiken om dit effect te creëren.

Gebruik negatieve waarden

Tekst-insprong kan ook negatieve waarden hebben. Met deze techniek kunnen veel interessante effecten worden bereikt, zoals 'hangende insprong', waarbij de eerste regel hangt aan de linkerkant van het resterende deel van het element:

p {tekst-insprong: -5em;}

Maar wees voorzichtig bij het instellen van negatieve waarden voor tekst-insprong, want als een paragraaf een negatieve waarde heeft, kunnen sommige teksten van de eerste regel mogelijk buiten de linkerkant van het browservenster vallen. Om dit soort weergaveproblemen te voorkomen, wordt aanbevolen om een marges of een beetje insprong in te stellen voor negatieve insprong:

p {tekst-insprong: -5em; insprong-links: 5em;}

Gebruik procentwaarden

Tekst-insprong kan alle lengte-eenheden gebruiken, inclusief procentwaarden.

Procentwaarden moeten relatief zijn ten opzichte van de breedte van het ouder-element van de insprong. In andere woorden, als de insprongwaarde wordt ingesteld op 20%, zal de eerste regel van het beïnvloedde element 20% van de breedte van het ouder-element inspringen.

In het volgende voorbeeld is de insprongwaarde 20% van de breedte van het ouder-element, dat is 100 pixels:

div {breedte: 500px;}
p {tekst-insprong: 20%;}
<div>
<p>dit is een paragraaf</p>
</div>

Erfen

De eigenschap tekst-insprong kan worden geërfd, overweeg het volgende merk:

div#outer {breedte: 500px;}
div#inner {tekst-insprong: 10%;}
p {breedte: 200px;}
<div id="outer">
<div id="inner">enkele tekst. enkele tekst. enkele tekst.</div>
<p>dit is een paragraaf.</p>
</div>
</div>

De secties in deze markering worden ook ingesprongen met 50 pixels, omdat deze sectie de insprongwaarde van de div-element met id 'inner' erfgenomen heeft.

horizontale uitlijning beïnvloedt

text-align is een basis-eigenschap die deTekstregelsDe uitlijning tussen elkaar. De eerste 3 waarden zijn redelijk direct, maar de 4e en 5e zijn iets complexer.

De waarden left, right en center zetten de tekst in een element links uitgelijnd, rechts uitgelijnd en gecentreerd.

Westerse talen worden van links naar rechts gelezen, de standaardwaarde van text-align is left. Tekst wordt links uitgelijnd en de rechterkant is scherp (genaamd 'van links naar rechts' tekst). Voor talen zoals Hebreeuws en Arabisch, is text-align standaard recht, omdat deze talen van rechts naar links worden gelezen. Het is niet verwonderlijk dat center elke tekstregel in het element centreren.

Tip:Het centreren van blokelelementen of tabel-elementen kan worden bereikt door geschikte marges aan de linkerkant en rechterkant van deze elementen in te stellen.

text-align:center en <CENTER>

Je zou kunnen denken dat text-align:center hetzelfde effect heeft als het <CENTER>-element, maar in werkelijkheid zijn ze zeer verschillend.

<CENTER> beïnvloedt niet alleen de tekst, maar centeren ook de hele element. text-align beheert niet de uitlijning van het element, maar beïnvloedt alleen de inhoud ervan. Het element zelf verplaatst zich niet van een sectie naar de andere, alleen de tekst wordt beïnvloed.

justify

De laatste horizontale uitlijningseigenschap is justify.

In het tekstuitlijnen aan beide kanten worden de links- en rechtse uiteinden van de tekstregels geplaatst aan de binnende rand van het ouder element. Vervolgens wordt de tussenruimte tussen woorden en letters aangepast zodat de lengte van elke regel gelijk is. Je hebt mogelijk al opgemerkt dat tekstuitlijning aan beide kanten in de druksector zeer gebruikelijk is.

Opmerking: De manier waarop de gebruikersagent (niet CSS) de uitrekking van het tekstuitlijnen aan beide kanten bepaalt om de ruimte tussen de rechter- en linker rand van het ouder element te vullen, moet worden bepaald. Voor meer details, raadpleeg Referentiepagina voor CSS text-align eigenschap.

Letterafstand

De property word-spacingJe kunt de standaard tussenruimte tussen letters (woorden) wijzigen. De standaardwaarde normal is hetzelfde als het instellen van 0.

De property word-spacing accepteert een positieve of negatieve lengtewaarde. Als een positieve lengtewaarde wordt verstrekt, wordt de tussenruimte tussen letters vergroot. Word-spacing instellen met een negatieve waarde brengt het dichter bij elkaar:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Dit is een paragraaf. De tussenruimte tussen woorden zal worden vergroot.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

Voorbeeld TIY: Verhoog of verklein de afstand tussen woorden (woordafstand)

Opmerking:Voor een diepere begrip van de definitie van CSS voor 'woord' (word), bezoek dan CSS word-spacing eigenschap referentiepagina.

Letterafstand

letter-spacing eigenschapHet verschil met word-spacing ligt in het feit dat letter-spacing de afstand tussen karakters of letters wijzigt.

Net als bij de eigenschap word-spacing omvatten de waarden van letter-spacing alle lengtematen. De standaard sleutel is normal (wat gelijk is aan letter-spacing:0). De ingevoerde lengtemaat maakt de afstand tussen de letters groter of kleiner met de opgegeven hoeveelheid:

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

Voorbeeld TIY: Stel de afstand tussen karakters in (letterafstand) in

Karakterconversie

text-transform eigenschapHet behandelen van de hoofdletters van tekst. Deze eigenschap heeft 4 waarden:

• none
• uppercase
• lowercase
• capitalize

De standaardwaarde none maakt geen enkele aanpassing aan de tekst, en gebruikt de oorspronkelijke hoofdletters uit het bronbestand. Zoals de naam al aangeeft, veranderen uppercase en lowercase de tekst in volledig hoofdletters en volledig kleine letters. Ten slotte maakt capitalize alleen de eerste letter van elke woord hoofdletter.

Als eigenschap kan text-transform misschien niet zo belangrijk lijken, maar als u plotseling besluit alle h1-elementen in hoofdletters te veranderen, is deze eigenschap zeer nuttig. U hoeft niet individueel de inhoud van alle h1-elementen te wijzigen, maar gebruik text-transform om deze aanpassing te voltooien:

h1 {text-transform: uppercase}

Het gebruik van text-transform biedt twee voordelen. Ten eerste hoeft u slechts een eenvoudige regel te schrijven om deze aanpassing te voltooien, zonder de inhoud van het h1-element zelf te wijzigen. Ten tweede is het gemakkelijker om deze aanpassing te voltooien als u besluit alle hoofdletters later opnieuw in de oorspronkelijke hoofdletters te zetten.

Voorbeeld TIY: Beheer de hoofdletters van tekst

tekstdecoratie

Daarna bespreken we text-decoration eigenschapDit is een interessante eigenschap die veel interessante gedragingen biedt.

text-decoration heeft 5 waarden:

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

Onderstreping voegt een onderstreping toe aan het element, net als de U-element in HTML. Overstrepen doet het tegenovergestelde, het tekent een overstreep bovenaan de tekst. De waarde line-through tekent een doorlopende lijn door de tekst, wat equivalent is aan de S en strike-elementen in HTML. Blink maakt de tekst knipperen, net als de bekritiseerde blink-marker die Netscape ondersteunde.

De waarde none sluit alle decoraties af die oorspronkelijk op een element zijn toegepast. Normaal gesproken is ongedecoreerd tekst de standaardweergave, hoewel dit niet altijd het geval is. Bijvoorbeeld, links hebben standaard een onderstreping. Als je de onderstreping van de link wilt verwijderen, kun je dit met de volgende CSS doen:

a {text-decoration: none;}

Let op:Als je de onderstreping van de link expliciet met deze regel verwijdert, is het enige visuele verschil tussen de anker en de normale tekst de kleur (tenminste is dit zo, hoewel je niet kunt garanderen dat de kleur zeker verschilt).

Het is ook mogelijk om verschillende decoraties te combineren in een regel. Als je alle hyperlinks zowel onderstreept als overstreepd wilt hebben, dan is de regel als volgt:

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

Maar let op, als twee verschillende decoraties dezelfde elementen matchen, zal de waarde van de overwinnaar volledig de andere waarde vervangen. Overweeg de volgende regel:

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

Voor de gegeven regel, hebben alle h2-elementen met de class stricken slechts één doorlopende decoratie, zonder onderstreping en overstreping, omdat De waarde van text-decoration vervangt in plaats van op te stapelen.

Behandeling van witruimte

white-space-eigenschapDit beïnvloedt hoe de gebruikersagent witruimte, regeleinden en tab-teken in de bron van het document behandelt.

Door het gebruik van deze eigenschap kan de manier waarop de browser witruimte tussen tekens en tussen tekstregels behandelt, worden beïnvloed. In zekere mate is de standaard XHTML-verwerking van witruimte al gedaan: het combineert alle witruimte tot één spatie. Dus bij de volgende markering, wanneer deze in een webbrowser wordt weergegeven, worden er tussen de tekens slechts één spatie weergegeven en worden de regeleinden in het element genegeerd:

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

Dit gedrag kan expliciet ingesteld worden met de volgende declaratie:

p {white-space: normal;}

De bovenstaande regels vertellen de browser om op de gebruikelijke manier om te gaan met witruimtes: overbodige witruimtes worden weggegooid. Als deze waarde wordt gegeven, worden de newline-caractères (enter) omgezet in spaties, en een reeks meerdere spaties in een regel wordt omgezet in een enkele space.

Voorbeeld TIY: white-space: normal

De waarde pre

Maar als white-space op pre is ingesteld, wordt de verwerking van witruimtes in het element dat wordt beïnvloed door deze eigenschap verschillend, alsof het een pre-element in XHTML is; witruimtes worden niet genegeerd.

Als de waarde van de white-space-eigenschap pre is, zal de browser extra spaties en zelfs enter-regels opmerken. Op dit gebied en alleen op dit gebied kan elk element overeenkomen met een pre-element.

Voorbeeld TIY: white-space: pre

Let op:Volgens testen wordt deze waarde niet ondersteund door IE 7 en oudere browsers, dus gebruik een niet-IE-browser om het bovenstaande voorbeeld te bekijken.

De waarde nowrap

De tegenovergestelde waarde is nowrap, die het doorbreek van de tekst in het element voorkomt, tenzij een br-element wordt gebruikt. Het gebruik van nowrap in CSS is zeer vergelijkbaar met het gebruik van <td nowrap> in HTML 4 om een tabelcel niet te laten doorbreek, maar de white-space-waarde kan toegepast worden op elk element.

Voorbeeld TIY: white-space: nowrap

De waarden pre-wrap en pre-line

CSS2.1 introduceerde de waarden pre-wrap en pre-line, die in eerdere versies van CSS niet bestonden. Deze waarden dienen om makers beter te laten controleren over de verwerking van witruimtes.

Als de waarde van white-space op pre-wrap is ingesteld, zullen de witruimtes in de tekst van het element worden behouden, maar zullen de tekstregels normaal worden doorgebroken. Als deze waarde is ingesteld, worden de regelonderscheiders in de bron tekst en de gegenereerde regelonderscheiders ook behouden. pre-line is het tegenovergestelde van pre-wrap en zal witruimtes zoals normaal tekst samenvoegen, maar regelonderscheiders behouden.

Voorbeeld TIY: white-space: pre-wrap

Voorbeeld TIY: white-space: pre-line

Let op:We hebben de twee voorbeelden getest in IE7 en Firefox 2.0, maar de resultaten waren dat de waarden pre-wrap en pre-line niet goed werden ondersteund.

Samenvatting

De tabel hieronder samenvat het gedrag van de white-space-eigenschap:

Tekstrichting

Als je een Engelse boek leest, lees je van links naar rechts, van boven naar beneden, dit is de stroomrichting van het Engels. Maar niet alle talen zijn zo. We weten dat het Oud-Chinees van rechts naar links wordt gelezen, evenals Hebreeuws en Arabisch enzovoort. CSS2 introduceerde een eigenschap om de richting te beschrijven.

direction-eigenschapBeïnvloedt de schrijfrichting van tekst in blokelementen, de layout van kolommen in tabellen, de horizontale vulrichting van de inhoud in de elementenbalk, en de positie van de laatste regel in elementen met beide kanten uitgelijnd.

Opmerking:Voor inline-elementen geldt alleen als unicode-bidi-eigenschapDe direction-eigenschap wordt alleen toegepast wanneer ingesteld op embed of bidi-override.

De direction-eigenschap heeft twee waarden: ltr en rtl. In de meeste gevallen is de standaardwaarde ltr, wat tekst van links naar rechts weergeeft. Als je tekst van rechts naar links wilt weergeven, moet je de waarde rtl gebruiken.

CSS tekst-eigenschappen

Toolbox

CSS Referentie Handboek

CSS Voorbeelden

CSS Quiz

CSS Tutorial

Sponsor Links