Стили css: Основы CSS — Изучение веб-разработки

16.12.1971 Facebook Twitter LinkedIn Google+ Разное

Содержание

Основы CSS — Изучение веб-разработки

CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?

Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки — это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:

p {
  color: red;
}

Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles

.

Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

  1. Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между <head> и </head> тегами:
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Сохраните index.html и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:

Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

Анатомия набора правил CSS

Давайте взглянем на вышеупомянутый CSS немного более подробно:

Вся структура называется набором правил (но зачастую для краткости «правило»). Отметим также имена отдельных частей:

Селектор (Selector)
Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.
Объявление (Declaration)
Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
Свойства (Properties)
Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, color является свойством для элементов <p>). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.
Значение свойства (Property value)
Справа от свойства, после двоеточия, у нас есть 
значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color, помимо red).

Обратите внимание на важные части синтаксиса:

  • Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки ({}).
  • В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.
  • В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.

Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Выбор нескольких элементов

Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:

Разные типы селекторов

Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:

Имя селектораЧто выбираетПример
Селектор элемента (иногда называемый селектором тега или типа)Все HTML-элемент(ы) указанного типа.p
Выбирает <p>
ID селекторЭлемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.#my-id
Выбирает <p> или <a>
Селектор классаЭлемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице)..my-class
Выбирает <p> и <a>
Селектор атрибутаЭлемент(ы) на странице с указанным атрибутом.img[src]
Выбирает <img src="myimage.png"> но не <img>
Селектор псевдоклассаУказанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора.a:hover
Выбирает <a>, но только тогда, когда указатель мыши наведён на ссылку.

Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов (en-US).

Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл style.css, чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.

  1. Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент <link> где-нибудь внутри шапки вашего index. html (снова, в любом месте между тегами <head> и </head>). Это будет выглядеть примерно так:
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML-элементам используя свою собственную таблицу стилей.
  2. Затем, удалите существующее правило в вашем style.css файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.
  3. Добавьте следующие строки в нужное место, заменив строку placeholder актуальной font-family строкой, которую вы получили из Google Fonts. (font-family просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <html> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же font-size и font-family):
    html {
  font-size: 10px; 
  font-family: placeholder: здесь должно быть имя шрифта из Google fonts
}

    Примечание: Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.

  4. Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела (<h2> (en-US), <li>, и <p>). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
    h2 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:

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

Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:

  • padding, пространство только вокруг контента (например, вокруг абзаца текста)
  • border, сплошная линия, которая расположена рядом с padding
  • margin, пространство вокруг внешней стороны элемента

В этом разделе мы также используем:

  • width (ширину элемента)
  • background-color, цвет позади контента и padding элементов
  • color, цвет контента элемента (обычно текста)
  • text-shadow: устанавливает тень на тексте внутри элемента
  • display: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)

Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.

Изменение цвета страницы

Разбираемся с телом

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Теперь для <body> элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:

  • width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
  • margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
  • background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для <html> элемента, но не стесняйтесь и экспериментируйте.
  • padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
  • border: 5px solid black; — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.

Позиционирование и стилизация нашего заголовка главной страницы

h2 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента <h2> (en-US) (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0;.

Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.

Здесь, мы использовали одно довольно интересное свойство — это text-shadow, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

  • Первое значение пикселей задаёт горизонтальное смещение тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.
  • Второе значение пикселей задаёт вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.
  • Третье значение пикселей задаёт радиус размытия тени — большее значение будет означать более размытую тень.
  • Четвёртое значение задаёт основной цвет тени.

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

Центрирование изображения

img {
  display: block;
  margin: 0 auto;
}

В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент <body> является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.

Примечание: Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для <body> (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы <body> и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путём установки свойства width для <img> элемента меньшего значения (например 400 px;).

Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

Как структурирован CSS — Изучение веб-разработки

Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.

Первое, что мы рассмотрим, это три метода применения CSS к документу.

Внешняя таблица стилей

В статье ​Начало работы с CSS мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространённый и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.

Внешняя таблица стилей — это когда у вас есть CSS отдельным файлом с расширением .css, и ссылка на него из HTML-элемента <link>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

Файл CSS может выглядеть следующим образом:

h2 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Атрибут href элемента <link> должен ссылаться на файл в файловой системе.

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


<link rel="stylesheet" href="styles/style.css">


<link rel="stylesheet" href="styles/general/style.css">


<link rel="stylesheet" href="../styles/style.css">

Внутренняя таблица стилей

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента <style>, содержащейся внутри HTML <head>.

Таким образом, HTML будет выглядеть вот так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <style>
      h2 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

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

Встроенные стили

Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

Пожалуйста, не делайте этого! Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.

Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.

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

index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <p>Пишите сюда свой код</p>

  </body>
</html>

styles.css:

Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <body> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.

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

 

Читайте дальше и получайте удовольствие!

Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.

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

h2  
a:link  
.manythings  
#onething  
*  
.box p  
.box p:first-child  
h2, h3, .intro

Примечание: вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.

Спецификация

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

. special {
  color: red;
}

p {
  color: blue;
}

А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

<p>Какого же я цвета?</p>

В языке CSS есть правила, которые определяют, какое правило «выиграет» в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

p {
  color: red;
}

p {
  color: blue;
}

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

Попрактикуйтесь сами — добавьте два правила для параграфа p { . .. } в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

Понимание каскадов, или правил, улучшается с практикой. В статье Каскад и наследование я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.

Если говорить в общем, CSS строится на двух его составляющих:

Свойства 
Определяют, какую характеристику вы желаете изменить (например, font-size, width, background-color).
Значения 
Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.

На изображении внизу выделены свойство и его значение. Здесь свойство — color, а его значение — blue.

Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.

Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h2, другое для селектора p. Правило для h2 выделено.

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (:).

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

Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.

Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color; британский вариант colour не будет работать.

Функции

Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc(). Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:

<div><div>The inner box is 90% - 30px.</div></div>
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

В результате получим это:

Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!

В следующем примере будут различные значения для свойства <transform> rotate().

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn)
}

