Kursplan

CSS-avancerade lektioner

• CSS extra bok
• CSS introduktion
• CSS grundläggande syntax
• CSS avancerad syntax
• CSS avledna väljare
• CSS id-väljare
• CSS klassväljare
• CSS skapande
• CSS bakgrund
• CSS text
• CSS typsnitt
• CSS lista

CSS-rutmodell

• Översikt över CSS rammodell
• CSS innervadd
• CSS ram
• CSS marginal
• CSS marginalkollisjon

CSS-positionering

• Översikt över CSS positionering
• CSS relativ positionering
• CSS absolut positionering
• CSS flytande

CSS-väljare

• CSS elementväljare
• CSS väljargrupper
• Detaljerad förklaring av CSS klassväljare
• Detaljerad förklaring av CSS id-väljare
• Detaljerad förklaring av CSS egenskapsväljare
• CSS efterkommande väljare
• CSS underordnad elementväljare
• CSS närliggande brorsväljare

Valfria kurser

Kursrekommendation:

• CodeW3C.coms gömna skattkammare

CSS-textegenskaper kan definiera textens utseende.

Genom textegenskaper kan du ändra textens färg, teckenavstånd, justera texten, dekorera texten, indentera texten och så vidare.

Indentera text

Att indentera det första raden i en paragraf på en webbsida, detta är en av de mest använda textformateringseffekterna.

CSS erbjuder text-indent-attributetDenna egenskap gör det enkelt att genomföra textindentering.

Genom att använda text-indent-attributet kan det första raden för alla element indenteras med en given längd, även om längden kan vara negativ.

Den mest vanliga användningen av detta attribut är att indentera första raden av en paragraf, följande regel kommer att indentera första raden av alla paragrafer med 5 em:

p {text-indent: 5em;}

Observera:Generellt kan text-indent tillämpas på alla block-element, men kan inte tillämpas på inline-element, ersättningskomponenter som bilder och så vidare. Men om en block-element (t.ex. en paragraf) har en bild på första raden, kommer bilden att flytta med den övriga texten på raden.

Tips:Om du vill 'indentera' det första raden av en inline-element, kan du skapa detta effekt genom att använda vänstermarginal eller vänsterpadding.

Använd negativa värden

text-indent kan också sättas till ett negativt värde. Genom att använda detta teknologi kan man uppnå många intressanta effekter, till exempel 'hängande indentering', där det första raden hänger kvar på vänster sida av elementet:

p {text-indent: -5em;}

Men var försiktig när du sätter ett negativt värde till text-indent, om du sätter ett negativt värde till en avsnitt kan vissa texter på första raden komma att överstiga webbläsarens vänstra kant. För att undvika denna visningsproblem rekommenderas det att sätta en margin eller något innermarg till negativ indentering:

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

Använd procentvärden

text-indent kan använda alla längdenheter, inklusive procentvärden.

Procentandel bör relateras till föräldrelementets bredd. På annat sätt, om indenteringsvärdet sätts till 20%, kommer det första raden i påverkat element att indenteras med 20% av föräldrelementets bredd.

I följande exempel är indenteringsvärdet 20% av föräldrelementets bredd, dvs. 100 pixlar:

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

ärva

text-indent-attributet kan ärvas, överväg följande markering:

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>

Ovanstående markerade avsnitt kommer också att indenteras med 50 pixlar, eftersom denna avsnitt ärver indenteringsvärdet från div-elementet med id 'inner'.

horisontell justering

text-align är en grundläggande egenskap som påverkartextradJusteringar mellan dem. De första tre värdena är ganska direkta, men de fjärde och femte är något mer komplexa.

Värdena left, right och center leder till att texten i elementet justeras vänster, höger och centrerad respektive.

Västerländska språk läses från vänster till höger, och text-aligns standardvärde är left. Texten justeras mot vänstra gränsen och har en tandad högra kant (kallad "text från vänster till höger"). För språk som hebreiska och arabiska, är text-aligns standardvärde right, eftersom dessa språk läses från höger till vänster. Som förväntat kommer center att centrera varje textrad i elementet.

Tips:För att centrera en blockelement eller en tabell, måste du sätta lämpliga vänstra och högra marginaler på dessa element.

text-align:center och <CENTER>

Du kan tycka att text-align:center fungerar på samma sätt som <CENTER>-elementet, men det är faktiskt mycket olika.

