Работа с текстом
День первый. Стили для работы с текстом
text-align – отвечает за вырывание текста по горизонтали
Атрибуты свойство text-align :
- left – выравнивание текста по левому краю
- right – выравнивание текста по правому краю
- center – выравнивание текста по центру краю
- justify – выравнивание текста по всей ширине блока
День второй. Декорация текста.
text-decoration – отвечает за декорации текста
- blink – делает текст мерцающим
Это текст мерцает
text-decoration:blink - line-through – делает текст зачеркнутым
Это текст зачеркнут!!!
text-decoration:line-through - overline – размещает черту на текстом
У этого текста черта сверху!!!
text-decoration:overline - underline – делает текст подчеркнутым
У этого текста черта снизу!!!
text-decoration:underline - none – отменяет всё декорации
Атрибуты text-decoration:
text-indent – задает отступи для первой строчки селектора
- число – отступ в пикселях или остальных величинах, которые мы укажем
- проценты – отступ в процентах
Атрибуты свойства text-indent
text-transform – отвечает за регистр текста
- capitalize – каждое слово начинается с большой буквы
Каждая первая буква слов в этом предложении большая!!!
text-transform:capitalize - uppercase – делает все буквы верхнем регистре
Это предложения находится в верхнем регистре!!!
text-transform:uppercase - lowercase – делает все буквы нижнем регистре
ЭТО ПРЕДЛОЖЕНИЯ НАХОДИТСЯ В НИЖНЕМ РЕГИСТРЕ
text-transform:lowercase
Атрибуты свойства text-transform:
text-shadow – задает тень для текста.
Атрибуты свойства text-shadow ( первые 4 параметра обязательны)
- 1 параметр – сдвиг тени по горизонтали
- 2 параметр – сдвиг тени по вертикали
- 3 параметр – задаем радиус тени
- Цвет – задаем цвет тени
- none – убирает тень
текст с тенью
текст с тенью
font-family – задает семейство шрифтов для сайта.
- Нужно задавать сразу несколько шрифтов для сайта. Задаются через запятую.
- Если название шрифтов состоит из несколько слов – оно берется в кавычки.
- Используйте в конце списка шрифтов универсальное семейство.
- Используйте только стандартные шрифты.
Правила ввода шрифтов:
Семейства шрифтов– каждый шрифт принадлежит к определенному семейству
- sans-sherit – семейство шрифтов без засечек.
- serif– семейство шрифтов с засечками.
- monospace – моноширные шрифты.
- fantasy – декоративные шрифты.
- cursive – курсивные шрифты.
Их виды:
Стандартные шрифты – Arial, Verdana, Tines, Times New Roman, Georgia, Trebuchet MS, MS Sans Sherif, Courier New, Helvetica, Webdings, Garamond.
Стандартные шрифты, но не для всех систем – Arial Black, Arial Narrow, Impact, Tahoma, Century Gothic.
Также можно задать редкие шрифты при помощи – Google Web Fonts API
День четвертый. Работа со шрифтами
font-size – устанавливает размер шрифта
У этого свойства есть несколько видов размеров шрифта
Виды задания размеров:
- Абсолютный размер – xx-small, x-small, small, medium, large, x-large, xx-large
- Относительный размер – smaller, larger
- Числовое значение – задается конкретный размер шрифта, в какой – либо величине
- Проценты – задает увеличение либо уменьшение шрифта
font-size:16px
Размер этого шрифта увеличен на 50% ( 100%=14 пикселей | 150% =21px )
font-size:150%
font-style – определяет начертание шрифта
Атрибуты свойства font-style:
- Normal – обычный шрифт
- italic – курсивный шрифт
курсивный шрифт
font-style:italic - oblique – наклонный шрифт
наклонный шрифт
font-style:oblique
font-variant – определяет, как отображать строчные символы
Атрибуты свойства font-variant:
- normal – обычные строчные символы
- small-caps – задает отображении строчных символов как заглавные
строчных символов как заглавные
font-variant:small-caps
font-weight – определяет насыщенность шрифта
Атрибуты свойства font-weight:
- lighter – задает самый тонкий шрифт
Светлый шрифт
font-weight:lighter - normal – обычный шрифт
- bold– задает полужирный шрифт
Полужирный шрифт
ont-weight:bold - bolder – задает жирный шрифт
Жирный шрифт
font-weight:bolder - Число – от 100 до 900 с шагом 100
Полужирный шрифт заданный числом
font-weight:500
Браузеры в большинстве отображает только два режима – полужирный и нормальный
Обычный шрифт (400), полужирный шрифт (700)
Универсальное свойство font – определяет размер, семейство, начертание и насыщенность
Пример универсального свойства font
italic bold 15px Tahoma
День четвертый. Обработка вида текста
letter-spacing – это свойство задает интервал между символами селектора
- normal – нормальное расстояние между символами
- число – задает расстояние между символами в цифрах
Расстояние между символами – 4 пикселя
letter-spacing:4px
Свойство атрибута letter-spacing:
word-spacing – это свойство задает интервал между словами селектора
- normal – нормальное расстояние между словами
- число– задает расстояние между словами в цифрах
Расстояние между словами – 20 пикселя
word-spacing:20px
Свойство атрибута word-spacing:
white-space – это свойство отвечает за пробелы
- normal – нормальные пробелы
- nowrap – пробелы не учитываются, но нет переноса текста, он идет в оду линию. Переносить можно при помощи тега br
Этот предложение не переноситься, что бы его перенести нужно, использовать тег br
white-space:nowrap - pre – учитываются все пробелы и если текст не влезает в одну строчку – добавляется полоса прокрутки
Это предложение не переноситься, учитываются все пробелы и добавляется полоса прокрутки
white-space:pre - pre-line – пробелы не учитываются, текст переноситься автоматом
Это предложение переноситься, а пробелы не учитываются
white-space:pre-line - pre-wrap – пробелы учитываются, текст переноситься автоматом
Это предложение переноситься, а пробелы и все пробелы учитываются
white-space:pre-wrap
Свойство атрибута white-space:
line-height – отвечает за расстояние между строчками текста
- normal – нормальное расстояние между строками
- проценты – можно указать интервал в процентах
- значение – указывается интервал, в какой либо величине
- число-множитель – указывает множители: пример 1.5 (рекомендовано )
Свойство атрибута line-height:
ПРИМЕР: