Способы оформления текста с помощью HTML и CSS
| Описание | HTML | CSS | Пример |
|---|---|---|---|
| Цвет фона контейнера | background-color: #ff0; |
Lorem ipsum dolor sit amet ... | |
| Фоновое изображение контейнера | background-image: url(/images/blog/background-line.png); |
Lorem ipsum dolor sit amet ... | |
| Рамка вокруг контейнера1 | border: 1px dashed; |
Lorem ipsum dolor sit amet ... | |
| Тень вокруг контейнера2 | box-shadow: 1px 1px 1px; |
Lorem ipsum dolor sit amet ... | |
| Цвет | color: red; |
Lorem ipsum dolor sit amet ... | |
| Шрифт | font-family: Ubuntu, "Open Sans", sans-serif; |
Lorem ipsum dolor sit amet ... | |
| Размер | font-size: 2rem; |
Lorem ipsum dolor sit amet ... | |
| Курсивное начертание | <i> |
font-style: italic; |
Lorem ipsum dolor sit amet ... |
| Наклонное начертание | font-style: oblique; |
Lorem ipsum dolor sit amet ... | |
| Капитель | font-variant: small-caps; |
Lorem ipsum dolor sit amet ... | |
| Жирное начертание | <b> |
font-weight: bold; |
Lorem ipsum dolor sit amet ... |
| Расстояние между буквами | letter-spacing: 5px; |
Lorem ipsum dolor sit amet ... | |
| Межстрочный интервал | line-height: 3rem; |
Lorem ipsum dolor sit amet ... |
|
| Перечёркнутое начертание | <s> |
text-decoration: line-through; |
Lorem ipsum dolor sit amet ... |
| Надчёркнутое начертание | text-decoration: overline; |
Lorem ipsum dolor sit amet ... | |
| Подчёркнутое начертание | <u> |
text-decoration: underline; |
Lorem ipsum dolor sit amet ... |
| Первая буква слова прописная | text-transform: capitalize; |
Lorem ipsum dolor sit amet ... | |
| Все буквы прописные | text-transform: uppercase; |
Lorem ipsum dolor sit amet ... | |
| Тень2 | text-shadow: 1px 1px; |
Lorem ipsum dolor sit amet ... | |
| Расстояние между словами | word-spacing: 10px; |
Lorem ipsum dolor sit amet ... |
- Рамку можно задать не только со всех сторон, но и с любой определённой: сверху, справа, снизу, слева.
Также помним, что рамки бывают различного вида: точечные, штриховые, сплошные, двойные, .... - С помощью тени можно делать различные 3D-эффекты: утопленность, выпуклость, выступаемость, ....
Анимация стоит отдельной статьи, поэтому о ней в следующий раз. Некоторые способы анимирования: вращение; дрожание; растяжение; сжатие; ....
Информацию по конкретным HTML-элементам и CSS-свойствам можно узнать на сайте WebReference.Ru в соответствующих справочниках.