Работа с текстом css на сайте часть 2. Продолжаем урок примененя стилей CSS к html тексту. Меняем размер и смотрим как задать расстояние между буквами.

4) Следующим смотрим свойство TEXT-TRANSFORM с ним в CSS можно изменять текст и буквы. Например, мы можем с помощью capitalize - сделать чтоб начало всех слов было с большой буквы или с помощью lowercase - сделать все буквы маленькими, а с uppercase - будут все буквы заглавные. Как всегда смотрим в примере это самый лучший способ восприятия.

Пример содержание файла style.css для свойства TRANSFORM.


h1 {text-transform:capitalize;}
h2 {text-transform:lowercase;}
p {text-transform:uppercase;}
 

На скриншоте видим как в первом заголовке все слова начинаются с большой буквы во втором все слова и буквы маленькие, а в параграфе все слова и буквы заглавные то есть большие.

изменяем вид текста CSS

5) Свойство WORD-SPACING в CSS благодаря нему мы можем задавать расстояние между словами в пикселях. Смотрите пример как надо записать код.

Пример содержание файла style.css для свойства WORD-SPACING.


h1 {word-spacing: 15px;}
p {word-spacing: 30px;}
 

Как видите в браузере расстояние между словами заголовка равняется 15 пикселей, а в параграфе слова друг от друга отдалены на расстояние в 30 пикселей.

Задаем расстояние между словами CSS

6) Свойство LETTER-SPACING с помощью этого элемента в таблице стилей CSS мы можем задавать расстояние между буквами в тексте в пикселях.

Пример содержание файла style.css для свойства LETTER-SPACING


h1 {letter-spacing: 10px;}
p {letter-spacing: 5px;}
 

Смотрите на итог там все буквы в заголовке расположились на расстоянии 10 пикселей, а в параграфе на 5 пикселей.

Задаем расстояние между буквами CSS

Конечно всё что мы изучаем в этих уроках может быть, и не понадобится для применения в нашем сайте, но я думаю, что лучше для себя знать как применяется таблица CSS, вдруг в дальнейшем пригодится. Вполне возможно, что и вы подскажете в дальнейшем кому нибудь. Дадите ответ на чей нибудь вопрос в применении стилей CSS.

Следующий урок работаем со шрифтом CSS.
Вернуться к первому уроку по работе с текстом CSS.



Рейтинг@Mail.ru   Яндекс.Метрика