Каскадные таблицы стилей CSS.
CSS (Cascading Style Sheets - каскадные таблицы стилей) - это набор свойств для элементов HTML.
Используя стили достаточно один раз создав файл стилей и формируя web-страницы c учетом работы
со стилями можно придать гибкость сайту в плане настройки стиля, цветовых решений. Для изменения
каких-либо дизайнерских решений в плане цветового оформления, размера шрифтов и т.д. в комплексе по всему сайту
достаточно исправить свойство какого-либо элемента HTML в файле стилей.
Кроме создания отдельного файла стилей можно устанавливать стили непосредственно внутри web-страниц, причем эти стили
будут иметь приоритет перед стилями, описанными в файле стилей.
Для подключения стилей к HTML-документу примененяется элемент style , который позволяет
определить стиль отображения для стандартных элементов HTML-разметки, например:
|
Код
|
Вывод на экран
|
<head>
<style>
p{color:green; font-size:14pt}
</style>
</head>
<body>
Это простой текст
<p>
Это текст абзаца с ранее установленными параметрами цвета и размера шрифта.
</p>
Это опять простой текст
</body>
|
Это простой текст
Это текст абзаца с ранее установленными параметрами цвета и размера шрифта.
Это опять простой текст
|
Для подключения внешнего файла стилей в заголовке HTML документа включается
ссылка на внешний файл, например:
|
HTML документ (.htm)
|
Внешний файл стилей (my-style.css)
|
<head>
<link rel="stylesheet" type="text/css" href="my-style.css">
</head>
<body>
...
текст HTML документа
...
</body>
|
p{color:green; font-size:14pt}
b{color:red}
и т.д.
#FB8303">/* Комментарии записываются так. */
|
Для переопределения стиля в определенном месте документа можно применить атрибут STYLE
у конкретного элемента разметки, например:
|
Код
|
Вывод на экран
|
<head>
<style>
p{color:green; font-size:14pt}
</style>
</head>
<body>
Это простой текст
<p>
Это текст абзаца с ранее установленными параметрами цвета и размера шрифта.
</p>
Это опять простой текст
<p style="color:red">
Это текст абзаца с переустановленными параметрами цвета.
</p>
</body>
|
Это простой текст
Это текст абзаца с ранее установленными параметрами цвета и размера шрифта.
Это опять простой текст
Это текст абзаца с переустановленными параметрами цвета.
|
| 