Результат этого кода будет:

Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:

До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского «at-rules»). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import:

Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.

Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.

Некоторые свойства вроде font, background, padding, border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

К примеру, это строка (комментарий не в счёт):


padding: 10px 15px 15px 5px;

делает то же самое, что и эти четыре, вместе взятые:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

или эти:

padding-block-start: 10px
padding-inline-end: 15px;
padding-block-end: 15px;
padding-inline-start: 5px;

в то время как строка:

background: red url(bg-graphic. png) 10px 10px repeat-x fixed;

делает то же, что и эти строки:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.

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

Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.

Комментарии в CSS начинаются с /* и окачиваются с */. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.



body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  
  body {
    font-size: 130%;
  }
}

h2 {font-size: 1. 5em;}



div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p{
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special.

Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.

Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.

В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h2 {
  font-size: 1. 5em;
}

div p,
#id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h2 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.

Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:

margin: 0 auto;
padding-left: 10px;

А такие объявления не действительны:

margin: 0auto;
padding- left: 10px;

Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.

Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — Как работает CSS — мы рассмотрим этот процесс.

Глава 2 CSS

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

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

Правила и таблицы стилей

Для того, чтобы начать пользоваться CSS не нужно даже писать таблицы стилей. Шестнадцатая глава расскажет, как ссылаться на существующие в Сети таблицы.

Существуют два метода создания таблиц CSS. Можно либо воспользоваться обычным текстовым редактором и писать таблицы стилей «от руки», либо воспользоваться специальным инструментом, поддерживающим CSS, к примеру, приложением для веб-дизайна. Специальные инструменты позволяют создавать таблицы стилей без изучения синтаксиса CSS. Однако впоследствии дизайнеры во многих случаях предпочитают ручную отладку таблиц стилей, так что мы рекомендуем вам научиться писать и редактировать CSS от руки. Давайте приступим!

h2 { color: green }

То, что вы видите, это простое правило CSS, содержащее одно объявление. Правило это заявление стилистического параметра одного элемента или нескольких. Таблица стилей это набор из одного или более правил, прилагаемых к HTML-документу. Правило выше устанавливает цвет всех заголовков первого уровня (h2). Давайте посмотрим, какой визуальный эффект оно могло бы произвести:

Figure 2.1

Теперь давайте тщательно разберем правило.

Анатомия правила

Правило состоит из двух частей:

  • Селектора — части перед левой фигурной скобкой
  • Объявления — части внутри фигурных скобок

Селектор это звено, связующее HTML-документ и стиль. Оно устанавливает на какие элементы влияет объявление. Объявление это часть правила, которая определяет эффект. В примере выше селектор это тег h2, а объявление «color: green». Следовательно, объявление повлияет на все элементы h2, то есть, они позеленеют. (Свойство color влияет только на цвет текста; существуют другие свойства для фона, границ и т.д.)

Предыдущий селектор основан на типе элемента: он выбирает все элементы типа «h2». Этот вид селектора зовется селектором типа. Любой тип элемента HTML может быть использован в качестве селектора типа. Селекторы типа являются простейшим видом селекторов. Мы обсудим другие виды селекторов в See CSS selectors. , «CSS selectors.»

Анатомия объявления

Объявление имеет две части, разделенные двоеточием:

  • Свойство — часть перед двоеточием
  • Значение — часть после двоеточия

Свойство это качество либо характеристика, которыми нечто обладает. В предыдущем примере это color. CSS2 (см. separate box) определяет примерно 120 свойств и мы можем присвоить значения им всем.

Значение это точная спецификация свойства. В примере, это «green» «зеленый», но точно также цвет мог бы быть синим (blue), красным (red), желтым (yellow) или каким-нибудь еще.

Диаграмма ниже иллюстрирует все компоненты правила. Фигурные скобки ({ }) и двоеточие ( позволяют браузерам различать селектор, свойство и значение.

Рисунок 2.2 Диаграмма правила.

Группирование селекторов и правил

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

Для примера, рассмотрите эти три правила:

h2 { font-weight: bold }
h3 { font-weight: bold }
h4 { font-weight: bold }

У всех трех правил абсолютно одинаковое объявление они устанавливают шрифт полужирным. (Это делается с помощью свойства font-weight, которое мы обсудимв See Fonts. .) Поскольку все три объявления идентичны, можно сгруппировать селекторы в список, разделенный запятыми, и указать объявление лишь один раз, вот так:

h2, h3, h4 { font-style: bold }

Это правило производит такой же эффект, как и первые три..

Селектор может иметь больше одного объявления. К примеру, можно написать таблицу стилей с этими двумя правилами:

h2 { color: green }
h2 { text-align: center }

В этом случае, мы устанавливаем все элементы h2 зелеными и центрированными на листе. (Это делается с помощью свойства text-align, которое мы обсудим в главе 5.)

Но этого же эффекта можно добиться быстрее, если сгруппировать объявления, которые относятся к одному и тому же селектору, в список, разделенный точками с запятой, вот так:

h2 {
  color: green;
  text-align: center;
}

Все объявления быть внутри фигурных скобок. Точка с запятой разделяет объявления и может, но не должна также появляться в конце последнего объявления. Кроме того, для повышения удобочитаемости вашего кода, предлагаем размещать каждое объявление в отдельной строчке, как мы сделали здесь. (Браузерам все равно, они просто проигнорируют все лишние пробелы и переводы строк.)

Теперь вы знаете основы создания правил CSS и таблиц стилей. Однако, мы еще не закончили. Чтобы таблица произвела какой-то эффект, ее придется «приклеить» к своему документу HTML.

«Приклеивание» таблиц стилей к документу

Чтобы заставить какую-либо таблицу стилей повлиять на документ HTML, ее нужно «приклеить» к нему. То есть, таблица и документ должны быть объединены, чтобы сработать вместе и представить документ. Это можно сделать любым из четырех способов:

  1. Применить базовую, внутридокументную таблицу стилей, к документу, исп ользуя тег style .
  2. Применить таблицу стилей к отдельному тегу, используя атрибут style.
  3. Привязать внешнюю таблицу стилей к документу, используя элемент link.
  4. Импортировать таблицу стилей, испольхуя запись CSS @import.

В следующем разделе, мы обсудим первый метод: с использованием тега style. Атрибут style мы обсудим в главе 4 , «Селекторы CSS», а использование элемента link element и записи @import в главе 16 , «Внешние таблицы стилей».

«Склеивание» с использованием тега STYLE

Можно склеить таблицу стилей и HTML документ, поместив таблицу стилей внутрь контейнера style вверху вашего документа. Тег style был введен в HTML в частности для того, чтобы позволить вставлять таблицы стилей внутрь HTML документов. Вот таблица стилей (полужирным шрифтом) прикрепленная к документу-образцу с использованием тега style. Результат показан в рисунке 2. 3 .

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    h2, h3 { color: green }
  </STYLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <h3>Historical perspective</h3>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>

Рисунок 2.3 Результат добавления к таблице стилей правила изменения цвета тегов h2 на зеленый и последующего прикрепления таблицы к документу с использованием контейнера style. (попробуйте)

Обратите внимание на то, что тег style размещен после тега title и перед тегом body. Заголовок документа «title» не появляется на самой странице, поэтому стили CSS не оказывают на него влияния.

Содержимое тега style это таблица стилей. Однако, в то время, как содержимое таких тегов, как h2, p и ul появляется на странице, содержимое тега style там не появляется. Точнее, на странице появляется эффект от содержимого контейнера style таблицы стилей. Поэтому вы не видите «{ color: green }», показанным на экране; вместо этого вы видите два тега h2 зеленого цвета. Правил, определяющих цвет прочих элементов, добавлено не было, так что все прочие элементы будут отображаться цветом по умолчанию.

Браузеры и CSS

Для обновляемого обзора доступных браузеров, просмотрите страницу обзоров W3C

Для того, чтобы CSS работала как написано в этой книге, необходимо использовать CSS-совместимый браузер, то есть, браузер, поддерживающий CSS. CSS-совместимый браузер узнает тег style как контейнер для таблицы стилей и отображает документ соответственно. Многие браузеры, распространенные сегодня, поддерживают CSS, например, Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5 (O3.5). По скромным подсчетам более половины пользователей Сети используют CSS-расширенные браузеры, и их число постоянно растет. Велика вероятность того, что люди, с которыми вы общаетесь, имеют CSS-расширенные браузеры. Если нет, дайте им причину обновиться!

Лучший источник информации о том, как различные браузеры поддерживают CSS WebReview’s charts

Увы, не все реализации CSS совершенны. Когда вы начнете экспериментировать с таблицами стилей, вы вскоре заметите, что каждый браузер имеет ряд багов и ограничений. В целом, новые браузеры ведут себя лучше старых. IE4 и O3.5 среди лучших, а следующее предложение Netscape под кодовым именем Gecko также обещает более усовершенствованную поддержку для CSS.

Те, кто не пользуется CSS-расширенными браузерами, все же могут читать страницы, использующие таблицы стилей. CSS заботливо спроектировали так, чтобы всё содержимое оставалось видимым, даже если браузер ничего не знает о CSS. Некоторые браузеры, такие как вторая и третья версии Netscape Navigator, не поддерживают таблицы стилей, но они знают о теге style чтобы полностью его игнорировать. После поддержки таблиц стилей, это и есть правильное поведение.

Однако другие браузеры, которые не поддерживают тега style, такие как Netscape Navigator 1 и Microsoft Internet Explorer 2, проигнорируют теги style, но покажут содержимое контейнера style. Таким образом, пользователь получит таблицу стилей напечатанной вверху страницы. В настоящий момент, лишь небольшой процент пользователей Сети может столкнуться с этой проблемой. Чтобы предупредить это, можно поместить свою таблицу стилей внутрь HTML-комментария, что мы обсудим в главе 1. Поскольку комментарии не отображаются на экране, поместив таблицу стилей внутрь HTML-комментария, вы не дадите старейшим браузерам показать содержимое контейнера style. CSS-расширенные браузеры учитывают этот трюк и расценят содержимое контейнера style как табицу стилей.

Вспомните, что комментарии HTML начинаются с <!-- и заканчиваются на -->. Вот кусочек предыдущего примерного кода, показывающий, как писать таблицу стилей в комментарии HTML. Комментарий окружает только содержимое контейнера style:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML>

В CSS также есть собственные способы комментирования, которые можно использовать внутри таблицы стилей. Комментарий CSS начинается с «/*» и оканчивается на «*/.» (Те, кто знаком с языком программирования C, узнают его.) Правила CSS помещененные в комментарий CSS никак не повлияют на предсталение документа.

Браузеру необходимо сообщить, что вы работаете с таблицами стилей CSS. В настоящее время CSS единственный язык таблиц стилей, используемый с HTML-документами, и мы не думаем, что это скоро изменится. Для XML ситуация может быть и иной. Но точно так, как существует более одного формата изображений (сразу вспоминаются GIF, JPEG и PNG), может быть и больше одного языка таблиц стилей. Так что это хорошая привычка сообщать браузерам, что они работают с CSS. (К тому же, HTML этого требует.) Это делается с помощью атрибута type тега style. Значение type указывает, какой тип таблиц стилей используется. Для CSS значение будет «text/css». Нижеследующее отрывок из предыдущего документа-образца, показывающий, как лучше писать это (в сочетании с использованием комментариев HTML):

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML>

Когда браузер загружает документ, он проверяет, сможет ли он понять язык таблиц стилей. Если сможет, он пытается прочесть таблицу, иначе проигнорирует. Атрибут type (см. в главе 1 обсуждение HTML-атрибутов) в теге style это способ дать браузеру понять, какой язык стилей используется. Атрибут type должен быть включен.

Чтобы облегчить чтение примеров, мы решили не заключать таблицы стилей в HTML-комментарии, но мы обязательно будем использовать атрибут type во всей книге.

Древовидные структуры и наследование

Вспомните из главы 1 обсуждение HTML, представляющего документ в виде древовидной структуры, и того, что элементы HTML имеют дочерние и родительские объекты. Есть много причин для создания древовидных документов. Для таблиц стилей есть одна очень хорошая причина: наследование. Как дети наследуют своих родителей, так и HTML-элементы. Только вместо наследования генов и денег, элементы HTML наследуют стилистические свойства.

Давайте начнем с того, что посмотрим на документ-образец. :

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a
      <STRONG>prolific</STRONG> composer. Among his
        works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
  </BODY>
</HTML>

Древовидная структура этого документа выглядит так:

Посредством наследования, значения свойств CSS присвоенные одному элементу, передадуться вниз по дереву его потомкам. Например, в наших образцах зеленый цвет до сих пор присваивается тегам h2 и h3. Теперь, скажем, нам нужно присвоить этот цвет всем элементам документа. Можно сделать это, перечислив все типы элементов в селекторе.:

<STYLE TYPE="text/css">
  h2, h3, P, LI { color: green }
</STYLE>

Однако, большинство документов HTML сложнее нашего образца, и таблица стилей вскоре сильно удлинилась бы. Есть способ лучше — и короче. Вместо присвоения стиля каждому типу элемента, мы присваиваем его их общему предку: тегу body:

<STYLE TYPE="text/css">
  BODY { color: green }
</STYLE>

Поскольку прочие элементы наследуют свойства тега body, все они наследуют и зеленый цвет. (Рисунок 2.4 ).

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

Аннулирование наследования

В предыдущем примере, всем элементам дали одинаковый цвет посредством наследования. Иногда, все же, дети не похожи на родителей. Не удивительно, что это применимо и к CSS. Скажем, вы бы хотели, чтобы содержимое тегов h2 отображалось бы синим цветом, а остальное зеленым. Это легко сделать в CSS:

<STYLE TYPE="text/css">
  BODY { color: green }
  h2 { color: navy }
</STYLE>

Раз тег h2 дочерний элемент тега body (и, следовательно, наследует body), эти два правила в таблице стилей выше несовместимы. Первое присваивает цвет содержимому тега body, а, значит, и цвет элементов h2 посредством наследования; в то время, как второе правило присваивает цвет исключительно тегу h2. Какое из них победит? Давайте узнаем:

Причина, по которой побеждает второе правило, в том, что оно более конкретное чем первое. Первое правило очень общее: оно влияет на все элементы страницы. Второе правило из всего документа влияет только на элементы h2, а, значит, оно более конкретно.

Будь CSS языком програмирования, порядок, в котором определяются правила, определял бы, какое из них выиграет. Но CSS не язык программирования, и в примере выше порядок порядок не имеет значения. Результат был бы точно таким, используй мы эту таблицу стилей:

<STYLE TYPE="text/css">
  h2 { color: navy }
  BODY { color: green }
</STYLE>

CSS разработали так, чтобы разрешать противоречия между таблицами стилей как в примере выше. Конкретность один из аспектов этого. Детали можно найти в главе 15 , «Каскадирование и наследование.»

Свойства, которые не наследуются

В общем случае, свойства в CSS наследуются от родительского элемнта к дочернему, как описано в предыдущих примерах. Некоторые свойства, однако, не наследуются, и в этом всегда есть веская причина. Используем свойство background (описано в главе 11) как пример свойства, которое не наследуется.

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

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    BODY {
      background: url(texture.gif) white;
      color: black;
    }
  </STYLE>
  <BODY>
    <h2>Bach's <EM>home</EM> page</h2>
    <P>Johann Sebastian Bach was a prolific
      composer.
  </BODY>
</HTML>

Свойство background «фон» имеет URL («texture. gif»), указывающий фоновое изображение в качестве значения. Когда изображение загружено, страница выглядит так:

В примере выше есть несколько вещей, о которых стоит рассказать подробнее:

  • Фоновое изображение перекрывает поверхность наподобие обоев фоны элементов h2 и p также были перекрыты. Это не из-за наследования, причина в том, что если не определено иначе, все фоны прозрачны. Так что, раз мы не определили как-либо фоны для содержимого тегов h2 или p, фон родительского элемента body будет просвечивать.
  • Вдобавок к URL изображения, в качестве фона также приваивается цвет (по умолчанию белый). Если изображение не будет найдено, вы увидите вместо него цвет.
  • Цвет содержимого body установлен черным. Чтобы гарантировать контраст между текстом и фоном, хорошей привычкой будет всегда устанавливать свойство color когда устанавливаете свойство background.

А почему, собственно, свойство background не наследуется? Визуально, эффект от прозрачности подобен наследованию: выглядит так, будто все элементы имеют один и тот же фон. Есть две причины: во-первых, прозрачные фоны отображаются скорее (нечего отображать!), чем прочие фоны. Во-вторых, поскольку фоновые изображения выравниваются относительно элементов, к которым принадлежат, т.е. в ином случае вы бы не всегда наблюдали гладкие стыковки фона.

Стандартные задачи в CSS

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

Частые задачи: шрифты

Начнем-ка со шрифтов. Если вам случалось пользоваться специальными приложениями для верстки, вы сможете разобраться в этой небольшой таблице стилей:

h2 { font: 36pt serif }

Это правило присваивает определенный шрифт элементам h2. Первая часть значения 36pt устанавливает шрифт размером 36 пунктов. «Пункт» старая типографская единица измерения, которая здравствует и в цифровом веке. В следующей главе мы расскажем, почему стоит использовать единицу «em» вместо «pt» но пока что заострим внимание на пунктах. Вторая часть значения serif сообщает браузеру, что нужно использовать шрифт с серифами (маленькими засечками на концах шрифтов, глава 5 расскажет вам о них подробнее). Более декоративные шрифты с засечками лучше подходят домашней страничке Баха, поскольку современные санс-серифные шрифты (шрифты без засечек) не использовались в его время. Вот результат:

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

h2 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

Иногда нужно всего лишь установить лишь одно из них. Например, вам нужно наклонить текст в некоторых элементах. Вот пример.:

UL { font-style: italic }

Свойство font-style не изменит размера шрифта либо семейство шрифтов, оно просто наклонит существующий шрифт. Когда оно присвоено элементу ul, содержимое тегов li внутри этого контейнера станет наклоенным, поскольку свойство font-style наследуется. Вот результат применения к тестовой странице, которые вы уже знаете.:

Похожим образом, свойство font-weight используется для изменения плотности толщины букв. Можно еще больше выделить пункты списка, присвоив их предку значение bold:

UL {
  font-style: italic;
  font-weight: bold;
}

Что выводит:

Последние свойства font-variant и line-height до сих пор не слишком широко поддерживаются браузерами, а потому не используются широко.

Частые задачи: поля

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

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

<HTML>
  <TITLE>Fredrick the Great meets Bach</TITLE>
  <BODY>
    <P>One evening, just as Fredrick the Great was
      getting his flute ready, and his musicians
      were assembled, an officer brought him a
      list of the strangers who had arrived.  With
      his flute in his hand he ran over the list,
      but immediately turned to the assembled
      musicians, and said, with a kind of
      agitation:
    <BLOCKQUOTE>"Gentlemen, old Bach is come."
    </BLOCKQUOTE>
    <P>The flute was now laid aside, and old Bach, who
      had alighted at his son's lodgings, was immediately
      summoned to the Palace.
  </BODY>
</HTML>

Скриншот внизу показывает, как типичный HTML-браузер отобразит этот документ:

Как можно видеть, браузер добавил пробелы со всех сторон цитируемого текста. В CSS эти пробелы называются «margins» «поля» и все элементы имеют поля со всех четырех сторон. Свойства называются: margin-top, margin-right, margin-bottom и margin-left. Можно изменить отображение содержимого контейнера blockquote, написав маленькую таблицу стилей:

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}

Единица «em» будет подробно рассмотрена в следующей главе, но уже сейчас можно раскрыть ее секрет: она масштабирует относительно размера шрифта. Таким образом, код в примере выше создаст вертикальные поля такой же высоты, как и шрифт (1em) элемента blockquote, и горизонтальные поля с нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки будет отличаться, сделаем его курсивным. Результат таков:

Точно так же, как font укороченное свойство для установки нескольких шрифтовых свойств сразу, margin это укороченное свойство которое устанавливает все свойства полей. Поэтому пример вверху можно записать и как:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

Первая часть значения — 1em — присваивается верхнему полю (собственное свойство margin-top). Отсюда отсчитывается против часовой стрелки: 0em присваивается к margin-right (правое поле), 1em присваивается margin-bottom (нижнее поле), и 0em присваивается margin-left (левое поле).

Поскольку левое поле равно нулю, цитируемому тексту нужно больше стиля, чтобы отделить его от остального текста. Установка в font-style значения italic помогает, а добавление фонового цвета еще больше усиливает цитату:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

Вот результат:

Как и ожидалось, фоновый цвет позади цитаты изменился. В отличие от предыдущих примеров, цвет определялся в частях красного-зеленого-синего (RGB от англ. red/green/blue) цветов. Цвета RGB детально описываются в главе 11 .

Стилистической проблемой в верхнем примере является то, что фоновый цвет едва покрывает цитируемый текст. Пространство вокруг цитаты область границ не запоняется цветом элемента. В CSS есть другой вид разделителей, называемый «padding» «заполнение пустотой», который и использует цвет элемента. В других Во всех других отношениях, свойства заполнения подобны свойствам границ: они добавляют промежутки вокруг элемента. Давайте добавим заполнение к цитате:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0. 5em;
}

