- •Добавление css к веб-странице
- •2. Селекторы
- •2.1. Комбинация селекторов
- •2.2. Группировка селекторов
- •2.3. Принцип каскадирования и специфичность правила
- •Форматирование текста в css
- •Свойства, позволяющие форматировать текст в css:
- •Работа со шрифтами в css
- •Параметры размеров элементов css
- •Списки в css
- •6. «@Media» - Типы носителей в css
- •Устройства
- •Значения устройств
- •Пример:
- •7 Работа с псевдоклассами в css
- •Синтаксис псевдо–классов:
- •Анкорные псевдо–классы:
- •Псевдо–элементы:
- •Синтаксис псевдо–элементов:
- •Псевдо–элемент: first–line.
- •Следующий стиль будет выводить изображение указателя каждый раз после появлением заголовка h6. (это и есть заголовок h6).
- •8. Css: оформление таблиц
- •Пример:
Пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Media</title>
<style type="text/css" media="screen">
.warning {color:#ff0000}
h1.warning {text-decoration:underline}
p.warning {font-weight:bold}
.printDisplay {display:none}
</style>
<style type="text/css" media="print">
.warning {color:#660000;}
h1.warning {text-decoration:underline; font-size:1in;}
p.warning {font-weight:bold; font-size:.5in;}
.screenDisplay {display:none}
</style>
</head>
<body>
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>
<p class="printDisplay">This is the print version.</p>
<p class="screenDisplay">This is the screen version.</p>
</body>
</html>
Пример правила :
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Работа с типами носителей (@media) в CSS позволяет сделать ваш сайт действительно кроссбраузерным и мультиплатформенным, позволяет упростить отображение сайта на мобильных устройствах и многое другое...
7 Работа с псевдоклассами в css
Работа с классами и псевдо-классами в CSS позволяет применить дополнительные методы форматирования к текстам и некоторым другим элементам страниц сайта.
Использование псевдо–классов позволяет добиться определенных эффектов для элементов. Ниже вы сможете увидеть все на примерах.
Синтаксис псевдо–классов:
В общем виде синтаксис псевдо–классов выглядит следующим образом:
selector:pseudo–class {property: value}
А вот и наглядный пример:
a.silver:visited {color: #C0C0C0 }
Анкорные псевдо–классы:
Существует несколько основных CSS методов работы со ссылками:
a:link {color: #808080 } - непосещенная ссылка
a:visited {color: #008000 } - посещенная ссылка
a:hover {color: #008080 } - выбранная ссылка
a:active {color: #00FF00 } - нажатая ссылка
В данном примере мы создаем селектор a.aa1 и применяем к нему анкорные псевдо-классы.
Порядок написания данного CSS кода должен сохраняться. То есть a:hover должен идти после a:visited и a:link, а a:active должен идти после a:hover, иначе ничего не получится.
Список псевдо–классов CSS.
:active – позволяет добавить стиль выбранному элементу
:focus – позволяет добавить стиль элементу выделенному элементу
:hover – позволяет добавить стиль элементу, над которым находится курсор мыши
:link – позволяет добавить стиль непосещенной ссылке
:visited – позволяет добавить стиль посещенной ссылке
:first – child – позволяет добавить стиль первому потомку некоторого элемента
:lang – позволяет определить язык, используемый для данного элемента
Надеюсь, вы понимаете, что данные методы форматирования могут быть применены не только к ссылкам, но и к большинству элементов на странице, например к простому тексту.
Псевдо–элементы:
Использование псевдо–элементов позволяет добиться специальных эффектов для некоторых селекторов. Ниже приведены примеры.