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

Лекция 3

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

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

Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

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

Введение в CSS

Что такое CSS?

Общий синтаксис таблиц стилей

Правила CSS

Классы

Идентификаторы

Группировка свойств

Использование в веб-страницах

Встроенные стили

Внедренные стили

Связанные таблицы стилей

Аппаратно-зависимые стили

Свойства CSS

Позиционирование элементов

Что такое CSS?

Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть.

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

Таблица стилей — это совокупность стилей, применимых к гипертекстовому документу.

Каскадирование — это порядок применения различных стилей к веб-странице. Браузер, поддерживающий таблицы стилей, будет последовательно применять их в соответствии с приоритетом: сначала связанные, затем внедренные и, наконец, встроенные стили. Другой аспект каскадирования —наследование (inheritance), — означает, что если не указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа. Например, если вы примените определенный цвет текста в теге

, то все теги внутри этого блока будут отображаться этим же цветом.

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

Официальная информация о спецификации Cascading Style Sheets всегда доступна по адресуhttp://www.w3.org/Style/CSS/

Общий синтаксис таблиц стилей

Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать. Таблицы стилей составляются из определенных частей (рис. 1):

Рис. 1. Синтаксис описания стиля CSS

Селектор (Selector). Селектор — это элемент, к которому будут применяться назначаемые стили. Это может быть тег, класс или идентификатор объекта гипертекстового документа.

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

Значение (Value). Значения — это фактические числовые или строковые константы, определяющие свойство селектора.

Описание (Declaration). Совокупность свойств и их значений.

Правило (Rule). Полное описание стиля (селектор + описание).

Таким образом, таблица стилей — это набор правил, задающих значения свойств селекторов, перечисленных в этой таблице. Общий синтаксис описания правила выглядит так:

селектор[, селектор[, ...]] {свойство: значение;}

Регистр символов значения не имеет, порядок перечисления селекторов в таблице и свойств в определении не регламентирован.

Правила CSS

Итак, каскадная таблица стилей — это набор правил форматирования тегов HTML. Приведем несколько примеров написания таких правил:

Основной текст с выравниванием по ширине, абзацный отступ 30px, гарнитура (шрифт) — Serif, кегль (размер шрифта) — 14px:

p {

text-align: justify;

text-indent: 30px;

font-family: Serif;

font-size: 14px;

}

Это правило будет применено ко всем тегам

.

Синий цвет для заголовков с первого по третий уровень:

h1, h2, h3 {

color: blue; /* тоже самое, что и #0000FF */

}

Таблицы и изображения выводить без обрамления:

table, img {border: none;}

Ссылки в элементах списков показывать без подчеркивания:

li a {text-decoration: none;}

Внутренние отступы слева и справа для блоков (

), заголовков таблиц и ячеек таблиц установить в 10px и залить фон желтым цветом:

div, th, td {

padding-left: 10px;

padding-right: 10px;

background-color: yellow;

}

Все ссылки в документе отображать черным цветом и полужирным шрифтом, а в основном тексте и списках — обычным, а также выделять их зеленым цветом и подчеркивать только при наведении курсора (в описании правил использован псевдоэлемент a:hover).

a {color: black; font-weight: bold;}

p a, li a {font-weight: normal; text-decoration: none;}

p a:hover, li a:hover {

color: #00FF00; text-decoration: underline;

}

Классы

Стандарт CSS представляет возможности создания именованных стилей — стилевых классов. Это позволяет ответить на такой, например, вопрос: Как применить разные стили к одному и тому же селектору?

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

p {margin-left: 0;}

