Основы CSS3. Селекторы
Любой html-документ, сколько бы он элементов не содержал, будет по сути "мертвым" без использования стилей. Стили или лучше сказать каскадные таблицы стилей ( Cascading Style Sheets ) или попросту CSS определяют представление документа, его внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.
Стиль в CSS представляет правило, которое указывает веб-браузеру, как надо форматировать элемент. Форматирование может включать установку цвета фона элемента, установку цвета и типа шрифта и так далее.
Определение стиля состоит из двух частей: селектор , который указывает на элемент, и блок объявления стиля — набор команд, которые устанавливают правила форматирования. Например:
В данном случае селектором является div . Этот селектор указывает, что этот стиль будет применяться ко всем элементам div.
После селектора в фигурных скобках идет блок объявления стиля . Между открывающей и закрывающей фигурными скобками определяются команды, указывающие, как форматировать элемент.
Каждая команда состоит из свойства и значения . Так, в следующем выражении:
background-color представляет свойство, а red — значение. Свойство определяет конкретный стиль. Свойств css существует множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например, выше указанная команда определяет для свойства background-color значение red . Иными словами, для фона элемента устанавливается цвет "red", то есть красный.
После каждой команды ставится точка с запятой, которая отделяет данную команду от других.
Наборы таких стилей часто называют таблицами стилей или CSS ( Cascading Style Sheets или каскадные таблицы стилей). Существуют различные способы определения стилей.
Атрибут style
Первый способ заключается во встраивании стилей непосредственно в элемент с помощью атрибута style :
Здесь определены два элемента — заголовок h2 и блок div. У заголовка определен синий цвет текста с помощью свойства color . У блока div определены свойства ширины ( width ), высоты ( height ), а также цвета фона ( background-color ).
Второй способ состоит в использования элемента style в документе html. Этот элемент сообщает браузеру, что данные внутри являются кодом css, а не html:
Результат в данном случае будет абсолютно тем же, что и в предыдущем случае.
Часто элемент style определяется внутри элемента head , однако может также использоваться в других частях HTML-документа. Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор , после чего в фигурных скобках идет все те же определения свойств css и их значения, что были использованы в предыдущем примере.
Второй способ делает код html чище за счет вынесения стилей в элемент style . Но также есть и третий способ, который заключается в вынесении стилей во внешний файл.
Создадим в одной папке с html странице текстовый файл, который переименуем в styles.css и определим в нем следующее содержимое:
Это те же стили, что были внутри элемента style . И также изменим код html-страницы:
Здесь уже нет элемента style , зато есть элемент link , который подключает выше созданный файл styles.css: <link rel="stylesheet" type="text/css" href="styles.css"/>
Таким образом, определяя стили во внешнем файле, мы делаем код html чище, структура страницы отделяется от ее стилизации. При таком определении стили гораздо легче модифицировать, чем если бы они были определены внутри элементов или в элементе style , и такой способ является предпочтительным в HTML5.
Использование стилей во внешних файлах позволяет уменьшить нагрузку на веб-сервер с помощью механизма кэширования. Поскольку веб-браузер может кэшировать css-файл и при последующем обращении к веб-странице извлекать нужный css-файл из кэша.
Также возможна ситуация, когда все эти подходы сочетаются, а для одного элемента одни свойства css определены внутри самого элемента, другие свойства css определены внутри элемента style , а третьи находятся во внешнем подключенном файле. Например:
А в файле style.css определен следующий стиль:
В данном случае в трех местах для элемента div определено свойство width , причем с разным значением. Какое значение будет применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:
Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше итоговой шириной будет 120 пикселей
Далее в порядке приоритета идут стили, которые определены в элементе style
Наименее приоритетными стилями являются те, которые определены во внешнем файле.
Атрибуты html и стили css
Многие элементы html позволяют устанавливать стили отображения с помощью атрибутов. Например, у ряда элементов мы можем применять атрибуты width и height для установки ширины и высоты элемента соответственно. Однако подобного подхода следует избегать и вместо встроенных атрибутов следует применять стили CSS. Важно четко понимать, что разметка HTML должна предоставлять только структуру html-документа, а весь его внешний вид, стилизацию должны определять стили CSS.
Что такое стиль в css
★ что такое стиль перейти ↓
★ что такое CSS перейти ↓
★ что можно сделать с помощью стиля перейти↓
★ задание стиля внутри кода элемента
(встроенный стиль) перейти↓
★ задание стиля вне кода элемента
(внутренний стиль) перейти↓
★ создаем документ средствами CSS перейти↓
★ создание с помощью стиля изображений: перейти↓
круг
круг с окантовкой
треугольник
перевернутый треугольник
свой дизайн кнопки обработчика
★ как заменить одну картинку другой перейти↓
чистый HTML
чистый CSS
чистый JavaScript
смена фоновой картинки
★ анимационные эффекты с помощью CSS перейти↓
растягивание элемента
Затухание элемента
Поворот элемента
смена картинок с затуханием
смена картинок с плавным исчезновением
★ простое новое окно средствами CSS перейти↓
★ как задать hover сразу для нескольких элементов перейти↓
★ маленькие хитрости CSS перейти↓
как убить шрифт
как отцентрировать текст в рамке по вертикали
как изменить расстояние между буквами и строками
как изменить стиль ссылки
как изменить стиль рамки
как отменить стиль элемента
что такое z-index
как вставить текст в стиль CSS
как сделать перенос строки в тексте, записанном в стиле CSS
Для придания HTML-документу определенного внешнего вида, т.е. его оформления, каждый элемент HTML-документа имеет атрибут под названием "стиль" (style). Стиль — это правило,описывающее форматирование отдельного элемента на странице. Свойства атрибута "стиль" позволяют задать тип, размер и цвет шрифта, расположение элементов HTML-документа на экране монитора, сделать элемент невидимым или снова вернуть ему видимость и многое другое.
что такое CSS Для описания внешнего вида веб-страницы используется язык CSS. Аббревиатура CSS расшифровывается следующим образом: Каскадные Таблицы Стилей(Cascading Style Sheets). CSS — формальный язык описания внешнего вида документа, который используется как средство описания, оформления внешнего вида веб-страниц. CSS и HTML — это два разных языка для разных целей. Язык HTML-кода отражает смысловое содержание и логическую структуру веб-страницы. Язык CSS используется для описания внешнего вида, дизайна веб-страницы. Например, чтобы задать размер шрифта и его цвет для одного конкретного абзаца текста в рамках документа, нужно записать код: <p style="font-size: 25px; color: red;"></p> В этом примере внутри тэгов style расположен стиль, задающий красный цвет текста и его размер (25px). Или: установить элементу с идентификатором красный цвет текста с помощью атрибута style. Пишем: <p ></p> <script> document.getElementById("text").style.color = "red";//св-во color объекта style </script> Текст, выведенный с помощью идентификатора text, будет красным.
что можно сделать с помощью стиля Как было указано выше, стиль позволяют задать тип,размер и цвет шрифта, расположение элементов HTML-документа на экране монитора, сделать элемент невидимым или снова вернуть ему видимость и многое другое. ПОСМОТРИТЕ , как с помощью стиля можно создать то или иное оформление Web-страниц.
задание стиля внутри кода элемента (встроенный стиль) Проще всего записать стилевое описание непосредственно в самом элементе. Оно включает перечисление наименований свойств атрибута "стиль" и их значений внутри кода элемента. Таблица стилей, заданная внутри элемента HTML при помощи атрибута style, называется встроенной. Если вы решите изменить цвет и размер шрифта абзаца каком-то месте документа, то можно записать <p style="font-size:20px; color:red"></b>далее идет текст</p> Если точно такое же изменение потребуется в другом месте документа, придется повторить указанный код. Для разделения элементов списка между собой используется знак "точка с запятой" (;). Например, для задания расположения элемента в окне для отступа сверху мы пропишем следующее: margin-top: 10px. Для отступа справа: margin-right: 0px. Для задания отступа снизу: margin-bottom: 0px. Для задания отступа слева: margin-left: 40px. Можно все объединить, прописав следующее: margin: 10px 0px 0px 40px; Цифры после margin означают отступы: сверху, справа, снизу и слева. Например, для картинки код стиля будет выглядеть так.
<img SRC=’18.jpg’ style=’width:375; height:250; margin-top:10px; margin-left:50px;’> Можно сократить код стиля: <img SRC=’18.jpg’ style=’width:375; height:250; margin: 10px 0px 0px 50px;’>
Эти коды помещают в body между <div> и </div>.При наличии в окне браузера
большого количества элементов величины margin-top могут принимать отрицательные значения.
Для понимания терминов позиционирования элемента приводим две картинки,взятые из сайта Романа Чуева.
задание стиля вне кода элемента (внутренний стиль) Второй способ задания стиля именуется «внутренний стилем». При использовании встроенного стиля свойства элемента достаточно указать только один раз между тегами <style> и </style> после кода </head>. Задав набор параметров (стилей) для каждого отдельного элемента сайта, в дальнейшем нужно будет просто указать его наименование, а не прописывать все характеристики каждый раз полностью. Набор параметров (стилей) образует список, элементы которого можно записывать как в одну строку, так и в несколько. Начинается список строкой, содержащей имя элемента и открывающую фигурную скобку (закрывающая скобка указывает на конец списка). Для разделения элементов списка между собой используется знак "точка с запятой" (;). Будьте внимательны: забыли одну скобку или двоеточие — все: ничего работать не будет, стиля как будто не существует. Как указать элемент, к которому применяется встроенный стиль? Это можно сделать двумя способами. Либо задать идентификатор внутри элемента HTML при помощи атрибута id, либо задать класс с помощью атрибута class внутри элемента HTML. Если стиль задается через идентификатор, то в первая строка списка будет содержать знак диеза # и имя самого идентификатора. Если вместо идентификатора используется класс, то строка начинается с точки . и к ней приписывается имя класса. Применительно к стандартным элементам (table, img, tr и т.п.) точку не ставят. Примеры использования "id" и "class" применительно к стилю рассмотрены в дальнейших примерах.
Пример использования стилей
Эта строка имеет внутренний стиль
Эта строка имеет встроенный стиль
создание с помощью стиля изображений Средствами чистого CSS можно создавать изображения. Приведем некоторые примеры. Все отступы работают только для этой страницы.
Глава 2
CSS
Как мы уже пояснили в предыдущей главе, элементы HTML позволяют сайтостроителям разметить документ в соответствии с его структурой. В спецификации HTML перечислены рекомендации по отображению браузерами этих элементов. К примеру, можно быть более-менее уверенным, что содержание контейнера strong будет отображено полужирным шрифтом. Вполне можно доверять и тому факту, что большинство браузеров отобразит содержимое контейнера h1 крупным шрифтом. по меньшей мере, крупнее, чем p , и крупнее, чем h2 . Однако помимо веры и надежды на это, средств контроля за внешним видом текста у нас просто нет.
CSS все меняет. CSS усаживает дизайнера в кресло водителя. Мы посвятим остаток книги рассказу о том, что можно делать с помощью CSS. А в этой главе начнем с ознакомления вас с основами написания таблиц стилей и основами совместного функционирования CSS и HTML для описания и структуры, и внешнего вида вашего документа.
Правила и таблицы стилей
Для того, чтобы начать пользоваться CSS не нужно даже писать таблицы стилей. Шестнадцатая глава расскажет, как ссылаться на существующие в Сети таблицы.
Существуют два метода создания таблиц CSS. Можно либо воспользоваться обычным текстовым редактором и писать таблицы стилей "от руки", либо воспользоваться специальным инструментом, поддерживающим CSS, к примеру, приложением для веб-дизайна. Специальные инструменты позволяют создавать таблицы стилей без изучения синтаксиса CSS. Однако впоследствии дизайнеры во многих случаях предпочитают ручную отладку таблиц стилей, так что мы рекомендуем вам научиться писать и редактировать CSS от руки. Давайте приступим!
То, что вы видите, это простое правило CSS, содержащее одно объявление. это заявление стилистического параметра одного элемента или нескольких. это набор из одного или более правил, прилагаемых к HTML-документу. Правило выше устанавливает цвет всех заголовков первого уровня ( h1 ). Давайте посмотрим, какой визуальный эффект оно могло бы произвести:
Теперь давайте тщательно разберем правило.
Анатомия правила
- Селектора — части перед левой фигурной скобкой
- Объявления — части внутри фигурных скобок
это звено, связующее HTML-документ и стиль. Оно устанавливает на какие элементы влияет объявление. это часть правила, которая определяет эффект. В примере выше селектор это тег h1 , а объявление "color: green". Следовательно, объявление повлияет на все элементы h1 , то есть, они позеленеют. (Свойство color влияет только на цвет текста; существуют другие свойства для фона, границ и т.д.)
Предыдущий селектор основан на элемента: он выбирает все элементы типа " h1 ". Этот вид селектора зовется . Любой тип элемента HTML может быть использован в качестве селектора типа. Селекторы типа являются простейшим видом селекторов. Мы обсудим другие виды селекторов в See CSS selectors. , "CSS selectors."
Анатомия объявления
- Свойство — часть перед двоеточием
- Значение — часть после двоеточия
это качество либо характеристика, которыми нечто обладает. В предыдущем примере это color. CSS2 (см. separate box) определяет примерно 120 свойств и мы можем присвоить значения им всем.
Спецификация CSS
Каскадные таблицы стилей формально описаны в двух спецификациях от W3C: CSS1 и CSS2. CSS1 создана в декабре 1996 года, и описывает простую модель форматирования, в основном для экранных представлений. CSS1 имеет около 50 свойств (к примеру color и font-size). CSS2 была окончена в мае 1998 года и основана на CSS1. CSS2 включает все свойства CSS1 дополнительно 70 собственных, таких как описания звуковых представлений и разрывы страниц. В этой книге мы не пытаемся делать различие между CSS1 и CSS2, мы будем использовать термин "CSS", разве что различие окажется важным. Большинство особенностей, описанных в первых четырех главах часть CSS1. Если вы желаете почитать спецификации CSS самостоятельно, их можно найти на:
это точная спецификация свойства. В примере, это "green" "зеленый", но точно также цвет мог бы быть синим (blue), красным (red), желтым (yellow) или каким-нибудь еще.
Диаграмма ниже иллюстрирует все компоненты правила. Фигурные скобки (< >) и двоеточие ( позволяют браузерам различать селектор, свойство и значение.
Рисунок 2.2 Диаграмма правила.
Группирование селекторов и правил
При создании CSS целью является сжатость. Мы отметили, что если уменьшить размер таблиц стилей, это позволит дизайнерам писать и редактировать их "от руки". К тому же короткие таблицы грузятся быстрее длинных. Поэтому в CSS есть несколько механизмов уменьшить размер таблиц стилей путем группировки селекторов и объявлений.
Для примера, рассмотрите эти три правила:
У всех трех правил абсолютно одинаковое объявление они устанавливают шрифт полужирным. (Это делается с помощью свойства font-weight, которое мы обсудимв See Fonts. .) Поскольку все три объявления идентичны, можно сгруппировать селекторы в , и указать объявление лишь один раз, вот так:
Это правило производит такой же эффект, как и первые три..
Селектор может иметь больше одного объявления. К примеру, можно написать таблицу стилей с этими двумя правилами:
В этом случае, мы устанавливаем все элементы h1 зелеными и центрированными на листе. (Это делается с помощью свойства text-align, которое мы обсудим в главе 5 .)
Но этого же эффекта можно добиться быстрее, если сгруппировать объявления, которые относятся к одному и тому же селектору, в , вот так:
Все объявления быть внутри фигурных скобок. Точка с запятой разделяет объявления и может, но не должна также появляться в конце последнего объявления. Кроме того, для повышения удобочитаемости вашего кода, предлагаем размещать каждое объявление в отдельной строчке, как мы сделали здесь. (Браузерам все равно, они просто проигнорируют все лишние пробелы и переводы строк.)
Теперь вы знаете основы создания правил CSS и таблиц стилей. Однако, мы еще не закончили. Чтобы таблица произвела какой-то эффект, ее придется "приклеить" к своему документу HTML.
"Приклеивание" таблиц стилей к документу
- Применить базовую, внутридокументную таблицу стилей, к документу, исп ользуя тег style .
- Применить таблицу стилей к отдельному тегу, используя атрибут style .
- Привязать внешнюю таблицу стилей к документу, используя элемент link .
- Импортировать таблицу стилей, испольхуя запись CSS @import.
В следующем разделе, мы обсудим первый метод: с использованием тега style . Атрибут style мы обсудим в главе 4 , "Селекторы CSS", а использование элемента link element и записи @import в главе 16 , "Внешние таблицы стилей".
"Склеивание" с использованием тега STYLE
Можно склеить таблицу стилей и HTML документ, поместив таблицу стилей внутрь контейнера style вверху вашего документа. Тег style был введен в HTML в частности для того, чтобы позволить вставлять таблицы стилей внутрь HTML документов. Вот таблица стилей (полужирным шрифтом) прикрепленная к документу-образцу с использованием тега style . Результат показан в рисунке 2.3 .
Рисунок 2.3 Результат добавления к таблице стилей правила изменения цвета тегов h1 на зеленый и последующего прикрепления таблицы к документу с использованием контейнера style . (попробуйте)
Обратите внимание на то, что тег style размещен после тега title и перед тегом body . Заголовок документа "title" не появляется на самой странице, поэтому стили CSS не оказывают на него влияния.
Содержимое тега style это таблица стилей. Однако, в то время, как содержимое таких тегов, как h1 , p и ul появляется на странице, содержимое тега style там не появляется. Точнее, на странице появляется эффект от содержимого контейнера style таблицы стилей. Поэтому вы не видите "< color: green >", показанным на экране; вместо этого вы видите два тега h1 зеленого цвета. Правил, определяющих цвет прочих элементов, добавлено не было, так что все прочие элементы будут отображаться цветом по умолчанию.
Браузеры и CSS
Для обновляемого обзора доступных браузеров, просмотрите страницу обзоров W3C
Для того, чтобы CSS работала как написано в этой книге, необходимо использовать CSS-совместимый браузер, то есть, браузер, поддерживающий CSS. CSS-совместимый браузер узнает тег style как контейнер для таблицы стилей и отображает документ соответственно. Многие браузеры, распространенные сегодня, поддерживают CSS, например, Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5 (O3.5). По скромным подсчетам более половины пользователей Сети используют CSS-расширенные браузеры, и их число постоянно растет. Велика вероятность того, что люди, с которыми вы общаетесь, имеют CSS-расширенные браузеры. Если нет, дайте им причину обновиться!
Лучший источник информации о том, как различные браузеры поддерживают CSS WebReview’s charts
Увы, не все реализации CSS совершенны. Когда вы начнете экспериментировать с таблицами стилей, вы вскоре заметите, что каждый браузер имеет ряд багов и ограничений. В целом, новые браузеры ведут себя лучше старых. IE4 и O3.5 среди лучших, а следующее предложение Netscape под кодовым именем Gecko также обещает более усовершенствованную поддержку для CSS.
Те, кто не пользуется CSS-расширенными браузерами, все же могут читать страницы, использующие таблицы стилей. CSS заботливо спроектировали так, чтобы всё содержимое оставалось видимым, даже если браузер ничего не знает о CSS. Некоторые браузеры, такие как вторая и третья версии Netscape Navigator, не поддерживают таблицы стилей, но они знают о теге style чтобы полностью его игнорировать. После поддержки таблиц стилей, это и есть правильное поведение.
Однако другие браузеры, которые не поддерживают тега style , такие как Netscape Navigator 1 и Microsoft Internet Explorer 2, проигнорируют теги style , но покажут содержимое контейнера style . Таким образом, пользователь получит таблицу стилей напечатанной вверху страницы. В настоящий момент, лишь небольшой процент пользователей Сети может столкнуться с этой проблемой. Чтобы предупредить это, можно поместить свою таблицу стилей внутрь , что мы обсудим в главе 1 . Поскольку комментарии не отображаются на экране, поместив таблицу стилей внутрь HTML-комментария, вы не дадите старейшим браузерам показать содержимое контейнера style . CSS-расширенные браузеры учитывают этот трюк и расценят содержимое контейнера style как табицу стилей.
Вспомните, что комментарии HTML начинаются с <!— и заканчиваются на —> . Вот кусочек предыдущего примерного кода, показывающий, как писать таблицу стилей в комментарии HTML. Комментарий окружает только содержимое контейнера style :
В CSS также есть собственные способы комментирования, которые можно использовать внутри таблицы стилей. Комментарий CSS начинается с "/*" и оканчивается на "*/." (Те, кто знаком с языком программирования C, узнают его.) Правила CSS помещененные в комментарий CSS никак не повлияют на предсталение документа.
Браузеру необходимо сообщить, что вы работаете с таблицами стилей CSS. В настоящее время CSS единственный язык таблиц стилей, используемый с HTML-документами, и мы не думаем, что это скоро изменится. Для XML ситуация может быть и иной. Но точно так, как существует более одного формата изображений (сразу вспоминаются GIF, JPEG и PNG), может быть и больше одного языка таблиц стилей. Так что это хорошая привычка сообщать браузерам, что они работают с CSS. (К тому же, HTML этого требует.) Это делается с помощью атрибута type тега style . Значение type указывает, какой тип таблиц стилей используется. Для CSS значение будет "text/css". Нижеследующее отрывок из предыдущего документа-образца, показывающий, как лучше писать это (в сочетании с использованием комментариев HTML):
Когда браузер загружает документ, он проверяет, сможет ли он понять язык таблиц стилей. Если сможет, он пытается прочесть таблицу, иначе проигнорирует. Атрибут type (см. в главе 1 обсуждение HTML-атрибутов) в теге style это способ дать браузеру понять, какой язык стилей используется. Атрибут type должен быть включен.
Чтобы облегчить чтение примеров, мы решили не заключать таблицы стилей в HTML-комментарии, но мы обязательно будем использовать атрибут type во всей книге.
Древовидные структуры и наследование
Вспомните из главы 1 обсуждение HTML, представляющего документ в виде древовидной структуры, и того, что элементы HTML имеют дочерние и родительские объекты. Есть много причин для создания древовидных документов. Для таблиц стилей есть одна очень хорошая причина: наследование. Как дети наследуют своих родителей, так и HTML-элементы. Только вместо наследования генов и денег, элементы HTML наследуют стилистические свойства.
Давайте начнем с того, что посмотрим на документ-образец.:
Древовидная структура этого документа выглядит так:
Посредством наследования, значения свойств CSS присвоенные одному элементу, передадуться вниз по дереву его потомкам. Например, в наших образцах зеленый цвет до сих пор присваивается тегам h1 и h2 . Теперь, скажем, нам нужно присвоить этот цвет всем элементам документа. Можно сделать это, перечислив все типы элементов в селекторе.:
Однако, большинство документов HTML сложнее нашего образца, и таблица стилей вскоре сильно удлинилась бы. Есть способ лучше — и короче. Вместо присвоения стиля каждому типу элемента, мы присваиваем его их общему предку: тегу body :
Поскольку прочие элементы наследуют свойства тега body , все они наследуют и зеленый цвет. (Рисунок 2.4 ).
Рисунок 2.4 Рузельтат наследования. (попробуйте)
Как вы уже заметили, наследование транспортное средство, которое распространяет стилистические свойства на потомков элемента. Поскольку тег body общий предок всех видимых элементов, body подходящий селектор для присваивания стилистических правил всему документу.
Аннулирование наследования
В предыдущем примере, всем элементам дали одинаковый цвет посредством наследования. Иногда, все же, дети не похожи на родителей. Не удивительно, что это применимо и к CSS. Скажем, вы бы хотели, чтобы содержимое тегов h1 отображалось бы синим цветом, а остальное зеленым. Это легко сделать в CSS:
Раз тег h1 дочерний элемент тега body (и, следовательно, наследует body ), эти два правила в таблице стилей выше несовместимы. Первое присваивает цвет содержимому тега body , а, значит, и цвет элементов h1 посредством наследования; в то время, как второе правило присваивает цвет исключительно тегу h1 . Какое из них победит? Давайте узнаем:
Причина, по которой побеждает второе правило, в том, что оно более чем первое. Первое правило очень общее: оно влияет на все элементы страницы. Второе правило из всего документа влияет только на элементы h1 , а, значит, оно более конкретно.
Будь CSS языком програмирования, порядок, в котором определяются правила, определял бы, какое из них выиграет. Но CSS не язык программирования, и в примере выше порядок порядок не имеет значения. Результат был бы точно таким, используй мы эту таблицу стилей:
CSS разработали так, чтобы разрешать противоречия между таблицами стилей как в примере выше. Конкретность один из аспектов этого. Детали можно найти в главе 15 , "Каскадирование и наследование."
Свойства, которые не наследуются
В общем случае, свойства в CSS наследуются от родительского элемнта к дочернему, как описано в предыдущих примерах. Некоторые свойства, однако, не наследуются, и в этом всегда есть веская причина. Используем свойство background (описано в главе 11) как пример свойства, которое не наследуется.
Скажем, вам нужно установить фоновое изображение для страницы. Это обычный эффект в Сети. В CSS можно написать:
Свойство background "фон" имеет URL ("texture.gif"), указывающий фоновое изображение в качестве значения. Когда изображение загружено, страница выглядит так:
- Фоновое изображение перекрывает поверхность наподобие обоев фоны элементов h1 и p также были перекрыты. Это не из-за наследования, причина в том, что если не определено иначе, все фоны прозрачны. Так что, раз мы не определили как-либо фоны для содержимого тегов h1 или p , фон родительского элемента body будет просвечивать.
- Вдобавок к URL изображения, в качестве фона также приваивается цвет (по умолчанию белый). Если изображение не будет найдено, вы увидите вместо него цвет.
- Цвет содержимого body установлен черным. Чтобы гарантировать контраст между текстом и фоном, хорошей привычкой будет всегда устанавливать свойство color когда устанавливаете свойство background.
А почему, собственно, свойство background не наследуется? Визуально, эффект от прозрачности подобен наследованию: выглядит так, будто все элементы имеют один и тот же фон. Есть две причины: во-первых, прозрачные фоны отображаются скорее (нечего отображать!), чем прочие фоны. Во-вторых, поскольку фоновые изображения выравниваются относительно элементов, к которым принадлежат, т.е. в ином случае вы бы не всегда наблюдали гладкие стыковки фона.
Стандартные задачи в CSS
Присвоения цветов и фонов, как описано выше, среди наиболее частых задач, выполняемых CSS. Прочие общие задачи включают присвоение шрифтов и свободного места вокруг элементов. Этот раздел обеспечивает вам экскурсию по наиболее часто используемым свойствам CSS.
Частые задачи: шрифты
Начнем-ка со шрифтов. Если вам случалось пользоваться специальными приложениями для верстки, вы сможете разобраться в этой небольшой таблице стилей:
Это правило присваивает определенный шрифт элементам h1 . Первая часть значения 36pt устанавливает шрифт размером 36 пунктов. "Пункт" старая типографская единица измерения, которая здравствует и в цифровом веке. В следующей главе мы расскажем, почему стоит использовать единицу "em" вместо "pt" но пока что заострим внимание на пунктах. Вторая часть значения serif сообщает браузеру, что нужно использовать шрифт с серифами (маленькими засечками на концах шрифтов, глава 5 расскажет вам о них подробнее). Более декоративные шрифты с засечками лучше подходят домашней страничке Баха, поскольку современные санс-серифные шрифты (шрифты без засечек) не использовались в его время. Вот результат:
Свойство font это укороченное свойство для установки нескольких других свойств одновременно. Используя его, можно сократить свои таблицы стилей, и присвоить значения всем свойствам, которые оно заменяет. Если же выбрать подробную версию, пришлось бы установить каждое из них, чтобы получилось, как в примере вверху:
Иногда нужно всего лишь установить лишь одно из них. Например, вам нужно наклонить текст в некоторых элементах. Вот пример.:
Свойство font-style не изменит размера шрифта либо семейство шрифтов, оно просто наклонит существующий шрифт. Когда оно присвоено элементу ul , содержимое тегов li внутри этого контейнера станет наклоенным, поскольку свойство font-style наследуется. Вот результат применения к тестовой странице, которые вы уже знаете.:
Похожим образом, свойство font-weight используется для изменения плотности толщины букв. Можно еще больше выделить пункты списка, присвоив их предку значение bold :
Последние свойства font-variant и line-height до сих пор не слишком широко поддерживаются браузерами, а потому не используются широко.
Частые задачи: поля
Установка свободных пробелов вокруг элементов основной инструмент в типографии. Вверху заголовка над этим абзацем есть интервал, немного меньший внизу его. У этого абзаца, напечатанного в книге, есть свободные промежутки слева и (немного меньше) справа. CSS можно использовать, чтобы определить, сколько расстояния должно быть вокруг различных видов элементов.
По умолчанию, ваш браузер знает совсем немного о том, как отображать раличные виды элементов в HTML. Например, он знает, что списки и содержание тегов blockquote печатаются с отступами, чтобы отделить их от основного текста. Как дизайнер, вы можете основываться на этих установках, одновременно определяя свои собственные детали. Давайте попробуем Давайте рассмотрим тег blockquote в качестве примера. Вот тестовый документ:
Скриншот внизу показывает, как типичный HTML-браузер отобразит этот документ:
Как можно видеть, браузер добавил пробелы со всех сторон цитируемого текста. В CSS эти пробелы называются "margins" "поля" и все элементы имеют поля со всех четырех сторон. Свойства называются: margin-top, margin-right, margin-bottom и margin-left. Можно изменить отображение содержимого контейнера blockquote , написав маленькую таблицу стилей:
Единица "em" будет подробно рассмотрена в следующей главе, но уже сейчас можно раскрыть ее секрет: она масштабирует относительно размера шрифта. Таким образом, код в примере выше создаст вертикальные поля такой же высоты, как и шрифт ( 1em ) элемента blockquote , и горизонтальные поля с нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки будет отличаться, сделаем его курсивным. Результат таков:
Точно так же, как font укороченное свойство для установки нескольких шрифтовых свойств сразу, margin это укороченное свойство которое устанавливает все свойства полей. Поэтому пример вверху можно записать и как:
Первая часть значения — 1em — присваивается верхнему полю (собственное свойство margin-top). Отсюда отсчитывается против часовой стрелки: 0em присваивается к margin-right (правое поле), 1em присваивается margin-bottom (нижнее поле), и 0em присваивается margin-left (левое поле).
Поскольку левое поле равно нулю, цитируемому тексту нужно больше стиля, чтобы отделить его от остального текста. Установка в font-style значения italic помогает, а добавление фонового цвета еще больше усиливает цитату:
Как и ожидалось, фоновый цвет позади цитаты изменился. В отличие от предыдущих примеров, цвет определялся в частях красного-зеленого-синего (RGB от англ. red/green/blue) цветов. Цвета RGB детально описываются в главе 11 .
Стилистической проблемой в верхнем примере является то, что фоновый цвет едва покрывает цитируемый текст. Пространство вокруг цитаты область границ не запоняется цветом элемента. В CSS есть другой вид разделителей, называемый "padding" "заполнение пустотой", который и использует цвет элемента. В других Во всех других отношениях, свойства заполнения подобны свойствам границ: они добавляют промежутки вокруг элемента. Давайте добавим заполнение к цитате:
Результат установки заполнения выразился в пробеле между текстом и треугольником, его окружающим:
Обратите внимание, что свойству padding дано лишь одно значение ( 0.5em ). Как и свойство margin, padding может принимать 4 значения, которые могут быть приписаны к верхнему, правому, нижнему и левому заполнению соответственно. Однако, когда одно и то же значение приваивается всем сторонам, единичное его упоминание сработает. Это справедливо и для padding и для margin (также как и для некоторых других свойств границ, которы описаны См. Промежутки вокруг блоков. ).
Частые задачи: ссылки
Чтобы облегчить пользователям проглядывание гипертекстовых документов, ссылки должны иметь стиль, отличный от нормального текста. Браузеры HTML часто подчеркивают текст гиперссылок. Также применяются различные цветовые схемы, указывающие, переходил ли уже пользователь по этой ссылке или нет. Поскольку гиперссылки являются довольно значимой частью Сети, в CSS есть специальная поддержка для их стилизации. Вот простой пример:
Примерный код вверху указывает, что непосещенные ссылки должны быть подчеркнуты:
Ссылки подчеркнуты, как мы и указали, но они вдобавок синие, чего мы не указывали. Когда авторы не указывают все возможные стили, браузеры используют стили по умолчанию, чтобы заполнить пробелы. Взаимодействие между авторскими стилями, стилями по умолчанию и пользовательскими стилями (собственными предпочтениями пользователя) еще один пример противоречия между решающими правилами CSS. Это называется "каскадом"("C" в "CSS"). Мы обсудим каскад ниже.
Селектор ( A:link ) заслуживает особого замечания. Вы, возможно, узнаете "A" как тег HTML, но последняя часть нова. ":link" это один из так называемых псевдо-классов CSS. Псевдо-классы используют, чтобы наделить стилем элементы, основанные на информации извне самого документа. К примеру, автор документа не может знать, перешли ли по определенной ссылке или нет. Детально псевдо-классы описываются в главе 4 , а здесь мы лишь дадим еще несколько примеров:
Это правило присваивает стиль посещенным ссылкам, точно так, как A:link присваивает стиль непосещенным ссылкам. Вот пример посложнее:
Последнее правило знакомит нас с новым псевдо-классом :hover. При условии, что пользователь перемещает указующее устройство (вроде мыши), определенный стиль будет приложен к элементу, когда пользователь двигает курсор над ("зависает" над) ссылкой. Вот как это выглядит:
У псевдо-класса :hover интересная история. Он появился в CSS2 после того, как соответствующий эффект стал популярен среди программистов JavaScript. Решение в JavaScript требует сложного кода по сравнению с псевдо-классами CSS, и это пример того, как CSS собирает эффекты, ставшие популярными среди Веб-дизайнеров.
Слово о каскадах
Фундаментальной чертой CSS является то, что более чем одна таблица стилей может повлиять на представление документа. Эта черта известна как , потому что различные таблицы стилей считаются идущими сериями. Каскадность является фундаментальной чертой CSS, потому что мы знаем, что любой документ вполне вероятно может получить таблицы стилей из многих исотчников: браузера, дизайнера и, возможно, пользователя.
В последнем наборе примеров вы увидели, что цвет текста ссылок стал синим без конкретизации таблице стилей. Кроме того, браузерам известно, как форматировать содержимое тегов blockquote и h1 без явного указания. Все, что браузер знает о форматировании, хранится в его и совмещается с авторскими и пользовательскими таблицами стилей, когда документ отображается.
Мы годами знали, что дизайнеры хотят проектировать собственные таблицы стилей. Однако, мы обнаружили, что пользователи тоже хотят иметь возможность влиять на представление документов. С CSS они могут сделать это заполняя личную таблицу стилей, которая совместится с браузерной и дизайнерской таблицами. Все противоречия между различными таблицами стилей решаются браузером. Обычно, дизайнерская таблица стилей имеет высший приоритет в документе, затем пользовательская, потом браузерная по умолчанию. Однако пользователь может отметить, что правило очень важно, и тогда оно аннулирует любые авторские или браузерные стили.
Мы углубимся в детали каскадирования в главе 15 , "Каскадирование и наследование". Перед этим, следует узнать многое о шрифтах, промежутках и цветах.