Css для чего используется. Что такое CSS, подключение CSS файла

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

Определение

CSS является аббревиатурой от английского что в переводе на русский значит "каскадные таблицы стилей". Как таковым отдельным языком программирования CSS нельзя считать, так как он не имеет значения без документов, построенных на HTML или XHTML.

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

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

Сущность

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

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

Применение

Использовать каскадные стили можно тремя способами:

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

  Атрибут type="text/css" , ранее обязательный для тега .........

  Серый цвет текста во всех абзацах Web-страницы

  РЕЗУЛЬТАТ:

  Серый цвет текста во всех абзацах Web-страницы

  Серый цвет текста во всех абзацах Web-страницы

  Внешние (связанные) стили

  Внешние (связанные) стили определяются в отдельном файле с расширением css . Внешние стили позволяют всем страницам сайта выглядеть единообразно.

  Для связи с файлом, в котором описаны стили, используется тег , расположенный в контейнере ... .

  В этом теге должны быть заданы два атрибута: rel="stylesheet" и href , определяющиЙ адрес файла стилей.

  Пример

  ......... ......... .........

  Подключение стилей

  Правило подключения глобальных и внешних стилей состоит из селектора и объявлений стиля .

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

  P { text-indent: 30px; font-size: 14px; color: #666; }

  Объявление стиля – это пара свойство CSS: значение CSS .

  Например: color: red

  При внутреннем подключении стиля правило CSS, которое является значением атрибута style , состоит из объявлений стиля, разделенных точкой с запятой. Например:

  Селекторы CSS

  Селектор	Описание	Подробнее
  *	Любой элемент
  E	Элемент, определенный тегом E
  E#myid	Элемент E с идентификатором "myid"
  E.myclass	Элемент E класса "myclass"
  E	Селектор существования атрибута
  E	Селектор равенства атрибута
  E	Селектор атрибута со списком значений	Селекторы атрибутов
  E	Селектор префикса атрибута
  E	Селектор суффикса атрибута
  E	Селектор подстроки атрибута
  E:link	Элемент E – еще не посещенная пользователем ссылка	Динамические псевдоклассы
  E:visited	Элемент E – уже посещенная пользователем ссылка	Динамические псевдоклассы
  E:hover	Элемент E при наведении на него указателя мышки	Динамические псевдоклассы
  E:active	Элемент E, активированный пользователем	Динамические псевдоклассы
  E:focus	Элемент E в фокусе	Динамические псевдоклассы
  E:target	Элемент E, который является целью ссылки	Целевой псевдокласс
  E:lang	Элемент E, написанный на указанном языке	Псевдокласс языка
  E:enabled	Элемент E – доступный элемент формы	Псевдоклассы состояний
  E:disabled	Элемент E – недоступный элемент формы	Псевдоклассы состояний
  E:checked	Элемент E – включенный флажок или переключатель	Псевдоклассы состояний
  E:indeterminate	Элемент E – неопределенный флажок или переключатель	Псевдоклассы состояний
  E:root	Элемент E, корень документа	Структурные псевдоклассы
  E:nth-child(n)	Элемент E, n-й ребенок родительского элемента	Структурные псевдоклассы
  E:nth-last-child(n)	Элемент E, n-й ребенок родительского элемента, считая с конца	Структурные псевдоклассы
  E:nth-of-type(n)	n-й элемент типа E	Структурные псевдоклассы
  E:nth-last-of-type(n)	n-й элемент типа E, считая с конца	Структурные псевдоклассы
  E:first-child	Элемент E, первый дочерний элемент родителя	Структурные псевдоклассы
  E:last-child	Элемент E, последний дочерний элемент родителя	Структурные псевдоклассы
  E:first-of-type	Первый элемент типа E	Структурные псевдоклассы
  E:last-of-type	Последний элемент типа E	Структурные псевдоклассы
  E:only-child	Единственный у родителя дочерний элемент	Структурные псевдоклассы
  E:only-of-type	Единственный у родителя элемент типа E	Структурные псевдоклассы
  E:empty	Элемент E, не содержащий дочерних элементов	Структурные псевдоклассы
  E:not(X)	Элемент E, который не соответствует простому селектору X	Псевдокласс отрицания
  E::first-line	Первая строка элемента E	Псевдоэлементы
  E::first-letter	Первая буква элемента E	Псевдоэлементы
  E::before	Содержимое до элемента E	Псевдоэлементы
  E::after	Содержимое после элемента E	Псевдоэлементы
  E::selection	Выделение в элементе E	Псевдоэлементы
  E F	Элемент F, который находится внутри элемента E
  E > F	Элемент F, который находится непосредственно внутри элемента E
  E + F	Элемент F, который следует сразу после элемента E
  E ~ F	Элемент F, который следует после элемента E

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

  Универсальный селектор соответствует любому элементу html-документа.

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

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

  * { margin: 0; padding: 0; }
  

  В некоторых случаях символ "звёздочка" (*) может быть опущен:
  *.myclass и .myclass эквиваленты,
  *#myid и #myid эквивалентны

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

  В качестве селектора может выступать любой html-тег, для которого определяются правила стилевого оформления. Например:

  H1 {color: red; text-align: center;}

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

  H1, h2, h3, h4 {color: red; text-align: center;}

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

  HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id . Например:

  ...

  Значение идентификатора должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

  Значения всех атрибутов id в html-документе обязаны быть уникальными. Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным.

  В CSS-коде селектор идентификатора обозначается знаком "решетка" (#). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" (#) обычно опускают:

  Div#a1 {color: green;}

  аналогично

  #a1 {color: green;}
  

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

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

  Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например:

  ...

  Имя класса должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

  Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе.

  В CSS-коде селектор идентификатора обозначается знаком "точка" (.). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" (.) опускают:

  I.green {color: #008000;} b.red {color: #f00;} .blue {color: #00f;}

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

  ...

  Если некоторые из этих классов содержат одинаковые свойства стиля, но с разными значениями, то будут применены значения стиля класса, который в CSS-коде расположен ниже.

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

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

  
  h1 {color: #800000;} /* элемент h1, у которого есть атрибут title */
  input { border: 1px solid #ссс; padding: 4px 6px; width: 300px; }
  a { text-decoration: none; border-bottom: 1px solid #06c; color: #06c; }
  span { display: inline-block; background-image: url("/img/icon_sprite.png"); }
  a, a { background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; }
  { display: block; float: left; width: 280px; }
  

  Между именем тега и квадратной скобкой ([) не должно быть пробела!

  
  

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

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

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

  Один из самых часто используемых комбираторов – контекстный селектор.

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

  Пример

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  РЕЗУЛЬТАТ:

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

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

  Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" (>).

  Пример

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  РЕЗУЛЬТАТ:

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

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

  Соседний селектор определяет знак "плюс" (+), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами.

  Пример

  РЕФЛЕКСОТЕРАПИЯ

  РЕЗУЛЬТАТ:

  РЕФЛЕКСОТЕРАПИЯ

  Смежные селекторы

  Смежный селектор определяет знак "тильда" (~), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым (необязательно непосредственно).

  Пример

  ---

  РЕФЛЕКСОТЕРАПИЯ

  "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

  ---

  Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

  РЕЗУЛЬТАТ:

  РЕФЛЕКСОТЕРАПИЯ

  "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

  Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

  
  
  .