Результат установки заполнения выразился в пробеле между текстом и треугольником, его окружающим:

Обратите внимание, что свойству padding дано лишь одно значение (0.5em). Как и свойство margin, padding может принимать 4 значения, которые могут быть приписаны к верхнему, правому, нижнему и левому заполнению соответственно. Однако, когда одно и то же значение приваивается всем сторонам, единичное его упоминание сработает. Это справедливо и для padding и для margin (также как и для некоторых других свойств границ, которы описаны См. Промежутки вокруг блоков. ).

Частые задачи: ссылки

Чтобы облегчить пользователям проглядывание гипертекстовых документов, ссылки должны иметь стиль, отличный от нормального текста. Браузеры HTML часто подчеркивают текст гиперссылок. Также применяются различные цветовые схемы, указывающие, переходил ли уже пользователь по этой ссылке или нет. Поскольку гиперссылки являются довольно значимой частью Сети, в CSS есть специальная поддержка для их стилизации. Вот простой пример:

A:link { text-decoration: underline }

Примерный код вверху указывает, что непосещенные ссылки должны быть подчеркнуты:

Ссылки подчеркнуты, как мы и указали, но они вдобавок синие, чего мы не указывали. Когда авторы не указывают все возможные стили, браузеры используют стили по умолчанию, чтобы заполнить пробелы. Взаимодействие между авторскими стилями, стилями по умолчанию и пользовательскими стилями (собственными предпочтениями пользователя) еще один пример противоречия между решающими правилами CSS. Это называется «каскадом»(«C» в «CSS»). Мы обсудим каскад ниже.