<CENTER> påverkar inte bara texten utan också hela elementet. text-align kontrollerar inte elementets centrering utan påverkar bara innehållet. Elementet flyttas inte från en sida till en annan, utan det är bara texten som påverkas.

justify

Den sista horisontella justeringsattributen är justify.

I justerad text placeras textens vänstra och högra ändar på föräldrelementets inre gränser. Därefter justeras avståndet mellan ord och bokstäver så att varje rad har exakt samma längd. Du kanske har lagt märke till att justerad text är mycket vanlig inom tryckområdet.

Det är viktigt att notera att det är användaragenten (inte CSS) som bestämmer hur justerad text utvidgas för att fylla utrymmet mellan föräldrelementets vänstra och högra gränser. För mer detaljer, se CSS text-align-attributets referenssida.

bokstavspark

word-spacing-attributetDet är möjligt att ändra den standardmässiga avståndet mellan bokstäver (ord). Standardvärdet normal är detsamma som att sätta värdet till 0.

word-spacing-attributet accepterar ett positivt eller negativt längdmått. Om ett positivt längdmått tillhandahålls kommer avståndet mellan orden att öka. Att sätta en negativ värde på word-spacing kommer att dra närmare dem:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Detta är en stycke. Mellansystemen mellan orden kommer att öka.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

Exempel TIY: Öka eller minska ordmellanrum (ordmellanrum)

Kommentar:För att fördjupa din förståelse för CSS-definitionen av "ord" (word), besök CSS word-spacing egenskapsreferenssida.

Bokstavsmellanrum

letter-spacing egenskapSkillnaden från word-spacing är att letter-spacing ändrar mellanrummet mellan tecken eller bokstäver.

Liksom word-spacing egenskapen inkluderar letter-spacing egenskapens giltiga värden alla längder. Standardnyckelordet är normal (detta är samma som letter-spacing:0). Angivna längdvärden ökar eller minskar mellanrummet mellan bokstäverna med det specificerade mängden:

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

Exempel TIY: Ange teckenmellanrum (bokstavsmellanrum)

Teckenkonvertering

text-transform egenskapHantera textens storlek. Denna egenskap har fyra värden:

• none
• uppercase
• lowercase
• capitalize

Standardvärdet none gör ingen ändring på texten, och kommer att använda den ursprungliga versalkombinationen från dokumentet. Som namnet antyder, uppercase och lowercase konverterar texten till helt versaler och helt gemener. Till sist, capitalize gör bara första bokstaven i varje ord till versal.

Som en egenskap kanske text-transform inte är så viktig, men om du plötsligt beslutar att göra alla h1-element till versaler, är denna egenskap mycket användbar. Du behöver inte enskilt ändra innehållet i alla h1-element, utan bara använda text-transform för att göra denna ändring:

h1 {text-transform: uppercase}

Att använda text-transform har två fördelar. För det första behöver du bara skriva en enkel regel för att göra denna ändring utan att behöva ändra h1-elementet själv. För det andra, om du senare beslutar att byta alla versaler till ursprungliga versaler, kan du enkelt genomföra ändringen.

Exempel TIY: Kontrollera textens bokstävers storlek

text-decoration

Nästa, diskuterar vi text-decoration egenskapDetta är en mycket intressant egenskap som erbjuder många mycket intressanta beteenden.

text-decoration har 5 värden:

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

Förväntatvis lägger underline understrykning till elementet, precis som U-elementet i HTML. Overline fungerar tvärtom och ritar en överstrykning på textens topp. Värdet line-through ritar en genomgående linje i texten, vilket är likvärdigt med S och strike-element i HTML. Blink får texten att blinka, liknande den kontroversiella blink-markören som Netscape stödde.

none-värdet stänger av alla dekorationer som annars skulle appliceras på ett element. Vanligtvis är text utan dekorationer den standardstil som används, men det är inte alltid så. Till exempel har länkar som standard understrykning. Om du vill ta bort understrykningen från en länk kan du använda följande CSS för att göra detta:

a {text-decoration: none;}

Observera:Om du explicit tar bort understrykningen för en länk med en sådan regel, kommer det enda visuella skillnaden mellan ankor och vanlig text att vara färgen (minst detta är fallet som standard, men man kan inte helt säga att färgen definitivt skiljer sig).

Det är möjligt att kombinera flera dekorationer i en regel. Om du vill att alla länkar både har understrykning och överstrykning, kan regeln se ut så här:

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

