Основы CSS

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

Грубо говоря, HTML - это каркас страницы, а CSS - это ее декорирование.

Для начала стоит разобраться, как взаимодействуют HTML и CSS внутри Системы Управления.

Существует три способа подключения стилей CSS к документу HTML.

Подключение CSS. Способ 1: внутри элемента

Сразу оговоримся, этого способа по возможности стоит избегать, поскольку крайне нежелательно, чтобы HTML и CSS присутствовали в одном документе.

Итак, суть данного способа в том, что Вы прописываете стили прямо внутри тега HTML с помощью атрибута style.

Чтобы было нагляднее, представим пример:

<p style="color: blue">содержимое абзаца</p>

В данном примере в документе HTML у нас есть абзац (он находится внутри тегов <p> и </p>). Чтобы задать стиль конкретно для этого абзаца, мы дописали прямо в теге атрибут style="color: blue", таким образом, весь текст в данном абзаце будет выделен синим цветом.

Подключение CSS. Способ 2: внутри документа

Данный способ тоже не является оптимальным, так как в нем Вам тоже придется вставлять стили CSS в документ HTML.

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

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

Опять же для простоты приведем пример:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<style type="text/css">
p { color: yellow; }
a { color: blue; }
</style>
...

Как видите, в данном примере мы прямо в начале файла HTML прописали тег <style> и внутри него задали, что все абзацы должны быть выделены желтым цветом (p { color: yellow; }), а все ссылки в тексте синим (a { color: blue; }).

Подключение CSS. Способ 3: внешние стили (рекомендуемый)

Способ позволяет полностью разделить HTML и CSS. Внешние стили используются для подключения одновременно ко многим страницам сайта.

Чтобы подключить CSS подобным образом, необходимо:

1. Создать отдельный файл с расширением .css, в котором будут перечислены все необходимые стили (в нашем примере файл будет называться file.css). Пример содержимого файла:

p
{ color: yellow; }
a
{ color: blue; }

Тут, как и предыдущем примере, мы задали желтый цвет для абзацев и синий для ссылок.

2. Загрузить полученный файл в систему, воспользовавшись инструкцией по ссылке.

3. Прописать в нужных HTML-файлах в теге <head> ссылку на данный файл с помощью тега <link>:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<link rel="stylesheet" type="text/css" href='file.css' />
...

В данном примере мы прописали для HTML-документа, что ему следует использовать стили, прописанные в файле file.css (<link rel="stylesheet" type="text/css" href='file.css' />). Таким образом, для данной страницы все оформление будет тянуться из того самого файла, что мы сформировали и загрузили в систему.

Селекторы

Теперь, когда мы рассмотрели, как подключить файл CSS, попробуем разобраться, как его сформировать.

Чтобы прописать стиль для какого-либо элемента, Вам будет необходимо сперва задать, какой именно элемент в HTML-файлах должен использовать эти стили. Указание на тип элемента и будет селектором. К примеру, в качестве селектора Вы можете использовать имя элемента (например, <h1> или <a>), а также значение атрибута (например, id или class).

Приведем пример (как Вы уже могли заметить в стилях не нужно прописывать угловые скобки):

p { color: yellow; }

Тут в качестве селектора выступает "p" - это значит, что для всех элементов с тегом <p> будет применен стиль, заданный в скобках (желтый цвет текста).

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

Все селекторы условно можно поделить на группы:

  • Селекторы типа. Как видно из названия, указывают на применение стилей к элементам определенного типа, например, к элементам с тегом <a> или <div>. Таким образом, примерный вид кода с селектором типа будет выглядеть так (в нашем примере селектор задает стили для элементов с тегом <a> - то есть для всех ссылок в HTML-документе, а в фигурных скобках должны быть прописаны нужные стили):
a { ... }
  • Селекторы класса. Как мы писали в инструкции к HTML, Вы можете прописать для определенных тегов атрибут class. Соответственно, в файле CSS Вы можете прописать стили для элементов с данным классом. Это более конкретный селектор, поскольку позволяет применить стили не только к элементам одного типа, но и к разным элементам, для которых прописан один и тот же class. К примеру, у Вас на страницах для разных элементов - скажем, для некоторых тегов <p> и некоторых ссылок <a> прописан class="forexample" (в файле HTML это будет выглядеть как <p class="forexample">содержимое абзаца</p>). Теперь Вы хотите задать определенные стили для всех элементов с этим стилем (шрифты, цвета и пр.). Для этого Вам необходимо прописать в файле CSS примерно следующее (в фигурных скобках опять же должны быть вписаны нужные Вам стили):
.forexample { ... }
  • Селекторы идентификатора. Поскольку идентификатор определяет только один уникальный элемент (в HTML это атрибут id), подобный селектор позволяет точечно применить стиль к отдельному элементу. Например, Вы пометили в HTML какой-либо абзац атрибутом-идентификатором unique (в коде страницы это будет <p id="unique">содержимое абзаца</p>) и теперь хотите задать стили конкретно для этого абзаца. Пропишите в CSS:
#unique { ... }

Свойства

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

Свойства пишутся внутри фигурных скобок, перед двоеточием.

Перечень возможных свойств довольно обширен. Наиболее часто используемые это:

  • background - позволяет установить свойства фона (например, background-color - цвет фона; background-image - фоновая картинка для элемента),
  • color - цвет элемента,
  • font-size - размер шрифта,
  • height и width - высота и ширина элементов.

