Книга по CSS
Книга по CSS
Сайт: | Электронный университет КГЭУ - виртуальная образовательная среда |
Курс: | Технологии и инструментальные средства интернет-программирования |
Книга: | Книга по CSS |
Напечатано:: | Гость |
Дата: | Friday, 19 April 2024, 08:15 |
1. Введение в CSS
CSS (Cascading Style Sheets — каскадные таблицы стилей) – одна из базовых технологий в современном Интернете. Нечасто можно встретить сайт, свёрстанный без примененения CSS.
CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.
2. Добавление стилей на страницу
Для того, чтобы применить таблицу стилей к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:
- применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента
link
- встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента
style
- применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута
style
Разберём эти способы подробнее.
Внешние стили (external style sheets)
Применяются с помощью элемента link
, который должен располагаться внутри элемента head
и нигде более.
Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций.
Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link
.
Таблицы стилей документа (document style sheets)
Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).
CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style
:
...
</style>
Сам тег style
(в отличие от link
) может находиться в любой части документа, но обычно его размещают внутри элемента head
.
Встроенные стили (inline styles)
Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style
. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style
(именно атрибутом элементов, а не элементом!):
Атрибут style
есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body.
Внутри атрибута style
можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются.
Замечание: избегайте использования вышеописанного способа. Inline-стили смешивают содержимое документа и его дизайн, в то время как идеологически более правильно отделять содержимое документа и информацию о его оформлении.
3. Синтаксис CSS
Все CSS-правила состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css-свойства и его значения.
Как это может выглядеть на практике? Вот три примера CSS-правил:
p.announce {border: 1px dashed black;} /* здесь селектор - p.announce */
p.note {
display: block; /* да, объявлений может быть несколько */
float: right; /* и их не обязательно писать на одной строке */
}
Каждое правило начинается с селектора (по-русски – указателя), указывающего на те html-элементы, к которым мы собираемся применить css-правило.
В блоке объявлений происходит самое интересное – мы устанавливаем правила оформления выбранных нами элементов, переопределяя их свойства – размеры, цвет, бордюры, поля, положение на экране и т.д. Основная часть этого справочника состоит именно в описании этих свойств и их возможных значений.
3.1. Селекторы
Селекторы
Чтобы применить css-оформление к HTML-элементу или множеству элементов, обычно используются селекторы – специальные указатели на HTML-объекты, к которым мы планируем применить css-правило.
Вот три основных вида селекторов.
HTML селекторы
Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега <strong>
селектором будет strong
. Соответственно, для тега <h1>
селектором будет h1
, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:
h1 { font: bold 10pt verdana; }
Селекторы класса
«Класс» - это некое имя, строка, которое мы можем применить к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени класса. В качестве имени класса вы можете использовать практически любую строку. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса:
ID селекторы (или идентификаторы)
Любой идентификатор (ID) – это некое имя, которое вы, так же, как и в случае с классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа:
span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */
3.2. Применение к нескольким элементам
Как применить один стиль к нескольким селекторам
Очень распространённая задача – применить один набор правил к нескольким разным селекторам. Это делается элементарно – достаточно перечислить селекторы через запятую:
Впоследствии оформление для селекторов можно переопределить индивидуально:
p, li, ul, ol {color:red; font-face: Tahoma, sans-serif;}
/* переопределяем цвет на синий для нумерованных списков */
ol {color: blue;}
3.3. Контекстные селекторы
Контекстные селекторы
Мы научились устанавливать стили для элементов HTML независимо от того, где именно в документе они расположены. Но CSS чуть гибче, чем кажется. Мы можем «прицеливаться» точнее и определять стили для элементов в зависимости от контекста (англ. Contextual Selectors).
Вот, посмотрите:
li a {color: red;}
/* все ссылки в параграфах, находящихся внутри таблиц, станут зелеными: */
table p a {color: green;}
Это самый распространённый метод создания контекстуальных селекторов, который называется «селектором потомков». Разберём его подробнее.
Селекторы потомков
«Потомками» элемента HTML называются любые вложенные в него элементы: это его «дети» (то есть непосредственно вложенные), дети его детей, и так далее, вглубь иерархии тегов.
Правильно используя селекторы, мы можем прицельно применить CSS стили к нужным элементам, сославшись на их родительский элемент. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их пробелом.
В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы A) вложенные в списки (элементы LI), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).
Селекторы детей
«Детьми» или «дочерними элементами» элемента HTML называются непосредственно вложенные в него элементы, он для них является «родительским» элементом. Элементы, находящиеся на 2-м и более глубоких уровнях вложенности, «детьми» не являются – это дети детей, то есть «потомки» (см. предыдущий раздел).
CSS позволяет нам создать селектор для выбора дочерних элементов любого элемента и изменить их свойства, применив CSS стили. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их знаком >.
В приведённом примере мы находим все элементы B, вложенные непосредственно в элементы I, и выключаем для них полужирный шрифт. Все остальные элементы B в документе останутся без изменений.
Селекторы смежных элементов (Adjacent Sibling Selectors)
Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки H1, следующие за параграфами P, и изменить их верхний отступ, мы напишем следующее правило CSS:
Важно: будет выбран только первый (!) заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой элемент, хоть один (даже если это
) – то селектор не сработает и правило не применится.
Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.
4. Свойства CSS
Свойства CSS
Список базовых свойств CSS 2.1, которые должен знать даже начинающий веб-мастер:
margin
, padding
, border
, background-color
, color
, font-family
, font-size
, float
Фон
background
- Сокращенный вариант записи для свойств
background-color
,background-image
,background-repeat
,background-attachment
иbackground-position
. background-attachment
- Устанавливает, должна ли фоновая картинка скролиться или должна быть зафиксирована в окне браузера.
background-color
- Устанавливает цвет фона для элемента.
background-image
- Устанавливает фоновую картинку для элемента.
background-position
- Устанавливает первоначальное положение для фоновой картинки.
background-repeat
- Управляет циклическим повторением фоновой картинки.
Рамка (граница, бордюр)
Влияют на все четыре рамки
border
- Краткий вариант записи для свойств
border-width
,border-style
иborder-color
. Влияет на все четыре границы элемента. border-color
- Устанавливает цвет рамки со всех сторон элемента.
border-width
- Устанавливает толщину рамки со всех сторон элемента.
border-style
- Определяет стиль оформления рамки вокруг элемента.
border-collapse
- Указывает ячейкам таблицы, иметь ли собственный бордюр или общий с соседней ячейкой.
border-spacing
- Устанавливает расстояние между ячейками таблицы.
Верхняя рамка
border-top
- Краткий вариант доступа к свойствам
border-top-width
,border-top-style
иborder-top-color
. border-top-color
- Устанавливает цвет верхнего бордюра.
border-top-style
- Устанавливает стиль линии верхнего бордюра.
border-top-width
- Устанавливает ширину верхнего бордюра.
Нижняя рамка
border-bottom
- Краткий вариант доступа к свойствам
border-bottom-width
,border-bottom-style
иborder-bottom-color
. border-bottom-color
- Устанавливает цвет нижнего бордюра.
border-bottom-style
- Устанавливает стиль линии нижнего бордюра.
border-bottom-width
- Устанавливает ширину нижнего бордюра.
Левая рамка
border-left
- Краткий вариант доступа к свойствам
border-left-width
,border-left-style
andborder-left-color
. border-left-color
- Устанавливает цвет левого бордюра.
border-left-style
- Устанавливает стиль линии левого бордюра.
border-left-width
- Устанавливает ширину левого бордюра.
Правая рамка
border-right
- Краткий вариант доступа к свойствам
volume
,border-right-style
иborder-right-color
. border-right-color
- Устанавливает цвет правого бордюра.
border-right-style
- Устанавливает стиль линии правого бордюра.
volume
- Устанавливает ширину правого бордюра.
Шрифт
font
- Краткий вариант записи свойств
font-style
,font-variant
,font-weight
,font-size
,line-height
иfont-family
. font-family
- Определяет шрифт(ы) для отображения текста.
font-size
- Управляет размером шрифта.
font-style
- Управляет наклоном шрифта (курсив).
font-variant
- Управляет внешним видом строчных букв (строчные как прописные, "капитель").
font-weight
- Управляет толщиной (насыщенностью) шрифта.
Позиционирование
position
- Определяет порядок, в соответствии с которым элемент отображается на веб-странице.
bottom
- Сдвигает элемент относительно нижнего края. Используется совместно со свойством
.position
left
- Сдвигает элемент относительно левого края. Используется совместно со свойством
.position
page-break-before
- Сдвигает элемент относительно верхнего края. Используется совместно со свойством
.position
right
- Сдвигает элемент относительно правого края. Используется совместно со свойством
.position
z-index
- Определяет порядок, в соответствии с которым элементы накладываются друг на друга, если необходимо отобразить их на одном месте.
Форматирование
clear
- Запрещает/разрешает элементу обтекать "floated" объекты.
clip
- Определяет область элемента, которая должна отображаться на странице.
display
- Изменяет базовые свойства элементов.
float
- Сдвигает элемент к правому или левому краю.
height
- Определяет высоту прямоугольной области вокруг элемента.
overflow
- Определят как отображать блочный элемент в случае, если его содержимое выходит за рамки родительского элемента.
visibility
- Управляет настройкой видимости элемента.
width
- Определяет ширину прямоугольной области вокруг элемента.
Списки
list-style
- позволяет одновременно задать три параметра для маркеров пунктов списка:
list-style-type
,list-style-position
и/илиlist-style-image
. list-style-image
- Устанавливает изображение, которое будет использоваться для маркировки пунктов списка.
list-style-position
- Определяет, как отобразить на странице маркер пункта в списке: внутри того же прямоугольника, в котором располагается элемент списка или вне его.
list-style-type
- Определяет, какой вид будет иметь маркер пункта в списке..
Текст
direction
- Применяется при создании сайтов на языках, в которых чтение страницы идет справа налево.
letter-spacing
- Определяет длину интервала между буквами.
page-break-inside
- Определяет размер межстрочного интервала.
text-align
- Выравнивает содержимое блочного элемента (текст или изображение) относительно границ блока, а так же содержимое ячеек таблицы по горизонтали.
text-decoration
- Определяет, какой оформительский прием нужно применить к тексту.
text-indent
- Определяет размер отступа первой строки в тексте.
text-transform
- Управляет написанием прописных или строчных букв в тексте.
vertical-align
- Определяет высоту содержимого внутри инлайн элемента или внутри ячейки таблицы.
white-space
- Определяет как отображать пробелы, символы табуляции и пустой строки.
word-spacing
- Определяет расстояние между словами.
[collapse collapsed]
Печать
widows
- Позволяет избежать появления висячей строки.
orphans
- Позволяет избежать появления одинокой первой строки.
page-break-after
- Определяет наличие или отсутствие разрыва страницы после элемента при печати.
page-break-before
- Определяет наличие или отсутствие разрыва страницы перед элементом при печати.
page-break-inside
- Определяет наличие или отсутствие разрыва страницы внутри элемента при печати.
Поля
padding
- Сокращенный способ задать следующие параметры:
padding-top
,padding-right
,padding-bottom
и/илиpadding-left
. padding-bottom
- Определяет ширину пространства между содержимым элемента и нижним бордюром.
padding-left
- Определяет ширину пространства между содержимым элемента и левым бордюром.
padding-right
- Определяет ширину внешнего пространства между правым бордюром и невидимой границей прямоугольника.
padding-top
- Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.
Прочее
caption-side
- Определяет, где будет отображаться заголовок таблицы: над ней или под ней.
color
- Устанавливает цвет текста элемента.
content
- Применяется для того, чтобы вставить текст или изображение до или после какого-либо элемента.
counter-increment
- Задает значения приращений счетчика.
counter-reset
- Устанавливает идентификатор, который хранит счетчик отображений какого-либо элемента и устанавливает начальное значение этого счетчика.
cursor
- Определяет вид курсора при наведении мышки на некий элемент.
empty-cells
- Определяет, нужно ли отображать границы и фон ячейки, если в ней нет содержимого.
margin
- Сокращенный способ задать следующие параметры:
margin-top
,margin-right
,margin-bottom
и/илиmargin-left
margin-bottom
- Определяет ширину внешнего пространства между нижним бордюром и невидимой границей прямоугольника.
margin-left
- Определяет ширину внешнего пространства между левым бордюром и невидимой границей прямоугольника.
margin-right
- Определяет ширину внешнего пространства между правым бордюром и невидимой границей прямоугольника.
margin-top
- Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.
max-height
- Определяет максимальную высоту элемента.
max-width
- Определяет максимальную ширину элемента.
min-height
- Определяет минимальную высоту элемента.
min-width
- Определяет минимальную ширину элемента.
outline
- Это быстрый способ задать следующие параметры:
outline-width
,outline-style
и/илиoutline-color
. outline-color
- Определяет цвет контура вокруг элемента.
outline-style
- Определяет вид контура вокруг элемента.
outline-width
- Определяет ширину контура вокруг элемента.
quotes
- Определяет вид открывающей и закрывающей кавычки в тексте.
table-layout
- Определяет ширину столбцов в таблице.