Взаимодействие JavaScript и CSS
Каскадные таблицы стилей (Cascading Style Sheets - CSS) - это стандарт визуального представления HTML-документов. Каскадные таблицы стилей предназначены для использования дизайнерами: они позволяют точно определить шрифты, цвета, величину полей, выравнивание, параметры рамок и даже координаты элементов в документе.
Но они также представляют интерес и для программистов, пишущих на клиентском языке JavaScript, потому что позволяют воспроизводить анимационные эффекты, такие как плавное появление содержимого документа из-за правого края, например, или сворачивание и разворачивание списков, благодаря чему пользователь получает возможность управлять объемом отображаемой информации.
Управление встроенными стилями
Самый простой способ управления стилями CSS - это манипулирование атрибутом style отдельных элементов документа. Как и для большинства HTML-атрибутов, атрибуту style соответствует одноименное свойство объекта Element, и им можно манипулировать в сценариях на языке JavaScript. Однако свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration . Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.
Например, чтобы вывести содержимое текстового элемента e крупным, полужирным шрифтом синего цвета, можно выполнить следующие операции для записи желаемых значений в свойства, которые соответствуют свойствам стиля font-size, font-weight и color:
E.style.fontSize = "24px"; e.style.fontWeight = "bold"; e.style.color = "blue";
При работе со свойствами стиля объекта CSSStyleDeclaration не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте style можно написать:
Position: absolute; font-family: sans-serif; background-color: #ffffff;
Чтобы сделать то же самое для элемента e в JavaScript, необходимо заключить все значения в кавычки:
E.style.position = "absolute"; e.style.fontFamily = "sans-serif"; e.style.backgroundColor = "#ffffff";
Обратите внимание, что точки с запятыми не входят в строковые значения. Это точки с запятой, употребляемые в синтаксисе языка JavaScript. Точки с запятой, используемые в таблицах стилей CSS, не нужны в строковых значениях, устанавливаемых с помощью JavaScript.
Кроме того, помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. То есть:
E.style.left = 300; // Неправильно: это число, а не строка e.style.left = "300"; // Неправильно: отсутствуют единицы измерения e.style.left = "300px"; // Правильно
Единицы измерения обязательны при установке свойств стиля в JavaScript - так же, как при установке свойств стиля в таблицах стилей.
Многие CSS-свойства стиля, такие как font-size, содержат в своих именах дефис. В языке JavaScript дефис интерпретируется как знак минус, поэтому нельзя записать выражение, приведенное ниже:
E.style.font-size = "24px"; // Синтаксическая ошибка!
Таким образом, имена свойств объекта CSSStyleDeclaration слегка отличаются от имен реальных CSS-свойств. Если имя CSS-свойства содержит дефисы, имя свойства объекта CSSStyleDeclaration образуется путем удаления дефисов и перевода в верхний регистр буквы, непосредственно следующей за каждым из них. Другими словами, CSS-свойство border-left-width доступно через свойство borderLeftWidth, а к CSS-свойству font-family можно обратиться через свойство fontFamily.
Кроме того, когда CSS-свойство, такое как float, имеет имя, совпадающее с зарезервированным словом языка JavaScript, к этому имени добавляется префикс «css», чтобы создать допустимое имя свойства объекта CSSStyleDeclaration. То есть, чтобы прочитать или изменить значение CSS-свойства float элемента, следует использовать свойство cssFloat объекта CSSStyleDeclaration.
Атрибут style HTML-элемента - это его встроенный стиль, и он переопределяет любые правила стилей в таблице CSS. Встроенные стили в целом удобно использовать для установки значений стиля, и именно такой подход использовался во всех примерах выше. Сценарии могут читать свойства объекта CSSStyleDeclaration, представляющего встроенные стили, но они возвращают осмысленные значения, только если были ранее установлены сценарием на языке JavaScript или если HTML-элемент имеет встроенный атрибут style, установивший нужные свойства.
Например, документ может включать таблицу стилей, устанавливающую левое поле для всех абзацев равным 30 пикселам, но если прочитать свойство leftMargin одного из этих элементов, будет получена пустая строка, если только этот абзац не имеет атрибут style, переопределяющий значение, установленное таблицей стилей.
Чтение встроенного стиля элемента представляет особую сложность, когда выполняется чтение свойств стиля, имеющих единицы измерения, а также свойств сокращенной формы записи: сценарий должен включать далеко не простую реализацию синтаксического анализа строк с CSS-стилями, чтобы обеспечить возможность извлечения и дальнейшего использования значений. В целом, встроенный стиль элемента удобно использовать только для установки стилей.
Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту CSSStyleDeclaration. Для этого можно использовать методы getAttribute() и setAttribute() объекта Element или свойство cssText объекта CSSStyleDeclaration:
// Обе инструкции, следующие ниже, записывают в атрибут style // элемента e строку s: e.setAttribute("style", s); e.style.cssText = s; // Обе инструкции, следующие ниже, получают значение атрибута style // элемента e в виде строки: s = e.getAttribute("style"); s = e.style.cssText;
Создание анимационных эффектов средствами CSS
Одной из наиболее типичных областей применения CSS является воспроизведение визуальных анимационных эффектов. Реализовать их можно с помощью метода setTimeout() или setInterval(), используя их для организации многократных вызовов функции, изменяющей встроенный стиль элемента.
// Делает элемент e относительно позиционируемым и перемещает его влево и вправо. // Первым аргументом может быть объект элемента или значение атрибута id требуемого // элемента. Если во втором аргументе передать функцию, она будет вызвана с элементом e // в виде аргумента по завершении воспроизведения анимации. Третий аргумент определяет // величину смещения элемента e. По умолчанию принимает значение 5 пикселов. // Четвертый аргумент определяет, как долго должен воспроизводиться эффект. // По умолчанию эффект длится 500 мсек. function shake(e, oncomplete, distance, time) { // Обработка аргументов if (typeof e === "string") e = document.getElementByld(e); if (!time) time = 500; if (!distance) distance = 5; var originalStyle = e.style.cssText; // Сохранить оригинальный стиль e e.style.position = "relative"; // Сделать относит. позиционируемым var start = (new Date()).getTime(); // Запомнить момент начала анимации animate(); // Запустить анимацию // Эта функция проверяет прошедшее время и изменяет координаты e. // Если анимацию пора завершать, восстанавливает первоначальное состояние // элемента e. Иначе изменяет координаты e и планирует следующий свой вызов. function animate() { var now = (new Date()).getTime(); // Получить текущее время var elapsed = now-start; // Сколько прошло времени с начала? var fraction = elapsed / time; // Доля от требуемого времени? if (fraction
Обе функции, shake() и fadeOut(), принимают необязательную функцию обратного вызова во втором аргументе. Если эта функция указана, она будет вызвана по завершении воспроизведения анимационного эффекта. Элемент, к которому применялся анимационный эффект, будет передан функции обратного вызова в виде аргумента. Следующая разметка HTML создает кнопку, для которой после щелчка на ней воспроизводится эффект встряхивания, а затем эффект растворения:
Обратите внимание, насколько функции shake() и fadeOut() похожи друг на друга. Они обе могут служить шаблонами для реализации похожих анимационных эффектов с использованием CSS-свойств.
Вычисленные стили
Свойство style элемента определяет встроенный стиль элемента. Оно имеет преимущество перед всеми таблицами стилей и с успехом может применяться для установки CSS-свойств для изменения визуального представления элемента. Однако в общем случае к нему нет смысла обращаться, когда требуется узнать фактически примененные к элементу стили. То, что требуется в этом случае, называется вычисленным стилем.
Вычисленный стиль элемента - это набор значений свойств, которые браузер получил (или вычислил) из встроенного стиля и всех правил из всех таблиц стилей, которые применяются к элементу: это набор свойств, фактически используемый при отображении элемента. Подобно встроенным стилям, вычисленные стили представлены объектом CSSStyleDeclaration. Однако в отличие от встроенных стилей, вычисленные стили доступны только для чтения. Эти стили нельзя изменить, но вычисленный объект CSSStyleDeclaration позволяет точно узнать значения свойств стилей, которые браузер использовал при отображении соответствующего элемента.
Получить вычисленный стиль элемента можно с помощью метода getComputedStyle() объекта Window. Первым аргументом этому методу передается элемент, вычисленный стиль которого требуется вернуть. Второй аргумент является обязательным, и в нем обычно передается значение null или пустая строка, но в нем также может передаваться строка с именем псевдоэлемента CSS, таким как «::before», «::after», «:first-line» или «:first-letter»:
Var title = document.getElementById("section1title"); var titlestyles = window.getComputedStyle(element, null);
Возвращаемым значением метода getComputedStyle() является объект CSSStyleDeclaration, представляющий все стили, применяемые к указанному элементу (или псевдоэлементу). Между объектами CSSStyleDeclaration, представляющими встроенные стили и вычисленные стили, существует множество существенных отличий:
Свойства вычисленного стиля доступны только для чтения.
Свойства вычисленных стилей имеют абсолютные значения: относительные единицы измерения, такие как проценты и пункты, преобразуются в абсолютные значения. Любое свойство, которое определяет размер (например, ширина поля или размер шрифта) будет иметь значение, выраженное в пикселах. То есть его значением будет строка с суффиксом «px», поэтому вам необходимо будет реализовать ее синтаксический анализ, зато не придется беспокоиться об определении и преобразовании единиц измерений. Значения свойств, определяющих цвет, будут возвращаться в формате «rgb(#,#,#)» или «rgba(#,#,#,#)».
Свойства, являющиеся краткой формой записи, не вычисляются - только фундаментальные свойства, на которых они основаны. Например, не следует пытаться получить значение свойства margin, вместо этого нужно обращаться к свойствам marginLeft, marginTop и т.д.
Свойство cssText вычисленного стиля не определено.
Работа с вычисленными стилями может оказаться весьма непростым делом, и обращение к ним не всегда возвращает ожидаемую информацию. Рассмотрим в качестве примера свойство font-family: оно принимает список разделенных запятыми имен семейств шрифтов для совместимости. При чтении свойства fontFamily вычисленного стиля вы ждете значение наиболее конкретного стиля font-family, применяемого к элементу. А в этом случае может вернуться такое значение, как «arial,helvetica,sans-serif», которое ничего не говорит о гарнитуре фактически используемого шрифта.
Управление таблицами стилей
До сих пор мы видели, как устанавливать и получать значения CSS-свойств стиля и классы отдельных элементов. Однако существует еще возможность управления самими таблицами стилей CSS. Обычно в этом не возникает необходимости, тем не менее такая возможность иногда бывает полезной, и в этом разделе коротко будут представленные возможные приемы.
При работе с самими таблицами стилей вам придется столкнуться с двумя типами объектов. Первый тип - это объекты Element, представляющие элементы
Есть свойство, которое позволяет управлять видимостью содержимого элемента.
visibility - управляет в CSS, видимостью содержимого элемента.
Значения:
XHTML
содержимое этого заголовка не отобразится
Следующее свойство, которое позволяет управлять видимостью блока – это display .
display — определяет, как будет отображаться элемент
Значения:
none — элемент не отображается
block - разбивает строку до и после элемента (т.е. элемент не может находится на одной линии с другими элементами)
inline - не разбивает строку
Как этим свойством пользоваться?
Допустим у нас идет текст, среди этого текста есть тэг
или это может быть ссылка, и нам нужно, что бы содержимое этого тэга или ссылки отображались на отдельной строке, то для них мы зададим свойство display
cо значением
block. И наоборот, если нужно, допустим, чтобы тег
был не на отдельной сроке, а в той же что и текст, то ему задаем свойство display
cо значением inline
.
XHTML
будет на одной строке с текстом
отобразиться на отдельной строкеОсобого внимания заслуживает значение none . Если мы зададим какому-либо элементу, свойство display со значением none, то этот элемент не отобразиться. Причем, в отличие от свойства visibility со значением hidden , этот элемент не отобразится полностью (свойства visibility со значением hidden не отобразит содержимое элемента, а сам элемент будет занимать свое место на странице).
Преимуществом веб-типографики является то, что она базируется на знаниях, накопленных за столетия развития традиционной печатной типографики. По той же причине веб-типографика должна следовать стандартам лучших практик и передового опыта.
Однако, веб это пространство коммуникации со своими особенностями. Настолько, что плавный переход от печати к веб-типографике становится вызовом. Джейсон Санта Мария в своей книге о веб-типографике пишет:
Печатные книги это статический формат. От первого дизайнерского макета книга без изменений проходит свой путь к вам через типографию, склад и книжную полку. В точно таком же виде, как было задумано.
В вебе один и тот же сайт может выглядеть различно в зависимости от многих факторов - различий устройств, разрешения их экранов, личных настроек браузеров и прочего. Как далее пишет Джейсон, некоторые из этих факторов…
Могут дать впечатление, что шрифт слишком мелкий, другие выносят часть содержимого за пределы экрана, а третьи могут полностью испортить просмотр страницы.
Но также известно, что “веб это лучшее место для текста”. Текст в Интернете можно “искать, копировать, переводить, передавать в виде ссылки, распечатывать; текст в вебе удобен и доступен”.
Гибкость веба не означает отказ от контроля. Наоборот, как веб-дизайнеры мы ожидаем возможности делать осознанный выбор во всем, что составляет нашу работу и текст не исключение. Это и то, как располагается текст, его размер, шрифт и все, что позволяет донести основную идею сайта.
Главный инструмент для манипуляции видом текста в вебе это CSS.
Свойства CSS, рассматриваемые в этой статье, вы можете найти в модуле спецификации CSS текста .
Этот модуль описывает верстку CSS, то есть свойства CSS, управляющие переводом источника текста в форматированный и разделенный на строки текст.
Другими словами, модуль CSS текста это все, что касается вывода символов и слов в браузере, отступов, выравнивания, переносов и прочего.
Что считать базовой единицей текста или слова, где можно разбивать слова и прочие правила, зависит от языка сайта. Поэтому очень важно задавать данные об используемом языке в HTML-документе (обычно это атрибут lang в элементе html).
В этой статье я не буду обсуждать следующие вещи:
- шрифты, т.е. визуальное представление символов и их свойства;
- свойства CSS по декорированию текста, такие как подчеркивание, тени текста или акцентирование.
Если вы любопытны, вы найдете последнюю документацию о шрифтах и декорировании текста в модуле CSS шрифты третьего уровня и в модуле декорирования текста CSS третьего уровня .
Управление регистром букв: text-transform
Иногда возникает необходимость вывести слова или первые символы слов с заглавной буквы. В CSS для управления регистром буквы есть свойство text-transform .
Дефолтное значение text-transform равно none , то есть по умолчанию регистр букв не изменяется.
Значение capitalize
Если вы хотите сделать заглавной первую букву каждого слова, оставив все остальные в первоначальном виде, то этого можно достичь задав значение capitalize .
Разметка:
H2 { text-transform: capitalize; }
Отметьте, что capitalize не следует традиционным правилам - оно делает заглавными первые буквы всех слов, включая предлоги. И если вы хотите следовать нормам английского языка, вам придется делать это вручную.
Значение uppercase
Если ваша цель - сделать все буквы заглавными, то подходящим значением будет uppercase:
Разметка:
alice"s adventures in wonderland
H2 { text-transform: uppercase; }
Значение lowercase
Это значение наоборот делает все символы строчными. Естественно, оно не оказывает никакого воздействия на уже имеющиеся строчные буквы.
Разметка:
alice"s adventures in wonderland
H2 { text-transform: lowercase; }
Значение full-width
Это значение появилось в спецификации недавно. Это значение ограничивает символ внутри квадрата, аналогично иероглифам. И применение этого свойство облегчает выравнивание латинских символов с идеографическими.
Не у всех символов есть соответствующая форма, и, значит, не на все символы будет влиять это значение:
Разметка:
alice"s adventures in wonderland
H2 { text-transform: full-width; }
Это свойство на данный момент поддерживается только в Firefox.
Дополнительная информация
Браузеры отлично поддерживают свойство text-transform , у всех основных браузеров с ним нет проблем.
Единственное исключение это значение full-width , которое работает пока только в Firefox. И такая непопулярность вполне может повлечь исключение этого значения из спецификаций.
Также есть небольшое отличие в обработке capitalize у Firefox и остальных браузеров.
Вот, например, Firefox:
Заметьте, что первая буква после дефиса не капитализируется. А вот тот же самый пример в Chrome:
В Chrome не делается исключений для первых букв после дефисов - они переводятся в заглавный регистр также как остальные. И это является дефолтным поведением для всех браузеров, кроме упомянутого выше Firefox.
И, наконец, не забывайте о каскадировании. Задание свойства text-transform для элемента-контейнера будет унаследовано всеми его потомками. Чтобы избежать неожиданных результатов, задавайте дочерним элементам text-transform в значение none .
Обработка пробелов: white-space
Когда вы нажимаете клавишу Tab , пробел или форсированно обрываете строку (с клавишей ENTER или тегом
), вы создаете пробелы в своем документе.
По умолчанию браузеры объединяют все последовательности пробелов в один, удаляют обрывы строки и заставляют строки занимать ширину контейнера. Это удобно потому что позволяет делать отступы и разделять фрагменты текста, сохраняя исходник документа читаемым и поддерживаемым, не заботясь о его отображении в браузере.
Однако, что делать, если у нас другая цель? Предположим, вы хотите сохранить все пробелы, которые вы создали в HTML-документе. Или вы хотите, чтобы фрагмент текста выводился как сниппет кода, со всеми отступами. Или же вы хотите вывести текст в одну линию, без переносов.
В тех случаях, когда вам нужно изменить дефолтное поведение браузера, свойство white-space предлагает несколько интересных вариантов.
Ключевое слово normal идентично дефолтному поведению - все лишние пробелы схлопываются в один, строка переводится после достижения края контейнера.
Значение pre
Ключевое слово pre позволяет вам вывести текст с сохранением всех пробелов и всех форсированных переводов строки в исходнике. И при превышении пределов контейнера строка не будет обрываться.
Element { white-space: pre; }
Если вы используете табы, то вы можете управлять их размером в пробелах с помощью свойства tab-size . Оно принимает значение в виде целого числа.
Element { white-space: pre; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; }
Свойство tab-size поддерживают все современные браузеры, кроме браузеров от Microsoft (и даже Edge, увы) , но если вы уверены, что вам это надо, используйте полифилл .
Значение pre-wrap
Ключевое слово pre-wrap позволяет вам достигнуть желаемого результата.
Element { white-space: pre-wrap; }
Отметьте, как каждая строка, выведенная в браузере, повторяет все переводы строки из исходника при наличии места в контейнере.
Однако, если вы уменьшите ширину браузера, вы заметите, что все строки ограничены шириной контейнера.
Значение pre-line
И, наконец, еще одно интересное значение свойства white-space - pre-line . Оно действует как дефолтное в части схлопывания пробелов в один и ограничения строки размером контейнера. Однако оно отрабатывает все форсированные переводы строки.
Element { white-space: pre-line; }
Значение nowrap
nowrap это, возможно, самое известное значение для white-space . Сталкивались вы с необходимостью задать какому-либо элементу дизайна неразрывность вне зависимости от ширины контейнера? Это делается с помощью white-space: nowrap; .
Для таких случаев у нас есть специальные свойства CSS.
Свойство word-wrap/overflow-wrap
Свойство overflow-wrap (раннее известное как word-wrap и до сих пор поддерживаемое во всех основных браузерах) работает, если свойство white-space допускает перенос в соответствии с размером строки. Возможные значения - normal и break-word .
Со значением normal слова разбиваются на всех традиционных маркерах - пробелы, дефисы и т.д.
Значение break-word позволяет разбить длинные слова, если иначе строка будет превышать доступный размер.
На картинке ниже изображен пример длинного слова, выходящего за пределы контейнера:
Теперь зададим этому элементу свойство overflow-wrap (и свойство word-wrap для совместимости) в значение break-word:
Element { word-wrap: break-word; overflow-wrap: break-word; }
Теперь сверхдлинное слово разбито на несколько строк, заполняющих всю ширину контейнера.
Свойство hyphens
Разбитие длинных слов это, конечно, хорошо. Однако, полученный текст может смутить читателей. Лучше будет, если разбитие слова будет сопровождаться установкой дефиса. Таким образом, читателям сразу становится ясно, что это одно слово, разделенное между строками. Этого можно достичь используя свойство hyphens , его можно сочетать с word-wrap: break-word .
Конкретно это значит, что значение auto свойства hyphens позволяет вывести дефис на месте разбития слова, если язык документа позволяет это делать в имеющемся источнике HTML. Чтобы это сработало, не забудьте задать правильный атрибут lang своему документу:
Break-word.hyphens-auto { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
Вы также можете отключить вывод дефисов, задав hyphens значение none:
Break-word.hyphens-none { -moz-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; }
Также у вас есть возможность вывести дефисы на разрывах строки там, где вы поставили их в разметке. Это делается с помощью значения manual:
Break-word.hyphens-manual { -moz-hyphens: manual; -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; }
Управляем пространством между словами и буквами
Читаемость фрагмент текста зачастую зависит от нескольких факторов. В некоторых случаях, уменьшение или увеличение пространства между словами или буквами, то есть трекинг существенно улучшает читаемость.
В CSS есть свойства word-spacing и letter-spacing для управления расстоянием между словами и буквами соответственно.
Свойство word-spacing
Это свойство может принимать следующие значения:
- normal
(задание непосредственно числового значения в абсолютных единицах) - percentage (задание значения в процентах)
normal выводит заданное по умолчанию расстояние между буквами. Это расстояние зависит от используемого шрифта и браузера.
Normal { word-spacing: normal; }
Числовое значение добавляет указанный промежуток к дефолтному (вычитает , если задано отрицательное значение):
Length { word-spacing: 0.5em; }
Значение в процентах работает также как и числовое. На данный момент оно не поддерживается браузерами и, скорее всего, будет удалено из будущих черновиков спецификации.
Percentage { word-spacing: 1%; }
Свойство letter-spacing
Свойство letter-spacing принимает два вида значений: normal или числовое значение с единицами измерения.
Свойство normal сбрасывает любое раннее установленное значение letter-spacing на дефолтное. Например, если вы задали родительскому элементу letter-spacing в 1em , вы можете отменить это для дочерних с помощью normal .
Element { letter-spacing: normal; }
Числовое значение задается в единицах исчисления, например в em или в пикселях, вы можете увеличить расстояние дефолтное расстояние или уменьшить задав отрицательное значение.
Element { letter-spacing: 1em; }
Дополнение
word-spacing применимо не только к словам - его можно использовать с любым строчным или строчно-блочным содержимым.
Также вы можете анимировать word-spacing и letter-spacing . Однако в CSS-переходах значение normal в letter-spacing не работает в Firefox (39), просто замените значение на 0em .
Отступы в тексте: text-indent
Отступы в тексте обычно делаются в первой строке параграфа, хотя и не являются распространенной практикой на веб-сайтах. Вместо этого обычно помещается пустая строка, разделяющая параграфы.
Тем не менее, иногда отступ в первой строке иногда используется, например, для имитации классических книжных дизайнов.
Если вы хотите использовать эту технику в своем дизайне, в CSS есть свойство text-indent . Рассмотрим его возможные значения.
Числовое значение можно задать в пикселях, em’aх и других поддерживаемых единицах:
Element { text-indent: 2em; }
В том числе и в процентах от ширины контейнера:
Element { text-indent: 6%; }
Значение each-line добавляет отступ не только первой строке, но и любой строке после разрыва строки (ENTER или
). На строки, переносимые по причине заполнения контейнера эти отступы не распространяются.
Значение hanging добавляет отступ ко всем строкам, кроме первой.
Два последних значения: each-line и hanging являются экспериментальными и не реализованы на данный момент ни в одном из браузеров.
Представление документа пользователю значит его конвертацию в понятную для пользователя форму. Браузеры , такие как Firefox , Chrome или Internet Explorer , предназначены для представления документов визуально, например, на экране компьютера, проектора или принтера.
Как CSS влияет на HTML?
Браузер применяет CSS правила к документу, чтобы описать, как он будет отображаться. CSS-правила формируются из:
- Набора свойств , которые имеют значения, устанавливающие, как будет отображаться содержимое(HTML), Например Я хочу, чтобы ширина элемента равнялась 50% ширины родительского элемента, и его фон был красным .
- Селектор , который выбирает (англ. selects) элемент/элементы, к которым вы хотите применить измененные значения. Например, Я хочу применить это CSS-правило ко всем параграфам в моем HTML-документе .
Набор правил CSS, содержащихся в таблице стилей(stylesheet), определяет, как должна выглядеть веб-страница. Более подробно о синтаксисе CSS вы узнаете в следующей статье модуля - .
Краткий пример CSS
Описания, приведенные выше могут быть непонятны, поэтому подкрепим теорию небольшим практическим примером. Прежде всего, давайте рассмотрим простой HTML-документ, содержащий
и определяет собой абзац текста.">
(заметьте, что таблица стилей применяется к HTML с использованием элемента ):
Hello World!
Это мой первый CSS-пример
Теперь давайте посмотрим на очень простой пример CSS, содержащий два правила:
Первое правило начинается с селектора h1 , который означает, что оно будет применено к элементу
. Оно содержит три свойства и три значения(каждая пара свойство/значение называется объявление
):
- Первое объявление меняет цвет текста на синий.
- Второе выставляет желтый фон тексту.
- Третье создает границу вокруг текста шириной 1 пиксель, сплошную(не пунктирную, не штрих-пунктирную) и окрашенную в черный цвет.
Второе правило начинается с селектора p , который значит, что оно применится к элементу определяет собой абзац текста.">
. Оно содержит одно объявление, которое меняет цвет текста на красный.
Приведенный выше код в браузере отобразится вот так:
Это не очень красиво, но показывает, как работает CSS.
Активное обучение: Пишем наш первый CSS
Сейчас мы дадим вам возможность написать свой первый CSS. Вы можете сделать это, используя поле ввода, расположенное ниже, и увидеть это на живом редактируемом примере. У нас есть некоторые простые элементы HTML, а также некоторые свойства CSS. Так же, как показано выше, попробуйте добавить простые объявления в CSS, чтобы определить стиль HTML.
Если вы сделаете ошибку, вы всегда можете сделать сброс, используя кнопку Reset. Если вы чувствуете, что застряли, можете нажать "Показать решение", чтобы посмотреть решение.
Playable code
HTML Input
CSS Input
Output
Как на самом деле работает CSS?
Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:
- Браузер конвертирует HTML и CSS в DOM (англ. Document Object Model ). DOM представляет документ в память компьютера и применяет к содержимому стили.
- Браузер отображает содержимое DOM.
О DOM
DOM имеет древовидную структуру. Каждый элемент, атрибут и кусочек текста в языке разметки представляется как узел DOM в этой структуре. Узлы определяются их отношением к другим DOM-узлам. Элементы могут иметь потомков, а потомки могут иметь братские(соседние) элементы.
Понимание DOM поможет вам в проектировании, отладке и поддержке вашего CSS, потому что DOM это место, в котором CSS встречается с содержимым документа.
Представление DOM
Вместо долгих и скучных объяснений давайте рассмотрим пример, который покажет, как DOM и CSS работают вместе.
Давайте рассмотрим представленный HTML-код:
В DOM узел, соответствующий элементу
Является родителем. Его дети являются текстовыми узлами и соответствуют элементу . Узлы SPAN также являются родителями, а их потомки -- текстовые элементы:
P ├─ "Let"s use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"
После интерпретации DOM-дерева браузером на выходе мы получим вот это:
Применение CSS к DOM
Let"s use: Cascading Style Sheets
Мы применим к нему этот CSS:
Span { border: 1px solid black; background-color: lime; }
Браузер проанализирует HTML и создаст DOM из него, а затем разберется с CSS. Поскольку у нас есть только одно правило, описывающее селектор span,то оно будет применено ко всем узлам документа с этим селектором. На выходе получим это.
Как применить ваш CSS к вашему HTML
Есть три различных варианта применения CSS к HTML-документу, которые встречаются чаще всего. Здесь мы рассмотрим каждый из них.
Внешняя таблица стилей
Вы уже сталкивались с внешней таблицей стилей в этой статье, но называли ее не так. Внешняя таблица стилей это отдельный файл с расширением.css, в котором и хранится CSS. Вы ссылаетесь на него из HTML при помощи элемента . HTML при этом выглядит так:
Hello World!
This is my first CSS example
Добавим CSS-файл:
H1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }
Этот метод, вероятно, лучший из всех, поскольку вы можете использовать одну таблицу стилей для нескольких документов. Чтобы обновить стили, достаточно внести изменения лишь в один CSS-файл.
Внутренняя таблица стилей
Внутренняя таблица стилей содержится внутри элемента содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS.">
Hello World!
This is my first CSS example