Селектор (A:link) заслуживает особого замечания. Вы, возможно, узнаете «A» как тег HTML, но последняя часть нова. «:link» это один из так называемых псевдо-классов CSS. Псевдо-классы используют, чтобы наделить стилем элементы, основанные на информации извне самого документа. К примеру, автор документа не может знать, перешли ли по определенной ссылке или нет. Детально псевдо-классы описываются в главе 4, а здесь мы лишь дадим еще несколько примеров:

A:visited { text-decoration: none }

Это правило присваивает стиль посещенным ссылкам, точно так, как A:link присваивает стиль непосещенным ссылкам. Вот пример посложнее:

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

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

У псевдо-класса :hover интересная история. Он появился в CSS2 после того, как соответствующий эффект стал популярен среди программистов JavaScript. Решение в JavaScript требует сложного кода по сравнению с псевдо-классами CSS, и это пример того, как CSS собирает эффекты, ставшие популярными среди Веб-дизайнеров.

Слово о каскадах

Фундаментальной чертой CSS является то, что более чем одна таблица стилей может повлиять на представление документа. Эта черта известна как каскадность, потому что различные таблицы стилей считаются идущими сериями. Каскадность является фундаментальной чертой CSS, потому что мы знаем, что любой документ вполне вероятно может получить таблицы стилей из многих исотчников: браузера, дизайнера и, возможно, пользователя.