Men notera att om två olika dekorationer matchar samma element, kommer segrande regeln att helt ersätta den andra värdet. Överväg följande regler:

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

För givna regler har alla h2-element med klassen stricken endast en genomgående dekoration utan understrykning och överstrykning, eftersom text-decoration värden ersätter istället för att samla ihop sig.

Hantera blanksteg

white-space egenskapenDet påverkar användaragentens hantering av blanksteg, radbrytningar och tab-tecken i käll dokumentet.

Genom att använda detta egenskap kan du påverka hur webbläsaren hanterar blanksteg mellan tecken och mellan textrader. I viss mån har den standardmässiga XHTML-behandlingen redan hanterat blanksteg: den kombinerar alla blanksteg till en enda blanksteg. Så om vi ser på följande märkning i en webbläsare, kommer varje tecken att visa endast ett blanksteg mellan sig, och radbrytningar inom elementen kommer att ignoreras:

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

Denna standardbeteende kan uttryckligen sättas med följande deklaration:

p {white-space: normal;}

Ovanstående regler talar om att webbläsaren ska behandla som vanligt: kasta bort onödiga blanksteg. Om detta värde ges, kommer radbrytningssymboler (returtecken) att konverteras till mellanslag, och sekvenser av flera mellanslag i en rad kommer att konverteras till ett enda mellanslag.

Exempel TIY: white-space: normal

Värdena pre

Men om white-space sätts till pre, behandlas blanksteg på ett annat sätt i element som påverkas av detta attribut, och beter sig som XHTML:s pre-element; blanksteg ignoreras inte.

Om white-space-attributets värde är pre, kommer webbläsaren att notera extra blanksteg, inklusive returtecken. På detta sätt och endast på detta sätt kan vilket element som helst liknas vid ett pre-element.

Exempel TIY: white-space: pre

Observera:Testat visar att IE 7 och äldre webbläsare inte stöder detta värde, så använd vänligen en icke-IE-webbläsare för att se ovanstående exempel.

Värdena nowrap

Motpolen är värdena nowrap, som förhindrar att texten i elementet bryts, om inte en br-element används. Användning av nowrap i CSS liknar mycket användning av <td nowrap> i HTML 4 för att sätta en tabellcell så att den inte får brytas, men white-space-värdet kan tillämpas på vilket element som helst.

Exempel TIY: white-space: nowrap

Värdena pre-wrap och pre-line

CSS2.1 introducerade värdena pre-wrap och pre-line, som inte fanns i tidigare versioner av CSS. Dessa värden tillåter skapare att bättre kontrollera behandlingen av blanksteg.

Om elementets white-space-inställning är satt till pre-wrap, kommer texten i elementet att behålla blankstegsserier, men textraderna kommer att brytas normalt. Om inställningen är denna, kommer både radbrytningssymboler i källtexten och de som genereras att behållas. pre-line är motsatsen till pre-wrap och kommer att slå samman blankstegsserier som i normal text, men behålla radbrytningar.

Exempel TIY: white-space: pre-wrap

Exempel TIY: white-space: pre-line

Observera:Vi testade de två exemplen i IE7 och FireFox2.0-webbläsare, men resultatet var att värdena pre-wrap och pre-line inte stöddes väl.

Sammanfattning

Följande tabell summerar beteendet för white-space-attributet:

Textriktning

Om du läser en engelsk bok, kommer du att läsa från vänster till höger och från övre till lägre, detta är engelsk strömriktning. Men inte alla språk är så. Vi vet att gammal kinesisk läsdes från höger till vänster, naturligtvis inklusive hebreiska och arabiska och så vidare. CSS2 introducerade ett attribut för att beskriva dess riktning.

direction-attributPåverkar skrivriktningen för blockinnehåll, layouten för kolumner i tabeller, horisontal fyllning av elementramen och placeringen av den sista raden i tvåsidesjusterade element.

Kommentar:För inline-element gäller detta endast när unicode-bidi-attributdirection-attribut tillämpas endast när det är satt till embed eller bidi-override.

direction-attribut har två värden: ltr och rtl. I de flesta fall är standardvärdet ltr, som visar text från vänster till höger. Om du vill visa text från höger till vänster, använd värdet rtl.

CSS textegenskaper

Verktygslåda

CSS-referenshandbok

CSS-exempel

CSS-quiz

CSS-tutorial

Sponsrade länkar