+7 (978) 09 16 718
[email protected]Эта статья является первой из серии уроков CSS. Для более общего обзора использования, преимуществ и недостатков CSS, прочитайте CSS: таблицы стилей в веб-странице.
Уроки CSS предполагают, что вы знакомы с HTML. Если хотите, можете просмотреть уроки HTML, прежде чем продолжить.
Команды CSS можно обобщить следующим образом:
селектор {свойство: значение}
Обратите внимание, что свойство разделяется двоеточием, а сама пара слов заключена в большие скобки: {}
Селектор относится к элементу, на который будет наложен указанный стиль. Это часто HTML-элемент, но может быть селектором класса или идентификатора (для этих селекторов чуть позже). Вот один конкретный пример:
p {text-align: center}
С помощью селектора “p” стиль накладывается на все абзацы, text-align – это функция выравнивания текста на странице, а конкретное значение (center) указывает, что это выравнивание должно быть центрировано. Другими словами, эта команда CSS означает «центрировать текст всех абзацев».
Если значение составляет два или более слов, они должны быть заключены в кавычки. В следующем примере устанавливается шрифт Times New Roman для всех абзацев:
p {font-family: "Times New Roman"}
Если значение содержит числа и единицы измерения, не следует оставлять пробел между числом и единицей измерения:
h1 {line-height: 2em}
– является правильным
h1 {line-height: 2 em}
– неправильно
Вы можете установить более одного свойства для элемента. Все, что вам нужно сделать, это разделить пары свойств точкой с запятой. Следующая команда устанавливает три свойства для заголовков h1 (красный, жирный и подчеркивание) одновременно:
h1 {color: red; font-weight: bold; text-decoration: underline}
Конец команды CSS считается закрывающей скобкой, а не концом строки. Это позволяет вам упорядочить команды чуть более четко:
h1 {
color: red;
font-weight: bold;
text-decoration: underline;
}
Если вы хотите установить общие свойства для нескольких элементов, вы можете сократить код, сгруппировав элементы и указав стиль для группы в целом. Следующая команда указывает заголовки h1, h2 и h3, которые должны отображаться шрифтом Courier New и синим цветом:
h1, h2, h3 {
color:blue;
font-family:"Courier New";
}
Если вы используете элемент HTML для селектора (например, “p”), то указанный стиль будет наложен на все элементы этого типа (в данном случае абзацы). Вы можете наложить стиль на выбранную часть этих элементов, дав им имя типа class и добавив точку (.) И имя класса в селектор после имени элемента.
Например, если вы хотите, чтобы некоторые абзацы были выделены жирным шрифтом, а другие – зеленым, вы можете указать это следующим образом:
p.bolder {font-weight: bold}
p.green {color: green}
Теперь каждый абзац, для которого указан класс «bolder», будет выделен жирным шрифтом, а абзацы в классе «green» будут зеленого цвета:
<p class = "bolder"> Этот абзац будет выделен жирным шрифтом. </p>
<p class = "green"> Этот абзац будет зеленым </p>
Элементы могут принадлежать более чем одному классу одновременно. Имена различных классов, которые вы указываете для элемента, разделяются только интервалом. Это позволяет комбинировать стили для разных классов:
<p class = "bolder green"> Этот абзац будет как зеленым, так и жирным шрифтом </ p>
Если вы используете селектор класса без имени элемента (т. е. только с точкой и именем класса), даже разные элементы, для которых указан один и тот же класс, получат одинаковый стиль:
<h1 class = "green"> Зеленый заголовок h1 </ h1>
<h2 class = "green"> Зеленый заголовок h2 </ h2>
Заголовки обоих типов, h1 и h2, будут зелеными, если селектор CSS указан только с именем класса (не забудьте символ точки класса):
.green {color: green}
Вместо целого класса вы можете указать стиль для отдельного элемента. Это делается с помощью селектора типа id, обозначенного символом #:
#zacherk {text-decoration:line-through}
При этом элемент, содержащий идентификатор zacherk, будет выглядеть перечеркнутым, например,
<p id = "zacherk"> это выделенный текст </ p>
Идентификатор типа id с именем может использоваться только для одного элемента, т.е. только один абзац может быть назван id = “zacherk”. Если вы хотите, чтобы несколько абзацев использовали один и тот же стиль, вам нужно будет использовать class вместо id.
Вы можете добавить комментарии к файлу CSS, заключив их в символы
/ * и * / например:
p {text-transform: capitalize}
/ * Команда, чтобы превратить начальную букву каждого слова в заглавную букву * /
Комментарии полезны для ориентирования того, что делает конкретная команда. Поскольку команды CSS, включенные между символами комментариев, не выполняются, другим распространенным применением комментариев является остановка команды без ее удаления.
Одна важная особенность, также отраженная в самом имени CSS – это возможность устанавливать стили на нескольких уровнях (каскадах), причем каждый последующий уровень дополняет или заменяет команды из предыдущего:
Чтобы сделать это более понятным, я буду использовать следующую аналогию: мы можем сравнивать команды команд CSS с главнокомандующим. Он может написать командное письмо, которое он может воспроизвести и отправить отдельным начальникам армии. Кроме того, генерал может давать специфические для армии инструкции, такие как отправка телеграммы данному офицеру. Приказы в телеграмме будут дополнять, и в конечном итоге отменять противоречивые приказы, описанные в общем письме.
Наконец, генерал может лично вызвать солдата и дать ему конкретные инструкции. Последний дополнит все другие заповеди, но они будут иметь наивысший приоритет и будут выполнены, если возникнет конфликт с порядками в письме или телеграмме.
Браузер делает именно это при определении окончательного стиля результата. Наиболее распространенные инструкции по стилю встроены в сам браузер, и они будут выполняться, если не указано иное (в нашей аналогии, например, армейские традиции – похожие, но не идентичные – браузеры также имеют небольшие различия во встроенных стилях, которые использования).
Внешний файл инструкций CSS похож на письмо генерала тем, что он может быть продублирован и отправлен на более чем одну страницу. Стиль, указанный в заголовке HTML-страницы, соответствует телеграмме для отдельной армии: инструкции применяются только к конкретной странице и дополнению, что может привести к аннулированию общих инструкций внешнего CSS-файла.
Стиль, указанный в одном элементе, имеет приоритет над всем остальным, так же как личный вызов генерала может либо дополнять, либо отменять все предыдущие инструкции. И чтобы завершить эту аналогию, каждый приказ в армии совершенно не имеет себе равных. Например, если вы введете:
h1 {color: red}
и сразу после этого
h1 {color: blue}
действительной будет вторая команда, и цвет заголовка h1 будет не красным, а синим.
Хранение команд CSS во внешнем файле позволяет применять один и тот же стиль к любому количеству страниц. В заголовке head HTML-страницы достаточно указать, что вы хотите, чтобы данный стиль использовал соответствующий файл CSS:
<heаd>
<link rel = "stylesheet" type = "text / css" href = "style1.css" />
</ heаd>
Файл CSS содержит только команды CSS (без тегов HTML), например:
h1 {color:red}
p {text-indent:1em;}
th {background-color:#DD2599}
Поскольку CSS-файлы по сути являются текстовыми файлами, вы можете создавать и редактировать их с помощью простого текстового редактора. При выборе имени файла CSS обязательно включайте расширение .сss
При создании уникального стиля, который будет использоваться только для одной страницы, лучше всего указывать его как внутренний стиль: в заголовке head документа HTML. Для этого используйте теги <stуle> и </ stуle>, между которыми стилизуются команды CSS. Вот пример:
<heаd>
<stуle>
h1 {цвет: красный}
p {text-indent: 1em;}
th {background-color: # DD2599}
</ stуle> </ heаd>
Если вы хотите установить определенный стиль для одного конкретного элемента, вы можете сделать это следующим образом:
<p style = "text-indent: 1em; color: green">
Это сделает отступ в начале абзаца и сделает цвет текста зеленым.
Это утверждение стиля теряет гибкость, которую вы имеете с CSS, и лучше избегать этого. Подумайте о потраченном времени и телефонном счете злополучного генерала, который должен сделать личный звонок каждому из своих солдат при смене стратегии …
Команды CSS часто используют разные единицы размера, такие как настройка размера текста, межстрочный интервал, абсолютное позиционирование текста или изображения и т. д. Прежде чем приступить к подробному описанию отдельных команд CSS, давайте посмотрим, какие единицы измерения можно использовать.
Размер или расстояние, заданные в абсолютных единицах, не зависят от выбранного размера шрифта.
Браузеры позволяют пользователям изменять размер текста на веб-страницах. Если для позиционирования элемента используются абсолютные единицы (например, фотография), вполне вероятно, что элемент может оказаться в неожиданном месте на странице при изменении размера текста. Чтобы не допустить такого нарушения дизайна страницы, удобно использовать относительные единицы.
h1{ line-height: 0.5 em}
Значение, заданное в процентах %, может иметь совершенно другое измерение – каким будет конкретное значение, зависит от контекста.
Читайте далее: CSS уроки, 2 часть: CSS родительские элементы, дочерние, псевдоклассы