11530

Каскадные таблицы стилей CSS

Лекция

Информатика, кибернетика и программирование

Лекция 3: Каскадные таблицы стилей CSS. Изучаемые вопросы Общие сведения о CSS Добавление стиля на вебстраницу Синтаксис CSS Псевдоклассы 1. Общие сведения о CSS CSS Cascading Style Sheets каскадные таблицы стиле

Русский

2013-04-08

180.5 KB

28 чел.

PAGE   \* MERGEFORMAT 15

 Лекция 3: Каскадные таблицы стилей CSS.

        Изучаемые вопросы

  1.  Общие сведения о CSS
  2.  Добавление стиля на веб-страницу
  3.  Синтаксис CSS
  4.  Псевдоклассы

1. Общие сведения о CSS

CSS (Cascading Style Sheets, каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания (написанного на HTML или другом языке разметки) и представления (написанного на CSS) документа. Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

Основными преимуществами использования CSS являются:

1. Разделение оформления и содержания

Идея о том, чтобы код HTML был свободен от элементов оформления вроде установки цвета, размера шрифта и других параметров, стара как мир. В идеале, веб-страница должна содержать только теги логического форматирования, а вид элементов задается через стили. При подобном разделении формирование дизайна и верстка сайта могут вестись параллельно.

2. Единое оформление документов

Сайт это не просто набор связанных между собой документов, но и единое расположение основных блоков и их оформление. Применение единообразного оформления заголовков, основного текста и других элементов создает преемственность между страницами и облегчает пользователям работу с сайтом и его восприятие в целом. Разработчикам же использование стилей существенно упрощает проектирование дизайна.

3. Централизованное хранение

Стили, как правило, хранятся в одном или нескольких специальных файлах, ссылка на которые указывается во всех документах сайта. Благодаря этому удобно править стиль в одном месте, при этом оформление элементов автоматически меняется на всех страницах, которые связаны с указанным файлом. Вместо того чтобы модифицировать десятки HTML-файлов, достаточно отредактировать один файл со стилем и оформление нужных документов сразу же поменяется.

4. Расширенные возможности

В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.

5. Быстрая работа

При хранении стилей в отдельном файле, он кэшируется и при повторном обращении к нему извлекается из кэша браузера. За счет кэширования и того, что стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается время загрузки документов.

Недостатками использования CSS являются:

  •  различное отображение верстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS;
  •  часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и серверный код, которые сложным и ненаглядным способом связаны с селекторами CSS, что значительно увеличивает время редактирования и тестирования.

2. Добавление стиля на веб-страницу

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением.

2.1. Таблица связанных стилей

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <HEAD>.

Пример подключения таблицы связанных стилей:

<head>

 <link rel="stylesheet" type="text/css" href="mysite.css">

 <link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">

</head>

Значения параметров тега <LINK> – rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Таким образом можно подключать таблицу стилей, которая находится на другом сайте.

2.2. Таблица глобальных стилей

При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>.

Пример использования таблицы глобальных стилей:

<head>

 <style type="text/css">

  p {

   font-size: 110%;

   font-family: Verdana, Arial, Helvetica, sans-serif;

  }

 </style>

</head>

Замечание. Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.

 2.3. Внутренние стили

Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут тега style, а его значение указывается с помощью языка таблицы стилей.

Пример использования внутренних стилей:

<body>

 <p style="font-size: 110%; font-family: Verdana, Arial, Helvetica, sans-serif;">Текст</h1>

 </body>

Замечание. Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей.

3. Cинтаксис CSS

Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис :

Селектор { свойство1: значение; свойство2: значение; ... }

Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, идентификаторы, классы и др. После указания селектора идут фигурные скобки, в которых записывается необходимое стилевое свойство, а его значение указывается после двоеточия. Параметры разделяются между собой точкой с запятой. 

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Замечание. Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры.

3.1. Свойства CSS

 Текст

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 3.1

Таблица 3.1. CSS-свойства для работы со шрифтами

Свойство

Значение

Описание

font-family

имя шрифта

Задает список шрифтов

font-style

normal italic oblique

Нормальный шрифт Курсив Наклонный шрифт

font-variant

normal small-caps

Капитель (особые прописные буквы)

font-weight

normal lighter bold bolder 100-900

Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный

font-size

normal pt px %

Нормальный размер Пункты Пикселы Проценты

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.2 .

Таблица 3.2. CSS-свойства для работы с текстом

Свойство

Значение

Описание

line-height

normal множитель точно %

Межстрочный интервал

text-decoration

none underline overline line-through blink

Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста

text-transform

none capitalize uppercase lowercase

Убрать все эффекты Начинать с прописных Все прописные Все строчные

text-align

left right center justify

Выравнивание текста

text-indent

точно %

Отступ первой строки

 

Цвет

CSS имеет несколько опций для определения цвета текста и фоновых областей на веб-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом HTML, но и дают массу новых возможностей. Например, традиционный путь для создания цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц, предлагая более простые и удобные варианты управления цветом.

В табл. 3.3 перечислены свойства элементов, предназначенных для задания цвета.

Таблица 3.3. CSS-свойства для работы с цветами

Свойство

Значение

Описание

color

Цвет

Устанавливает цвет текста

background-color

Цвет transparent

Цвет фона Прозрачный

background-image

URL none

Фоновый рисунок Отсутствует

background-repeat

repeat repeat-x repeat-y no-repeat

Повторяемость фонового рисунка

background-attachment

scroll fixed

Прокручиваемость фона вместе с документом

background-position

Проценты Пикселы top center bottom left right

Начальное положение фонового рисунка

Цвет, используя CSS, можно задавать тремя способами :

По его названию. Браузеры поддерживают некоторые цвета по их названию.

По шестнадцатеричному значению. Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML. Также допустимо использовать сокращенную запись, вроде #fc0. Она означает, что каждый символ дублируется, в итоге получим #ffcc00.

С помощью RGB. Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении

Ссылки

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 3.4 приведены допустимые псевдоклассы и их описания .

Таблица 3.4. Псевдоклассы для работы с ссылками

Свойство

Описание

A:link

Определяет стиль для обычной непосещенной ссылки.

A:visited

Определяет стиль для посещенной ссылки.

A:active

Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

A:hover

Определяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.

Списки

С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.

В табл. 3.5 перечислены свойства элементов, предназначенных для создания и изменения списков

Таблица 3.5. CSS-свойства для работы со списками

Свойство

Значение

Описание

list-style

disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none

Вид маркера. Первые три используются для создания маркированного списка, а остальные – для нумерованного.

list-style-image

none URL

Устанавливает символом маркера любую картинку.

list-style- position

outside inside

Выбор положения маркера относительно блока строк текста.

Поскольку тег <LI> наследует стилевые свойства тега <OL> или <UL>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI.

 Единицы измерения

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. В табл. 3.6 перечислены основные относительные единицы .

Таблица 3.6. Основные относительные единицы

Единица

Описание

Em

Высота шрифта текущего элемента

Ex

Высота символа x

Px

Пиксел

%

Процент

Изменяемое значение, которое зависит от размера шрифта текущего элемента (он устанавливается через стилевой атрибут font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию. Соответственно, устанавливая размер текста для всей страницы в em, работа происходит именно с этим параметром. В том случае, когда em используется для определенного элемента, за 1em принимается размер шрифта его родителя.

Аргумент ex определяется как высота символа "x" в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В табл. 3.7 перечислены основные такие единицы.

Таблица 3.7. Основные абсолютные единицы

Единица

Описание

In

Дюйм (1 дюйм равен 2,54 см)

Cm

Сантиметр

Mm

Миллиметр

Pt

Пункт (1 пункт равен 1/72 дюйма)

Pc

Пика (1 пика равна 12 пунктам)

Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта.

 3.2. Селекторы тегов

В качестве селектора может выступать любое имя  тега HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде :

Имя_тега { свойство1: значение; свойство2: значение; ... }

Пример описания стиля параграфа:

<head>

 <style type="text/css">

  p {

   font-size: 110%;

   font-family: Verdana, Arial, Helvetica, sans-serif;

  }

 </style> </head>

В данном примере описан размер шрифта и семейство шрифта параграфа. Стиль будет применяться только к тексту, который располагается внутри любого контейнера <р> на HTML-странице.

Селекторы классов

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий:

Имя_тега.Имя_класса { свойство1: значение; свойство2: значение; ... }

Внутри стилевой таблицы вначале пишется имя тега, а затем, через точку имя класса. Для применения данного стиля в коде HTML необходимо в теге, для которого применяется стиль указать атрибут class="Имя_класса".

Например:

<head>

 <style type="text/css">

  p {

   font-size: 110%;

   font-family: Verdana, Arial, Helvetica, sans-serif;

  }

  p.Color {

   color: navy;

  }

 </style>

 </head>

<body>

  <p>Пример использования селектора тегов.</p>

  <p class="Color">Пример использования класса.</p>

</body>

В этом примере описано два стиля. Первый из них применяется ко всем параграфам, а второй только к тем параграфам, у которых тег имеет вид <p class=Color… 

Можно использовать классы и без указания имени тега. Синтаксис в этом случае будет следующий:

.Имя_ класса { свойство1: значение; свойство2: значение; ... }

Описанный таким образом стиль может быть применен к любому элементу HTML-страницы, в открывающем теге которого имеется атрибут class=”Имя_класса” .

Селекторы - идентификаторы

Идентификатор (называемый также "ID селектор") определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически. Идентификатором элемента является значение его атрибута id.

Синтаксис использования селектора-идентификатора следующий :

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Описанный таким образом стиль будет применен только к элементу, имеющему атрибут id=Имя идентификатора”.
Пример использования
селектора-идентификатора:

<head>

 <style type="text/css">

  #help {

   position: absolute;

   left: 160px;

   top: 50px;

   width: 225px;

   height: 180px;

   background: #f0f0f0;  

  }

 </style>

</head>

<body>

 <div id="help">Пример использования Идентификаторов</div>

</body>

Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий:

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора.

Описанній таким образом стиль будет применен только к указаному тегу, имеющему соответствующее значение атрибута id.

Пример

Описание стиля

<style>

P#new {

   color: red; /* Красный цвет текста */

  }

 </style>

