CSS уроки: введение, правила, каскады, единицы измерения
CSS введение
Эта статья является первой из серии уроков CSS. Для более общего обзора использования, преимуществ и недостатков CSS, прочитайте CSS: таблицы стилей в веб-странице.
Уроки CSS предполагают, что вы знакомы с HTML. Если хотите, можете просмотреть уроки HTML, прежде чем продолжить.
Что такое CSS?
- CSS расшифровывается как Cascading Style Sheets, в переводе “каскадные стили страницы”.
- Стили, заданные через CSS, определяют, как будут выглядеть на экране элементы HTML-документа (веб-страницы).
- CSS называется каскадным, потому что стили могут быть определены браузерами, пользователями и авторами веб-сайтов. Эти стили в некотором смысле перекрывают друг друга, отсюда и термин «каскадный».
- CSS экономит много рабочего времени: дизайн всех веб-страниц на одном сайте может быть настроен только с одним файлом CSS.
- CSS дает большую гибкость в дизайне веб-страниц: если вам нужно изменить дизайн, достаточно изменить только этот единственный CSS-файл.
- Команды CSS могут быть указаны как в части заголовка документа HTML, так и в виде отдельных файлов с расширением .css, например. style.css.
- В некоторых случаях некоторые браузеры интерпретируют команды CSS не так, как принято. Но в целом CSS очень хорошо поддерживается всеми распространенными браузерами.
CSS – грамматические правила
Как задавать команды в CSS
Команды 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";
}
Селектор типа class
Если вы используете элемент 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
Вместо целого класса вы можете указать стиль для отдельного элемента. Это делается с помощью селектора типа id, обозначенного символом #:
#zacherk {text-decoration:line-through}
При этом элемент, содержащий идентификатор zacherk, будет выглядеть перечеркнутым, например,
<p id = "zacherk"> это выделенный текст </ p>
Идентификатор типа id с именем может использоваться только для одного элемента, т.е. только один абзац может быть назван id = “zacherk”. Если вы хотите, чтобы несколько абзацев использовали один и тот же стиль, вам нужно будет использовать class вместо id.
Комментарии в CSS
Вы можете добавить комментарии к файлу CSS, заключив их в символы
/ * и * / например:
p {text-transform: capitalize}
/ * Команда, чтобы превратить начальную букву каждого слова в заглавную букву * /
Комментарии полезны для ориентирования того, что делает конкретная команда. Поскольку команды CSS, включенные между символами комментариев, не выполняются, другим распространенным применением комментариев является остановка команды без ее удаления.
CSS – каскады и приоритеты
CSS каскады
Одна важная особенность, также отраженная в самом имени CSS – это возможность устанавливать стили на нескольких уровнях (каскадах), причем каждый последующий уровень дополняет или заменяет команды из предыдущего:
- стиль по умолчанию, который определяет каждый браузер;
- стили в отдельном файле CSS;
- CSS команды в заголовке документа HTML;
- стили в отдельных элементах HTML
Чтобы сделать это более понятным, я буду использовать следующую аналогию: мы можем сравнивать команды команд CSS с главнокомандующим. Он может написать командное письмо, которое он может воспроизвести и отправить отдельным начальникам армии. Кроме того, генерал может давать специфические для армии инструкции, такие как отправка телеграммы данному офицеру. Приказы в телеграмме будут дополнять, и в конечном итоге отменять противоречивые приказы, описанные в общем письме.
Наконец, генерал может лично вызвать солдата и дать ему конкретные инструкции. Последний дополнит все другие заповеди, но они будут иметь наивысший приоритет и будут выполнены, если возникнет конфликт с порядками в письме или телеграмме.
Браузер делает именно это при определении окончательного стиля результата. Наиболее распространенные инструкции по стилю встроены в сам браузер, и они будут выполняться, если не указано иное (в нашей аналогии, например, армейские традиции – похожие, но не идентичные – браузеры также имеют небольшие различия во встроенных стилях, которые использования).
Внешний файл инструкций CSS похож на письмо генерала тем, что он может быть продублирован и отправлен на более чем одну страницу. Стиль, указанный в заголовке HTML-страницы, соответствует телеграмме для отдельной армии: инструкции применяются только к конкретной странице и дополнению, что может привести к аннулированию общих инструкций внешнего CSS-файла.
Стиль, указанный в одном элементе, имеет приоритет над всем остальным, так же как личный вызов генерала может либо дополнять, либо отменять все предыдущие инструкции. И чтобы завершить эту аналогию, каждый приказ в армии совершенно не имеет себе равных. Например, если вы введете:
h1 {color: red} и сразу после этого
h1 {color: blue}
действительной будет вторая команда, и цвет заголовка h1 будет не красным, а синим.
Стили во внешнем файле CSS
Хранение команд 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
При создании уникального стиля, который будет использоваться только для одной страницы, лучше всего указывать его как внутренний стиль: в заголовке head документа HTML. Для этого используйте теги <stуle> и </ stуle>, между которыми стилизуются команды CSS. Вот пример:
<heаd>
<stуle>
h1 {цвет: красный}
p {text-indent: 1em;}
th {background-color: # DD2599}
</ stуle> </ heаd>
Стиль в самом элементе HTML
Если вы хотите установить определенный стиль для одного конкретного элемента, вы можете сделать это следующим образом:
<p style = "text-indent: 1em; color: green">
Это сделает отступ в начале абзаца и сделает цвет текста зеленым.
Это утверждение стиля теряет гибкость, которую вы имеете с CSS, и лучше избегать этого. Подумайте о потраченном времени и телефонном счете злополучного генерала, который должен сделать личный звонок каждому из своих солдат при смене стратегии …
CSS – единицы измерения
Команды CSS часто используют разные единицы размера, такие как настройка размера текста, межстрочный интервал, абсолютное позиционирование текста или изображения и т. д. Прежде чем приступить к подробному описанию отдельных команд CSS, давайте посмотрим, какие единицы измерения можно использовать.
Абсолютные единицы
Размер или расстояние, заданные в абсолютных единицах, не зависят от выбранного размера шрифта.
- мм – миллиметр
- см – сантиметр
- in – дюйм(inch), примерно 2.56 см
- pt – точка, 1/72 дюйма
- pc – пика, равная 12 pt
Относительные единицы
Браузеры позволяют пользователям изменять размер текста на веб-страницах. Если для позиционирования элемента используются абсолютные единицы (например, фотография), вполне вероятно, что элемент может оказаться в неожиданном месте на странице при изменении размера текста. Чтобы не допустить такого нарушения дизайна страницы, удобно использовать относительные единицы.
- px – пиксель, точка на экране компьютера. Абсолютный размер зависит от разрешения монитора, на котором отображается веб-страница.
- em – 1em всегда равен размеру используемого в данный момент шрифта для данного элемента. Размер текста по умолчанию в браузерах составляет 16 пикселей, поэтому для текста страницы, если не указано иное, 1em = 16 пикселей. Поскольку em является относительной единицей, если текущий шрифт для заголовка h1 составляет, к примеру, 18 пикселей, то интервал, заданный
h1{ line-height: 0.5 em}
будет составлять 9px , а если размер для h1 будет заменен на 24px, 0.5 em уже будет 12px. - ex – как и em, ex зависит от размера выбранного шрифта и равен размеру строчной буквы x (экс).
Проценты
Значение, заданное в процентах %, может иметь совершенно другое измерение – каким будет конкретное значение, зависит от контекста.
Читайте далее: CSS уроки, 2 часть: CSS родительские элементы, дочерние, псевдоклассы
Разработка сайтов и мобильных приложений. Вы можете заказать у нас:
Готовый маркетплейс, тариф «Базовый»
80 000руб.Создание лендинга
20 000руб.Создание корпоративного сайта
35 000руб.Создание агрегатора, маркетплейса
80 000руб.
