|
Читайте также: |
Синтаксис:
<head>
<link rel="stylesheet" type="text/css" href="file.css">
</head>
Данный стиль описан в отдельном файле (file.css). Файл может располагаться на другом компьютере в сети. В этом случае атрибут href содержит ссылку на URL нужного компьютера.
Представленные выше три метода назначения стилей описывают иерархию стилевых решений, которая вступает в силу, когда разные декларации предписываются одним и тем же тэгам. В этом случае приоритет отдается тому решению, которое занимает более высокий уровень иерархии. Если же назначаемые декларации стоят на одной ступени иерархии стилей, предпочтение отдается последнему описанному стилевому решению. Однако значение любого свойства в декларации можно сделать обязательным, т.е. назначаемым безусловно.
Синтаксис:
{свойство: значение!important}
Примеры:
1. Вывод всех фрагментов документа, отмеченных тэгом h1, полужирным шрифтом.
<head>
<style type="text/css">
h1 {font-weight: bold}
</style>
</head>
<body>
<h1>здесь используются стили</h1>
здесь стилей нет
</body>
2. Группировка селекторов, имеющих одинаковую декларацию.
Три одинаковых декларации
h1 {font-weight: bold}
h2 {font-weight: bold}
h3 {font-weight: bold}
могут быть заменены одной конструкцией вида
h1, h2, h3 {font-weight: bold}
3. Использование контекстного селектора.
<head>
<style type="text/css">
b i {color: red}
</style>
</head>
<body>
<b>здесь стилей нет</b>
<i>здесь стилей нет</i>
здесь стилей нет
<b><i>здесь используются стили</i></b>
<i><b>здесь НЕ ИСПОЛЬЗУЮТСЯ стили</b></i>
</body>
4. Назначение ряда свойств одному тэгу.
<head>
<style type="text/css">
h1 {font-weight: bold;
font-size: 20pt}
</style>
</head>
<body>
<h1>здесь используются стили</h1>
здесь стилей нет
</body>
5. Использование классов селекторов.
<head>
<style type="text/css">
.red {color: red}
.blue {color: blue}
.green {color: green}
</style>
</head>
<body>
<h1 class="red">красный заголовок</h1>
<h1 class="green">зеленый заголовок</h1>
<div class="blue">синий текст</div>
</body>
6. Пример использования иерархии стилей.
<head>
<style type="text/css">
.red {color: red}
.blue {color: blue!important}
</style>
</head>
<body>
<h1 class="red" style="color: green">
зеленый заголовок </h1>
<h1 class="blue" style="color: green">
синий заголовок </h1>
</body>
Дата добавления: 2015-10-02; просмотров: 42 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Использование гиперссылок. | | | Форматирование страниц. |