В последнем наборе примеров вы увидели, что цвет текста ссылок стал синим без конкретизации таблице стилей. Кроме того, браузерам известно, как форматировать содержимое тегов blockquote и h2 без явного указания. Все, что браузер знает о форматировании, хранится в его таблице стилей по умолчанию и совмещается с авторскими и пользовательскими таблицами стилей, когда документ отображается.

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

Мы углубимся в детали каскадирования в главе 15, «Каскадирование и наследование». Перед этим, следует узнать многое о шрифтах, промежутках и цветах.

CSS | Введение в веб-разработку

HTML отвечает за то, ЧТО будет выведено на экран. А вот за то, КАК оно будет выглядеть, и где будут располагаться разные части страницы, отвечает CSS.

Проще говоря, HTML — это структура и содержание, а CSS — внешний вид.

CSS — это отдельный язык со своим форматом и правилами, но он создан специально для HTML. С помощью CSS можно описать внешний вид страницы и отдельных элементов. Например, цвет текста, размер шрифта, размеры и отступы картинок, рамки вокруг элементов, закругления в фотках и так далее.

Основной целью разработки CSS являлось разделение структуры страницы от описания внешнего вида документа. Это позволяет создавать представления (можно сказать, «версии») одного HTML-документа, адаптированные для людей с ограниченными возможностями, оптимизированные под мобильные устройства, предназначенные для печати и так далее. Кроме того, последние версии CSS позволяют накладывать анимацию и, фактически, рисовать.