p.warn {margin-left: 40px; color: #FF00;}

Для применения созданного класса его имя нужно указать в атрибуте class для выбранных абзацев:

Красный текст с отступом слева

Общий синтаксис описания класса:

селектормя_класса {описание}

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

Вот несколько примеров:

Правило:

.solid_blue {color: blue;}

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

Синий текст абзаца

  • Синий текст элемента списка
  • Правило:

    h1.bigsans {font-family: Sans; font-size: 1.5em;}

    h1.smallserif {font-family: Serif; font-size: .84em;}

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

    Большой, но рубленый

    Маленький, но с засечками

    Идентификаторы

    В качестве селектора может выступать идентификатор элемента гипертекста, указанный в атрибуте id. Для назначения стилей таким элементам используется синтаксис, аналогичный описанию классов, но вместо точки ставится знак # (“решетка”). Например:

    div#content {

    position: absolute;

    top: 10px;

    left: 10%;

    right: 10%;

    border: solid 1px silver;

    }

    Текст

    Следует помнить, что идентификаторы элементов должны быть уникальны в пределах документа.

    Группировка свойств

    Группировка (grouping) состоит в объединении значений родственных свойств. При этом таблица стилей становится более компактной, но предъявляются более жесткие требования к описанию правил. Ниже приведен пример обычного стиля, задающего отступы:

    div {

    margin-left: 10px;

    margin-top: 5px;

    margin-right: 40px;

    margin-bottom: 15px;

    }

    Это же правило можно переписать с группировкой в следующем виде:

    div {margin: 5px 40px 15px 10px;} /*порядок: top right bottom left*/

    Оба стиля будут отображаться одинаково.

    Группировка может применяться для таких свойств, как padding, font, border, background и еще некоторых (см. документацию CSS)

    Использование в веб-страницах

    Существует три способа применения таблицы стилей к документу HTML:

    Встраивание (Inline). Этот метод позволяет применить стиль к заданному тегу HTML.

    Внедрение (Embedded). Внедрение позволяет управлять стилями страницы целиком.

    Связывание (Linked или External). Связанная таблица стилей позволяет вынести описание стилей во внешний файл, ссылаясь на который можно контролировать отображение всех страниц сайта.

    Встроенные стили

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

    Это текст с кеглем 12 точек и гарнитурой Courier

    Пример:

    А этот фрагмент еще и выделен красным цветом.

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

    Внедренные стили

    Внедренные стили используют тег

    ...

    ...Связанные таблицы стилей

    Связанные (linked), или внешние (external) таблицы стилей — наиболее удобное решение, когда речь идет об оформлении целого сайта. Описание правил помещается в отдельный файл (обычно, но не обязательно, с расширением .css). С помощью тега выполняется связывание этой таблицы стилей с каждой страницей, где ее необходимо применить, например так:

    Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле sample.css. Следует отметить, что файл со стилями физически может находиться на другом веб-сервере, тогда в href нужно указать абсолютный путь к нему.

    Позиционирование элементов

    Рассмотрим пример. В этом примере фрагменты содержимого размещены в блочных элементах

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

    Такое влияние на внешний вид оказывает свойство position. Это свойство в сочетании со свойствами left, top, right, bottom, display, clear и ряда других позволяет управлять положением элементов на странице и порядком их вывода. Свойство position может принимать такие значения:

    static — нормальное положение

    Данный блок является обычным блоком, он отображается согласно общим правилам. Свойства 'left' и 'top' не применяются.

    relative — относительное позиционирование

    Положение блока рассчитывается в соответствии с нормальным потоком вывода. Затем блок смещается относительно своего нормального (static) положения.

    absolute — абсолютное позиционирование

    Положение блока (возможно и размер) указывается с помощью свойств 'left', 'right', 'top' и 'bottom'. Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих элементов того же уровня.

    fixed — фиксированное положение

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

    Свойства CSS

    В табл.1 перечислены некоторые часто используемые свойства CSS и их назначение.

    Таблица 1. Свойства элементов CSS

    Имя

    Значения

    Описание

    background

    [background-color || background-image || background-repeat || background-attachment || background-position] | inherit

    Управление фоном элемента

    background-color

    | transparent | inherit

    Цвет фона

    background-image

    | none | inherit

    Фоновое изображение

    background-position

    [ [ | ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit

    Положение фоновой картинки

    background-repeat

    repeat | repeat-x | repeat-y | no-repeat | inherit

    Повторение фоновой картинки

    border

    [ border-width || border-style ||
    ] | inherit

    Границы элемента

    border-collapse

    collapse | separate | inherit

    Объединение/разделение смежных границ

    border-color

    {1,4} | transparent | inherit

    Цвет границы

    border-style

    {1,4} | inherit

    Стиль линии границы

    border-top border-right border-bottom border-left

    [ border-top-width || border-style ||
    ] | inherit

    Управление стилем заданной границы

    border-width

    {1,4} | inherit

    Толщина линии границы

    bottom

    | | auto | inherit

    Низ элемента

    clear

    none | left | right | both | inherit

    Запрет заполнения свободного пространства рядом с элементом

    clip

    | auto | inherit

    Обрезка содержимого элемента

    color

    | inherit

    Цвет содержимого

    cursor

    [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit

    Форма курсора

    display

    inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

    Способ отображения элемента

    empty-cells

    show | hide | inherit

    Отображение пустых ячеек таблицы

    float

    left | right | none | inherit

    Свободное размещение элемента

    font

    [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

    Управление шрифтом

    font-family

    [[ | ],]* [ | ] | inherit

    Гарнитура

    font-size

    | | | | inherit

    Кегль

    font-style

    normal | italic | oblique | inherit

    Стиль шрифта

    font-variant

    normal | small-caps | inherit

    Варианты отображения шрифта

    font-weight

    normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

    Толщина шрифта

    height

    | | auto | inherit

    Ширина элемента

    left

    | | auto | inherit

    Положение левой границы элемента

    line-height

    normal | | | | inherit

    Высота строки

    list-style

    [ list-style-type || list-style-position || list-style-image ] | inherit

    Стиль списка

    margin

    {1,4} | inherit

    Внешний отступ

    margin-top margin-right margin-bottom margin-left

    | inherit

    Внешний отступ по заданной стороне

    padding

    {1,4} | inherit

    Внутренний отступ

    padding-top padding-right padding-bottom padding-left

    | inherit

    Внутренний отступ по заданной стороне

    position

    static | relative | absolute | fixed | inherit

    Позиционирование элемента

    right

    | | auto | inherit

    Положение правой границы

    text-align

    left | right | center | justify | | inherit

    Выравнивание текстового блока

    text-decoration

    none | [ underline || overline || line-through || blink ] | inherit

    Текстовые эффекты

    text-indent

    | | inherit

    Абзацный отступ

    text-transform

    capitalize | uppercase | lowercase | none | inherit

    Начертание текста

    top

    | | auto | inherit

    Положение верхней границы элемента

    vertical-align

    baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit

    Вертикальное выравнивание в пределах блока

    visibility

    visible | hidden | collapse | inherit

    Управление видимостью элемента

    white-space

    normal | pre | nowrap | inherit

    Управление пробелами между словами

    width

    | | auto | inherit

    Ширина элемента

    z-index

    auto | | inherit

    Порядок перехода по клавише Tab




    Предыдущий:

    Следующий: