CSS и ISS стиль
автоматически определяемые поддерживеющими CSS браузерами. Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них. Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента вцелом стиль.
Список псевдоклассов и псевдоэлементов :
Anchor Pseudo Classes - эти псевдоклассы элемента <a href=" ">, обозначающего ссылку. Псевдоклассы этого элемента: (ссылка), active (активная ссылка), visited (посещенный ранее URL), hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в Нетскейпе).
First Line Pseudo-element - first-line. Этот псевдоэлемент может быть использован с block-level элементами (p, h1 и т.д.). Он изменяет стиль первой строки этих элементов.
First Letter Pseudo-element - first-letter. Похож на first-line, но влияет не на всю строку, а только на первый символ.
ПРИМЕР :
a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}
В данном примере все элементы Anchor (ссылки) будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.
Примечание : описания нескольких свойств для одного селектора, контекстуального селектора, класса, индивидуально именованного стиля или группы объедененных селекторов отделяются друг от друга точкой с запятой ";".
Внутренние Таблицы Стилей
Как уже говорилось, использование Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута STYLE в HTML теге.
ПРИМЕР HTML:
<font color="blue" size="3" face="Arial"> Вперед в будущее </font>
ПРИМЕР INLINE STYLE SHEET:
<font style="color:blue; font-size:12pt; font-family:Arial"> Вперед в будущее </font>
Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать только если необходимо задать определенному элементу свой индивидуальный стиль, существующий в классификации CSS и нереализованный в HTML. Или же при необходимости абсолютно позиционировть данный элемент.
Глобальные Таблицы Стилей
Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE type="text/css">. Он размещается в заголовке документа.
ПРИМЕР:
<html>
<head> <title> Пример Глобальных Таблиц Стилей </title>
</head>
<STYLE type="text/css">
h1{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</STYLE>
<body>
<h1> Этот заголовок написан крупным красным курсивом </h1>
Вот <font class="blue"> это </font> слово - синее,
a <font id="bold"> это</font> - жирное.
</body>
</html>
В данном примере все элементы H1 будут написаны крупным красным курсивым, все элементы с указанным классом BLUE будут синими , а все элементы с идентификатором ID="Bold" станут жирными. Для простоты вместо <STYLE type="text/css"> можно использовать просто тег <STYLE>, что менее граммотно.
Связанные Таблицы Стилей
Связанные таблицы стилей используются для придания нескольким документам одного стиля и xранятся в отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа.
ПРИМЕР:
Файл styles.css
<STYLE type="text/css">
body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic}
h1 {color:white}
#bold {font-weight:bold}
</STYLE>
В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит это так: <LINK rel="STYLESHEET" TYPE="text/css" HREF="путь до файла">
ПРИМЕР:
Файл Index.html
<html>
<head>
<title> Просто еще один пример </title>
</head>
<LINK rel="stylesheet" type="text/css" href="styles.css">
<body>
Содержание Документа
</body>
</html>
На этом я заканчиваю первую часть руководства и перехожу ко второй части.
Часть Il. Cвойства CSS
Свойства Font
font-family
Возможные значения:
[1] любой шрифт
*Применимо для: всех элементов
Описание: это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя
ПРИМЕР:
font-family:Arial Black URL('arialblack.ttf')
font-style
Возможные значения:
[1] normal - без изменений
[2] italic - курсив
*Применимо для: всех
Список псевдоклассов и псевдоэлементов :
Anchor Pseudo Classes - эти псевдоклассы элемента <a href=" ">, обозначающего ссылку. Псевдоклассы этого элемента: (ссылка), active (активная ссылка), visited (посещенный ранее URL), hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в Нетскейпе).
First Line Pseudo-element - first-line. Этот псевдоэлемент может быть использован с block-level элементами (p, h1 и т.д.). Он изменяет стиль первой строки этих элементов.
First Letter Pseudo-element - first-letter. Похож на first-line, но влияет не на всю строку, а только на первый символ.
ПРИМЕР :
a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}
В данном примере все элементы Anchor (ссылки) будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.
Примечание : описания нескольких свойств для одного селектора, контекстуального селектора, класса, индивидуально именованного стиля или группы объедененных селекторов отделяются друг от друга точкой с запятой ";".
Внутренние Таблицы Стилей
Как уже говорилось, использование Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута STYLE в HTML теге.
ПРИМЕР HTML:
<font color="blue" size="3" face="Arial"> Вперед в будущее </font>
ПРИМЕР INLINE STYLE SHEET:
<font style="color:blue; font-size:12pt; font-family:Arial"> Вперед в будущее </font>
Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать только если необходимо задать определенному элементу свой индивидуальный стиль, существующий в классификации CSS и нереализованный в HTML. Или же при необходимости абсолютно позиционировть данный элемент.
Глобальные Таблицы Стилей
Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE type="text/css">. Он размещается в заголовке документа.
ПРИМЕР:
<html>
<head> <title> Пример Глобальных Таблиц Стилей </title>
</head>
<STYLE type="text/css">
h1{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</STYLE>
<body>
<h1> Этот заголовок написан крупным красным курсивом </h1>
Вот <font class="blue"> это </font> слово - синее,
a <font id="bold"> это</font> - жирное.
</body>
</html>
В данном примере все элементы H1 будут написаны крупным красным курсивым, все элементы с указанным классом BLUE будут синими , а все элементы с идентификатором ID="Bold" станут жирными. Для простоты вместо <STYLE type="text/css"> можно использовать просто тег <STYLE>, что менее граммотно.
Связанные Таблицы Стилей
Связанные таблицы стилей используются для придания нескольким документам одного стиля и xранятся в отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа.
ПРИМЕР:
Файл styles.css
<STYLE type="text/css">
body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic}
h1 {color:white}
#bold {font-weight:bold}
</STYLE>
В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит это так: <LINK rel="STYLESHEET" TYPE="text/css" HREF="путь до файла">
ПРИМЕР:
Файл Index.html
<html>
<head>
<title> Просто еще один пример </title>
</head>
<LINK rel="stylesheet" type="text/css" href="styles.css">
<body>
Содержание Документа
</body>
</html>
На этом я заканчиваю первую часть руководства и перехожу ко второй части.
Часть Il. Cвойства CSS
Свойства Font
font-family
Возможные значения:
[1] любой шрифт
*Применимо для: всех элементов
Описание: это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя
ПРИМЕР:
font-family:Arial Black URL('arialblack.ttf')
font-style
Возможные значения:
[1] normal - без изменений
[2] italic - курсив
*Применимо для: всех