Допустим, вы хотите изменить внешний вид всех абзацев (элементов <p>...</p>). С помощью CSS-кода ниже мы сделаем так, что у всех элементов p будет синий фон, отступ со всех сторон по 10 пикселей и шрифт Arial:

<head>
...
  <style>
  p {
    background-color: blue; /* Фон */
    margin: 10px; /* Отступы от границ блока с абзацем */
    font-family: Arial; /* Шрифт */
  }
  </style>
...
</head>

<body>
  <p>Это абзац с голубым фоном, отступами и шрифтом Arial</p>
  <p>Это еще один абзац с голубым фоном, отступами и шрифтом Arial</p>
</body>

Элемент <style>...</style> вставляется в HTML страницу внутрь элемента head (то есть между тегами <head> и </head>).

Но что, если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).

<head>
...
  <style>
  .strange {
    background-color: blue; /* Фон */
    margin: 10px; /* Отступы от границ блока с абзацем */
    font-family: Arial; /* Шрифт */
  }
  </style>
...
</head>

<body>
  <p>Это абзац с голубым фоном, отступами и шрифтом Arial</p>
  <p>Это абзац без стилей</p>
</body>

Атрибут class есть у каждого тега, а значит, можно изменить внешний вид и расположение всего, что представлено на странице (иногда с ограничениями).

