Ópoê 5:
Teêcò

Oãëaâëeíèe (â íoâoì oêíe)
Bíèç

Ôopìaòèpoâaíèe è ycòaíoâêa còèëÿ òeêcòa - êëþ÷eâaÿ ïpoáëeìa äëÿ ëþáoão web- äèçaéíepa. B ýòoì ypoêe âû yâèäèòe âïe÷aòëÿþùèe âoçìoæíocòè CSS ïpè oòoápaæeíèè òeêcòa. Áyäyò paccìoòpeíû cëeäyþùèe câoécòâa:

Oòcòyïû [text-indent]

Câoécòâo text-indent ïoçâoëÿeò âûäeëèòü ïapaãpaô c ïoìoùüþ ycòaíoâêè oòcòyïa äëÿ eão ïepâoé còpoêè. B ïpèìepe 30px ïpèìeíÿeòcÿ êo âceì ïapaãpaôaì <p>:

p {text-indent: 30px;}

Bûpaâíèâaíèe òeêcòa [text-align]

CSS-câoécòâo text-align cooòâeòcòâyeò aòpèáyòy, ècïoëüçyeìoìy â còapûx âepcèÿx HTML. Teêcò ìoæeò áûòü âûpoâíeí:
left, right, center, justify.

B ïpèìepe òeêcò çaãoëoâo÷íûx ÿ÷eeê òaáëèöû <th> âûpaâíèâaeòcÿ âïpaâo, a â ÿ÷eéêax äaííûx <td>- ïo öeíòpy. Kpoìe òoão, íopìaëüíûe ïapaãpaôû - justify:

th {text-align: right;}
td {text-align: center;}
p {text-align: justify;}

Äeêopaòèâíûé âapèaíò [text-decoration]

Câoécòâo text-decoration ïoçâoëÿeò äoáaâëÿòü paçëè÷íûe "äeêopaòèâíûe ýôôeêòû". Haïpèìep, ìoæío ïoä÷epêíyòü òeêcò, ïpoâecòè ëèíèþ ïo èëè íaä òeêcòoì è ò. ä. B ïpèìepe
<h1> ïoä÷epêíyòû,
<h2>- èìeþò ÷epòy íaä òeêcòoì,
<h3>- ïepe÷epêíyòû.

h1 {text-decoration:underline;}
h2 {text-decoration:overline;}
h3 {text-decoration:line-through;}

Èíòepâaë ìeæäy áyêâaìè [letter-spacing]

Èíòepâaë ìeæäy áyêâaìè òeêcòa ìoæío cïeöèôèöèpoâaòü câoécòâoì letter-spacing. Çía÷eíèe - íyæíaÿ âeëè÷èía. Haïpèìep, ecëè âaì íeoáxoäèìo 3px ìeæäy áyêâaìè â ïapaãpaôax <p> è 6px - â çaãoëoâêax <h1>, òo ècïoëüçyeòcÿ òaêoé êoä:

h1 {letter-spacing: 6px;}
p {letter-spacing: 3px;}

Tpaícôopìaöèÿ òeêcòa [text-transform]

Câoécòâo text-transform yïpaâëÿeò peãècòpoì cèìâoëoâ. Moæío âûápaòü capitalize , uppercase èëè lowercase , â çaâècèìocòè oò òoão, êaê âûãëÿäèò òeêcò â opèãèíaëüíoì HTML-êoäe.

Haïpèìep, cëoâo "headline" ìoæío ïoêaçaòü "HEADLINE" èëè "Headline". Èìeþòcÿ ÷eòûpe âoçìoæíûx çía÷eíèÿ text- transform:

Äëÿ ïpèìepa ìû ècïoëüçyeì cïècoê èìeí. Bce èìeía âûäeëeíû c ïoìoùüþ <li> (list- item). Äaâaéòe êaïèòaëèçèpyeì âce èìeía è oòoápaçèì âce çaãoëoâêè âepxíèì peãècòpoì.
Bèäèòe, HTML-êoä â ýòoì ïpèìepe â äeécòâèòeëüíocòè çaïècaí â íèæíeì peãècòpe.

h1 {text-transform: uppercase;}
li {text-transform: capitalize;}

Peçþìe

B òe÷eíèe òpex ïocëeäíèx ypoêoâ âû èçy÷èëè íecêoëüêo CSS-câoécòâ, ío èx - ìíoæecòâo. B cëeäyþùeì ypoêe ìû paccìoòpèì paáoòy co ccûëêaìè.

Cëeäyþùèé ypoê: Ccûëêè

Haçaä

Bâepx