HTML тег style
Тег определяет информацию о том, как должны отображаться различные элементы внутри веб-страницы. Иными словами он позволяет определить CSS стили на уровне веб-страницы. Чтобы подключить внешние стили, необходимо использовать элемент .
Если атрибут scoped не установлен, то элемент должен располагаться внутри элемента .
На одной веб-странице можно использовать сколько угодно элементов .
Разница между HTML 4.01 и HTML5
В HTML5 был добавлен атрибут scoped, позволяющий определять стили для конкретных разделов веб-страницы. Если в документе присутствует элемент с атрибутом scoped, то стили, определенные в нем, будут применяться только к тому элементу, внутри которого определен этот элемент , и к вложенным в него элементам.
Атрибуты тега
Атрибут | Описание |
---|---|
media | Определяет устройство вывода, для которого оптимизирована таблица стилей |
scoped | Ограничивает сферу действия элемента |
type | Определяет медиа-тип элемента |
Общие атрибуты
CSS стили по умолчанию
Большинство браузеров будут отображать тег со следующими стилями
style
HTML пример использования
h1 < color:red; >p Заголовок
Текстовый абзац.
Тег style
Тег style позволяет писать CSS прямо внутри HTML страницы. Учтите, что внутри тега style мы пишем, соблюдая синтаксис языка CSS (селекторы, фигурные скобки и так далее).
Данный тег должен размещаться внутри тега head , однако это не обязательно — тег style можно разместить и внутри тега body и это будет работать.
Не следует злоупотреблять тегом style — вместо него чаще всего следует использовать отдельный CSS файл.
Пример
Давайте запишем CSS внутри HTML кода с помощью тега style :
Это заголовок стандартного (черного) цвета.
Это абзац красного цвета.
!DOCTYPE>
Смотрите также
- тег link , который подключает CSS Файлы
- атрибут style , который задает стили конкретному тегу
HTML тег
HTML тег используется для внедрения CSS кода непосредственно в HTML-документ, таким образом формируя внутреннюю таблицу стилей. Так как внутри тега содержится информация предназначенная только для браузеров, а не для пользователей, он должен быть расположен внутри тега .
Тег обычно размещают прямо перед закрывающим тегом . Если на странице используется код JavaScript, его обычно добавляют после таблиц стилей. Часто программы JavaScript полагаются на CSS, поэтому, добавляя таблицы стилей первыми, вы гарантируете, что код JavaScript будет располагать всей необходимой для своего выполнения информацией.
Примечание: любой HTML-документ может содержать неограниченное количество элементов , но если вы хотите подключить внешний файл с таблицей стилей, используйте для этого тег , он создает связь между текущим документом и внешним ресурсом.
Атрибуты
type: Для предоставления информации об используемом внутри элемента языке используется атрибут type. Если этот атрибут присутствует, его значение должно быть допустимым MIME-типом, который определяет стиль языка. Значением по умолчанию, при отсутствие атрибута type, является «text/css». Пример » media: Определяет, под какое устройство оптимизирован стиль CSS, он используется для указания, что стиль оптимизирован под определенное устройство (пример: iPhone, принтер). Если атрибут не указан, то по умолчанию подразумевается, что таблица стилей оптимизирована под любые устройства. scoped: Указывает, что стили будут применяться к дереву элементов, корнем которого является элемент, внутри которого находится элемент , а не ко всему документу. При отсутствии данного атрибута элемент должен быть расположен в заголовочном разделе документа — внутри тега . Возможные значения логического атрибута scoped:
Стиль по умолчанию
style
Пример
h1 < color: red; >pЗаголовок
Абзац.
Результат данного примера в окне браузера:
Глава 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 самостоятельно, их можно найти на:
http://www.w3.org/TR/REC-CSS1 http://www.w3.org/TR/REC-CSS2
это точная спецификация свойства. В примере, это «green» «зеленый», но точно также цвет мог бы быть синим (blue), красным (red), желтым (yellow) или каким-нибудь еще.
Диаграмма ниже иллюстрирует все компоненты правила. Фигурные скобки (< >) и двоеточие ( позволяют браузерам различать селектор, свойство и значение.
Рисунок 2.2 Диаграмма правила.
Группирование селекторов и правил
При создании CSS целью является сжатость. Мы отметили, что если уменьшить размер таблиц стилей, это позволит дизайнерам писать и редактировать их «от руки». К тому же короткие таблицы грузятся быстрее длинных. Поэтому в CSS есть несколько механизмов уменьшить размер таблиц стилей путем группировки селекторов и объявлений.
Для примера, рассмотрите эти три правила:
H1 < font-weight: bold >H2 < font-weight: bold >H3
У всех трех правил абсолютно одинаковое объявление они устанавливают шрифт полужирным. (Это делается с помощью свойства font-weight, которое мы обсудимв See Fonts. .) Поскольку все три объявления идентичны, можно сгруппировать селекторы в , и указать объявление лишь один раз, вот так:
H1, H2, H3
Это правило производит такой же эффект, как и первые три..
Селектор может иметь больше одного объявления. К примеру, можно написать таблицу стилей с этими двумя правилами:
H1 < color: green >H1
В этом случае, мы устанавливаем все элементы 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 .
- the Goldberg Variations
- the Brandenburg Concertos
- the Christmas Oratorio
Рисунок 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 совершенны. Когда вы начнете экспериментировать с таблицами стилей, вы вскоре заметите, что каждый браузер имеет ряд багов и ограничений. В целом, новые браузеры ведут себя лучше старых. 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 :
Bach's home page H1 ..
В CSS также есть собственные способы комментирования, которые можно использовать внутри таблицы стилей. Комментарий CSS начинается с «/*» и оканчивается на «*/.» (Те, кто знаком с языком программирования C, узнают его.) Правила CSS помещененные в комментарий CSS никак не повлияют на предсталение документа.
Браузеру необходимо сообщить, что вы работаете с таблицами стилей CSS. В настоящее время CSS единственный язык таблиц стилей, используемый с HTML-документами, и мы не думаем, что это скоро изменится. Для XML ситуация может быть и иной. Но точно так, как существует более одного формата изображений (сразу вспоминаются GIF, JPEG и PNG), может быть и больше одного языка таблиц стилей. Так что это хорошая привычка сообщать браузерам, что они работают с CSS. (К тому же, HTML этого требует.) Это делается с помощью атрибута type тега style . Значение type указывает, какой тип таблиц стилей используется. Для CSS значение будет «text/css». Нижеследующее отрывок из предыдущего документа-образца, показывающий, как лучше писать это (в сочетании с использованием комментариев HTML):
Bach's home page ..
Когда браузер загружает документ, он проверяет, сможет ли он понять язык таблиц стилей. Если сможет, он пытается прочесть таблицу, иначе проигнорирует. Атрибут type (см. в главе 1 обсуждение HTML-атрибутов) в теге style это способ дать браузеру понять, какой язык стилей используется. Атрибут type должен быть включен.
Чтобы облегчить чтение примеров, мы решили не заключать таблицы стилей в HTML-комментарии, но мы обязательно будем использовать атрибут type во всей книге.
Древовидные структуры и наследование
Вспомните из главы 1 обсуждение HTML, представляющего документ в виде древовидной структуры, и того, что элементы HTML имеют дочерние и родительские объекты. Есть много причин для создания древовидных документов. Для таблиц стилей есть одна очень хорошая причина: наследование. Как дети наследуют своих родителей, так и HTML-элементы. Только вместо наследования генов и денег, элементы HTML наследуют стилистические свойства.
Давайте начнем с того, что посмотрим на документ-образец.:
- the Goldberg Variations
- the Brandenburg Concertos
- the Christmas Oratorio
Древовидная структура этого документа выглядит так:
Посредством наследования, значения свойств CSS присвоенные одному элементу, передадуться вниз по дереву его потомкам. Например, в наших образцах зеленый цвет до сих пор присваивается тегам h1 и h2 . Теперь, скажем, нам нужно присвоить этот цвет всем элементам документа. Можно сделать это, перечислив все типы элементов в селекторе.:
H1, H2, P, LI
Однако, большинство документов HTML сложнее нашего образца, и таблица стилей вскоре сильно удлинилась бы. Есть способ лучше — и короче. Вместо присвоения стиля каждому типу элемента, мы присваиваем его их общему предку: тегу body :
BODY
Поскольку прочие элементы наследуют свойства тега body , все они наследуют и зеленый цвет. (Рисунок 2.4 ).
Рисунок 2.4 Рузельтат наследования. (попробуйте)
Как вы уже заметили, наследование транспортное средство, которое распространяет стилистические свойства на потомков элемента. Поскольку тег body общий предок всех видимых элементов, body подходящий селектор для присваивания стилистических правил всему документу.
Аннулирование наследования
В предыдущем примере, всем элементам дали одинаковый цвет посредством наследования. Иногда, все же, дети не похожи на родителей. Не удивительно, что это применимо и к CSS. Скажем, вы бы хотели, чтобы содержимое тегов h1 отображалось бы синим цветом, а остальное зеленым. Это легко сделать в CSS:
BODY < color: green >H1
Раз тег h1 дочерний элемент тега body (и, следовательно, наследует body ), эти два правила в таблице стилей выше несовместимы. Первое присваивает цвет содержимому тега body , а, значит, и цвет элементов h1 посредством наследования; в то время, как второе правило присваивает цвет исключительно тегу h1 . Какое из них победит? Давайте узнаем:
Причина, по которой побеждает второе правило, в том, что оно более чем первое. Первое правило очень общее: оно влияет на все элементы страницы. Второе правило из всего документа влияет только на элементы h1 , а, значит, оно более конкретно.
Будь CSS языком програмирования, порядок, в котором определяются правила, определял бы, какое из них выиграет. Но CSS не язык программирования, и в примере выше порядок порядок не имеет значения. Результат был бы точно таким, используй мы эту таблицу стилей:
H1 < color: navy >BODY
CSS разработали так, чтобы разрешать противоречия между таблицами стилей как в примере выше. Конкретность один из аспектов этого. Детали можно найти в главе 15 , «Каскадирование и наследование.»
Свойства, которые не наследуются
В общем случае, свойства в CSS наследуются от родительского элемнта к дочернему, как описано в предыдущих примерах. Некоторые свойства, однако, не наследуются, и в этом всегда есть веская причина. Используем свойство background (описано в главе 11) как пример свойства, которое не наследуется.
Скажем, вам нужно установить фоновое изображение для страницы. Это обычный эффект в Сети. В CSS можно написать:
Bach's home page BODYBach's home page
Johann Sebastian Bach was a prolific composer.
Свойство 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 в качестве примера. Вот тестовый документ:
Fredrick the Great meets Bach One evening, just as Fredrick the Great was getting his flute ready, and his musicians were assembled, an officer brought him a list of the strangers who had arrived. With his flute in his hand he ran over the list, but immediately turned to the assembled musicians, and said, with a kind of agitation:"Gentlemen, old Bach is come."The flute was now laid aside, and old Bach, who had alighted at his son's lodgings, was immediately summoned to the Palace.
Скриншот внизу показывает, как типичный HTML-браузер отобразит этот документ:
Как можно видеть, браузер добавил пробелы со всех сторон цитируемого текста. В CSS эти пробелы называются «margins» «поля» и все элементы имеют поля со всех четырех сторон. Свойства называются: margin-top, margin-right, margin-bottom и margin-left. Можно изменить отображение содержимого контейнера blockquote , написав маленькую таблицу стилей:
BLOCKQUOTE
Единица «em» будет подробно рассмотрена в следующей главе, но уже сейчас можно раскрыть ее секрет: она масштабирует относительно размера шрифта. Таким образом, код в примере выше создаст вертикальные поля такой же высоты, как и шрифт ( 1em ) элемента blockquote , и горизонтальные поля с нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки будет отличаться, сделаем его курсивным. Результат таков:
Точно так же, как font укороченное свойство для установки нескольких шрифтовых свойств сразу, margin это укороченное свойство которое устанавливает все свойства полей. Поэтому пример вверху можно записать и как:
BLOCKQUOTE
Первая часть значения — 1em — присваивается верхнему полю (собственное свойство margin-top). Отсюда отсчитывается против часовой стрелки: 0em присваивается к margin-right (правое поле), 1em присваивается margin-bottom (нижнее поле), и 0em присваивается margin-left (левое поле).
Поскольку левое поле равно нулю, цитируемому тексту нужно больше стиля, чтобы отделить его от остального текста. Установка в font-style значения italic помогает, а добавление фонового цвета еще больше усиливает цитату:
BLOCKQUOTE
Как и ожидалось, фоновый цвет позади цитаты изменился. В отличие от предыдущих примеров, цвет определялся в частях красного-зеленого-синего (RGB от англ. red/green/blue) цветов. Цвета RGB детально описываются в главе 11 .
Стилистической проблемой в верхнем примере является то, что фоновый цвет едва покрывает цитируемый текст. Пространство вокруг цитаты область границ не запоняется цветом элемента. В CSS есть другой вид разделителей, называемый «padding» «заполнение пустотой», который и использует цвет элемента. В других Во всех других отношениях, свойства заполнения подобны свойствам границ: они добавляют промежутки вокруг элемента. Давайте добавим заполнение к цитате:
BLOCKQUOTE
Результат установки заполнения выразился в пробеле между текстом и треугольником, его окружающим:
Обратите внимание, что свойству padding дано лишь одно значение ( 0.5em ). Как и свойство margin, padding может принимать 4 значения, которые могут быть приписаны к верхнему, правому, нижнему и левому заполнению соответственно. Однако, когда одно и то же значение приваивается всем сторонам, единичное его упоминание сработает. Это справедливо и для padding и для margin (также как и для некоторых других свойств границ, которы описаны См. Промежутки вокруг блоков. ).
Частые задачи: ссылки
Чтобы облегчить пользователям проглядывание гипертекстовых документов, ссылки должны иметь стиль, отличный от нормального текста. Браузеры HTML часто подчеркивают текст гиперссылок. Также применяются различные цветовые схемы, указывающие, переходил ли уже пользователь по этой ссылке или нет. Поскольку гиперссылки являются довольно значимой частью Сети, в CSS есть специальная поддержка для их стилизации. Вот простой пример:
A:link
Примерный код вверху указывает, что непосещенные ссылки должны быть подчеркнуты:
Ссылки подчеркнуты, как мы и указали, но они вдобавок синие, чего мы не указывали. Когда авторы не указывают все возможные стили, браузеры используют стили по умолчанию, чтобы заполнить пробелы. Взаимодействие между авторскими стилями, стилями по умолчанию и пользовательскими стилями (собственными предпочтениями пользователя) еще один пример противоречия между решающими правилами CSS. Это называется «каскадом»(«C» в «CSS»). Мы обсудим каскад ниже.
Селектор ( A:link ) заслуживает особого замечания. Вы, возможно, узнаете «A» как тег HTML, но последняя часть нова. «:link» это один из так называемых псевдо-классов CSS. Псевдо-классы используют, чтобы наделить стилем элементы, основанные на информации извне самого документа. К примеру, автор документа не может знать, перешли ли по определенной ссылке или нет. Детально псевдо-классы описываются в главе 4 , а здесь мы лишь дадим еще несколько примеров:
A:visited
Это правило присваивает стиль посещенным ссылкам, точно так, как A:link присваивает стиль непосещенным ссылкам. Вот пример посложнее:
A:link, A:visited < text-decoration: none >A:hover
Последнее правило знакомит нас с новым псевдо-классом :hover. При условии, что пользователь перемещает указующее устройство (вроде мыши), определенный стиль будет приложен к элементу, когда пользователь двигает курсор над («зависает» над) ссылкой. Вот как это выглядит:
У псевдо-класса :hover интересная история. Он появился в CSS2 после того, как соответствующий эффект стал популярен среди программистов JavaScript. Решение в JavaScript требует сложного кода по сравнению с псевдо-классами CSS, и это пример того, как CSS собирает эффекты, ставшие популярными среди Веб-дизайнеров.
Слово о каскадах
Фундаментальной чертой CSS является то, что более чем одна таблица стилей может повлиять на представление документа. Эта черта известна как , потому что различные таблицы стилей считаются идущими сериями. Каскадность является фундаментальной чертой CSS, потому что мы знаем, что любой документ вполне вероятно может получить таблицы стилей из многих исотчников: браузера, дизайнера и, возможно, пользователя.
В последнем наборе примеров вы увидели, что цвет текста ссылок стал синим без конкретизации таблице стилей. Кроме того, браузерам известно, как форматировать содержимое тегов blockquote и h1 без явного указания. Все, что браузер знает о форматировании, хранится в его и совмещается с авторскими и пользовательскими таблицами стилей, когда документ отображается.
Мы годами знали, что дизайнеры хотят проектировать собственные таблицы стилей. Однако, мы обнаружили, что пользователи тоже хотят иметь возможность влиять на представление документов. С CSS они могут сделать это заполняя личную таблицу стилей, которая совместится с браузерной и дизайнерской таблицами. Все противоречия между различными таблицами стилей решаются браузером. Обычно, дизайнерская таблица стилей имеет высший приоритет в документе, затем пользовательская, потом браузерная по умолчанию. Однако пользователь может отметить, что правило очень важно, и тогда оно аннулирует любые авторские или браузерные стили.
Мы углубимся в детали каскадирования в главе 15 , «Каскадирование и наследование». Перед этим, следует узнать многое о шрифтах, промежутках и цветах.
Языки
- Deutsch (German)
- English
- Español (Spanish)
- Français (French)
- Bahasa Indonesia
- Polski (Polish)
- Português Brasileiro (Brazilian Portuguese)
- Русский