Иногда в документе есть элемент, который по смыслу может быть только один. Например, в статьях это зачастую заголовок: на странице статьи может быть только один заголовок статьи. Другой пример — логотип сайта где-нибудь наверху. Для уникальных «разовых» элементов стоит использовать id:

<head>
...
  <style>
  #important {
    color: red; /* красный цвет шрифта */
  }
  </style>
...
</head>

<body>
  <p>Это абзац с красным текстом</p>
</body>

В CSS id указываются через решетку #, а классы — через точку . . А в HTML они пишутся прямо словами: например, <p> или <p>.

В наших примерах CSS p, .strange и #important называются селекторами. Ими мы выбираем то, к чему применять стиль.

В CSS существует несколько видов селекторов, но для начала достаточно знать о трёх:

  • div – элементы конкретного типа, в данном примере div (тег <div>...</div>)
  • #id – элемент с данным id
  • .class – элементы с таким классом

Попробуйте создать файл index.html со следующим содержанием и открыть его в браузере:

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
           color: red;
         }
         .note {
           color: grey;
           background-color: yellow;
           font-weight: bold;
         }
      </style>
   </head>
   <body>
     <p>Абзац со стилем, указанным прямо в теге!</p>
     <div>Абзац класса "note"</div>
   </body>
</html>

С помощью CSS можно менять сотни разных свойств. Поэкспериментируйте со своей страницей и стилями.

Каждый браузер содержит определенный набор стилей «по умолчанию». Этот набор применяется всегда и формирует базовое представление элементов. С одной стороны, это избавляет от необходимости писать стили тогда, когда устраивает умолчание, но с другой — появляются серьезные проблемы.

Этот набор отличается от браузера к браузеру. Все усугубляется тем, что и сами стили работают по-разному в разных браузерах. В этот момент проявляется самая большая боль вёрстки. Необходимо знать тонкости старых и новых браузеров, причём в современном мире это не только браузеры для обычных компьютеров, но также браузеры для мобильных устройств и даже для автомобилей с телевизорами (например, Tesla).

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

Файл стилей

В реальных приложениях стили описывают не внутри HTML-страниц, а в отдельных файлах, например style. css, и с помощью специального тега подключают на страницу:

<link rel="stylesheet" href="style.css">

Эта строчка должна также находиться внутри элемента head (то есть между тегами <head> и </head>).

Layouting

Отдельным большим блоком в CSS является позиционирование. Эта тема, наверное, самая сложная и крайне важная. Благодаря определенному набору свойств можно творить чудеса. Располагать элементы как угодно на странице, менять их размеры и вид, в зависимости от ширины экрана и даже скрывать.

Bootstrap

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

Дальнейшее их развитие привело к созданию таких монстров как Bootstrap. Bootstrap — это больше, чем просто CSS-фреймворк. Кроме модульной сетки, Bootstrap поставляется с большим количеством компонентов, благодаря которым можно собрать сайт практически любой сложности. Ко всему этому стоит добавить то, что он автоматически хорошо работает и для разных размеров экранов, и для мобильных устройств. А благодаря огромному комьюнити, он развивается огромными темпами.

Хекслет целиком и полностью построен на Bootstrap’e. Такой подход позволяет нам не отвлекаться на непрофильную деятельность и ускорить разработку проекта в разы.

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

Полезные ссылки

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

В нашем курсе Основы HTML, CSS и веб-дизайна есть урок, посвященный Chrome Developer Tools.

Заключение

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

На Хекслете есть бесплатный курс Основы HTML, CSS и веб-дизайна, содержащий текстовые и видео-уроки, интерактивные упражнения и тесты. Теме CSS там посвящены несколько уроков.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Что такое CSS, для чего нужны каскадные таблицы стилей CSS

CSS – это язык, с помощью которого описывается внешний вид документа HTML, XML, XHTML. Название означает «каскадная таблица стилей», или Cascading Style Sheets. CSS-стили незаменимы при оформлении страниц сайтов: в одном файле содержатся сведения об отображении всех элементов документа.

Для чего используется CSS

