Синтаксис CSS. Правила CSS

CSS состоит из трех частей: селектора, свойства и значения:

селектор {свойство: значение}

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

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

   p {font-size: 75%}

2. Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:

   h1 {font-family: "lucida calligraphy"}

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

   table { font-family: arial, "sans serif"; border-style: dotted}

4. Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:

   h2 { font-family: arial; margin-right: 20pt; color:#ffffff }

5. При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом sans serif:

   p,table,li { font-family: "sans serif"; }

Селектор класса (class)

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

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

h1.stepleft {margin-left: 10pt} h2.stepright {margin-left: 20pt}

Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:

Заголовок с внешним отступом 10 пунктов.

Заголовок с внешним отступом 20 пунктов.

В то же время не допускается следующее определение атрибута class :

< h1 class="stepleft" h2 class="stepright">,

т.е. можно определить только один атрибут class

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

Left {margin-left: 40pt}

В следующем примере все элементы HTML, имеющие class="left" , будут иметь внешний отступ, равный 40 пунктам.

В следующем коде элементы table и p имеют class="left" . Это означает, что оба элемента будут следовать правилам в селекторе ".left":

Эта таблица будет иметь внешний отступ, равный 40 пунктам.

Этот параграф будет иметь внешний отступ, равный 40 пунктам.

Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.

описание css основы css html css dvd region css free

основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css

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

1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта.

текст красного цвета

2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование дескриптора

текст красного цвета

3. Связанные (link) стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением.css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах.

текст красного цвета

style.css должен содержать:

p {color : red}

основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css

основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css

основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css

Селекторы.

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

body { color : blue}

Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми:

h1, p, h2 {font-size : 12px}

Вместо селекторов можно использовать маску *. В данном примере стиль с определенным кеглем шрифта применяется ко всем находящемся на странице дескрипторам:

* { font-size : 14pt}

Другим символом маски является знак >. Таким образом, браузеру дается указание искать дочерние селекторы в пределах определенного родительского. В данном примере стиль применяется только к элементам LI спискам OL:

ol > li {list-style-type : decimal}

Используя селекторы классов, можно к одному и тому же дескриптору применять разные стили. После общего селектора следуют точка и имя класса, и стиль применяется тому дескриптору, чей атрибут CLASS соответствует этому имени. В следующем примере стиль применяется ко всем дескрипторам H2, у которых атрибут CLASS равен "myBlue":

h2.mybule {background-color : bule}

у этого заголовка синий фон

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

#ducie {border-color : yellow}
Псевдоклассы.

Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для дескриптора P псевдокласс:first-letter, в котором устанавливаете различные стили:

p:first-letter { float : right; font-size : 2em; color : red;}

В CSS2 определяются следующие псевдоклассы:

:first-child -первый дочерний элемент другого элемента;
:link - еще не посещенные ссылки;
:visited - посещенные ссылки;
:hover - элемент, над которым в настоящее время находится курсор;
:active - активный в данный момент элемент;
:focus - элемент, имеющий фокус ввода;
:lang - этот псевдокласс определяет текущий язык;
:first-line - первая формированая строка абзаца;
:first-letter - первая буква абзаца;
:before - определяет содержимое перед элементом;
:after - определяет содержимое после элемента.

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

Правила CSS

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

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

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

• Далее следует блок объявлений , который начинается с открывающей фигурной скобки { и заканчивается закрывающей } , между фигурными скобками указываются форматирующие команды (объявления), которые используются браузером для стилизации выбранного селектором элемента. В блоке может быть указано сколько угодно объявлений. Сам блок объявлений так же называют просто стилем .
• Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание ";" можно только в конце последнего объявления перед закрывающей фигурной скобкой.
• Свойство - это команда форматирования, определяющая конкретный стилевой эффект для элемента. Само свойство представляет из себя слово или несколько написанных через дефис слов. Каждое свойство имеет свой предопределенный набор значений. После имени свойства указывается двоеточие, которое отделяет название свойства от допустимого значения.

Оформление кода

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

В примере представлен CSS-код, в котором используются пробельные символы:

P { color: blue; font-size: 12px; }

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

P{color:blue;font-size:12px;}

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

Синтаксис CSS

В этой главе:

Правила CSS

Пробельные символы

CSS комментарии

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

Правила CSS

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

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

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

Далее следует блок объявлений , который начинается с открывающей фигурной скобки { и заканчивается закрывающей } , между фигурными скобками указываются форматирующие команды (объявления), которые используются браузером для стилизации выбранного селектором элемента. В блоке может быть указано сколько угодно объявлений. Сам блок объявлений так же называют просто стилем .

Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание ";" можно только в конце последнего объявления перед закрывающей фигурной скобкой.

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

Пробельные символы

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

В примере представлен CSS-код, в котором используются пробельные символы:

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

CSS комментарии

Комментарий в CSS начинается с символов /* и заканчивается символами */ и может занимать несколько строк, его содержимое не влият на работу кода и игнорируется браузерами.

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

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

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

Вначале указывается имя селектора, например, div , это означает, что все стилевые параметры будут применяться ко всем элементам