CSS текст и примеры его форматирования

Подключение CSS в служебную секцию

<html>
<head>
<title>Подключение CSS файла</title>
<style type="text/css">
p {color:#006633}
.forexample {color:Yellow}
#ident {color:#ffffff; font-weight:bold}
body {background-color:#66cc66}
</style>
</head>
<body>
<p>Текст параграфов этого документа темно-зеленого цвета</p>
<p>Текст</p>
<p class="forexample">А здесь текст желтый</p>
<p id="ident">Текст белого цвета, полужирный</p>
<h2 class="forexample">Заголовок</h2>
<p>Текст</p>
</body>
</html>

Вставка ссылки на внешний .css файл

В текстовом редакторе создайте файл следующего содержания:

@charset "windows-1251"; /* CSS Document */ body {background-color:#0000cc} p {color:#222255} .forexample {color:Orange} #ident {color:#ffffff; font-weight:bold}

Сохраните его в папке, в которой находится файл index.html, но не с .html расширением, а с.css, например, как file.css. или style.css

Правильное представление css подключения

@charset "windows-1251";
/* CSS Document */

body {
background-color:#0000cc
}
p {
color:#222255
}
.forexample {
color:Orange
}
#ident {
color:#ffffff;
font-weight:bold
}

Приблизительная структура HTML документа:

<html> <head> <title>О том, как вставить CSS в HTML страницу</title> <link rel="stylesheet" type="text/css" href="file.css" /> </head> <body> <p>Текст параграфов этого документа темно-синего цвета</p> <p>Текст</p> <p class="forexample">А здесь текст оранжевый</p> <p id="ident">Текст белого цвета, полужирный</p> <h2 class="forexample">Заголовок</h2> <p>Текст</p> </body> </html>

ШРИФТЫ

font-weight— устанавливает объем шрифта:

font-weight: bold полужирный шрифт.

font-size— устанавливает размер шрифта в пикселях или в процентах:

.paragraf {font-size: 14px}

h1 {font-size: 180%}

font-style— определяет стиль шрифта:

font-style: italic курсивный шрифт (наклонный).

font-variant— также определяет стиль шрифта:

font-variant: small-caps капитель – большие буквы маленького размера.

CSS виды и семейства шрифтов:

font-family:	Pезультат
Verdana, Geneva, sans-serif	Семейство шрифтов без засечек
Arial, Helvetica, sans-serif	Семейство шрифтов без засечек
'Times New Roman', Times, serif	Семейство шрифтов с засечками
'Courier New', Courier, monospace	Семейство моноширинных шрифтов

<title>CSS шрифты и примеры их форматирования</title>
<style type="text/css">
p {
font-family:'Times New Roman', Times, serif;
font-weight:bold;
font-size:18px;
font-style:italic
}
</style>
</head>
<body>
<div>Обычный текст</div>
<p>
Текст жирный, размером 18 пикселей, наклонный, семейства Times New Roman
</p>
</body>

Определим наклонный шрифт:

CSS атрибут со значением style="font-style:italic" определяет наклонный шрифт.

Определим жирный шрифт:

CSS подключение style="font-weight:bold" определяет жирный шрифт.

Определим нормальный объем шрифта:

Строчка style="font-weight:300" преобразует жирный шрифт в обычный.

Пример с изменением размера:

<head> <style type="text/css"> p {font-size:13px} p.big {font-size:16px} </style> </head> <p>Текстовая строка размером 13 пикселей.</p> <p class="big">Текстовая строка размером 16 пикселей.</p>

Результат:

Текстовая строка размером 13 пикселей.

Текстовая строка размером 16 пикселей.

CSS текст и примеры его форматирования

Атрибут со значением	Полученный результат
font-family:Tahoma, sans-serif	CSS текст – форматирование
font-size:15px	CSS текст – форматирование
font-style:italic	CSS текст – форматирование
font-variant:small-caps	CSS текст – форматирование
font-weight:bold	CSS текст – форматирование
letter-spacing:2px	CSS текст – форматирование
word-spacing:7px	CSS текст – форматирование
color:#cc0033	CSS текст – форматирование
text-indent:40px	CSS текст – форматирование
text-decoration:underline	CSS текст – форматирование
text-decoration:overline	CSS текст – форматирование
text-decoration:line-through	~~CSS текст – форматирование~~
text-transform:capitalize	CSS Текст – Форматирование
text-transform:lowercase	css текст – форматирование
text-transform:uppercase	CSS ТЕКСТ – ФОРМАТИРОВАНИЕ
vertical-align:super	CSS текст – форматирование^text
vertical-align:sub	CSS текст – форматирование_text

Атрибуты и значения

· font-family:Tahoma, sans-serif – определяет вид и семейство шрифта.

· font-size:13px – устанавливает размер шрифта в пикселях или процентах.

· font-style:italic – преобразует текст в наклонный (еще его называю курсивным).

· font-variant:small-caps – капитель – большие буквы маленького размера.

· font-weight:bold – определяет жирный текст.

· letter-spacing:2px – дополнительное расстояние между символами в пикселях.

· word-spacing:7px – создает дополнительное расстояние между словами в пикселях.

· color:#cc0033 – определяет цвет текста.

· text-indent:40px – устанавливает отступ строки в пикселях или процентах.

· text-decoration:underline – выводит подчеркнутый текст.

· text-decoration:overline – выводит надчеркнутый текст.

· text-decoration:line-through – выводит перечеркнутый текст.

· text-transform:capitalize – отображает каждое слово с заглавной буквы.

· text-transform:lowercase – преобразует все буквы в маленькие.

· text-transform:uppercase – преобразует все буквы в заглавные.

· vertical-align:super – отображает текст в верхнем индексе.

· vertical-align:sub – отображает текст в нижнем индексе.

Пример по форматированию текста:

<title>Пример форматирования текста</title>
<style type="text/css">
body {
color:#000066
}
.primer {
text-decoration:underline;
text-align:right;
letter-spacing:5px
}
#example {
text-indent:50px;
word-spacing:20px;
color:Green
}
</style>
</head>
<body>
<div class="primer">Подчеркнутый текст, с расстоянием между символами в пять пикселей, выровнен по правому краю, темно-синий</div>
<div>Текст темно-синего цвета</div>
<p id="example">Отступ строки слева, дополнительное расстояние между словами в 20 пикселей, текст зеленый</p>
</body>

Определим нужный цвет:

<html> <head> <title>CSS цвет</title> </head> <body> <h1 style="color:#ff0000">Заголовок 1-го уровня</h1> <p style="color:#ffff00">Первый параграф</p> <p style="color:#00ff00">Второй параграф</p> <p style="color:#0000ff">Третий параграф</p> </body> </html>

В примере ниже цвет текста установлен для всей страницы:

<html> <head> <title>CSS текст и его цвет</title> </head> <body style="color:#ff6c36"> <h1 align="center">Заголовок 1-го уровня</h1> <p>Первый параграф</p> <p>Второй параграф</p> <p style="color:#0000ff">Третий параграф</p> </body> </html>