Применение стиля

 <p>Обычный параграф</p>

 <p id="new">Параграф необычный - красный</p>

Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, используются селекторы, которые работают только в определенном контексте.

Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий :

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2, когда он размещается внутри Тега1, как показано ниже.

Пример использования контекстных селекторов:

<head>

 

 <style type="text/css">

  P B {

   font-weight: bold;

   color: navy;

  }

 </style>

</head>

<body>

  <div><b>Жирное начертание текста</b></div>

  <p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>

</body>

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Например:

<p>Это <b>пример</b> <i>соседних</i> селекторов.</p>

Теги <b> и <i> представляют собой соседние элементы.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий:

Селектор 1 + Селектор 2 { Описание правил стиля }

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

Например,

              Описание стиля

 i+b {

font-weight: bold;

                           color: blue;

                        }

Использование в HTML 

          

<p><i>Выделенный</i><b>текст</b></p>

На странице слово ”текст” жирным начертанием и синим цветом.

Дочерние селекторы

Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий [2, 5]:

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности.

Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой – сюда относятся, например, таблицы и разные списки.

Пример

Описание стиля

DIV > I { /* Дочерний селектор */

   color: red; /* Красный цвет текста */

  }

Использование стиля в HTML

<div>

  <p><i>Текст НЕ выделяется </i> красным цветом</p>

  </div>

 <div>

  <i>Текст выделяется красным цветом</i>

 </div>

