|
Каскадные
таблицы
стилей
(Cascading
Style
Sheets,
CSS)
-
это
язык,
который
содержит
набор
свойств
для
определения
внешнего
вида
документа.
Благодаря
ему
мы
можем
уменьшить
размер
файла
HTML,
тем
самым
уменьшая
его
время
загрузки.
Суть
в
том,
что
мы
всего
один
раз
описываем
свойства
оформления
(размер,
цвет,
шрифт,
положение
на
странице)
к
различным
элементам
страницы,
убирая
тем
самым
одинаковый
кусок
HTML-кода
вставленный
примерно
в
10
местах
нашего
HTML-файла.
Существует
три
метода
добавления
таблиц
стилей
в
HTML-документ:
внутренний,
глобальный
и
связанный.
Таблицы
глобальных
стилей
(global
style
sheet)
-
это
когда
вы
задаете
стиль
в
начале
документа
в
HEAD-е:
<STYLE
TYPE="text/css">........</STYLE>
Внутренние
стили
(inline
styles)
-
когда
вы
определяете
стиль
в
самом
элементе:
P(имя_элемента)
{
font-family:
Tahoma;
font-size:
12pt;
(свойство:
значение;)
}
Метод
таблиц
связанных
стилей
(linked
style
sheet)
является
наиболее
мощным
методом
для
определения
стиля
элементов
в
другом
документе,
кол-во
которых
может
быть
неограниченно
и
причем
чтобы
изменить
ваши
web-страницы
вам
нужно
только
изменить
ваш
файл
CSS,
а
не
изменять
каждую
страницу
в
отдельности.
Еще
одно
положительное
св-во
глобального
метода
заключается
в
том,
что
файл
.css
после
1-й
загрузки
загрузится
в
кэш
и
для
остальных
страниц
он
уже
загружаться
не
будет,
а
будет
просто
считываться
с
кэша.
Для
этого
создается
текстовый
файл
с
описанными
на
CSS
стилями
для
различных
элементов
и
сохраняется
с
расширением
.css,
а
задается
он
в
документе
с
помощью
тега
<LINK>
в
HEAD-е:
<LINK
REL="stylesheet"
TYPE="text/css"
HREF="имя.css">
Как
вы
уже
догались
стиль
для
элементов
задается
по
формату:
Имя_элемента
{
свойство:
значение;
}
Ниже
перечислены
свойства
элементов
в
CSS:
|
ШРИФТ
| font-family |
Устанавливает
шрифт:
P
{
font-family:
Tahoma;
}
Значения:
Times
New
Roman,
Tahoma,
Comic
Sans
MS
и
т.
гд. |
| font-size |
Устанавливает
размер:
P
{
font-size:
12pt;
}
Значения:
8pt,
10pt
и
т.
гд. |
| color |
Устанавливает
цвет
текста:
P
{
color:
blue;
}
Значения:
red(),
blue(),
yellow(),
green()
и
т.
гд. |
| text-decoration |
Устанавливает
вид
подчеркивания:
Значения:
underline, |
| font-style |
Устанавливает
вид
букв:
font-style:
italic
Значения: |
| list-style-type |
Устанавливает
вид
нумерации:
Значения:
decimal,
circle,
square,
upper-roman,
upper-alpha,
lower-alpha,
lower-roman,
disc. |
| |
|
LINK
|
Пример:
<HTML>
<HEAD>
<TITLE>Пример
глобального
CSS</TITLE>
<STYLE
"TYPE"=text/css>
P
{font-family:
Tahoma;
font-size:
12pt}
</STYLE>
</HEAD>
<BODY>
<P></P>
</BODY>
</HTML> |
<HTML>
<HEAD>
<TITLE>Пример
без
CSS</TITLE>
</HEAD>
<BODY>
<P><font
>текст</font></P>
<></>
<P><font
>текст</font></P>
</BODY>
</HTML> |
|
