Начало работы с CSS

IВ этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.

Необходимые знания: Базовая компьютерная грамотность, Базовое програмное обеспечение, базовые знания работа с файлами, и базовые знания HTML (study Введение в HTML.)
Цель: Понять основы связывания CSS-документа с HTML-файлом и уметь выполнять простое форматирование текста с помощью CSS.

Начиная с некоторого HTML

Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своем компьютере. Сохраните приведенный ниже код как index.html в папке на вашем компьютере.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Getting started with CSS</title>
</head>

<body>
    
    <h1>I am a level one heading</h1>

    <p>This is a paragraph of text. In the text is a <span>span element</span> 
and also a <a href="http://example.com">link</a>.</p>

    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

    <ul>
        <li>Item one</li>
        <li>Item two</li>
        <li>Item <em>three</em></li>
    </ul>

</body>

</html>

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

Добавление CSS в наш документ

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

Создайте файл в той же папке, что и документ HTML, и сохраните его как styles.css. Расширение .css показывает, что это файл CSS.

Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри<head> HTML документаt:

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

Этот <link> Элемент сообщает браузеру, что у нас есть таблица стилей, используя атрибут rel, и местоположение этой таблицы стилей в качестве значения атрибута href. Вы можете проверить, работает ли CSS, добавив правило в styles.css. Используя ваш редактор кода, добавьте следующее в ваш файл CSS:

h1 {
  color: red;
}

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

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

Стилизация HTML элементов

Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путем нацеливания на элемент selector — это selector это напрямую соответствует имени элемента HTML. Чтобы настроить таргетинг на все абзацы в документе, вы должны использовать селектор |p|. Чтобы сделать все абзацы зелеными, вы должны использовать:

p {
  color: green;
}

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

p, li {
    color: green;
}

Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своем локальном документе CSS.

 

Изменение поведения элементов по умолчанию

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

Однако вам часто захочется чего-то другого, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <ul>, неупорядоченный список. У него есть список пуль, и если я решу, что я не хочу эти пули, я могу удалить их вот так:

li {
  list-style-type: none;
}

Попробуйте добавить это в свой CSS сейчас.

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

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

Добавление класса

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

В своем HTML-документе добавьте Атрибут class ко второму пункту списка. Ваш список теперь будет выглядеть так:

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

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

.special {
  color: orange;
  font-weight: bold;
}

Сохраните и обновите, чтобы увидеть результат.

Вы можете применить класс special на любой элемент на вашей странице, который вы хотите иметь такой же вид, как этот элемент списка. Например, вы можете захотеть, чтобы <span> в абзаце также был оранжевым и жирным. Попробуйте добавить class "special" затем перезагрузите страницу и посмотрите, что получится.

Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:

li.special {
  color: orange;
  font-weight: bold;
}

Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к <span> или другой элемент, просто добавив к нему класс; Вы должны добавить этот элемент в список селекторов:

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

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

Стилизация вещей на основе их расположения в документе

Есть моменты, когда вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два <em> элемента — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <em> который вложен в <li> Элемент, который я могу использовать селектор под названием descendant combinator(потомок комбинатор), который просто принимает форму пространства между двумя другими селекторами.

Добавьте следующее правило в таблицу стилей.

li em {
  color: rebeccapurple;
}

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

Еще можно попробовать стилизовать абзац, когда он идет сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите +  (соседний братский комбинатор) между селекторами.

Попробуйте также добавить это правило в таблицу стилей:

h1 + p {
  font-size: 200%;
}

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

Note: Как вы можете видеть, CSS дает нам несколько способов нацеливания на элементы, и мы пока только коснулись его поверхности! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашем Selectors статье позже в нашем курсе.

Стилизация вещей на основе состояния

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

a:link {
  color: pink;
}

a:visited {
  color: green;
}

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

a:hover {
  text-decoration: none;
}

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

 

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

Заметка:  Вы часто будете видеть упоминание о доступности в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.

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

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

Сочетание селекторов и комбинаторов

Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:

/* выбирает любой <span> это внутри <p>, который находится внутри <article>  */
article p span { ... }

/* выбирает любой <p> который идет сразу после <ul>, который идет сразу после <h1>  */
h1 + ul + p { ... }

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

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

Это будет стиль любого элемента с классом special, который находится внутри <p>, который приходит сразу после <h1>, который находится внутри <body>. Уф!

В оригинальном HTML, который мы предоставили, единственный элемент в стиле <span class="special">.

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

Завершение

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

На следующем уроке мы рассмотрим структуру CSS.

В этом модуле

  1. Что такое CSS?
  2. Начало работы с CSS
  3. Как структурирован CSS
  4. Как работает CSS
  5. Используя ваши новые знания