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

11 cssCSS - это набор селекторов и свойств селекторов. К селекторам могут относиться как и сами теги, так и их классы и идентификаторы id. Хорошим стилем верстки считается, когда все стили выносятся в отдельный файл с расширением .css (например, style.css).

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

<div class="myclass" >текст, со стилем myclass</div>
<div class="myid" >текст, со стилем myid </div>


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

<div id="id1" class="class1" > текст для форматирования </div>
<div class="class1 class2 class3" > еще текст </div>


Имена классов должны состоять из латинских символов (и начинаться только с них), а также цифр, дефиса и знака нижнего подчеркивания.

Для описания селектора в css файле пишем:

#id1 {color: blue;} - если это идентификатор;
.class1{color: red;} - если это класс;
div{color: green;} - если хотим, чтобы все теги div имели нужный стиль оформления.

 

Каскадность.

Если обобщить, то весь код в файле стилей имеет вид большого набора инструкций (правил) типа:

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

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

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

 

Приоритет селекторов.

Приоритет селекторов распределяется следующим образом:
стили, которые описаны в теге при помощи style, обладают наивысшим приоритетом — 1000;
селектор с идентификатором id — 100;
селектор с классом (псеводклассом) — 10;
селектор с именем тега — 1.

!!! Первые два способа записи селекторов с помощью style и id в профессиональной вёрстке сайтов мало приветствуются.

Пример расчета специфичности css-правил:

#first_id .class1 p - будет иметь вес 111,
.class1 .class2 ul - будет иметь вес 21,

Переопределить заданные стили, можно используя !important – оно дает стилю больший приоритет.

.yellstyle{
color:yellow !important;
}

 

Наследование селекторов.

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

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

Селектор может состоять из набора правил, которые перечисляются через пробел. Такие селекторы называют контекстными (вложенными), например:
div p { ... }
ul .pop { ... }
.navigation .menu a { ... }

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

div+p { ... }
ul + .pop { ... }
селектор1 + селектор2


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

В примере:
<ul>
  <li><p>...</p></li>
  <li><p>...</p></li>
</ul>
здесь <li> являются дочерними элементами (ближайшие элементы) и потомками, а <p> — потомки, но не  являются дочерними. В случае обращения к дочерним элементам селектор записывается следующим образом:
ul > li > span {...}