Работа с текстом в css

Давайте поговорим о свойствах, которые отвечают за внешний вид текста: выравнивание текста, подчеркивание, отступы. Одно из самых использованных свойств текста, это его выравнивание. В css есть свойство, которое отвечает за выравнивание текста. Давайте в каскадной таблице стилей создадим совершенно новый стиль и назовем его text. За выравнивание текста отвечает свойство text-align, и оно может принимать четыре значения: слева (по умолчанию), справа, по центру, по обоим краям.

.text{
text-align:right;
}

Далее сохраняем таблицу стилей, открываем нашу страницу, и прописываем
какому-нибудь абзацу, выравнивание по правому краю:

<p class=”text”>работа с текстом в css</p>.

Вот таким образом работает это свойство. Если нам необходимо выровнять текст по центру, то мы прописываем соответственно center вместо right.
Следующее свойство, которое я хочу с Вами рассмотреть, это отступы, или другими словами, красная строка. Для этого мы должны прописать новое свойство, отвечающее за красную строку. Пишется оно следующим образом: text-indent:30px. 30px, соответственно, значение красной строки. Также значение красной строки мы можем задавать не только в пикселях, но и в сантиметрах, и в em. Если с сантиметрами все понятно, то давайте рассмотрим, что же такое em. Это ширина буквы m. Например: text-indent:4em;. Это значит, что отступ будет равен четырем буквам m (для данного шрифта).

css-code2

Следующее свойство, которое я хочу рассмотреть – это зачеркивание текста. Применяется зачеркивание текста, например, при указании цен, если идет акция, и необходимо указать другую цену. И для этого нам необходимо рассмотреть тег <span>. Для чего он нужен. Например, нам необходимо зачеркнуть одно из слов в определенном абзаце. Соответственно для этого нам нужен специальный тег, которому мы пропишем класс, зачеркивающий текст. Давайте создадим этот новый стиль, который будет зачеркивать текст. Прописываем в таблице стилей следующее:

.cherta{
text-decoration:line-through;
}

Далее в исходном коде находим нужное слово и пишем следующее:
<span class=”cherta“>Текст который необходимо зачеркнуть</span>. Сам по себе он ничего не меняет, и служит для придания стиля.
Давайте рассмотрим следующее свойство, которое позволяет делать над абзацами некие трансформации. Допустим, нам необходимо сделать так, чтобы каждое слово определенного абзаца начиналось с большой буквы. Например, создадим новый стиль:

.tr{
text-transform:capitalize;
}

Далее придадим данный класс необходимому абзацу:

<p class=”tr”>Каждое Слово С Большой Буквы</p>.

Если мы хотим, чтобы все буквы были заглавными, тогда нам необходимо прописать вместо capitalize, uppercase. Если мы хотим, все буквы сделать маленькими, прописываем lowercase.
На странице между словами одинаковый отступ. Допустим, мы хотим сделать этот отступ в каком-нибудь абзаце больше. Делается это с помощью свойства word-spacing:10px. В пикселях указывается, какой будет отступ.
Если нам нужно изменить расстояние между буквами: letter-spacing:4px;.
И напоследок, давайте рассмотрим, как менять расстояние между строками. Для этого необходимо использовать такое свойство: line-height:10px;.

Поможем создать сайт быстро и качественно.

%%

