Читать книгу: «Основы CSS»

Шрифт:

Составитель Дмитрий Артемович Кудрец

ISBN 978-5-4496-2174-0

Создано в интеллектуальной издательской системе Ridero

Каскадные таблицы стилей

При оформлении HTML-документов приходится по нескольку раз прописывать однотипные теги. Использование каскадных таблиц стилей (CSS) позволяет значительно упростить эту работу. Поддержка стандарта каскадных таблиц стилей и их программируемых элементов появилась, начиная с версии 4.0 и Netscape, и Internet Explorer.

Существует три основных варианта использования таблиц стилей.

Вариант первый

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

<H1 STYLE=«font-family: Arial. Helvetica. San Serif»> Мой сайт </H1>

<P STYLE=«font-size: 12 рt»> Добро пожаловать на мой сайт. </Р>


Если нужно задать сразу несколько свойств, их разделяют точкой с запятой:



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

Вариант второй

Если необходимо многократное применение заданного стиля, его описание таблиц стилей размещается в разделе <HEAD> в теге <STYLE TYPE=«text/css»> … </STYLE>. Параметр TYPE=«text/css» является обязательным и служит для указания броузеру использовать CSS.

<STYLE TYPE=«text/css»>

Р {FONT-STYLE: SMALL-CAPS}

</STYLE>

Выбранный элемент (в данном случае <Р>) в терминах CSS называется селектором, а все, что располагается между фигурными скобками, – определением. Все вместе называется правилом.

Селекторы это те буквы, из которых состоят определения элементов HTML: P, H1, UL и т. д. При создании правила вы сопоставляете выбранному элементу определение стиля. Например, UL {List-Style: Disc}

Элемент <STYLE> может содержать и несколько правил. Каждое из них оканчивается закрывающей скобкой, поэтому даже на одной строке вы можете разместить более одного правила.



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



Одно и то же определение можно применить сразу к нескольким элементам. Для этого надо написать несколько селекторов подряд, разделяя их запятыми.



Такой подход позволяет сделать элементы выглядящими однородно.

Вариант третий

Чтобы не загромождать сам HTML-документ, таблицу стилей можно вынести в отдельный файл. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. CSS-файлы создаются теми же средствами, что и сами HTML-документы (например, в редакторе Блокнот). При этом одна и та же таблица стилей может использоваться неограниченное число раз. Этот документ сохраняется с расширением. CSS, например STYLES. CSS.

Для подключения файла CSS к HTML-документу используется элемент <LINK>, который должен быть помещен в заголовок между <HEAD> и </HEAD>.

<HEAD>

<TITLЕ> Главная страница </TITLЕ>

<LINK REL=«STYLESHEET» TYPE=«TEXT/CSS» HREF=«1.CSS»>

</HEAD>

Файл CSS может содержать различные комментарии, поясняющие назначение тех или иных участков кода. Комментарии в стандарте CSS заключаются в последовательность символов «/» и «*» следующим образом: /* текст комментария */

Бесплатный фрагмент закончился.

Бесплатно
40 ₽

Начислим

+1

Покупайте книги и получайте бонусы в Литрес, Читай-городе и Буквоеде.

Участвовать в бонусной программе
Возрастное ограничение:
12+
Дата выхода на Литрес:
02 февраля 2019
Объем:
62 стр. 77 иллюстраций
ISBN:
9785449621740
Правообладатель:
Издательские решения
Формат скачивания:
Текст, доступен аудиоформат
Средний рейтинг 4,6 на основе 306 оценок
Текст, доступен аудиоформат
Средний рейтинг 4,3 на основе 11 оценок
Текст, доступен аудиоформат
Средний рейтинг 4,6 на основе 103 оценок
По подписке
Текст
Средний рейтинг 3,5 на основе 4 оценок
Текст, доступен аудиоформат
Средний рейтинг 4,7 на основе 591 оценок
По подписке
Текст, доступен аудиоформат
Средний рейтинг 3,5 на основе 17 оценок
Текст, доступен аудиоформат
Средний рейтинг 4,7 на основе 290 оценок
По подписке
Текст, доступен аудиоформат
Средний рейтинг 4,7 на основе 531 оценок
По подписке
Текст
Средний рейтинг 4,6 на основе 31 оценок
Текст
Средний рейтинг 2,9 на основе 7 оценок
По подписке