Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 7969 / 742 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Лекция 27:

Основы CSS

< Лекция 26 || Лекция 27: 123 || Лекция 28 >
Аннотация: Лекция посвящена основам технологии каскадных таблиц стилей (CSS).

Введение

В предыдущих руководствах этого курса мы говорили о контенте Web-сайтов и о том, как структурировать этот контент с помощью HTML. Это очень важно, так как означает, что мы задаем для документов значение и структуру, позволяющие легко объединяться с другими технологиями. Наиболее важной обсуждаемой далее технологией Web является CSS (Каскадные таблицы стилей), которая используется для оформления HTML и размещения его на Web-странице. В этой лекции мы познакомимся с CSS — что это такое, как применяется к HTML, и как выглядит базовый синтаксис CSS. Лекция имеет следующую структуру:

  • Что такое CSS?
  • Определение правил стилей
    • Комментарии CSS
    • Селекторы объединения в группу
  • Дополнительные селекторы CSS
    • Универсальные селекторы
    • Селекторы атрибутов элементов
    • Селекторы элементов потомков
    • Селекторы нижележащих элементов
    • Селекторы смежных одноуровневых элементов
    • Псевдо-классы
    • Псевдо-элементы
  • Сокращенная запись CSS
    • Сравнение индивидуальных и сокращенных значений
    • Задание менее четырех значений для сокращенного свойства
    • Выбор между одиночным свойством и сокращенным значением
    • Справочник сокращений
  • Применение CSS к HTML
    • Строковые стили
    • Вложенные стили
    • Внешние таблицы стилей
    • Импорт таблиц стилей
  • Заключение
  • Контрольные вопросы

Что такое CSS?

В то время как HTML структурирует документ и говорит браузеру, какую функцию имеет определенный элемент (будет ли это ссылка на другую страницу или заголовок), CSS выдает браузеру инструкции о том, как вывести определенный элемент — оформление, размещение пробелов и позиционирование. Если HTML является балками и кирпичами, которые составляют структуру дома, CSS является штукатуркой и покраской для его отделки.

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

CSS не является языком программирования, таким как JavaScript, и не является языком разметки, таким как HTML — в действительности нет ничего, с чем его можно было бы сравнить. Технологии, которые определяли интерфейсы до развития Web, всегда смешивали представление и структуру. Это не слишком разумно делать в такой изменчивой среде, какой является Web, именно поэтому и был придуман CSS.

Определение правил стилей

Без дальнейших рассуждений давайте посмотрим на пример кода CSS, а затем проанализируем его:

селектор {
  свойство1:значение;
  свойство2:значение;
  свойство3:значение;
}

В данном случае можно видеть следующие детали:

  • Селектор определяет элементы HTML, к которым будет применяться правило, определяемые реальным названием элемента, например, body, или другими средствами, такими как значения атрибута class - мы вернемся к этому позже.
  • Фигурные скобки содержат пары свойство/значение, которые разделяются между собой точкой с запятой; свойства отделяются от своих соответствующих значений двоеточием.
  • Свойства определяют, что вы хотите сделать с выделенными элементами. Они могут быть достаточно разнообразны, и задавать цвет элемента, цвет фона, позицию, поля, заполнение, тип шрифта, и многие другие вещи.
  • Значения являются теми значениями, которые вы хотите задать каждому свойству выделенных элементов. Эти значения зависят от свойства, например, свойства, которые влияют на цвет, могут принимать шестнадцатеричные значения цвета, такие как #336699, значения RGB, такие как rgb(12,134,22), или названия цветов, такие как red, green или blue.

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

Теперь давайте посмотрим на конкретный пример:

p {
  margin:5px;
  font-family:arial;
  color:blue;
}

Это правило выбирает элемент HTML p — для каждого элемента p в документах HTML, которые используют этот код CSS, будет применяться это правило, если только не будут существовать применяемые к ним более конкретные правила, в этом случае более конкретные правила будут переопределять это правило. Это правило влияет на свойства, которые определяют поля вокруг параграфа ( margin ), шрифт текста в параграфе ( font-family ), и цвет этого текста ( color ). Поля задаются размером в 5 пикселей, шрифт задается как Arial, а цвет текста задается как blue.

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