Селекторы атрибутов

Для изменения стиля элементов, содержащих различные параметры, в CSS введены селекторы атрибутов. Они позволяют установить стиль тега по присутствию определенного параметра или его значения.

Рассмотрим несколько типичных вариантов применения таких селекторов.

Простой селектор атрибута

Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.

Селектор[атрибут] { Описание правил стиля }

Пробел между именем селектора и квадратными скобками не допускается.

В следующем показано изменение стиля тега <p>, в том случае, если к нему добавлен атрибут title.

 <style type="text/css">

      p[title] {

   color: green; /* Цвет текста */

  }

 </style>

 В данном примере меняется цвет текста внутри контейнера <p>, когда к нему добавляется параметр title независимо от значения этого атрибута.

Селектор атрибута со значением

Устанавливает стиль для элемента в том случае, если задано определенное значение указанного атрибута. Синтаксис применения следующий.

Селектор[атрибут="значение"] { Описание правил стиля }

Например:

 <style type="text/css">

  A[target="_blank"] {

   color: green;

   padding-left: 15px; /* Смещение текста вправо */

  }

 </style>

</head>

<body>

 <p><a href="link1.html">Обычная ссылка</a> |

    <a href="link2" target="_blank">Ссылка в новом окне</a></p>

 </body>

</html>

В этом примере вторая гиперссылка будет выведена зеленым цветом со смещением аправо на 15 пикселов так как в теге этой гиперссылки имеется атрибут target со значеним “_blank”.

Атрибут начинается с определенного значения

Устанавливает стиль для элемента в том случае, если указанный атрибут начинается с указанного значения. Синтаксис применения следующий.

Селектор[атрибут^="значение"] { Описание правил стиля }

Например: 

 <style type="text/css">

  A[href^="http://"] {

   font-weight: bold; /* Жирное начертание */

  }

 </style>

</head>

<body>

 <p><a href="link1.html">Обычная ссылка</a> |

 <a href="http://htmlbook.ru" target="_blank">Внешняя ссылка на сайт htmlbook.ru</a></p>

 </body>

