Читайте также:
|
· область действия вложенных стилей ограничена страницей, содержащей их;
· если ваш сайт состоит из одной единственной страницы, можно использовать вложенные стили;
· при разработке страниц, особенно со сложной разметкой, можно вначале указать стили как вложенные, чтобы при отладке не переключаться между двумя файлами: таблицей стилей и кодом страницы; однако после отладки следует перенести вложенные стили в отдельный файл CSS;
· вложенные стили имеют приоритет перед глобальными, но уступают линейным.
3. Внешний файл со стилями
Самый эффективный способ – размещение стилевых определений в отдельном файле (таблице стилей).
При этом, описанные в файле CSS стили будут иметь глобальное (на уровне сайта) действие, т.е. будут воздействовать на все страницы сайта, а не только на отдельные теги или страницы.
Например, если потребуется внести изменения в дизайн всего сайта, можно просто изменить одно правило CSS в таблице стилей. Это гораздо легче, чем менять каждый атрибут для каждого абзаца (так происходило до появления CSS).
Для связи стилевого файла с файлами HTML используется элемент LINK.
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
Атрибут rel="stylesheet" информирует браузер, что будет подгружаться файл стилевых описаний.
Атрибут type="text/css" указывает на язык (в данном случае css, но может и javascript).
Атрибут href="style.css" задает адрес файла.
Атрибут media="all" указывает среду представления, для которой записаны стилевые правила. Возможные значения: all- для всех сред;
screen- для экрана;
print- для печати.
С файлом HTML может быть связан не один, а несколько стилевых файлов
| Файл style.css | Файл 1.html | Файл 2.html |
| p {color:red; font-size:small;} h1{font-family:cambria; font-style:italic;} | <html>
<head>
<title>Пример3</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<h1>Свойства абзаца прописаны для всего сайта в отдельном файле</h1>
<p>Первый абзац</p>
<br>Второй абзац</br>
<p>Третий абзац</p>
</body>
</html>
| <<html>
<head>
<title>Пример4</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<h1>Данная страница имеет тоже оформление, что и предыдущая</h1>
<br>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
</body>
</html>
|
Правило CSS состоит из двух частей: селектора, определяющего, к какому тегу (в данном случае это абзац) применяется правило, и объявления, указывающего, что произойдет после применения правила (текст абзаца станет красным). Само объявление состоит из двух элементов: свойства, называющего объект применения (цвет текста) и знамения, указывающего состояние свойства (красный цвет).
При описании таблицы стилей можно группировать несколько селекторов.
Допустим, если вы хотите выделить шрифт заголовков с 1 по 6 уровень жирным и синим, то можете сделать это с помощью следующего правила:
H1 {color:blue; font-weight:bold;}
h2 {color:blue; font-weightrbold;}
h3 {color:blue; font-weight:bold;}
h4 {color:blue; font-weight rbold;}
hS {colorrblue; font-weight:bold;}
h6 {color:blue; font-weight:bold;}
Либо можно просто сгруппировать селекторы в одном правиле, указав их через запятую:
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
К одному селектору можно применить несколько правил. Если, написав предыдущее правило, вы решили, что хотите сделать заголовок пЗ выделенным курсивом, можно просто добавить:
h1, h2, h3, h4, h5, h.6 {color:blue; font-weight:bold;}
h3 <font-style:italic;>
Селекторы элементов, классов
Напомним, что стилевое определение имеет следующий вид:
Дата добавления: 2015-07-10; просмотров: 58 | Нарушение авторских прав