Все множество этих правил совместно формируют таблицу стилей (оформления). Это самый общий имеющийся синтаксис CSS. Существуют другие, но немного — возможно, самым ценным свойством CSS является его простота.

Комментарии CSS

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

/* Это базовые селекторы элементов */

селектор {
  свойство1:значение;
  свойство2:значение;
  свойство3:значение;
}

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

селектор {
  свойство1:значение;
/*
  свойство2:значение;
  свойство3:значение;
*/
}

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

Можно, конечно, при желании ограничить комментарий одной строкой, но все равно потребуется использовать открывающий и закрывающий ограничители комментария ( /* и */ ).

Селекторы объединения в группу

Можно также объеднить в группу различные селекторы. Предположим, что вы хотите применить одинаковое оформление к h1 и p, тогда можно было бы написать следующий CSS:

h1 {color:red}
p {color:red}

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

h1, p {color:red}

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

  • p {}: селектор элемента

    соответствует всем элементам на странице с указанным названием (элементам p, в приведенном выше случае)

  • .example{}: селектор класса

    соответствует всем элементам, которые имеют атрибут class с указанным значением, так что пример выше будет соответствовать <p class="example">, <li class="example"> или <div class="example">, или любому другому элементу со значением class равным example. Отметим, что селекторы класса не проверяют никакое конкретное название элемента.

  • #example{}: селектор id

    соответствует всем элементам, которые имеют атрибут id с указанным значением, так что пример выше будет соотвествовать <p id="example">, <li id="example"> или <div id="example">, или любому другому элементу со значением id равным example. Отметим, что селекторы ID не проверяют название никакого элемента, и можно иметь только один селектор для каждого ID в документе HTML - они являются уникальными для каждой страницы.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Selectors Example</title>
  <link rel="stylesheet" href="selectors.css" type="text/css" media="screen">
</head>
<body>
  <h1>CSS Basics Example</h1>

  <ul id="menu">
    <li>Item</li>
    <li class="warning">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p class="warning">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li id="extra">Item</li>
    <li>Item</li>
  </ul>
</body>
</html>
#menu{
  border-style:solid;
  border-color:rgb(0,0,0);
  border-width:1px;
}
.warning{
  background:red;
  color:white;
}
li{
  font-family:arial,sans-serif;
}

Можно соединять несколько селекторов, чтобы определить еще более конкретные правила:

  • p.warning{}

    соответствует всем параграфам со значением class равным warning

  • div#example{}

    соответствует элементу со значением атрибута id равным example, но только когда он является div

  • p.info, li.highlight{}

    соответствует параграфам со значением class равным info и элементам списка со значением class равным highlight

В следующем примере это используется для различия между разными стилями предупреждений:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Specific Selectors Example</title>
  <link rel="stylesheet" href="specificselectors.css" type="text/css" media="screen">
</head>
<body>
  <h1>CSS Basics Example</h1>

  <ul id="menu">
    <li>Item</li>
    <li class="warning">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p class="warning">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li id="extra">Item</li>
    <li>Item</li>
  </ul>
</body>
</html>
#menu{
  border-style:solid;
  border-color:rgb(0,0,0);
  border-width:1px;
}
.warning{
  background:red;
  color:white;
}
p.warning{
  background:#fcc;
  color:red;
}
li{
  font-family:arial,sans-serif;
}
li#extra{
  padding:10px;
}
< Лекция 26 || Лекция 27: 123 || Лекция 28 >
Марина Медведева
Марина Медведева

Добрый день. Сегодня записалась на курс, хочу сразу оплатить, но не знаю, можно ли это сделать через сайт Интуит?

Кристина Семенова
Кристина Семенова

Здравствуйте,подскажите,можно ли оплатить курс частями?

Татьяна Яковлева
Татьяна Яковлева
Россия, г. Омск
Александр Диордица
Александр Диордица
Россия, Москва, МВТУ имени Баумана