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>Так же инструкции 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>
Комментарии ()