Cascading Style Sheets (CSS) - каскадные таблицы стилей. Таблицы стилей – отделение дизайна веб-страниц от ее структуры и содержания.
Код CSS – это набор инструкций для браузера, для передачи параметров где и в каком виде отображать элементы HTML-страницы (теги XHTML/HTML и их содержимое). С помощью CSS можно работать с шрифтами, цветом, фоновыми изображениями, строками, шириной, высотой, позиционированием элементов и многими другими свойствами.
Способы включения CSS в документ
Есть три варианта - в HTML тэге style, в атрибуте тега, или в отдельном файле. Теперь подробнее о них.
Код CSS можно писать прямо в HTML-документе используя тег <style>, например:
<style>
.example {
color:#333;
background-Color:#eee;
}
</style>Такой вариант подойдет, если блоки с определенными стилями будут присутствовать только на одной странице, или только на этой самой странице есть некое отличие от общих стилей сайта.
Еще код можно хранить в отдельном файле с расширением .css, а подключать файл внутри элемента head c помощью элемента link (Если стилей много, это лучший вариант. Все остальное - скорее в качестве исключения, необходимости), например:
<link rel="stylesheet" type="text/css" href="test.css"></link>Здесь небольшое уточнение. Подключать файл со стилями можно не только в head, но в любом месте на странице, что делается не так уж редко (более того, часто следуя рекомендациям по оптимизации скорости загрузки).
А сразу об этом я не написал потому, что чем дальше на странице будут подключены стили, тем с одной стороны быстрее загрузится содержимое (и уже можно читать текст), с другой это самое содержимое не будет иметь никакого оформления. Получается, у пользователя сначала загрузилась страница, он ее уже видит, дальше на странице происходит "некая магия" и ее вид значительно меняется. Польза от быстрой загрузки текста при этом сомнительна, но при этом "глаз режет"
Так же инструкции css можно писать прямо в тэге с помощью атрибута style, например:
<p style="color:red;">Красный текст</p>Такой вариант является крайне неудобным, если у нас есть много страниц с блоком, имеющим подобное оформление, более того на каждой странице их может быть несколько, в таких случаях стили лучше вынести отдельно, присвоив блокам идентификаторы, либо классы (об этом немного ниже).
Синтаксис CSS
Перед тем, как разбирать синтаксис, остановимся на важном понятии - селекторах. Селектор – это элемент дескрипторов, задаваемый вначале при определении стилей. Селектор сообщает браузеру, где нужно применить стиль. Это может быть имя тега и стили будут применены ко всем соответствующим тегам. Это могут быть классы и идентификаторы элементом (об этом ниже, но если совсем кратко, ID - уникален для всей страницы, по классам - никаких ограничений). За селектором следует описание стиля, которое заключается в фигурные скобки. В описании указываем свойство,через ":" его значение. Стили разделяются ";". Пример, в котором в качестве селектора выступает тег "p":
p {
color:#656565;
}Селекторы можно группировать, разделяя их запятой, при этом указанные свойства будут применены ко всем перечисленным селекторам:
h1, p, ul {
font: 13px/15px Tahoma;
}Используя классы можно задавать стиль нескольким элементам, которым принадлежит данный класс. Класс селектора записывается в виде ".class" ( точка, после точки следует имя класса). В следующем примере, всем тегам с классом red будет применен цвет текста - красный:
.color_red {
color:red;
}А в следующем примере все div с классом border будут обведены черной рамкой шириной в пиксель:
div.border {
border:1px solid #000;
}Также селектор можно определять с помощью атрибута id, пользуясь символом #. Id может быть применен только к одному тегу на странице (уникален). В следующем примере стиль будет применим к тегам с атрибутом id "border":
#border {
border:1px solid red;
}Стили тегу можно задать использую его атрибуты, например:
input[type="submit"] {
background-color :black;
color:#fff;
}CSS позволяет пpимeнить нeкoтopый cтиль, тoлькo тeм тeгaм, кoтopыe нaхoдятcя внутpи дpугих (Кoнтeкcтныe ceлeктopы). Напримep:
ul li {
/*Укажем поля для элементов списка*/
padding:5px 0px;
}
p span.red {
/*Сделаем красным цвет текста у тега с определенным классом, внутри тега p*/
color:red;
}А еще в этом примере я показал, как сделать комментарий в CSS, /*выделено так*/
Дoчepниe, cecтpинcкиe селекторы - примененяем стили для элементов определенного уровня вложенности, или следуюших за определенными элементами.
div > a {font-size:14px;}
div + a {font:bold 14px/16px Tahoma;}B первом пpимepe cтиль будeт пpимeнятьcя кo вceм тeгaм a, являющимcя дoчepними пo oтнoшeнию именно к тeгу div, но не к его другим дочерним элементам. Второй пpимep показывает тип cмeжнoгo ceлeктopa, дaнный cтиль будeт пpимeнeн к тeгу a, cлeдующeму нeпocpeдcтвeннo зa div.
Псевдоклассы и псевдоэлементы
Псевдоклассы добавляются к селекторам для определения их состояния при выполнении некоторых действий пользователя (:hover, :active, :focus, :visited), для обращения к определенным элементам среди подобных (например, li:nth-child(4) - четвертый элемент списка). Псевдоэлементы используются для добавления дочерних элементов, не прописанных в HTML, но способных отображаться на странице как и прочие элементы, которые есть в HTML - ::before, ::after
Блочная верстка
Блочная (css) верстка пришла на смену гораздо менее удобной табличной. Суть - содержимое сайта разбивается на блоки, блокам задаются различные стили, параметры, для чего используются каскадные таблицы стилей (css) - отдельный файл с соответствующим расширением. Можно задавать так же в теге <head>, или прописывать для каждого элемента в отдельности.. Однако вариант с использованием отдельного файла наиболее предпочтителен так как значительно уменьшает размер страницы в сравнении с другими способами.
К примеру, 4 блока - прямоугольники, два из них (2 и 3) расположены внутри первого (1), еще один блок (4) - внутри блока 2 (номер блока указан в классе):
<div class="b-1">
<div class="b-2">
<div class="b-4"></div>
</div>
<div class="b-3"></div>
</div>Для наглядности выделил блоки: 1 - красный, 2 - синий, 3 - фиолетовый, 4 - зеленый:
Что бы изменить расположение и внешний вид блоков, им присваиваются различные стили (свойства) - отступы, поля, границы, размеры, выравнивание и др. Для начала присвою блоку 2 стили непосредственно внутри тега:
<div class="b-1">
<div class="b-2" style="float:left; padding-top:20px; padding-right:25px; padding-bottom:20px; padding-left:25px; margin-top:20px; margin-right:25px; margin-bottom:20px; margin-left:25px; border:1px solid; background:#D6E9C6">
<div class="b-4"></div>
</div>
<div class="b-3"></div>
</div>Здесь были заданы отступы (margin), поля (padding), выравнивание (float), границы (border), фон (background). В итоге получим примерно следующее:
В примере вынесу стили в отдельный тег, блоку 2 присвою идентификатор:
<div class="b-1">
<div id="block" class="b-2">
<div class="b-4"></div>
</div>
<div class="b-3"></div>
</div>
<style>
#block {
float:left;
padding-top:20px;
padding-right:25px;
padding-bottom:20px;
padding-left:25px;
margin-top:20px;
margin-right:25px;
margin-bottom:20px;
margin-left:25px;
border:1px solid;background:#D6E9C6
}
</style>Прописывая стили, рекомендую максимально избегать переносов на новую строку и отступов, таким образом заметно уменьшается вес таблицы стилей. Идеально - весь код вытянутый в одну строку, но такой вариант не позволит нормально его редактировать, поэтому ищем компромисс между размером загружаемого файла/страницы и удобством редактирования.
CSS код выше можно записать так:
#block {
float:left;padding-top:20px;padding-right:25px;padding-bottom:20px;padding-left:25px;
margin-top:20px;margin-right:25px;margin-bottom:20px;margin-left:25px;
border:1px solid;background:#D6E9C6
}
Размер меньше, удобство редактирования не потеряно совсем.
CSS, стандартные свойства для тэгов от браузера, их переопределение
В браузерах по-умолчанию заложены некоторые свойства для многих тегов, используемых в верстке. Т.е. даже не применяя никаких стилей, а только сделав HTML разметку, при просмотре страниц сразу можно заметить, что заголовки будут отличаться от остального текста, у парагрофов, списков будут отступы и т.д..
Узнать какие свойства браузер присвоил элементу можно узнать в инструментах разработчика, которые есть во всех популярных браузерах. Вот здесь об этом подробнее.
Не буду перечислять абсолютно все тэги, которым браузер задает свои свойства, но остановлюсь на некоторых примерах, когда про свойства от браузера можно просто забыть, не уделить должного внимания, как итог - что то может выделяться из общего стиля сайта.
Напиример, сложно будет забыть назначить свои стили для заголовков, но легко забыть про input:focus.
В качестве первого примера, шрифт для button, textarea, input. Эти элементы не наследуют стиль и (или) размер шрифта, указанный для body (как основной для сайта).
Здесь для body задан стиль шрифта, при этом даже визуально видны отличия для разных элементов. Если параграф (p) наследует стиль, то button, textarea, input используют стили из пользовательской таблицы стилей (браузера). Эти тэги не единственные, просто для примера, почему важно обращать внимание, как отображаются различные элементы.