Here is my website; Giffgaff Cheapsim (121.123.97.106 : http://121.123.97.106/?a%5B%5D=giffgaff+best+uk+sim+only+deals%2C+%3Ca+href%3Dhttp%3A%2F%2Fwww.p1-uranai.com%2Frank.cgi%3Fmode%3Dlink%26id%3D538%26url%3Dhttps%3A%2F%2Fsimonly.deals%3Eclick+through+the+up+coming+post%3C%2Fa%3E%2C%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttps%3A%2F%2Fiplusone.hijack7.co.kr%3A443%2Fbbs%2Fboard.php%3Fbo_table%3Dhonor%26wr_id%3D2886+%2F%3E)

#2207 Robbie 03.02.2023 01:49

%%

Feel free to visit my web site; Truck Accident lawyer Waycross - sadovaya-mebel. com: https://sadovaya-mebel.com/sadovye-skamejki/sadovaya-skamejka-parkovaya-175-detail,

#2208 Shona 03.02.2023 02:02

%%

Stop by my webpage injury Attorneys: http://gliteam.org/2023/01/21/why-you-should-be-working-with-this-injury-legal/

#2209 Jillian 03.02.2023 02:32

%%

Also visit my web blog - window replacement enfield (Cindi: http://modoobiz.co.kr/bbs/board.php?bo_table=free&wr_id=368493)

#2210 Bebe 03.02.2023 02:33

%%

Feel free to surf to my site :: Semi Truck
Accident Settlement: https://classifieds.lt/index.php?page=user&action=pub_profile&id=5978548

#2211 Eliza 03.02.2023 02:34

%%

My page ... semi truck Accident settlement: http://matna.segen.co.kr/bbs/board.php?bo_table=data&wr_id=92887

#2212 Dorcas 03.02.2023 02:41

%%

Feel free to surf to my web-site :: Truck Accident Attorneys Coral Gables (Instrument-Mar ket.Com.Ua: http://instrument-market.com.ua/sadovaya-tekhnika/kombisistemy/fs-km-41372270003.html)

#2213 Franklin 03.02.2023 02:45

%%

Take a look at my website - Window Repair Romiley (Https://Maximum-Work.Com/: https://maximum-work.com/?p=66878)

#2214 Delphia 03.02.2023 02:50

%%

Also visit my web page - Truck Accident lawyers: https://www.mazafakas.com/user/profile/1932028

#2215 Denis 03.02.2023 02:59

%%

Have a look at my site :: plastic fence panels
- ttlink.com: http://ttlink.com/isislockye,

#2216 Ida 03.02.2023 03:13

Which is why it is quite intriguing how it’s already made a name for itself.

Review my web-site ... 해외토토사이트추천: https://wefunder.com/playground1

#2217 Charolette 03.02.2023 03:28

%%

Here is my site ... Locked Myself: https://gravesales.com/author/meganoreill/

#2218 Lloyd 03.02.2023 04:08

What's up to every , as I am really eager of reading this webpage's post to be
updated daily. It consists of pleasant material.

Feel free to visit my web page :: windows fitting near Me (hwagyesa.org: https://hwagyesa.org:443/bbs/board.php?bo_table=302020&wr_id=162214)

#2219 Brittney 03.02.2023 04:12

%%

Also visit my web site; virgin sim only deal Compare: http://mysnjj.ff88.ff114.cn/productshow.asp?id=607&mnid=44137&mc=MY-1120&url=http%3a%2f%2fcapemedical.com%2F%3FURL%3Dhttps%3A%2F%2Fsimonly.deals%2Fvirgin-media

#2220 Hubert 03.02.2023 04:20

%%

My page: Become an Avon Representative: http://sinui.kr/bbs/board.php?bo_table=notice&wr_id=57917

#2221 Michal 03.02.2023 04:23

Hi, its fastidious post regarding media print, we all understand
media is a enormous source of data.

my web blog :: Lawyer: https://ahreinc.com/phpinfo.php?a%5B%5D=trucking+accident+lawyer%2C+%3Ca+href%3Dhttps%3A%2F%2Fvimeo.com%2F783472256%3Evisit%3C%2Fa%3E%2C%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttps%3A%2F%2Fvimeo.com%2F782410094+%2F%3E

#2222 Myrtis 03.02.2023 04:34

I ѡanted to visit andd аllow youu to knoԝ how greɑt Ι treasured discovering this blog today.
I wіll consіder it a gooɗ honor to ԝork at mｙ place of work and be
aable tⲟ usе the tips dіscussed on your web siye
and aⅼѕo engage іn visitors' opinions ⅼike thiѕ.
Should a position regarding guest article writer ƅecome
avaiⅼaƄle at yoսr end, remember tߋ let me knoѡ.

Taкe a look ɑt my web-site :: wilderness survival (Rebecca: http://www2s.biglobe.ne.jp/~t-naoki/cgi-bin/fantasy.cgi/)

#2223 Freeman 03.02.2023 04:43

%%

Here is my page semi Truck Accident claim: http://gaon.riccogroup.kr/bbs/board.php?bo_table=board4_1&wr_id=40260

#2224 Florentina 03.02.2023 05:27

For instance, if the odds for a bbet are -150, a bettor would have to bet $150
to profit $one hundred.

Here is my web-site; 파워볼엔트리: https://social.msdn.microsoft.com/Profile/powerbalsite

#2225 Abel 03.02.2023 06:00

%%

Feel free to surf to my blog post - Sky Mobile Compare Sim Only Deals (Http://E.Xt.I.N.Cti.Rf.N

Elias.Ztonline.Ch/: http://e.xt.i.n.cti.rf.n

elias.ztonline.ch?a%5B%5D=sky+mobile+uk+deals+sim+only+%28%3Ca+href%3Dhttp%3A%2F%2Fkangwonhanwoo.co.kr%2Fbbs%2Fboard.php%3Fbo_table%3Dfree%26wr_id%3D172542%3Ekangwonhanwoo.co.kr%60s+blog%3C%2Fa%3E%29%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttps%3A%2F%2Fimage.google.dj%2Furl%3Fq%3Dhttps%3A%2F%2Fsimonly.deals%2Fsky-mobile+%2F%3E)

#2226 Silvia 03.02.2023 06:07

%%

My site: double glazed front doors milton keynes (cgiwiki.net: https://cgiwiki.net/index.php/10_Things_You_Learned_In_Kindergarden_That_Will_Help_You_With_Upvc_Doors_Milton_Keynes)

#2227 Hermine 03.02.2023 06:07

%%

My website; Joker123, maps.google.sc: https://maps.google.sc/url?q=https://situspokerandroid.com,

#2228 Trista 03.02.2023 06:18

%%

My webpage - Lottery singapore (http://old.nl-club.ru/Bitrix/redirect.Php?goto=https://serigalapoker.com: http://old.nl-club.ru/bitrix/redirect.php?goto=https://serigalapoker.com)

#2229 Colleen 03.02.2023 06:20

%%

my web blog: Best Toys For Women (Safehaven.Vert inext.Com: https://safehaven.vertinext.com/Five_People_You_Should_Know_In_The_Womens_Adult_Toys_Industry)

#2230 Desmond 03.02.2023 06:30

%%

Feel free to surf to my website: Semi Truck Accident
Lawsuit: https://www.punterforum.it/profile.php?id=934332

#2231 Lindsay 03.02.2023 06:31

Wow, that's what I was looking for, what a information! existing
here at this blog, thanks admin of this website.

Also visit my blog - สาระน่ารู้ทั่วไ ป: https://topglobalvacom.blogspot.com/2022/11/blog-post.html

#2232 Monty 03.02.2023 06:32

%%

My web site dangerous drugs lawyer: http://spps.dgweb.kr/bbs/board.php?bo_table=free&wr_id=56868

#2233 Wilhemina 03.02.2023 06:35

%%

Visit my site - broken window chadderton (Sally: http://wiki.kook-freiburg.de/index.php?title=Benutzer:AllisonCurrier)

«23456789101112

Обновить список комментариев