CSS-Cascading Style Sheets (Каскадируемые таблицы стилей). Каскадируемые
значит накладывающиеся друг на друга (т.к. таблица стилей может быть не одна
и связана со страницей также нескольками способами, каждый из которых имеет
свой приоритет, то браузер в определенной последовательности, продиктованной
этими самыми приоритетами, накладывает таблицы на страницу(-ы) и выводит результат)
Рассмотрим пример:
p {color: green; background: white} - правило CSS
Он означает, что содержимое элементов <p> в странице (текст абзацев) будет
выводиться зеленым цветом, на белом фоне.
Таблица стилей состоит из одного или несколько правил CSS. Каждое правило
состоит из 2 частей: селектора (p) и описания (все что в фигурных скобках).
Описание в свою очередь состоит из свойства (например, color) и значения
(например green).
Внешняя таблица стилей (Связанная)-текстовый документ, существующий отдельно от
(x)HTML-страниц, которыми он управляет. Связывается со страницами с помощью элемента link или style в
заголовке страницы (head):
<head>
...
<link rel="stylesheet" media="all"
type="text/css" href="http://site.wen.ru/main.css" />
...
</head>
Или:
<head>
...
<style media="all" type="text/css">
@import url("http://site.wen.ru/main.css")
</style>
...
</head>
В данных случаях media="all" означает что таблица стилей
предназначена для всех устройств, type="text/css" объявляет
MIME-тип документа, ну а ссылка в обоих случаях на css файл.
Вложенная таблица стилей - таблица стилей включена в документ . Вот пример
использования:
<head>
...
<style media="all" type="text/css">
p {text-align: center; color: blue; }
h5 {text-align: left; color: aquamarine; }
</style>
...
</head>
Этот тип css не так экономен как внешний (но он по своему полезен-см. далее)...но
существует еще более неэкономный:
Последовательая (встроенная) таблица стилей - применяется к отдельным элементам,
пример:
<body>
...
<h4 style="color: red;">Заголовок</h4>
<img style="border: 2px;" alt="photo"
src="/img.jpg" /> ...
</body>
Как вы понимаете этот тип css вообще не экономит разметку нашей страницы и он
не чем не лучше того же font, но опять же он по своему полезен. Чем
же?Смотрим дальше
Допустим вы с помощью внешней таблицы прописали цвет текста и он действует
на всех страницах сайта (один файл css связан со всеми страницами). А тут
вдруг понадобилось, чтобы именно в этой страничке цвет текста был другим. И
что же теперь для одной страницы делать отдельный файл css? Нет! С помощью
вложенного стиля прописываем нужный цвет текста в этой страничке и
все! Вложенные стили имеют более высокий приоритет по сравнению с внешним листом стилей и поэтому подавляет его, но только там где "возник спор"
между ними - остальные правила внешнего листа стилей вложенный не трогает.
Встроенный (последовательный) лист стилей подавляет и внешний и вложенный
лист стилей. Он полезен, когда нужно присвоить определенное свойство одному
элементу страницы.
Стоит упомянуть о приоритетах по источнику:стиль определенный ближе к тегу имeeт
больший пpиopитeт, чем стиль oпpeдeлeнный дaльшe.
Также и стиль класса в связке с каким-либо тегом, приоритетнее стиля этого тега
Некоторые полезные приемы в css:
h1,h2,h3,p,strong {color: green; font: 12pt bold} - таким образом можно
облегчить разметку страницы, несколько селекторов и одно описание!
p>b {color: green; font: 12pt bold} - это значит что данное описание нужно
применять к элементам b, принадлежащим элементу p (вложенным в элемент p).
* {color: green; font: 12pt bold} - описание будет применено ко всем
элементам страницы
p img {margin: 0} - контекстный селектор, описание будет применено ко всем
элементам img входящими (являющимся дочерними) в элемент p, еще пример:
html p b {color: green; font: 12pt bold} - всем элементы b, входящим в элемент
p, который является дочерним элемента html, будет присвоено данное описание
Стоит упомянуть что селекторами являются также селекторы id и class,
рассмотрим пример:
...
.gh1 {color: green; font: 12pt bold}
#tg1 {color: red; font: 12pt bold}
...
.gh1-это селектор класса (класс), чтобы его задействовать делаем так:
<b class="gh1">text</b>
#tg1-это селектор id (id), чтобы его задействовать делаем так:
<b id="tg1">text</b>
Отличаются они тем, что id можно применить в странице единожды, а class неограниченное количество раз к различным тегам на странице.
Все вышеизложенные приемы можно применять к селекторам class и id. Так же можно комбинировать эти приемы