Аннотация: Доступ к таблицам стилей. Свойства таблиц стилей. Добавление и удаление правил. Изменение стилей элементов. Имена классов элементов.
Давайте рассмотрим (в данный момент) теоретический пример - пусть имеется web - сайт , где представлена серия технических статей. Мы хотим привлечь внимание к некоторым из этих статей с помощью интересной анимированной карусели, но как быть с пользователями, у которых JavaScript не включен по каким-то причинам? Вспоминая полученные знания о ненавязчивом JavaScript, мы хотим, чтобы функции Web -сайта также работали для этих пользователей, но мы можем захотеть оформить сайт для этих пользователей по-другому, чтобы им было удобно использовать сайт , даже без карусели.
Если требуется удалить это правило , можно вызвать функцию stylesheet.deleteRule(index) , где index будет индексом правила , которое будет удалено.
В примере демонстрации статей можно создать правило , которое делает свойство display равным none для всех статей о HTML и JavaScript - посмотрите в примере карусели (http://dev.opera.com/articles/view/dynamic-style-css-javascript/carousel.html), чтобы увидеть это в действии.
Примечание : IE не реализует правила в соответствии со стандартами. Вместо атрибута cssRules он использует rules . IE использует также removeRule вместо deleteRule и addRule( selector , rule, index) вместо insertRule .
Изменение стилей элементов
Теперь вы должны понимать, как редактировать таблицы стилей , соединенные со страницей, и создавать и модифицировать в них правила CSS . Что делать, если вы захотите изменить определенный элемент в DOM ? Используя DOM API можно получить доступ к определенным элементам страницы. Возвращаясь к примеру карусели можно видеть, что функции определены таким образом, что при щелчке на статье эта статья выделяется, в то время как основной текст статьи выводится ниже.
С помощью DOM мы получаем доступ к объекту style , который описывает стиль документа. Этот объект style определен как CSSStyleDeclaration ; подробное объяснение этого можно найти в документации W3C по интерфейсу CSSStyleDeclaration (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration). Объект style работает не совсем так, как некоторые другие свойства, определенные в элементе HTML . В отличие от element.href или element.id , которые возвращают строки, element.style возвращает объект . Это означает, что невозможно задать стиль, присваивая строку для element.style .
Объект style имеет атрибуты, которые соответствуют различным заданным свойствам CSS . Например, style.color возвращает заданный на элементе цвет. Выполняя element.style.color = "red"; можно динамически изменять стиль. Ниже показана функция , которая превращает цвет элемента в красный, когда ей передается id элемента.
function colorElementRed(id) { var el = document.getElementById(id); el.style.color = "red"; }
Можно также использовать setAttribute(key, value) для задания стиля элемента. Например, задать цвет элемента как красный, вызывая на элементе element.setAttribute("style", "color: red"); , но будьте осторожны, так как это удаляет любые изменения, сделанные в объекте style .
Когда стиль элемента задается таким образом, то это то же самое, как если бы мы задавали его как объявление атрибута style элемента html . Этот стиль будет применяться только в том случае, когда важность и специфичность правила будут больше, чем другие примененные к элементу правила (специфичность объясняется в лекции 28 о наследовании и каскадировании CSS ).
У некоторых из вас может возникнуть вопрос, что происходит, когда заданное свойство
Представление документа пользователю значит его конвертацию в понятную для пользователя форму. Браузеры , такие как 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