Text-decoration
Это свойство отвечает за оформление текста. Может принимать следующие значения:
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
Результат:
Text-align
Это свойство отвечает за горизонтальное выравнивание текста. Может принимать следующие значения:
a{
text-decoration:none;
text-align:center;
}
a:hover{
text-decoration:underline;
}
Text-indent
Это свойство отвечает за отступы в абзацах. Отступы задаются в единицах измерения и %, могут быть как положительными (красная строка), так и отрицательными (висячая строка). Пусть у нас есть html-страница с тремя абзацами:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Текст в параграфе, где первая строка будет с отступом.</p>
<p>Текст в параграфе, где первая строка будет с отступом.</p>
<p>Текст в параграфе, где первая строка будет с отступом.</p>
</body>
</html>
Добавим для параграфов свойство text-indent, чтобы задать красную строку:
p{
text-indent:1.2em;
}
Здесь лучше использовать единицу em, чтобы отступ был пропорционален размеру шрифта. Наша страница в браузере выглядит так:
Text-transform
Это свойство отвечает за видоизменение текста, точнее за смену регистра. Используются следующие значения:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="sc">Текст в параграфе со свойством capitalize.</p>
<p id="su">Текст в параграфе со свойством uppercase.</p>
<p id="sl">Текст в параграфе со свойством lowercase.</p>
</body>
</html>
И изменим таблицу стилей, задав для каждого абзаца свойство text-transform:
p#sc{
text-transform:capitalize;
}
p#su{
text-transform:uppercase;
}
p#sl{
text-transform:lowercase;
}
Наша страница в браузере выглядит так:
Интервалы
В CSS есть несколько свойств, регулирующих расстояния между словами, буквами в словах и строками.
p#su{
word-spacing:10px;
}
p#sl{
letter-spacing:5px;
}
Наша страница в браузере выглядит так:
Обратите внимание на интервал между строками абзаца. Давайте его увеличим, для этого добавим в нашу таблицу стилей свойство line-height:
p{
line-height:200%
}
p#su{
word-spacing:10px;
}
p#sl{
letter-spacing:5px;
}
Теперь наша страница в браузере выглядит так:
Мы рассмотрели свойства текста, теперь вы можете оформить свой текст так, как вам захочется. Для закрепления того, что мы уже знаем, давайте оформим следующую страницу:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок первого уровня</h1>
<p>Просто какой-то текст в параграфе.</p>
<p id="su">Текст в параграфе с идентификатором su.</p>
<p>Просто какой-то текст в параграфе.</p>
<h2>Заголовок второго уровня</h2>
<p>Просто какой-то текст в параграфе.</p>
<p id="su">Текст в параграфе с идентификатором su.</p>
<p>Просто какой-то текст в параграфе.</p>
</body>
</html>
Зададим для этой страницы следующее оформление:
body{
background:#0033CC;
color:#FFFFFF;
font:12px Verdana, sans-serif;
}
h1{
font-size:1.6em;
color:#FFCC00;
letter-spacing:5px;
text-align:center;
}
h2{
font-size:1.3em;
color:#FFCC00;
text-decoration:underline;
text-align:center;
}
p:first-letter{
color:#FFCC00;
}
p#su{
text-indent:1.5em;
word-spacing:10px;
font-style:italic;
}
Наша страница в браузере выглядит так:
Разберитесь с таблицей стилей самостоятельно. Умение "читать" чужой код пригодится вам не раз. Наша таблица стилей пока достаточно проста, но начинать и нужно с малого. Если что-то непонятно вернитесь к соответствующему уроку.
В следующем уроке мы начнем изучать большую тему под названием "Блоки в CSS".
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как сделать сайт → Уроки CSS → Урок 7. Свойства - текст
CSS - Урок 7. Свойства - текст
Свойства текста позволяют задавать параметры слов и предложений, а также их взаимное расположение.Text-decoration
Это свойство отвечает за оформление текста. Может принимать следующие значения:
- none - у текста нет оформления.
- underline - текст подчеркивается.
- overline - текст надчеркивается линией, расположенной над текстом.
- line-through - текст отображается зачеркнутым.
- blink - текст становится мигающим (не работает в IE).
Text-align
Это свойство отвечает за горизонтальное выравнивание текста. Может принимать следующие значения:
- left - выравнивание по левому краю.
- center - выравнивание по центру.
- right - выравнивание по правому краю.
- justify - выравнивание по ширине.
Text-indent
Это свойство отвечает за отступы в абзацах. Отступы задаются в единицах измерения и %, могут быть как положительными (красная строка), так и отрицательными (висячая строка). Пусть у нас есть html-страница с тремя абзацами:
Здесь лучше использовать единицу em, чтобы отступ был пропорционален размеру шрифта. Наша страница в браузере выглядит так:
Text-transform
Это свойство отвечает за видоизменение текста, точнее за смену регистра. Используются следующие значения:
- capitalize - меняет первую букву каждого слова на заглавную.
- uppercase - меняет все буквы на заглавные.
- lowercase - меняет все буквы на строчные.
- none - изменений не происходит.
Наша страница в браузере выглядит так:
Интервалы
В CSS есть несколько свойств, регулирующих расстояния между словами, буквами в словах и строками.
- word-spacing - задает интервал между словами.
- letter-spacing - задает интервал между буквами.
- line-height - задает интервал между строками.
Наша страница в браузере выглядит так:
Обратите внимание на интервал между строками абзаца. Давайте его увеличим, для этого добавим в нашу таблицу стилей свойство line-height:
Теперь наша страница в браузере выглядит так:
Мы рассмотрели свойства текста, теперь вы можете оформить свой текст так, как вам захочется. Для закрепления того, что мы уже знаем, давайте оформим следующую страницу:
Наша страница в браузере выглядит так:
Разберитесь с таблицей стилей самостоятельно. Умение "читать" чужой код пригодится вам не раз. Наша таблица стилей пока достаточно проста, но начинать и нужно с малого. Если что-то непонятно вернитесь к соответствующему уроку.
В следующем уроке мы начнем изучать большую тему под названием "Блоки в CSS".
Предыдущий урок Вернуться в раздел Следующий урок
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
|
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|
|