- Буквица
- Выворотка
- Выключка
- Интерлиньяж
- Капитель
- Начертание
- Отбивка
CSS: Псевдо-элементы и селекторы атрибутов. Специальные селекторы в CSS
Здравствуйте, уважаемы читатели! В сегодняшней публикации мы продолжим изучение основ CSS и я предложу Вам описание различных вариаций селекторов атрибутов , причем теоретические выкладки можно будет подкреплять практическими действиями, используя встроенные инструменты всех популярных браузеров ( - о понятии browser и сравнение лучших web-обозревателей), например, о котором я подробно писал.
Прежде всего, хочу извиниться перед вами, дорогие читатели, за долгое отсутствие, но на это есть свои причины. Во-первых, был занят сразу в нескольких проектах довольно продолжительное время, которые отняли кучу времени. Во-вторых, плодотворно потрудился над улучшением юзабилити ( о usability детально и подробно) блога, максимально оптимизировал изображения, улучшив их качество и одновременно значительно уменьшив их вес, что должно непременно сказаться на продвижении ресурса в дальнейшем самым позитивным образом, да в общем, уже сказывается.
Было сделано еще немало полезного, обо всех предпринятых мной шагах обязательно подробно расскажу в ближайших публикациях. Ну, и в-третьих, получил позитивный заряд, тесно пообщавшись с друзьями и родными во время рождественских и новогодних праздников. Кстати, пользуясь случаем, хочу пожелать всем читателям блога здоровья, успехов, любви и семейного благополучия в Новом Году! Такие пожелания никогда не бывают запоздалыми, если идут от чистого сердца.
А теперь перехожу потихоньку непосредственно к теме сегодняшней публикации. Напомню, что мы с вами уже рассматривали . Сегодня продолжим изучение этой важной части курса каскадных таблиц стилей (CSS) и познакомимся с селекторами атрибутов и их разнообразными вариациями .
Перед тем, как начать изложение материала, еще раз хочу напомнить, что темы и объем статей очень тщательно мной проработаны и ориентированы прежде всего на начинающих. Но не исключаю, что и опытные вебмастера найдут для себя толику чего-то полезного. Поэтому те, кто в дальнейшем хочет сэкономить средства и время при редактировании или даже создании с “нуля” своего вебсайта, ни в коем случае не должны пренебрегать изучением стилей CSS, тем более, что я пытаюсь излагать материалы ясно, доступно, и, вместе с тем, компактно.
Надеюсь, вы простили мне это небольшое отступление, оно было важным и совершенно к месту, я в этом уверен. Теперь возвращаюсь к нашим баранам, то бишь селекторам атрибутов, многочисленные вариации которых подробно представлю ниже. Однако, для начала нужно провести некоторые приготовления, поскольку урок будет объемным и, что самое важное, вы сразу после каждого пункта теории сможете проверить все на практике прямо по ходу статьи. Заинтриговал?
На самом деле, все просто. Современное развитие web-технологий позволяет делать подобные вещи легко и просто. Я имею ввиду использование такого инструмента как, например, Firebug для Firefox, о котором я упомянул в начале поста. Однако, я написал уже о нем достаточно подробно, поэтому в этой статье буду использовать аналогичный инструмент для другого популярного браузера Google Chrome ( о нем подробнее).
Этот инструмент уже встроен изначально в последних версиях Хрома. Кстати, подобные встроенные расширения имеют все наиболее популярные браузеры, включая и Opera (как ). Итак, для начала открываем любую страницу любого ресурса (можно своего сайта) в Google Chrome (желательно, чтобы это была последняя версия).
Выделяем какой-нибудь элемент на вебстранице (для примера я выделю один из абзацев сегодняшней статьи) и кликаем правой кнопкой мыши. Из контекстного меню выбираем “Просмотр кода элемента” (альтернативой является простое нажатие клавиши F12 на клавиатуре). В нижней части появится окно, подобное окну Firebug, в левой части которого будет находиться , справа - стили CSS.
По моему мнению, самым наглядным примером для проработки селекторов атрибута с разными вариациями является и атрибут title (не путать с тегом title), который определяет содержание всплывающей подсказки . Если вы читали , то представляете себе роль тега div , который является основным строительным материалом современных сайтов.
Если желаете, можете поочередно открыть контейнеры div, нажимая на расположенный слева черный треугольный значок, пока не доберетесь до тегов p , содержание которых отображается на странице в виде текста, разделенного на параграфы (или абзацы, что одно и то же).
Появится окруженное рамкой пространство, в пределах которого можно осуществлять редактирование, а именно, удалять, изменять или добавлять текст:
В этом окне для редактирования составим три абзаца, применив к тегу p атрибут title, который вызывает всплывающую подсказку. Например, так:
1. Абзац (или параграф, что одно и то же, напоминаю), описывающий сроки обновления WordPress:
2. Параграф, дающий информацию о расширениях (плагинах):
3. Параграф о продолжительном отсутствии обновлений плагинов:
Итак, мы внесли все три абзаца в поле для редактирования в окне инструмента разработчика. Для того, чтобы утвердить сделанные изменения, просто кликните левой кнопкой мышки и текст всех трех абзацев появится на вебстранице именно в том месте, где должен быть.
Как видите, текст всплывающей подсказки строго тождественен значению атрибута title (для каждого параграфа это значение свое). HTML каркас для наших экспериментов создан, теперь переходим непосредственно к тому, как изменить их вид с помощью свойств CSS.
Простой селектор атрибута и селектор атрибута со значением
Простой селектор атрибута устанавливает стиль для элемента, если задан специфический атрибут какому-нибудь тегу (для нашего примера это тег p и атрибут title ), причем значение атрибута в данном конкретном случае неважно. Синтаксис CSS будет выглядеть следующим образом:
Наименование атрибута заключается в квадратные скобки и пробел между именем селектора и атрибутом не допускается. Выше на схеме даны два варианта использования: с указанием имени селектора и без оного.
- В первом случае заданный стиль CSS применяется ко всем тегам, которым соответствует заданный атрибут;
- Во втором случае стиль будет применен только к определенным тегам.
Как вы понимаете, свойства CSS для каждого элемента, в том числе тега абзаца p, задаются в документе style.css. Еще раз напоминаю, что для практического закрепления теории мы используем великолепный инструмент html и CSS редактирования, где в левой части окна добавили три абзаца, каждый со своим значением title.
Изменения в коды html и CSS мы вносим “на лету” на любой странице абсолютно любого ресурса (можете использовать одну из страниц моего блога, если так будет удобнее). В этом и преимущество подобных инструментов, которыми обладают все популярные браузеры, что даже человек, не имеющий своего сайта, может поэкспериментировать и получить необходимую практику.
Итак, после добавления абзацев их текст должен отобразиться на вебстранице (только не перезагружайте страницу во время практического занятия, иначе результаты сделанных вами изменений исчезнут). Далее необходимо прописать CSS правило для простого селектора. Для этого в правой части вебмастерского инструмента кликаем по ссылке, которая ведет к документу со стилями CSS (например, файл style.css):
Пропишем правило CSS для простого селектора атрибута следующим образом:
P { color: green; }
Внесем его прямо в конец файла style.css в окне редактирования инструмента разработчика:
После такого редактирования текст всех абзацев примет зеленую окраску, поскольку для каждого из них указан атрибут title, вызывающий всплывающую подсказку.
как уже было сказано, значение title в данном случае неважно, поскольку не отмечено в правиле CSS. Далее. Применим теперь селектор атрибута со значением и посмотрим, как изменится текст всех трех подопытных параграфов. Синтаксис написания CSS правила в этом случае будет таким:
Для этого допишем к title значение:
P { color: green; }
Тут же первый из испытуемых абзацев окрасится в зеленый цвет, остальные останутся неизменными, т.е. сохранены CSS свойства стандартного параграфа для данного ресурса:
Ниже рассмотрим еще несколько вариантов использования селектора атрибута.
Селектор атрибута со значением, содержащим указанный текст и одно из нескольких значений атрибута
Может случиться так, что стили CSS надо применить к тегу с определенным атрибутом, в значении которого содержится некоторый текст, отдельное слово или даже часть слова. В этом случае синтаксис написания CSS правила будет следующим:
Оператор «*» означает, что если в значении атрибута находится определенное слово или его часть, причем совершенно неважно, в каком месте (в начале, середине или конце), то к тегу с этим атрибутом и будет применено данное правило стилей. Продолжим практические изыскания. Напомню содержания трех параграфов и значения title для каждого из них:
Новая версия WordPress выйдет не позднее апреля 2013 года.
Плагин WordPress One Seo Pack приобрел дополнительные функции, с которыми можно ознакомиться на официальном сайте.
Плагин WP Tuner не обновлялся уже более года, поэтому его дальнейшее использование нецелесообразно.
Составим в соответствии с представленным выше синтаксисом правило стилей (можно заменить на него ранее прописанное там же, в левой части окна используемого нами инструмента:
P { color: green; }
Сразу после редактирования можете наблюдать, что текст всех абзацев станет зеленым, поскольку в значении атрибута title каждого из них присутствует «Word» как часть слова «Wordpress».
Случается иногда так, что прописаны несколько значений атрибута, разделенных пробелом. Это относится совершенно к любым тегам, например, к контейнеру div , который может содержать несколько классов (class) с разными значениями, являющимися в данном случае атрибутами.
Но мы будем продолжать рассматривать пример с тегом p и атрибутом title, так как он самый наглядный, особенно для начинающих. Кроме того, экспериментируя с одними и теми же объектами, можно более наглядно увидеть разницу при использовании различных вариаций селектора атрибутов .
Чтобы применить особый стиль в отношении одного из значений атрибута, разделенных пробелом , можно использовать оператор «~»; синтаксис написания будет следующий:
Применительно к тем же абзацам, которые рассматриваем в сегодняшней публикации, определим следующее стилевое правило, указав в значении атрибута слово «Wordpress»:
P { color: green; }
Теперь текст первого и третьего параграфа окрасится в зеленый цвет, потому что только для этих абзацев в значении атрибута title встречается слово «Wordpress», отделенное от остального текста пробелом. Текст второго параграфа остался таким же. Почему, ведь в значении title тоже есть WordPress? Да потому что это слово в значении title для второго абзаца разделено не пробелом, а знаком дефиса «-».
Итак, мы уяснили, что действия оператора «~» распространяются на фрагмент текста, разделенный пробелом. То есть, на одно из нескольких значений того или иного атрибута, которые отделены друг от друга пробелами. В нашем случае при использовании атрибута title значения, отделенные пробелами, и есть отдельные слова в значении title.
Фу-у-у, аж в пот бросило от усердия, но зато, похоже, разжевал все до мельчайших частиц, чтобы начинающим было понятно. Идем дальше и разберем еще несколько случаев применения селекторов атрибута. Наберитесь терпения, осталось немного, хотя по моим ощущениям, все должно быть интересно, когда вы можете на практике проверять постулаты теории.
Селекторы CSS: значение атрибута начинается с определенного текста, заканчивается определенным текстом и дефис в значении атрибута
Двигаемся дальше в рамках нашего теоретическо-практического занятия, посвященного CSS селекторам атрибута . Поскольку пост получается достаточно объемным, еще раз напомню, что мы рассматриваем пример с тремя абзацами, образованными с помощью тега p и атрибута title (всплывающая подсказка) прямо в поле инструмента для онлайн редактирования браузера Google Chrome. Этот инструмент вызывается, в частности, простым нажатием клавиши F12.
Новая версия WordPress выйдет не позднее апреля 2013 года.
Плагин WordPress One Seo Pack приобрел дополнительные функции, с которыми можно ознакомиться на официальном сайте.
Плагин WP Tuner не обновлялся уже более года, поэтому его дальнейшее использование нецелесообразно.
Теперь обратимся к изучению еще нескольких вариантов селектора атрибута, а именно: когда значение атрибута начинается с определенного текста, заканчивается определенным текстом и когда в значении атрибута присутствует дефис .
Все эти тонкости в использовании различных вариантов значений атрибутов позволяют создать действительно гибкую систему для оформления странниц web-сайта. Сейчас взглянем на воздействие оператора «^», который указывает на то, что в значении атрибута присутствует текст или слово, с которого начинается значение атрибута данного тега. Немного запутались? Сейчас все поймете. Прежде дам синтаксис написания стилевого правила, когда значение атрибута начинается с определенного текста:
Следующим шагом пишем новое правило CSS опять же применительно к нашим подопытным абзацам:
P { color: green; }
Опять же в режиме онлайн при использовании инструмента для редактирования html и CSS кода видим, что на этот раз текст первого и второго абзацев приобрел зеленый оттенок, а текст третьего сохранил стилевое оформление обычного параграфа:
Это произошло потому, что значение атрибута title обоих первых параграфов начинается со слова «Wordpress». В значении title третьего параграфа это слово также присутствует, но не в начале. Приведу для закрепления еще пример, когда удобно использовать оператор «^».
- Выполняемая задача - выбор всех элементов по наличию или значению заданного атрибута.
- Обозначение - запись, определяющая тип селектора в квадратных скобках.
Важно! IE6 не понимает этот селектор.
Подробнее про селектор атрибутов
Выбор по наличию атрибута
Выбираем все элементы, у которых существует (задан в HTML) данный атрибут.
Синтаксис:
Element
Тут и далее Element , это какой-либо простой селектор (div , p , .header , div#popup , * и т.д.). Отсутствие в коде Element обозначает, что в этом месте стоит , который, в этой ситуации можно опустить.
Пример. Выделим жирным шрифтом все элементы, для которых задана всплывающая подсказка:
{ font-weight: bold; }
Выбор по точному значению атрибута
Выбираем все элементы, заданный атрибут которых имеет точное совпадение значения.
Синтаксис:
Element
Пример. Зададим цвет фона только для тех , значение атрибута которых в точности равно "submit" (для кнопки отправки формы):
Input { background: #0f0; }
Выбор по частичному значению атрибута
Выбираем все элементы, заданный атрибут которых в перечне значений имеет определенное слово.
Синтаксис:
Element
Пример. Зададим обтекание для тех элементов , в перечне значений атрибута , которых присутствует "sideBar" (вот это-то и есть, фактически, ):
Div { float: left; }
Выбор по конкретным значениям атрибутов
Выбираем все элементы, заданный атрибут которых равен определенному значению или начинается с этого значения, после которого идет дефис.
Синтаксис:
Element
Пример. Зададим стили для всех элементов, язык которых задан в атрибутах, как английский (en, en-us, en-gb, en-au и т.д.):
{ /* какие-то стили */ }
Новые селекторы атрибутов в CSS3
CSS3 несколько расширяет возможности выбора по конкретным значениям атрибутов и дополняет их еще тремя вариантами.
Выбор по началу значения атрибута
Выбираем все элементы, заданный атрибут которых начинается с определенного значения.
Синтаксис:
Element
Пример. Зададим стили для всех элементов, атрибут которых начинается со слова "Hint":
{ /* какие-то стили */ }
Выбор по окончанию значения атрибута
Выбираем все элементы, заданный атрибут которых оканчивается на определенное значение.
Синтаксис:
Element
Пример. Зададим стили для всех элементов , которые ссылаются на гифки:
Img { /* какие-то стили */ }
Выбор по подстроке в значении атрибута
Выбираем все элементы, заданный атрибут которых содержит определенную подстроку.
Синтаксис:
Element
Пример. Зададим стили для всех ссылок, в адресах которых есть подстрока "сайт":
A { /* какие-то стили */ }
Это тоже главная Ошибка в адресе!
Группировка
Для любых, из перечисленных выше селекторов можно сделать выбор сразу по нескольким атрибутам. Например:
Img { /* эти стили применятся только к изображениям, у которых есть все три перечисленных атрибута */ } a { /* эти стили применятся только к ссылкам, в адресах которых есть подстрока "сайт" и для которых задан атрибут title */ }
Область применения
Перечисленные выше селекторы атрибутов (включая CSS3) поддерживаются всеми популярными браузерами. Единственное исключение — IE6.
Конечно, применять на веб-странице атрибуты, задающие оформление — это, буквально, технология прошлого тысячелетия (так верстали в начале 90-х). Сейчас вместо таких атрибутов пользуются соответствующими CSS-свойствами. Тем не менее, целый ряд атрибутов вполне заслужил свое место в твоем HTML. А некоторые из них просто являются обязательными (познакомиться подробнее с ). В этом случае, использование селектора атрибутов позволяет обойтись без лишних классов и, таким образом, упростить HTML-код.
Влад Мержевич
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type . При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.
Рассмотрим несколько типичных вариантов применения таких селекторов.
Простой селектор атрибута
Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.
В примере 13.1 показано изменение стиля тега
,
в том случае, если к нему добавлен атрибут title
.
Пример 13.1. Вид элемента в зависимости от его атрибута
HTML5 CSS 2.1 IE Cr Op Sa Fx
Продолжая известный закон Мерфи, который гласит: Если неприятность
может случиться, то она обязательно случится
, можем ввести свое наблюдение:
После того, как веб-страница
будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом
.
Результат примера показан на рис. 13.1.
Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title
В данном примере меняется цвет текста внутри контейнера
,
когда к нему добавляется title
. Обратите
внимание, что для селектора Q
нет нужды повторять стилевые
свойства, поскольку они наследуются от селектора Q
.
Атрибут со значением
Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута. Синтаксис применения следующий.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем тегам, которые содержат указанное значение. А во втором — только к определённым селекторам.
В примере 13.2 показано изменение стиля ссылки в том случае, если тег содержит атрибут target со значением _blank . При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.
Пример 13.2. Стиль для открытия ссылок в новом окне
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан ниже (рис. 13.2).
Рис. 13.2. Изменение стиля элемента в зависимости от значения target
В данном примере рисунок к ссылке добавляется с помощью свойства background . В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat , что в итоге даст единственное изображение.
Значение атрибута начинается с определённого текста
Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис применения следующий.
[атрибут^="значение"] { Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.
Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не вводить в тег новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http:// , его и добавляем к селектору A , как показано в примере 13.3.
HTML5 CSS 2.1 IE Cr Op Sa Fx
Рис. 13.3. Изменение стиля для внешних ссылок
Значение атрибута оканчивается определённым текстом
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом. Синтаксис применения следующий.
[атрибут$="значение"] { Описание правил стиля }
Селектор[атрибут$="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определённым селекторам.
Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 13.4.
Пример 13.4. Стиль для разных доменов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Yandex.Com | Yandex.Ru
В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.
Значение атрибута содержит указанный текст
Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать такой синтаксис.
[атрибут*="значение"] { Описание правил стиля }
Селектор[атрибут*="значение"] { Описание правил стиля }
В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».
Пример 13.5. Стиль для разных сайтов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Шаг за шагом | Графика для Веб
Результат данного примера показан на рис. 13.5.
Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис.
[атрибут~="значение"] { Описание правил стиля }
Селектор[атрибут~="значение"] { Описание правил стиля }
Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).
Пример 13.6. Стиль в зависимости от имени класса
HTML5 CSS 2.1 IE Cr Op Sa 5 Fx
Заголовок
В данном примере зелёный цвет текста применяется к селектору H3 , если имя класса у слоя задано как block . Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~= .
Дефис в значении атрибута
В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class . Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.
[атрибут|="значение"] { Описание правил стиля }
Селектор[атрибут|="значение"] { Описание правил стиля }
Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).
Пример 13.7. Дефисы в значениях
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере имя класса задано как block-menu-therm , поэтому в стилях используется конструкция |="block" , поскольку значение начинается именно с этого слова и в значении встречаются дефисы.
Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд.
[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Селектор[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Вопросы для проверки
1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?
Первый абзац
Второй абзац
Третий абзац
- P { color: red; }
- P { color: red; }
- P { color: red; }
- P { color: red; }
- P { color: red; }
3. К какому элементу будет применяться следующий стиль?
{ background: #666; }
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Ответы
1. INPUT { background: #acdacc; }
2. P { color: red; }
3.
Lorem ipsum dolor sit amet
4. Атрибуты стиля (CSS attributes)
Размеры и цвета
Единицы размеров
Шрифт и текст
Рамки, поля, отступы, фон
Размещение и размер. Переполнение и обрезка
Наследование. Разбивка на страницы
Наследование элементами свойств контейнеров
Свойства, относящиеся к представлению документа на печатном носителе
Таблицы стилей CSS позволяют контролировать все аспекты представления документа в браузере (или другом клиентском приложении, поддерживающим стили), включая выбор шрифта, форматирование абзацев, позиционирование элементов, многие динамические эффекты и т.д. на экране монитора и вплоть до выбора актера, "рассказывающего" документ в голосовом синтезаторе.
Рассмотрим соответствующие свойства CSS.
Размеры и цвета
Единицы размеров
Все размеры и позиционные расположения в CSS задаются в размерных единицах. Internet Explorer и другие браузеры поддерживают как абсолютные, так и относительные единицы. Абсолютные единицы задают точный размер, например, в сантиметрах или дюймах, относительные единицы вычисляются относительно каких-либо других свойств (например, размера монитора или листа бумаги) или размеров других элементов.
Допустимые абсолютные единицы:
in – дюймы (2,54 см)
cm – сантиметры
mm – миллиметры
pt – пункты (points, 1pt = 1/72in)
pc – пики (picas, 1pc = 12pt)
Относительные единицы:
em – размер на основе размера шрифта (атрибута font-size). В типографии em - это единица измерения, которая представляет высоту заглавной буквы М шрифта. В веб-дизайне 1 em - это высота базового шрифта в браузере, которая обычно составляет 16 пикселов (но пользователь может изменять ее). Если эта единица применяется для определения размера шрифта, то она имеет смысл относительной величины по отношению к размеру шрифта в родительском элементе. Пример: left: 2.5em
ex – размер буквы x
px – вычисляется на основе разрешения монитора или принтера
% – размер относительно другого, как правило, родительского элемента. Например, ширина ячейки таблицы может быть выражена в процентах от ширины таблицы
Абсолютные единицы хороши для определения размеров элементов в версии для печати. Для отображения на экране, как правило, применяются пикселы, проценты и em. Выбирая, какую единицу измерения использовать, следует исходить из согласованности размеров элементов веб-страницы (текста, блоков, изображений и т.п.). Фактический размер элементов предсказать невозможно (это зависит от разрешения монитора, который пользователь может менять), поэтому речь идет именно о согласованности, т.е. о совместном изменении размеров элементов страницы при ее масштабировании. Если пользователь считает текст слишком мелким, то он должен иметь возможность увеличить его (и наоборот). Современные браузеры позволяют масштабировать страницу как единое целое - все элементы увеличиваются и уменьшаются пропорционально. Однако более старые браузеры (например, IE6-) не предоставляли такой возможности - вместо этого разрешалось регулировать только размер шрифта (т.е. масштабировался текст, а остальные элементы не меняли своих размеров). Существенное изменение размера шрифта текста без изменения размера контейнера этого текста, как правило, нежелательно. Здесь на помощь приходит такая единица длины как em: когда меняется размер шрифта, меняется и величина em, и размеры блоков удается согласовать таким образом со шрифтом. Измерение размера в процентах (от соответствующего размера контейнера) позволяет поддерживать согласованность другого рода - между размерами блоков и размером окна браузера. В большинстве же случаев измерение длины в пикселах - достаточно хорошее решение.
border: 1px solid black;
Ширина этой секции указана в пикселах
Ширина этой секции указана в процентах
Ширина этой секции указана в em
Листинг 4.1. Использование различных единиц измерения для задания ширины (html, txt)
Упражнение. Откройте пример в новом окне браузера и измените а) масштаб страницы; б) размер шрифта; в) ширину окна. Проследите за шириной блоков.
Цвета
Цвет в CSS может быть задан по имени или в виде шестнадцатеричного числа, определяющего интенсивности красного, зеленого и синего цветов (RGB схема). Стандарт HTML 4.01 определяет только 16 цветов, спецификация CSS 2.1 добавляет еще один цвет; RGB схема позволяет задать свыше 2,000,000 цветов, от черного (#000000) до белого (#FFFFFF).
Следующий пример показывает способы задания красного цвета текста:
p { color: red; }
/* стандартный цвет */
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
/* целые в диапазоне 0 – 255 */
p { color: rgb(100%, 0.0%, 0%); }
/* диапазон 0.0% - 100.0% */
Internet Explorer и некоторые другие браузеры распознают множество других именованных цветов, однако нет гарантии, что выбранный именованный цвет (в отличие от RGB схемы) поддерживается всеми браузерами.
Шрифт и текст
Описание шрифта и форматирования текста состоит из целого ряда отдельных атрибутов. Многие термины здесь почерпнуты из типографской практики.
Font-family (гарнитура) задает название используемого шрифта. Поскольку нет полной уверенности, что указанный шрифт установлен и доступен в любом браузере и на любой клиентской машине, разработчик может задать список альтернативных шрифтов в порядке убывания предпочтительности, разделив список запятыми. Если название шрифта содержит пробелы, оно должно быть заключено в кавычки. Пример:
p {font-family: "Times New Roman", Times, serif;}
Font-size (кегль) задает размер шрифта в абсолютных или относительных единицах или относительно пользовательских предпочитаемых размеров.
font-size: small;
/* варианты: xx-small, x-small, small, medium, large, x-large, xx-large */
font-size: larger;
/* варианты: larger, smaller */
font-size: 10pt;
/* абсолютный размер 10 пунктов */
font-size: 10px;
/* размер 10 пикселей. Зависит от разрешения экрана или принтера */
font-size: 120%;
/* 120% от размера шрифта родительского элемента */
Font-style (начертание) переключает между обычным (normal) и курсивным (italic).
h3 {font-style: italic;} /* курсив */
Font-weight задает насыщенность (жирность) шрифта. Возможные значения:
normal – обычный
bold – жирный
bolder – жирнее родительского
lighter – светлее родительского
100 – самый светлый
400 – то же что normal
700 – то же что bold
900 – самый жирный
Установки жирности зависят от установленных на пользовательской машине шрифтов. Часто пользователь не может увидеть различий между близкими значениями жирности.
li {font-weight: bold;}
Font-variant переключает шрифт между обычным (normal) и малыми заглавными буквами (small-caps).
p:first-line {font-variant: small-caps;}
Line-height задает межстрочный интервал в размерных единицах или процентах межстрочного интервала родительского объекта.
p {line-height: 8mm;}
Перечисленные выше атрибуты могут быть объединены в составной атрибут font в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family.
Пример:
font: italic normal 400 12px/14px Arial;
/* выделенные жирным значения обязательны, остальные могут быть опущены */
Эквивалентно
font-style: italic;
font-variant: normal; /* значение по умолчанию можно опустить*/
font-weight: 400; /* значение по умолчанию можно опустить*/
font-size: 12px;
line-height: 14px;
font-family: Arial;
Значения font-size и font-family должны всегда присутствовать в объявлении font и быть расположены в установленном порядке. Если какое-либо из них будет пропущено, то все правило будет признано недействительным.
Text-decoration допускает следующие значения: none (без декорирования), underline (подчеркнутый), overline (надчеркнутый), line-through (перечеркнутый), а также их сочетания.
li {text-decoration: underline line-through;}
Text-transform задает преобразование текста следующим образом: none (нет преобразования, по умолчанию), capitalize (делает первую букву каждого слова заглавной), uppercase (все заглавные), lowercase (все строчные).
h1 {text-transform: capitalize;}
Text-align задает выравнивание текста внутри блока влево (left), вправо (right), по центру (center) или по ширине (justify). Text-indent определяет отступ первой строки текста от левой границы блока.
text-align: justify;
text-indent: 20px;
/* допускаются положительные и отрицательные значения */
letter-spacing регулирует расстояние между буквами. Значения: любая единица измерения CSS (обычно em или px), хотя проценты для этого свойства не работают в большинстве браузеров. Допускаются отрицательные значения. Значение normal сбрасывает letter-spacing в стандартное значение.
Vertical-align устанавливает базовую линию элемента относительно базовой линии окружающего содержимого. С помощью этого свойства можно немного поднять или опустить символ относительно окружающего текста. При применении к ячейке таблицы значения top, middle, bottom и baseline управляют вертикальным размещением содержимого внутри ячейки.
color устанавливает цвет текста. Значение: любое корректное значение цвета.
font: 14px Verdana;
Ко всем абзацам данного примера применено стилевое правило, устанавливающее
кегль 14px и гарнитуру Verdana. Данный абзац демонстрирует эти свойства
в чистом виде.
Текст этого абзаца крупнее, поскольку к нему применен встроенный стиль
со значением свойства font-size:larger.
В этом абзаце увеличен межстрочный интервал путем задания свойста стиля
line-height: 200%, что означает удвоенную высоту строки. Кроме того, тексту
назначен красный цвет.
Эффект разреженного текста достигается
путем применения свойства letter-spacing.
Пример 4.2. Свойства шрифта и текста (html , txt )
Рис. 4.1. Свойства шрифта и текста
Упражнение . Попробуйте практически применить рассмотренные свойства шрифта и текста к элементам body и p в примере.
Рамки, поля, отступы, фон
Рамки
border-style определяет стиль для всех границ блока. Допустимые значения: solid, dotted, dashed, double, groove, ridge, inset, outset, none, и hidden.
Пример : p { border-style: solid; }
Отдельные стили для каждой границы задаются при помощи свойств border-bottom-style, border-left-style, border-top-style и border-right-style, принимающих такие же значения.
Пример : p { border-top-style: double; }
border-width определяет толщину для всех границ блока, указанную в любой из единиц измерения CSS, кроме процентов (как правило, в пикселах). Пример: p { border-width: 2px; }
То же свойство для каждой из границ в отдельности задается при помощи одного из свойств border-top-width, border-right-width, border-bottom-width, border-left-width.
border-color определяет цвет границ блока. Значение цвета указывается любым допустимым способом.
Пример : p { border-color: Green; }
Цвета отдельных границ устанавливаются при помощи свойств border-top-color, border-right-color, border-bottom-color, border-left-color.
border - сокращенное свойство, объединяющее border-width, border-style и border-color.
Пример : p { border: 2px solid #f33; }
Поля
Пустое пространство между содержимым блока и его рамкой (или если, рамки нет, то границей фона) - поле - задается свойством padding. Его размер можно указать в любых единицах измерения.
Свойства padding-top, padding-right, padding-bottom и padding-left задают соответственно верхнее, правое, нижнее и левое поля. Пример: p { padding-left: 20px; }
Свойство padding - сокращенное: оно позволяет задать либо сразу все поля одинаковыми (если указано одно значение), либо различные вертикальные и горизонтальные поля (если указано два значения), либо четыре различных поля, перечисленных в следующем порядке: top, right, bottom, left.
Примеры:
p { padding: 20px; }
/* все поля равны 20 пикс */
p { padding: 5px 20px; }
/* вертикальные поля равны 5 пикс, а горизонтальные 20 пикс */
p { padding: 5px 20px 5px 10px; }
/* сверху 5, справа 20, снизу 5, а слева 10 пикс */
Отступы
Пустое пространство между границей блока и другими блоками задается свойством margin. Оно полностью аналогично свойству padding, с тем отличием, что пространство добавляется не внутри блока, а снаружи.
Пример : p { margin: 20px; }
Цвет фона блока устанавливается при помощи свойства background-color.
Пример : p { background-color: #765; }
padding: 5px 10px;
border: 5px solid gray;
background-color: #2ae;
В данном примере к элементу body применены свойства margin, padding, border
и background-color. В упражнении предлагается назначить эти же свойства
другим элементам страницы - абзацу, списку (и его элементам), а также
изображению.
Листинг 4.3. Поля, рамки, отступы и фон (html, txt)
Рис. 4.2. Поля, отступы, рамки и фон
Упражнение. В данном примере все свойства применены к элементу body. Примените их вместо этого поочередно к остальным имеющимся в примере элементам (div, p, ul, li и т.д.). Попробуйте задавать различные значения для разных границ, разных полей и отступов.
Размещение и размер. Переполнение и обрезка
top, left, right и bottom управляют положением элемента относительно контейнера: top устанавливает расстояние верхней границы элемента от верхней границы контейнера; bottom - нижней границы элемента от нижней границы контейнера и т.д. Эти свойства работают только тогда, когда элемент позиционирован абсолютно (а контейнером, относительно которого ведется отсчет, считается тот контейнер, которые позиционирован абсолютно, относительно или фиксированно). Позиционированию посвящена отдельная лекция.
width и height устанавливают ширину и высоту элемента. Следует иметь в виду, что фактическая высота элемента на экране - это общая сумма высоты, верхнего и нижнего полей, верхнего и нижнего отступов, а также верхней и нижней границ. То же относится и к ширине.
max-width и max-height , а также min-width и min-height определяют соответственно максимальные и минимальные размеры элемента.
overflow определяет, как отображать содержимое элемента, если оно не вмещается внутри него - такое может произойти, если размеры элемента ограничены при помощи одного из описанных в данном разделе свойств. Значения: visible, hidden, scroll, auto. Значение visible позволяет показать не поместившееся содержимое вне области элемента (IE6- просто увеличивает в этом случае саму область); hidden скрывает любое содержимое за пределами отведенной ему области; scroll добавляет полосы прокрутки к элементу, auto добавляет полосы прокрутки, только когда они необходимы.
position: absolute;
border: 2px solid black;
overflow: scroll;
overflow: hidden;
overflow: visible;
max-width: 150px;
max-height: 100px;
Эта секция имеет свойство стиля overflow: scroll - поэтому полосы прокрутки
показаны (хотя и не нужны).
.</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samcss/fig13-3.png' width=){kind=link}
Интернет Windows 7, XP Windows 8 Windows 10 Безопасность Советы Программы Гаджеты Настройка Wi-Fi Телевизоры
Mozilla Firefox – мощный и удобный браузер, функционал которого можно значительно расширить за счет специальных дополнений, которые можно загрузить из магазина, встроенного в браузер. В этой статье я хочу вам рассказать о дополнении Speed Dial – удобной и
С расширением dmg чаще всего встречаются пользователи операционной системы Mac OS. Файл dmg представляет собой классический образ диска. В файле с текущим расширением могут храниться любые данные по аналогии с . Дополнительно нужно . Данная статья расскаж
Существует такое мнение, что лучше купить прошлогодний флагман, чем новую модель среднего класса. В мире Android-смартфонов это правило работает безотказно, но можно ли его применить к царству Apple? Для этого мы взяли прошлогодний iPhone X и новейший iPh
Самые читаемые материалы
Speed Dial – визуальные закладки для FireFox
Открытие файла DMG на разных платформах
Обзор iPhone X: дизайн, цвета, характеристики, цены, старт продаж в России
Как перенести приложения с внутренней памяти на SD карту в Android
Выбираем альтернативу Microsoft Office Word
Samsung GT-I9300 Galaxy S3 — Обновление ПО и ROOT-права
Что такое рут права на Андроид
Последние материалы
Система Андроид устроена таким образом, что обычно файлы сохраняются на внутреннем накопителе. Как правило, поэтому удобнее хранить данные на внешнем устройстве.Если фотографии занимают слишком много места на внутреннем накопителе, то вы можете перенести.
Сегодня рассмотрим
, ведь не так давно вышел новый
офисный пакет
Office 2013 от компании Microsoft и поступил в свободную продажу.
Цена самой простой версии Office 2013 – 140$, а профессиональный вариант обойдется пользователю в 400$. Новый
оф.
Как прошить Galaxy S3?
Очень часто обладатели корейского смартфона фирмы Samsung стремятся увеличить производительность аппарата и его функциональные возможности за счет перепрошивки. Обновление программного обеспечения помогает улучшить.
Мобильная платформа Android относится к операционным системам закрытого типа. Это означает, что в обычном режиме у пользователей отсутствует возможность вносить какие-либо изменения в ее корневой каталог. Подобные запреты несколько уменьшают функциональн.