</html>

В этом примере гиперссылки, начинающиеся с указания протокола http://, будут выделены жирным шрифтом.

 

Атрибут оканчивается определенным значением

Устанавливает стиль для элемента в том случае, если указанный атрибут оканчивается указанным значением. Синтаксис применения следующий.

Селектор[атрибут$="значение"] { Описание правил стиля }

Например: 

 <style type="text/css">

  A[href$=".ua"] { /* Если ссылка заканчивается на .ua */

   background-color: lightblue;

   padding-left: 10px;  

  }

  A[href$=".com"] { /* Если ссылка заканчивается на .com */

   background-color: yellow;

   padding-left: 20px;

  }

 </style>

</head>

<body>

 <p><a href="http://www.yandex.com">Yandex.com</a> |

 <a href="http://www.yandex.ua">Yandex.ua</a></p>

 </body>

</html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ua. При этом для к каждой ссылки с помощью стилей устанавливается цвет фона . Если ссылка заканчивается на .ua“, то она выводится на светло-синем фоне (lightblue), а если ссылка заканчивается на ”.com”, то она выводится на желтом фоне.

Значение встречается в любом месте атрибута

Возможны варианты, когда стиль следует применить к селектору с определенным атрибутом, частью значения  которого является некоторый текст. В этом случае можно использовать следующий синтаксис.

Селектор[атрибут*="значение"] { Описание правил стиля }

Например:

 <style type="text/css">

  [href*="htmlbook"] {

   background: yellow; /* Желтый цвет фона */

  }

 </style>

</head>

<body>

 <p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> |

 <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> |

 <a href="http://webimg.ru">Графика для Веб</a></p>

 </body>

</html>

В данном примере содержатся две ссылки, содержащие значение “htmlbook”. Для каждой из этих ссылок будет установлен желтый цвет фона. 

Универсальный селектор

Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае используется  универсальный селектор, который соответствует любому элементу веб-страницы.

Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

Аналогичный результат можно получить, если поменять селектор * на BODY.

Группирование

При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся параметров. Чтобы не повторять одни и те же элементы в описаниях стилей, их можно сгруппировать для удобства представления и сокращения кода.

Например, имеется следующее описание стилей:

H1 {

 font-family: Arial, Helvetica, sans-serif;

 font-size: 160%;

 color: #003;

}

H2 {

 font-family: Arial, Helvetica, sans-serif;

 font-size: 135%;

 color: #333;

}

H3 {

 font-family: Arial, Helvetica, sans-serif;

 font-size: 120%;

 color: #900;

}

P {

 font-family: Times, serif;

}

Из описания видно, что стиль для заголовков содержит одинаковый параметр font-family. Одинаковыйц параметр можно записать в сгруппированном стиле, как показано ниже.

H1, H2, H3 {

 font-family: Arial, Helvetica, sans-serif;

}

H1 {

 font-size: 160%;

 color: #003;

}

H2 {

 font-size: 135%;

 color: #333;

}

H3 {

 font-size: 120%;

 color: #900;

}

В приведенном  примере единый для всех селекторов параметр font-family применяется сразу к нескольким тегам, а индивидуальные атрибуты уже добавляются к каждому селектору отдельно.

Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий.

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.

4. Псевдоклассы

Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью можно получить разные динамические эффекты на странице.

Синтаксис применения псевдоклассов следующий.