По сути, таблица стилей – это файл, где описывается, как будет выглядеть каждый из элементов на странице. В HTML-документе, таким образом, остается только структура странички: сами блоки, их содержимое и расположение. Создать страницу и оформить ее можно и без использования таблиц, прописывая визуальные свойства каждого элемента в его описании. Но, если страниц сотни и тысячи, применять такой метод неудобно: при изменении оформления приходится менять множество документов, вдобавок это загромождает верстку. Поэтому использование CSS считается золотым стандартом оформления сайтов: так получилось благодаря гибкости и многообразию возможностей каскадных таблиц.

Преимущества CSS

  • Это существенно упрощает верстку и снижает временные затраты. Один созданный файл стилей можно распространить на множество страниц, так что внешний вид элементов достаточно описать один раз.
  • Если что-то нужно изменить, достаточно внести правки в один файл. Это касается и изменений в оформлении, и найденных ошибок.
  • Применение CSS серьезно облегчает структуру документа, что хорошо и для пользователей, и для поисковых программ.
  • Вариативность оформления становится шире. CSS поддерживает намного больше возможностей, чем имеется при использовании чистого HTML, вдобавок к одной странице можно применить несколько стилей в зависимости от обстоятельств (размер монитора пользователя, устройство, с которого выполнен вход, – ПК или мобильное).
  • Страницы начинают загружаться быстрее: браузер кеширует таблицу стилей при первом посещении сайта, при последующих подгружаются только данные, что намного быстрее.

Как развивалась технология

Начало было положено в 1990-х, когда консорциум W3C решил, что технология, позволяющая разделять содержание и представление документов, необходима. Стандарт CSS1 появился в 1996 году и позволял изменять с помощью таблиц параметры шрифтов, цвета элементов, свойства блоков и текстов, такие как отступы и выравнивание. Длина и ширина блоков задавались там же. С развитием интернета появились новые уровни:

  • CSS2. Стандарт расширил технические возможности, дал возможность работать с аудио и страничными носителями (например, при печати документов), включил в себя поддержку блочной структуры и генерируемого содержимого;
  • CSS3. Еще более масштабное расширение, находится в разработке до сих пор, поддерживает сглаживание, градиенты, тени и анимацию, для этого не приходится использовать JavaScript;
  • CSS4. Находится в разработке, новые модули пока доступны как черновики. Дополняют предыдущие версии новыми расширениями и значениями.

Синтаксис и структура

Файл CSS сводится к набору правил, описанных по определенному синтаксису. Правило состоит из селекторной части и блока объявлений: ими описываются всевозможные элементы страницы. Формат примерно таков: селектор { параметр: значение }.

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

  • Можно использовать любой тег, написанный латиницей.
  • Если вариантов стиля для одного типа элементов несколько, используются так называемые классы. У одного тега их может быть несколько (применяются все стили, что описаны в таблице). Запись в этом случае выглядит так: тег.Класс { параметр: значение }.
  • Есть возможность видоизменить только один конкретный элемент. Это делается с помощью идентификаторов – уникальных имен, которые можно присвоить элементам. Идентификатор будет использоваться как селектор.
  • Можно создавать правила, которые применяются к какому угодно тегу, если он входит в тот или иной класс. Строку нужно начать с .Класс без указания тега.

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

Как подключить стили CSS

Элементы CSS можно использовать внутри HTML-документа с помощью тега <style> и атрибута type=»text/css» или за счет атрибута style без указания селектора. Но более распространенный способ – выносить стили в отдельный файл и подключать с помощью такой строчки: <link href=»ссылка на таблицу» rel=»stylesheet»>. Значение аргумента rel показывает, что это CSS-стили.

Другие термины на букву «C»

Все термины SEO-Википедии

Теги термина

Приоритет стилей | CSS

Говоря о каскадности, возникает вопрос: «А что произойдет, если в разных источниках будут одинаковые правила для элемента, но с разными значениями?». В таком случае есть правила, определяющие приоритеты стилей из разных источников. По степени важности список выглядит следующим образом:

  • Стили в атрибуте тега
  • Стили в отдельном файле
  • Стили по умолчанию, которые добавляет браузер

Если в одном из источников правила дублируются, то применятся те, которые были указаны последними.

.blue {
  color: blue;
}

.blue {
  color: red;
}

/* В данном случае текст в блоках с классом .blue будет красным, так как будет использовано последнее указанное правило */

У селекторов также существуют приоритеты. Для определения приоритета можно использовать таблицу, где каждому селектору даётся «вес»:

  • Селектор по тегу: 1
  • Селектор по классу: 10
  • Селектор по ID: 100
  • Стиль в атрибуте тега: 1000
<style>
  . blue {
    color: blue;
  }

  #red-block {
    color: red;
  }
</style>

<div>Текст</div>

Какого цвета будет текст внутри блока? Воспользуемся таблицей выше, из которой следует, что селектор по классу (.blue) имеет приоритет 10, а селектор по id (#red-block) имеет приоритет 100. Значит, правило для id #red-block «перебьёт» правило для класса .blue. Помимо этого у нас есть инлайн стиль style="color: white;", который имеет «вес» 1000, а это значит, что он обладает наивысшим приоритетом.

Таким образом текст внутри блока будет белым.

Задание

Добавьте в редактор p с классом border и id no-border. Установите следующие правила:
* Для класса border установите сплошную рамку любого цвета толщиной 1px.
* Для id no-border отмените рамку. Используйте значение none у правила border-style.

Стили запишите в теге style.

Способы задавать CSS-стили для HTML-элементов