Например, если мы хотим задать для абзацев определенный размер шрифта и цвет текста, то в файле CSS прописываем:

p {
 color: ...;
 font-size: ...;
}

С полным перечнем свойств CSS Вы можете ознакомиться по ссылке.

Значения

Значения - это именно то, что идет после двоеточия. Иными словами, сперва мы указываем, к чему применить стили (селектор), потом указываем какие параметры изменить (свойства) и уже затем указываем значения для этих свойств.

Возьмем тот же пример с шрифтами и цветами для абзацев и теперь укажем значения в свойствах (красный цвет и размер шрифта в 20 пикселей):

p {
 color: red;
 font-size: 20px;
}

Каскадность и приоритетность

Пара особенностей, которые стоит учитывать при работе с CSS - каскадность и приоритетность.

О каскадности стоит сказать, что в CSS все стили идут каскадом сверху вниз, отсюда следует, что Вы можете добавлять другие стили и переписывать их. Для простоты снова приведем пример: ранее в файле стиля для всех ссылок были прописаны синий цвет текста и размер шрифта в 12 пикселей. Теперь, если мы добавим в конце файла новое значение и переопределим цвет текста на зеленый - все ссылки в файле станут зеленого цвета.

a {
 color: blue;
 font-size: 12px;
}
a {
 color: green;
}

Грубо говоря, то значение цвета, что указано ниже - будет обладать приоритетом и именно оно и применится к элементам (размер шрифта в этом случае останется 12, поскольку его не переопределяли).

Также стоит отметить, что в CSS стили наследуются от родительских тегов к дочерним. Проще это продемонстрировать на примере:

body { font-family: Calibri; }
p { font-size: 14px; }
em { color: yellow; }

Тут для родительского тега <body> задан шрифт Calibri, затем для абзацев в тексте указан размер 14 пикселей и для курсивных текстов задан цвет желтый. В данном случае тег <p> унаследует шрифт Calibri, а тег <em> шрифт Calibri и размер шрифта в 14 пикселей.

Однако, если мы пропишем для дочерних тегов собственные стили (собственный шрифт и размер) - приоритетом будут обладать они:

body { font-family: Calibri; }
p { font-size: 14px; font-family: Arial; }
em { color: yellow; font-family: Comic Sans; font-size: 16px; }

В этом случае у абзацев уже будет свой шрифт Arial размером 14 пикселей, а у курсивных текстов не только свой шрифт Comic Sans, но и размер шрифта будет отличным от другого текста в том же абзаце - 16 пикселей и желтого цвета.

Комбинация селекторов

Для удобства и сокращения кода CSS Вы можете группировать и комбинировать селекторы.

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

К примеру, если Вы хотите, чтобы абзацы и заголовки h2 и h3 были написаны одним шрифтом и цветом и отличались только лишь размером, Вы можете сперва сгруппировать элементы <p>, <h2> и <h3> и указать для них шрифт и цвет, и уже ниже для каждого элемента указать отдельно размер шрифта. Выглядеть это будет примерно следующим образом:

p, h2, h3
{ font-family: Georgia, 'Times New Roman', Times, serif;
color: #333; }
p {font-size:1.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }

Разберем еще один, более сложный пример комбинации селекторов. Например, у Вас есть страница, в которой абзацы лежат внутри элемента с классом brightstyle, но при этом для отдельных абзацев прописан собственный стиль dullstyle, и Вы хотите для всех абзацев brightstyle установить красный цвет текста, а для тех абзацев, у которых свой класс dullstyle - серый цвет текста (иными словами, в HTML у Вас, скажем, есть <div> и для него прописан класс brightstyle - <div class="brightstyle", внутри него несколько абзацев <p>, а также несколько абазцев с собственными классами <p class="dullstyle">...</p>). Представим, как это будет выглядеть в CSS:

.brightstyle p {
color: red;
}
.brightstyle p.dullstyle {
color: gray;
}

Тут стоит обратить внимание на то, что крайний справа селектор будет всегда считаться основным, а все стоящие слева от него - уже уточняющими.

Иными словами, сперва в нашем примере описано, что для всех абзацев <p> (это основной селектор) с классом brightstyle (это уже уточнение) будет применяться красный цвет.

Затем указано, что для всех элементов с классом dullstyle (основной селектор), являющихся абзацами <p>, лежащими внутри класса brightstyle (это уточнения) будет применен серый цвет.

Также стоит заметить, что на применение стилей влияет наличие пробелов.

В нашем примере есть пробел между ".brightstyle" и "p.dullstyle", но нет пробела между "p" и ".dullstyle".

Отсутствие пробела указывает на то, что цвет будет применен только к абзацам <p> с классом .dullstyle, таким образом объединяя 2 селектора одного элемента, повышая специфичность селектора. Если просто убрать пробел - запись p .dullstyle будет означать последовательность селекторов, то есть читать можно будет так - элементы с классом .dullstyle внутри абзаца <p>. Если бы мы убрали пробел и селектор абзаца <p> - цвет применился бы ко всем элементам с классом .dullstyle, а не только к абзацам  <p>, таким образом снизится специфичность селектора.

Дополнительная информация

Это лишь основы CSS, позволяющие понимать общие принципы работы файлов стиля, их взаимодействие с HTML и прочие базовые нюансы верстки страниц сайта.

Чтобы узнать больше о CSS, Вы можете обратиться к тематическим сайтам и инструкциям, таким как:

Была ли статья вам полезна?
Укажите, пожалуйста, почему?
Комментарий