Элемент:Псевдокласс { Описание правил стиля }

Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}) и контекстным селекторам (.menu A:hover {background: #fc0}).

Условно все псевдоклассы делятся на группы, которые перечислены далее.

Псевдоклассы, определяющие состояние элементов

К этой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае.

active

Происходит при активации пользователем элемента. Например, при наведении курсора на ссылку и нажатии левой кнопки мыши.

link

Применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал.

focus

Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст.

Конец формы

hover

Псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

visited

Данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно.

5. Правила создания стиля

При написании достаточно объемного CSS-файла следует придерживаться некоторых общих рекомендаций, которые помогут избежать ошибок, сделать код понятным и удобным.

1. Пишите все правила для каждого селектора в одном месте

Допускается для каждого селектора добавлять каждый стилевой параметр и его значение по отдельности, как это показано ниже

TD { background: olive; }

TD { color: white; }

TD { border: 1px solid black; }

Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите аргументы для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид

TD {

 background: olive;

 color: white;

 border: 1px solid black;

}

2. Более высокий  приоритет имеет значение, указанное в коде ниже

Если для селектора вначале задается параметр с одним значением, а затем тот же параметр, но уже с другим значением, то применяться будет значение, которое в коде установлено ниже

P { color: green; }

P { color: red; }

В данном примере для селектора P цвет текста вначале устанавливается зеленым, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к параметру color.

3. Описание стилей начинайте с селекторов верхнего уровня

Учитывая, что многие стилевые свойства элементов наследуются от своих родителей, начинать таблицу стилей лучше именно с селекторов, которые выступают контейнерами для других элементов. В частности, это BODY, TABLE, UL, OL и т.д. Если требуется задать гарнитуру шрифта для всего текста веб-страницы, то надо применить параметр font-family к селектору BODY.

Наследование свойств позволяет не повторять многократно одни и те же параметры, если они заданы для селекторов верхнего уровня. При этом необходимо учитывать, что не все атрибуты наследуются.

4. Группируйте селекторы с одинаковыми параметрами и значениями

5. Используйте идентификаторы и классы

Классы или идентификаторы удобно использовать, когда нужно применить один стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и т.д.

6. Применяйте универсальные стилевые параметры

Универсальные параметры задают одновременно сразу несколько значений. Примеры таких свойств: border (вид границы), padding (поля вокруг элемента), margin (отступы вокруг элемента).

Так, параметр padding определяет поля одновременно для всех четырех сторон элемента. Поэтому использование padding: 10px короче и понятнее, чем последовательное добавление аргументов padding-left, padding-top, padding-right и padding-bottom, определяющих поля для каждой стороны.

Краткие итоги

Каскадные таблицы стилей CSS – технология описания внешнего вида документа, написанного языком разметки (HTML, XHTML, XML, SVG, XUL и др.).

Основной целью разработки CSS являлось разделение содержимого и представления документа.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением.

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле.

При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы.

Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице.

Способ записи CSS в общем виде имеет следующий синтаксис:

Селектор { свойство1: значение; свойство2: значение; ... }

Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, идентификаторы, классы, контекстные селекторы, соседние селекторы, дочерние селекторы, селекторы атрибутов, универсальный селектор.

При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся параметров. Чтобы не повторять дважды одни и те же элементы, селекторы группируются в виде списка тегов, разделенных между собой запятыми.

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других.

Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа.


 

А также другие работы, которые могут Вас заинтересовать

70441. Исследование специфики использования современных спутниковых средств для повышения точности привязки опознаков 423.5 KB
  Спутниковые радионавигационные системы GPS ГЛОНАСС позволяют в большинстве случаев по сравнению с традиционными методами достигнуть более высокой точности место определения объекта с меньшими экономическими затратами при привязке опознаков.
70442. Визуализация результатов моделирования выхода автономного необитаемого подводного аппарата на источник экологических аномалий 3.97 MB
  Цель работы - разработка программного обеспечения визуализации результатов моделирования выхода автономного необитаемого аппарата на источник экологической аномалии. В результате выполнения работы сформулированы требования к программному обеспечению визуализации и выбраны средства...
70443. ЭЛЕКТРОННАЯ СИСТЕМА УПРАВЛЕНИЯ ДВИГАТЕЛЕМ 1.7 MB
  Центром построения цифровой интегральной системы управления, в котором производится переработка информации о состоянии объекта и принятие решений, является бортовой цифровой вычислительный комплекс
70444. Семантическая деривация единиц лексико-семантической группы «Повадки животных» 70.34 KB
  Проблема образной номинации человека посредством зоонимической лексики не теряет в лингвистике своей значимости. Причина ее лингвистической ценности кроется в непрекращающемся процессе осмысления человеком самого себя в контексте окружающей его живой природы.
70445. Влияние внутрисемейных отношений на формирование личности младшего школьника 223 KB
  Так как семейные условия включая социальное положение род занятий материальное обеспечение и уровень образования родителей в большей мере предопределяют жизненный путь ребенка. Помимо сознательного полноценного и целенаправленного воспитания которое дают ему...
70448. Разработка двухуровневой распределенной АСУ ТП секции 100 установки 4.34 MB
  Установка гидрокрекинг предназначена для переработки вакуумного газойля в присутствии водорода на алюмоникельмолибденовом катализаторе с повторной переработкой рециркулята (остатка куба колонны фракционирования) для максимального производства дизельного или реактивного топлива.
70449. Анализ финансового положения ОАО «Амира» 763.5 KB
  В настоящее время коммерческим банкам требуется более глубокий подход в оценке кредитоспособности заемщика потому что кредитоспособность клиента способность заемщика полностью и в срок рассчитаться по своим долговым обязательствам а для банка кредитные операции...