Давайте поговорим о свойствах, которые отвечают за внешний вид текста: выравнивание текста, подчеркивание, отступы. Одно из самых использованных свойств текста, это его выравнивание. В 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 (для данного шрифта).
Следующее свойство, которое я хочу рассмотреть – это зачеркивание текста. Применяется зачеркивание текста, например, при указании цен, если идет акция, и необходимо указать другую цену. И для этого нам необходимо рассмотреть тег <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;.
Поможем создать сайт быстро и качественно.
Бесплатная консультация по телефону:
Комментарии
Have a look at my weeb site :: https://baccaratup.com/: https://baccaratup.com/%EC%8B%A0%EC%84%A0%ED%95%9C-%EA%B2%BD%ED%97%98%EA%B3%BC-%ED%8E%B8%EC%95%88%ED%95%A8%EC%9D%84-%EC%95%88%EA%B2%A8%EC%A3%BC%EB%8A%94-%EC%8A%A4%EC%9B%A8%EB%94%94%EC%8B%9C-%EB%A7%88%EC%82%AC%EC%A7%80/
be updated with the hottest news update posted here.
Here is my blog post :: jus murah: https://juisable.id/
post is simply great and i can assume you are an expert on this subject.
Fine with your permission allow me to grab your RSS feed to
keep up to date with forthcoming post. Thanks
a million and please carry on the enjoyable work.
Feel free to visit my webpage :: Roman: http://Fullgluest.ickyriddledyn.amictrAnaturestears.com/Test.php?a%5B%5D=%3Ca+href%3Dhttps%3A%2F%2Fcomputing.ece.vt.edu%2Fmediawiki%2Fapi.php%3Faction%3Dhttps%3A%2F%2Ftheresearchpeptides.weebly.com%2Fresearchpeptides%2Fmicroneedle-mediated-delivery-of-cosmeceutically-relevant-nucleoside%3EComputing+Ece+Vt%27s+website%3C%2Fa%3E%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttps%3A%2F%2Fwww.reverbnation.com%2Fc%2Ffan_reach%2Fpt%3Feid%3DA158359_6832483_22798105%26url%3Dhttps%3A%2F%2Ftheresearchpeptides.blogspot.com%2F2020%2F07%2Fsermorelin-5mg.html+%2F%3E
slots.
Take a look at my webpage 카지노사이트순위: http://Qb-365.com/%EC%97%90%EB%B3%BC%EB%A3%A8%EC%85%98%EC%B9%B4%EC%A7%80%EB%85%B8-vip-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-%EB%8F%85%EC%A0%90%EC%A0%81%EC%9D%B8-%ED%98%9C%ED%83%9D%EA%B3%BC-%ED%8A%B9%EC%A0%84/
great information you have here on this post. I'll be returning to your blog for more soon.
Feel free to visit my page ... 惠灵顿牛排: https://kcapa.net/bbs/board.php?bo_table=free&wr_id=1417450
least.
Review my web-site NBA betting: http://www.nashi-progulki.ru/bitrix/rk.php?goto=https://towngamble.com/%ED%86%A0%ED%86%A0%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%B0%B0%ED%8C%85%ED%95%98%EC%84%B8%EC%9A%94/
other states, with two notable exceptions, each concerning college
sports.
my web blog :: 토토사이트 순위: https://Blog.Develoeper.com/elf-2003/
best jili slot online іn the Philippines
free Spins 3000+ Free Demo Slot
openning Bonus 200% piso
searching hawkgamingvip οn Google or Bing tо ցet free coins
Hawk gaming: https://hawkgamingvip.com/
such as a shoe of cards for blackjack or a roulette
wheel.
My web site ... 호스트빠: http://www.intricontibbetts.com/%ED%98%B8%EC%8A%A4%ED%8A%B8%EB%B0%94-%EC%95%8C%EB%B0%94-%EA%B5%90%EC%9C%A1-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-%EB%86%80%EB%9D%BC%EC%9A%B4-%EA%B8%B0%ED%9A%8C%EB%A5%BC-%ED%86%B5%ED%95%9C-%EC%84%B1/
thus he/she wants to be available that in detail,
so that thing is maintained over here.
my site ... jus murah: https://juisable.id/
to give a quick shout out and tell you I truly enjoy reading through your
articles. Can you suggest any other blogs/websites/ forums that deal with the same topics?
Many thanks!
My web-site - jus buah: https://juisable.id/
I'll bookmark your blog and take the feeds additionally?
I am glad to find a llot of useful information here in the put up, we
wznt work out moe strategies on this regard, thanks for sharing.
. . . ..
Also visit my webpage: darmowe ogłoszenie: https://praca-norwegia-s-school.teachable.com/p/oferty-pracy
Is that this a paid subject matter or did you modify it your self?
Either way keep up thhe excelleent high quality writing, it's uncommon too peer a great weblog like this one nowadays..
Here iis my web site; praca ze
szwedzkim: https://tinyurl.com/28nzr6xf
I have a blo centered on the same subjects you discuss
and would really like to have you share some stories/informa tion. I know my subscribers would enjoy
your work. If you're een remotely interested, feel
free to shoot me an e mail.
My web page;forum anglia romania: https://biolinky.co/pracaniemcy
that he must be pay a quick visit this website and be uup to date everyday.
Review my homepage ... pomocnik kierowcy: https://job-connection-network.mn.co/members/23539700
Here is my web blog - żyłka monofilamentowa : https://jarofishing.pl
out there right now. (from what I've read) Is that what you are using on your blog?
Check out my web site jus organik: https://juisable.id/
keeep it up!
Feel free to surf to my web-site dam Pracę Gdynia: https://peatix.com/user/21926069/view
you make blogging look easy. The overall look of your web site is fantastic, as well as the content!
Take a look at my website ... finlandia praca sezonowa; https://pl.pinterest.com/lucja17a/: https://pl.pinterest.com/lucja17a/,
The account aided me a acceptable deal. I had ben tiny bit acquainted of
this your broadcast provided bright clear concept
Also visit myy webpage: Glazurnik praca Holandia: https://myapple.pl/users/444605-annamala
my web-site: oferty pracy raciąż ogłoszenia (Marietta: https://pl.pinterest.com/lucja17a/)
visit this web page every day for the reason that it gives feature
contents, thanks
Feel free to surf to my website: jus murah: https://juisable.id/
Anyhow, I'm definitely glad I found it and I'll be bookmarking
and checking back often!
My blog https://animeporn.su/: https://animeporn.su/
Stop by my blog ... Body plus Erfahrungsberic ht: https://bodyplus.world
Feeel free tto visit my web blog; dam pracę glazurnikowi pilne (Pracazagranica .Bigcartel.com: https://Pracazagranica.Bigcartel.com)
layout on your weblog. Is this a paid theme orr did you modify it
yourself? Either way keep up the nice quality writing, it's rare to
see a niice blog like this oone today.
Also visit my web-site :: Drukarz: https://www.demilked.com/author/michal2/
again to read further news.
My webpage - praca we wloszech (Ofertypracy.th ezenweb.com: https://Ofertypracy.thezenweb.com/przeprowadzka-do-niemiec-w-poszukiwaniu-pracy-64332626)