lec_2
.pdf
Каскадные таблицы стилей Общие положения
Правило CSS состоит из двух частей:
селектор – указывает, к каким именно элементам будут применены свойства CSS;
определение – указывает значения свойств; состоит из двух частей
o свойство;
o значение свойства.
Селектором может быть любой элемент XHTML
Синтаксис
селектор1, селектор2…{ свойство1: значение;
свойство2: значение;
…
свойствоN: значение;
}
Подключение CSS Связывание
CSS хранится в отдельном файле с расширением css
Присоединение к документу с помощью тэга <link> в разделе
<head>:
<link rel ="stylesheet" type="text/css" href="mystyles.css"/>
Типы носителей
Тип |
Описание |
|
all |
Все типы - по умолчанию |
|
aural |
Речевые синтезаторы |
|
Речевые браузеры |
||
|
braille |
Устройства, основанные на системе |
|
Брайля |
||
|
||
handheld |
Наладонные компьютеры |
|
Печатающие устройства |
||
projection |
Проектор |
|
screen |
Экран монитора |
|
tv |
Телевизор |
<link media="print, handheld" rel="stylesheet" href="print.css" type="text/css">
<link media="screen" rel="stylesheet" href="main.css" type="text/css">
Внедрение
CSS подключаются с помощью тега <style> <head>
<title> CSS</title>
<style type="text/css">
em {text-transform:uppercase} p {background-color:lightgrey;
text-align:center} </style>
</head>
Импортирование
В тэге <style> можно импортировать внешнюю таблицу с помощью свойства @import таблицы стилей
Определяется в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил
Вид URL:
@import url(имя файла) носитель
@import «имя файла» носитель
Встраивание в тэги документа
Каждый тэг имеет параметр style, в котором можно задать значения его свойств в соответствии с синтаксисом CSS
Способы определения стиля упорядочены иерархически, что имеет значения при разрешении одинаковых правил, заданных на разном уровне (по убыванию приоритетов):
указание стиля в конкретном теге
указание стиля в теге <style>
указание в стилевом файле
Наследование
Принципы дизайна CSS Селекторы
Селекторы элементов
селектор1, селектор2…{ свойство1: значение;
свойство2: значение;
…
свойствоN: значение;
}
Селекторы потомков
состоит из двух или более селекторов, разделённых пробелами h1 em {color: red}
<h1>заголовок <em> красного цвета </em>и опять синий цвет.</h1>
h1 * em
определяет стиль для элемента em, который является внуком, или позднейшим потомком, элемента h1
Селекторы дочерних элементов
состоит из двух или более селекторов, разделённых символом ">" body > p { line-height: 1.3 }
Сочетание селекторов потомков и селекторов дочерних элементов:
div ol>li p
Смежные селекторы-родственники синтаксис: E1 + E2
если E1 и E2 имеют одного общего предка в дереве документа и E1 непосредственно предшествует E2.
<style type="text/css"> h1 { color: blue } em { color: green }
h1 * em { color: red } p > em { color: #f0f; }
h1 + h2 { color: #5f0 } </style>
<body>
<h1> - заголовок первого уровня отображается шрифтом синего цвета </h1>
<em> - отображение элемента EM, который не является встроенным в заголовок </em>
<h1> - заголовок первого уровня<em> встроенные EM отображается шрифтом зеленого цвета</em> опять синий цвет. </h1>
<h1> - заголовок первого уровня<strong><em> внучатый EM отображается шрифтом красного цвета</em></strong> опять синий цвет. </h1>
<p> - черный<em> фиолетовый</em> опять черный цвет. </p>
<h2> - заголовок 2-го уровня </h2> <h1> - заголовок первого уровня </h1>
<h2> - заголовок 2-го уровня после первого </h2>
Селектор CLASS
Позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа
<style type="text/css"> h1.red {color:red;} h1.bluebgrd {
color:red;background-color:blue} </style>
<h1 class="red">
<h1 class="bluebgrd" >
Класс с лидирующей точкой
Применяться ко всем элементам данного класса:
<style type="text/css">
.red {color:red;}
.bluebgrd { color:red; background-color:blue} </style>
Применение
<p class=”red”>
Селекторы атрибутов
Синтаксис
1.Стиль будет применен для элемента с заданным атрибутом
[атрибут]
2.Стиль будет применен для элемента, имеющего атрибут с
конкретным значением
[атрибут="значение"] [lang="en"] { color : red }
3. Cтиль будет применен к элементам, у которых значения
атрибутов начинаются с одинакового текста.
[атрибут^="значение"]
4. Cтиль будет применен к элементам, у которых значения
атрибутов имеют одинаковую часть текста
[атрибут*="значение"]
Пример
<style type="text/css"> [href] {
text-decoration: none; /* убираем подчеркивание у элементов с атрибутом href */
font-weight: bold; /* увеличиваем жирность шрифта */
}
[href*="cs"] {
color: red; /* красный цвет текста */
}
[href^="http"] {
color: green; /* зеленый цвет текста */
}
</style>
</head>
<body>
<p><a
href="http://kappa.cs.karelia.ru/~charuta">cs.karelia.ru/~charuta</a></
p>
<p><a
href="http://kappa.cs.karelia.ru/~semenov">cs.karelia.ru/~semenov</a></
p>
<p><a
href="http://kappa.cs.karelia.ru/~galov">cs.karelia.ru/~galov</a></p> <p><a href="cs.karelia.ru/">cs.karelia.ru</a></p>
<p><a href="squaredance.karelia.ru/">squaredance.karelia.ru</a></p>
Объединение селекторов атрибутов Селекторы атрибутов можно объединять между собой или с другими селекторами (например, тегов)
Стили применяются только к тем элементам, которые
соответствуют сразу всем указанным селекторам
[селектор атрибутов1][селектор атрибутов2]
селектор[селектор атрибутов]
Пример
<style type="text/css"> img[alt] {
}border: 10px blue solid; /* стили рамки картинок с alt */
[alt][title] {
border: 10px red solid; /* стили рамок элементов с title и alt */
}
</style>
</head>
<body>
<p>
<img src="b104.gif" alt="Button_1">
<img src="b104.gif" alt="Button_2" title="Button_2"> <img src="b104.gif" >
</p>
<p title = "ppp"> text title </p>
<p title ="ppp" alt="Text"> text title & alt</p>
Селектор ID
Параметр id задает уникальное имя элемента
<style type="text/css">
#par24 {letter-spacing: 0.3em ;} #form3 {color:red;}
</style>
<body>
<p id=”par24 <h1 id=”form3”>
ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов
Для указания элемента с заданным id, идентификаторы можно объединять с другими селекторами (тегов, атрибутов, классов и т.д.):
селектор#идентификатор
Псевдоэлементы и псевдоклассы
Псевдоклассы применяются к различным типам элементов. Псевдоэлементы применяются к различным частям элементов. Селекторы псевдоэлементов и псевдоклассов записываются в
виде:
Элемент: псевдокласс Элемент: псевдоэлемент
Например, a:link
Основные псевдоэлементы и псевдоклассы
:first-child
псевдокласс для элемента, являющегося первым дочерним элементом какого-либо другого элемента.
P:first-child EM {font-weight : bold}
Пример
<style>
p { color: red; font-size: 12pt } p:first-letter { color: green; font-size: 200% } p:first-line { color: blue }
</style>
<body>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</body>
:link
псевдокласс для непосещенной гиперссылки (применим к<a>)
:visited
псевдокласс для посещенной гиперссылки (применим к<a>) :hover
псевдокласс применяется к элементу, когда пользователь
навел на него курсор мыши, но не активировал щелчком
:active
псевдокласс применяется к элементу, когда пользователь активировал его щелчком
:focus
псевдокласс применяется к элементу, когда он получает
фокус
:first-line
псевдоэлемент применим к любому блочному элементу и
задает стиль отображения его первой строки
:first-letter
псевдоэлемент применим к любому блочному элементу и
задает стиль отображения его первой буквы
:before
псевдоэлемент используется для вставки автоматически
генерируемого содержимого перед указанным элементом
:after
псевдоэлемент используется для вставки автоматически генерируемого содержимого после указанного элемента
Примеры
Ссылки
a:hover:before {content: " * * * ";}
Буквица
pre:first-letter { font-size: 200%; }
Пример
style type="text/css">
p:first-letter { /* Буквица для абзацев */ font-size: X-LARGE; color: red; font-weight: 600}
.normal:first-line { /* Псевдоэлемент для выделения 1-й строки */ text-transform: uppercase }
p:hover { color:blue } /* Выделяем активный абзац синим, */ a:hover { color:red } /* а активную ссылку - красным */ a:link { color: #00FF00 } /* также меняем цвета обычной */ a:visited { color: #006600; /* и посещенной ссылок */
text-decoration: none } /*и убираем у нее подчеркивание*/ </style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p class="normal">Первая строка этого абзаца будет выведена большими буквами. <p>И у этого, и у предыдущего абзаца есть буквица.
<br>
Ссылки <a href="ex_5.html">Exampl 5</a>, <a href="ex_8.html">Exampl 8</a>