Как вызвать css в html

Как вызвать css в html

Глобальный атрибут (en-US) id устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование идентификатора фрагмента), скриптинге или стилизации (с помощью CSS).

Интерактивный пример

Значение этого атрибута «непрозрачная» строка: это означает, что веб-автор не должен использовать его для передачи какой-либо информации. Особое значение, например семантическое, получать из этой строки не надо.

Значение id не должно содержать пропусков (пробелов, табуляции и т.д). Браузеры обрабатывают пробелы, как часть уникального идентификатора. В отличии от атрибута class , который позволяет разделять пробелами значение (указывать несколько классов через пробел), элементы могут иметь только один ID.

Примечание: Использование символов отличных от ASCII букв, цифр, ‘_’ , ‘-‘ и ‘.’ может вызвать проблемы, связанные с совместимостью, т.к. они не были разрешены в HTML 4. Несмотря на то, что в HTML5 ограничение было снято, для совместимости ID должен начинаться с латинской буквы.

Спецификации

Specification
HTML Standard # global-attributes:the-id-attribute-2

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

• Все глобальные атрибуты.
• Element.id отражает этот атрибут.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Структурируем страницу

Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придётся подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.

Что нужно знать:	Вам понадобятся навыки из всего курса. Особое внимание уделите разделу Структура документа и веб-сайта.
Цель:	Проверить знания структуры веб-страницы и её перевода в разметку.

Отправная точка

Чтобы начать это, вы должны перейти и скачать архив содержащий все начальные активы. Архив содержит:

• HTML, где вам нужно добавить структурную разметку.
• CSS для стилизации вашей разметки.
• Изображения, которые используются на странице.

Создайте пример на вашем локальном компьютере или, альтернативно, используйте сайт, например JSBin или Thimble для исследования.

Краткое описание проекта

Для этого проекта ваша задача — взять контент для домашней страницы веб-сайта наблюдения за птицами и добавить к нему структурные элементы, чтобы он мог использовать макет страницы. Он должен иметь:

• Заголовок, охватывающий всю ширину сайта, содержащий основное название страницы, логотип сайта и меню навигации. Заголовок и логотип появляются рядом друг с другом, когда применяется стилизация, и навигация появляется ниже этих двух элементов.
• Основная область содержимого, содержащая два столбца — основной блок, содержащий текст приветствия, и боковую панель для размещения миниатюр изображений.
• Нижний колонтитул, содержащий информацию об авторских правах и разработчиках.

Вам необходимо добавить подходящую обёртку для:

• Заголовка
• Меню навигации
• Основного содержимого
• Приветственного текста
• Боковой панели изображения
• Нижнего колонтитула

Вы также должны:

• Примените предоставленный CSS к странице, добавив ещё один элемент чуть ниже существующего, указанного в начале.

Советы и подсказки

• Используйте W3C HTML validator для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много — валидатор — полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).
• Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.
• Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелёными на отображаемой странице.
• Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.

Пример

Следующий скриншот показывает пример того, как может выглядеть домашняя страница после маркировки.

Оценивание

Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на форум, задав тему обсуждения этого упражнения, или в IRC-канале #mdn в IRC Mozilla, или в IRC-канале #mdn в IRC Mozilla. Попробуйте выполнить задание сами, ведь вам некого обманывать, кроме себя самого!

В этом модуле

• Начало работы с HTML
• Что такое заголовок? Метаданные в HTML
• Основы редактирования текста в HTML
• Создание гиперссылок
• Углублённое форматирование текста
• Структура документа и веб-сайта
• Отладка HTML
• Разметка письма
• Структурируем страницу

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Классы и идентификаторы в HTML и CSS

В предыдущем уроке в качестве селекторов правил CSS мы использовали имена тегов HTML. Например, для абзаца у нас было следующее правило:

p { font-size: 18px; font-family: Verdana, Arial, sans-serif; } 

Оно действовало для всех элементов p документа. Но что делать, если какие-то из них надо оформить по-другому?

Более тонкая разметка страницы и настройка ее элементов выполняется с помощью использования классов, идентификаторов, комбинированных и других селекторов. В этом уроке мы рассмотрим только классы и идентификаторы.

У открывающих или одиночных тегов HTML может быть атрибут class , которому присваивается произвольное (вами придуманное) имя класса. Например:

…текст…
 

Теперь в CSS, чтобы оформить этот абзац по особому, в таблице стилей мы обращаемся к нему с помощью такого синтаксиса:

.название_класса

То есть перед именем класса ставим точку, само имя в кавычки не берем.

По смыслу скорее именно в CSS мы определяем класс и создаем для него правило, а в HTML обращаемся к нему с помощью атрибута class , то есть применяем какой-то класс к элементу. Другими словами, делаем элемент принадлежащим определенному классу.

Одному классу может принадлежать множество html-элементов. На скрине выше два абзаца и один раздел принадлежат классу addition .

Если мы хотим ограничить применимость класса только к одному типу элементов, а не к любому, то в css-правиле перед точкой следует указать этот элемент. Например:

p.addition { font-size: 18px; font-weight: bold; color: DimGrey; margin-left: 15px; }

В таких случаях назначение класса другим элементам бессмысленно (ошибки не будет, но стилевое правило класса не будет применено):

div class="addition"> Содержимое раздела /div>

Однако для другого элемента в таблице стилей может быть свой класс с таким же именем:

div.addition { border-style: ridge; }

В этом случае для каждого типа элементов будет применяться свое правило.

Вернемся к нашему исходному примеру, в котом один класс может применяться к разным html-элементам:

 html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style> body { background: WhiteSmoke; } p { font-size: 20px; font-family: Verdana, sans-serif; } .addition { font-size: 18px; font-weight: bold; color: DimGrey; margin-left: 15px; } /style> /head> body> p>Первый абзац/p> p>Второй абзац/p> p class="addition">Третий абзац/p> p class="addition">Четвертый абзац/p> p>Пятый абзац/p> div class="addition"> Содержимое раздела /div> /body> /html> 

Если вы присмотритесь к абзацам класса addition , то заметите, что семейство их шрифта такое же как у обычных абзацев, то есть один из вариантов sans-serif – шрифта без засечек. В то же время у раздела div начертание serif – с засечками.

Дело в том, что согласно концепции специфичности языка CSS, к элементу применяется более специфичное правило. Класс в этой иерархии имеет более высокий приоритет и переопределяет стиль с более низким приоритетом.

В нашем случае, когда класс применяется к абзацу, более низкий приоритет оказывается у правила с селектором имени тега p . Но это не значит, что к элементу не применяется стиль, обладающий меньшей специфичностью. Правило с более высоким приоритетом (более специфичное) как бы накладывается на него.

Таким образом, к абзацам с классом было применено правило с селектором p и затем правило с селектором .addition . Если какое-либо свойство описывалось в обоих правилах, то применялось значение этого свойства для класса addition .

Что касается элемента div , то его семейство шрифта нами не менялось, оно осталось в варианте по-умолчанию, заданном браузером. Правило с селектором p для div неприменимо.

Взаимоотношения между селектором-тегом и селектором-классом можно было бы назвать наследованием, когда непереназначенные свойства берутся из менее специфичного правила (условно родительского), в более специфичном переопределяются лишь некоторые, остальные наследуются. Однако в концепции CSS наследованием называют другое: когда некоторые свойства элемента-контейнера наследуются для вложенных в него элементов. Например, размер и семейство шрифта можно задать для body , и эти значения будут работать для всех элементов страницы. Но при этом мы можем переопределять их для отдельных.

Теперь перейдем к идентификаторам. Их применение похоже на то, как это происходит с классами. Однако вместо html-атрибута class используется id , при этом в правиле CSS селектор с идентификатором записывается через решетку.

 html> head> style> body { background: WhiteSmoke; } p { font-size: 20px; font-family: Verdana, sans-serif; } #special { font-size: 22px; border-style: dotted; border-width: 2px; color: Red; padding: 15px; } /style> /head> body> p>Первый абзац/p> p>Второй абзац/p> p id="special">Особенный абзац/p> p>Четвертый абзац/p> p>Пятый абзац/p> /body> /html>

Смысловое (на самом деле вы можете прописать один идентификатор нескольким элементам) отличие идентификаторов от классов заключается в следующем: класс применим ко множеству элементов на странице, конкретный идентификатор следует использовать только с одним элементом. Другими словами, для каждого элемента на странице подразумевается свой уникальный идентификатор.

Обращение к элементам через идентификаторы часто используется в JavaScript. Например, при нажатии на одну кнопку вызывается определенная функция, которая что-то изменяет на странице. При этом не надо, чтобы эта функция вызывалась при нажатии на любую другую кнопку или иной элемент.

К элементу может применяться несколько классов. В таких случаях они указываются через пробел в атрибуте class . У элемента может быть и идентификатор, и класс/классы:

p id="theme" class="addition another">. /p>

Специфичность идентификатора выше, чем у класса; то есть, если у элемента есть как идентификатор, так и класс, то значения свойств первого переопределят значения второго.

При применении к элементу нескольких классов мы касаемся такого понятия в CSS как каскад (на то они и каскадные таблицы стилей – Cascading Style Sheets): последующее определение свойства в одинаковом по специфичности селектора правиле переопределяет ранее объявленное. В примере ниже элементы, использующие оба класса, будут синими:

.addition { font-size: 18px; font-weight: bold; color: DimGrey; margin-left: 15px; } .another { color: Blue; }

В данном случае второй классовый стиль переопределит свойство color первого. Просто потому, что он описан после него. Это касается таблицы CSS, но не упоминания классов в атрибуте class тега. Так в нижеследующих абзацах нет никакой стилевой разницы:

p class="addition another">. /p> p class="another addition">. /p>

Также обратим внимание на то, что некоторые html-элементы обычно используются на странице единожды. Например, многие семантические теги: main , article , footer и др. В таких случаях нет смысла указывать для них идентификаторы, и при создании css-правила в качестве селектора проще писать имя тега.

С другой стороны, если имеется определенный элемент, требующий уникального оформления, которое вряд ли будет использоваться где-либо еще, даже на других страницах сайта, и обращаться к которому мы не планируем посредством JavaScript, то предпочтительно описывать его стиль в самом элементе с помощью атрибута style .

p style="color:Green; font-size:24px;"> Первый абзац /p>

Специфичность добавленных непосредственно в тег css-объявлений самая высокая. Она выше, чем у идентификатора, тем более класса.

Атрибут style – это еще один из способов добавления CSS-кода к HTML-коду. До этого мы использовали только вставку таблицы стилей между тегами .

X Скрыть Наверх

Введение в веб-разработку и создание сайтов

Как вызвать css в html

Представление элемента может существенно отличаться от одного браузера и/или платформы к другой — это может быть простой текстовый ввод, который автоматически проверяет правильность ввода информации о цвете в соответствующем формате, или стандартный для платформы выбор цвета, или какое-то пользовательское окно выбора цвета.

Интерактивный пример

Value	7-значная DOMString , указывающая в строчной шестнадцатеричной системе счисления
События	change и input
Поддерживаемые общие атрибуты	autocomplete и list
IDL атрибуты	list и value
Методы	select() (en-US)

Value

value элемента типа color всегда является DOMString , который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранён в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

Примечание: установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведёт к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведёт к тому, что цвет будет установлен на #000000.

Использование настроек цвета

Входные данные типа color просты из-за ограниченного числа атрибутов, которые они поддерживают.

Предоставление цвета по умолчанию

Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:

input type="color" value="#ff0000" /> 

Если вы не зададите значение, то по умолчанию будет #000000 , то есть чёрный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ»#», за которым следуют две цифры, каждая из которых представляет красный, зелёный и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придётся преобразовать их в шестнадцатеричные перед установкой значения.

Отслеживание изменений цвета

Как и в случае с другими типами , есть два события, которые могут быть использованы для обнаружения изменения цвета значения: input и change . input запускается на элементе каждый раз, когда меняется цвет. change событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его value .

Вот пример, который наблюдает за изменениями со временем значения цвета:

.addEventListener("input", updateFirst, false); colorPicker.addEventListener("change", watchColorPicker, false); function watchColorPicker(event)  document.querySelectorAll("p").forEach(function (p)  p.style.color = event.target.value; >); > 

Выбор значения

Если реализация элемента типа color в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать select () (en-US) метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует color , select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.

.select(); 

Вариации внешнего вида

Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:

То же самое можно увидеть и в Firefox 55:

В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):

Validation

Значение цветового ввода считается недопустимым, если user agent не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс :invalid .

Пример

Давайте создадим пример, который делает немного больше с цветом входного сигнала путём отслеживания change и input событий, чтобы взять новый цвет и применить его к каждому элемента в документе.

HTML

p> An example demonstrating the use of the code><input type="color">code> control. p> label for="colorWell">Color:label> input type="color" value="#ff0000" id="colorWell" /> p> Watch the paragraph colors change when you adjust the color picker. As you make changes in the color picker, the first paragraph's color changes, as a preview (this uses the code>inputcode> event). When you close the color picker, the code>changecode> event fires, and we detect that to change every paragraph to the selected color. p> 

JavaScript

Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик load для выполнения основной работы запуска, как только страница будет полностью загружена.

var colorWell; var defaultColor = "#0000ff"; window.addEventListener("load", startup, false); 

Инициализация

Как только страница загружена, вызывается наш обработчик событий загрузки startup() :

function startup()  colorWell = document.querySelector("#colorWell"); colorWell.value = defaultColor; colorWell.addEventListener("input", updateFirst, false); colorWell.addEventListener("change", updateAll, false); colorWell.select(); > 

Это возвращает ссылку на элемент color в переменной colorWell , а затем устанавливает значение входного цвета в значение defaultColor . То цвет входное input событие настроено, чтобы вызвать updateFirst() функцию и change событие, вызывается updateAll() . Они оба видны ниже.

Наконец, мы вызываем select () (en-US) для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).

Реакция на изменение цвета

Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция updateFirst() вызывается в ответ на input событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку input события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.

function updateFirst(event)  var p = document.querySelector("p"); if (p)  p.style.color = event.target.value; > > 

Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие change . Мы обрабатываем это событие с помощью функции updateAll() , используя Event.target.value для получения окончательного выбранного цвета:

function updateAll(event)  document.querySelectorAll("p").forEach(function (p)  p.style.color = event.target.value; >); > 

Это устанавливает цвет каждого элемента таким образом, чтобы его атрибут color (en-US) соответствовал текущему значению входного цвета, на которое ссылаются с помощью event.target .

Результат

Финальный результат выглядит так:

Спецификации

Specification
HTML Standard # color-state-(type=color)

Браузерная совместимость

BCD tables only load in the browser

Изучите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как подключить CSS к HTML

Каскадные таблицы стилей — это неотъемлемая часть современного web-сайта. Поэтому, вебмастер обязан знать как подключить CSS к документу HTML.

Ниже подготовлено 4 наиболее известных способа, которые помогут понять принцип правильного добавления стилей.

• Как подключить внешние стили из файла «CSS»;
• Подключение стилей через тег «Style»;
• Подключение встроенной таблицы стилей;
• Как подключить один css в другой css файл.

Как подключить внешние стили из файла «CSS»

На моем сайте насчитывается порядка 5 000 строчек стилей. Грузить такой объем при формировании каждой страницы, не правильно. К тому же, этот процесс ресурсозатратен, что, безусловно, скажется на скорости открытия сайта.

Вероятно думаете: «А как правильно подключать стили?» Все очень просто, таблицу стилей следует подключать из внешнего файла CSS.

Файл со стилями, имеет расширение .css . Его, конечно, можно размещать в любом месте на ftp, но обычно, подобные файлы помещают в папку «CSS», расположенную внутри файлов шаблона.

Чтобы подключить внешний файл CSS, нужно в коде сайта, между тегами «head», добавить строчку:

где «style.css» — это имя подключаемой таблицы, а «css», папка в которой находятся эти стили.

Приведу простой пример, стандартной страницы web-документа:

      . 

Важное добавление!! Атрибут href может принимать как абсолютный, так же и относительный путь к файлу.

Это означает, что две приведенные ниже строчки, будут абсолютно одинаково работать.

1. Абсолютная ссылка. Явно указывает на расположение файла.

1. Относительная ссылка. Сокращенный вариант.

Главный файл стилей, принять называть «style.css», но это не значит что других названий быть не должно. Придумывайте любое имя, но не забывайте, что оно должно быть на латинице.

Рассмотренный способ наиболее удобен, таким образом можно подключить не один, а сразу несколько таблиц стилей.

Подключение стилей через тег «Style»

Стили можно подключать непосредственно на странице web-сайта. Между тегами head, добавьте тег style. Внутри этого тега, можно применить стили к именно той странице, на которой они выводятся.

Практически это выглядит следующим образом:

То есть, все параграфы, должны иметь межстрочный интервал 2em. И это будет действовать на всех страница, на которых будут выводиться данные строчки.

     p . 

Подключение встроенной таблицы стилей

Атрибут style, добавленный к определенному элементу разметки сайта, позволит подключить стили css только для этого элемента.

Покажу как это выглядит в тексте:

Подключаем встроенную таблицу стилей.

Стиль, будет применен только для данного блока div и раскрасит текст в заказанный цвет.

Этот способ отлично подходит при создании красивых таблиц в документе, как например вот эта.

Как подключить один css в другой css файл

В заключении, хочу рассмотреть способ, в котором будем подключать в основном файле css, дополнительный.

1. Откроем файл «style.css».
2. Добавим код @import url «/css/blt.css»; .
3. Сохраняем изменения.

Следовательно, при помощи @import, мы можем подключить таблицу стилей из другого файла css. В данном случае, в теле основного файла стилей, подключаем «blt.css», который находится в папке «css».

Кроме того, аналогичным способом, можно подключать внешние стили и в теге «Style». Будет выглядеть так:

     @import url("/css/blt.css") p . 

Таким образом мы рассмотрели самые лучшие способы как подключить CSS к HTML. Если вы хотите добавить свой вариант, пишите его в комментариях.

Как подключить файл со стилями CSS

Не хочу указывать стили изначально в index.html . Насколько понял — их можно засунуть в папку как файл css/style.css И просто вызвать в и не прописывать в ручную. Но у меня почему то не выходит. Текст остается таким же как и был.

Точнее не получается его вызвать. Что я делаю неправильно?

Отслеживать
задан 7 мар 2021 в 18:23
349 1 1 серебряный знак 15 15 бронзовых знаков
@Sevastopol’ Почему то все равно страницу не изменилась. i.imgur.com/s0NAZl0.png
7 мар 2021 в 18:38

@Zekoy Две точки перед слешем добавьте, что означает подъем на один уровень вверх относительно index.html

7 мар 2021 в 18:57
@Sevastopol’ на картинке видно, где папка CSS
7 мар 2021 в 19:17

Одно из двух: либо проблема в самих стилях, либо кириллица в названиях папок/файлов (например, буква С в _c_ss).

Подключение css к html на своем http сервере

Подключение css к html на своем http сервере
В учебных целях сделал http сервер, который на запрос браузера отправляет html страницу. Все в.

Как запустить скрипт на другом сервере из своего скрипта на своем сервере
Добрый день! Никак не могу сообразить как проще запустить скрипт на другом сервере из скрипта.

Подключение css к html
Начну с того что я в этом деле новичок! Вообщем подключил файл .css к html файлу но при заходе на.

Подключение css к html
Всем привет. Помогите новичку пожалуйста. 😉 В общем хочу подключить css к html но не получается.

2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 11

valeriy007, начнём с вопроса, какое расширение имеет подключаемый файл: html, xml, php, tpl и т.д.? Чтобы подключить стили в html и задать кодировку — Ваш код будет выглядеть так:

Кликните здесь для просмотра всего текста

1 2 3 4 5 6 7 8 9 10 11 12 13

 html> head> title>Page/title> meta charset="utf-8"> //подключаем кодировку link rel="stylesheet" type="text/css" href="style.css"> // подключаем css /head> body> h1>ATATA/h1> p>text kakoito/p> /body> /html>

!При этом Ваши стили должны находится в корневой директории, на одном уровне с файлом, в котором они подключаются.

Взаимодействие JavaScript и 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(), используя их для организации многократных вызовов функции, изменяющей встроенный стиль элемента.

Ниже показан пример, который демонстрирует две такие функции, shake() и fadeOut(). Функция shake() перемещает, или «встряхивает» (shakes), элемент из стороны в сторону. Ее можно использовать, например, для привлечения внимания пользователя в случае ввода некорректных данных. Функция fadeOut() уменьшает непрозрачность элемента в течение указанного периода времени (по умолчанию 500 миллисекунд), вызывая эффект его растворения до полного исчезновения:

// Делает элемент 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 < 1) < // Если рано завершать анимацию // Вычислить координату x элемента e как функцию от доли общего // времени анимации. Здесь используется синусоидальная функция, // а доля общего времени воспроизведения умножается на 4pi, // поэтому перемещение взад и вперед выполняется дважды. var x = distance * Math.sin(fraction*4*Math.PI); e.style.left = x + "px"; // Попробовать вызвать себя через 25 мсек или в конце запланированного // отрезка общего времени воспроизведения. Мы стремимся сделать // анимацию гладкой, воспроизводя ее со скоростью 40 кадров/сек. setTimeout(animate, Math.min(25, time-elapsed)); >else < // Иначе анимацию пора завершать e.style.cssText = originalStyle; // Восстановить первонач. стиль if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова >> > // Растворяет e от состояния полной непрозрачности до состояния полной прозрачности // за указанное количество миллисекунд. Предполагается, что, когда вызывается // эта функция, e полностью непрозрачен. oncomplete - необязательная функция, // которая будет вызвана с элементом e в виде аргумента по завершении анимации. // Если аргумент time не задан, устанавливается интервал 500 мсек. // Эта функция не работает в IE, но ее можно модифицировать так, чтобы // в дополнение к свойству opacity она использовала нестандартное // свойство filter, реализованное в IE. function fadeOut(e, oncomplete, time) < if (typeof e === "string") e = document.getElementByld(e); if (!time) time = 500; // В качестве простой "функции перехода", чтобы сделать анимацию немного // нелинейной, используется Math.sqrt: сначала растворение идет быстро, // а затем несколько замедляется. var ease = Math.sqrt; var start = (new Date()).getTime(); // Запомнить момент начала анимации animate(); // И запустить анимацию function animate() < var elapsed = (new Date()).getTime()-start; // Прошедшее время var fraction = elapsed/time; // Доля от общего времени if (fraction < 1) < // Если не пора завершать var opacity = 1 - ease(fraction); // Вычислить непрозрачн. e.style.opacity = String(opacity); // Установить ее в e setTimeout(animate, Math.min(25, time-elapsed)); >else < // Иначе завершить e.style.opacity = "0"; // Сделать e полностью прозрачным if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова >> >

Обе функции, 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, представляющие элементы и , которые содержат или ссылаются на таблицы стилей. Это обычные элементы документа, и если в них определить атрибут id, вы сможете выбирать их с помощью метода document.getElementById().

Второй тип объектов — объекты CSSStyleSheet, представляющие сами таблицы стилей. Свойство document.styleSheets возвращает доступный только для чтения объект, подобный массиву, содержащий объекты CSSStyleSheet, представляющие таблицы стилей документа. Если в элементе или , определяющем или ссылающемся на таблицу стилей, определить атрибут title, этот объект будет доступен как свойство объекта CSSStyleSheet с именем, указанным в атрибуте title.

Следующие разделы описывают, какие операции могут выполняться с этими элементами и и объектами таблиц стилей.

Включение и выключение таблиц стилей

Простейший прием работы с таблицами стилей является к тому же самым переносимым и надежным. Элементы и и объекты CSSStyleSheet определяют свойство disabled, доступное сценариям на языке JavaScript для чтения и записи. Как следует из его имени, если свойство disabled принимает значение true, таблица стилей оказывается отключенной и будет игнорироваться браузером.

Это наглядно демонстрирует функция disableStylesheet(), представленная ниже. Если передать ей число, она будет интерпретировать его как индекс в массиве document.styleSheets. Если передать ей строку, она будет интерпретировать ее как селектор CSS, передаст ее методу document.querySelectorAll() и установит в значение true свойство disabled всех полученных элементов:

function disableStylesheet(ss) < if (typeof ss === "number") document.styleSheets[ss].disabled = true; else < var sheets = document.querySelectorAll(ss); for(var i = 0; i < sheets.length; i++) sheets[i].disabled = true; >>

Получение, вставка и удаление правил из таблиц стилей

В дополнение к возможности включения и отключения таблиц стилей объект CSSStyleSheet также определяет API для получения, вставки и удаления правил стиля из таблиц стилей. IE8 и более ранние версии реализуют несколько иной API, отличный от стандартного, реализуемого другими браузерами.

Как правило, непосредственное манипулирование таблицами стилей редко бывает полезным. Вместо того чтобы добавлять новые правила в таблицы стилей, обычно лучше оставить их статичными и работать со свойством className элемента. В то же время, если необходимо предоставить пользователю возможность полного управления таблицами стилей веб-страницы, может потребоваться организовать динамическое манипулирование таблицами.

Объекты CSSStyleSheet хранятся в массиве document.styleSheets[]. Объект CSSStyle Sheet имеет свойство cssRules[], хранящее массив правил стилей:

var firstRule = document.styleSheets[0].cssRules[0];

В IE это свойство носит имя rules, а не cssRules.

Элементами массива cssRules[] или rules[] являются объекты CSSRule. В стандартном API объект CSSRule может представлять CSS-правила любого типа, включая @-правила, такие как директивы @import и @page. Однако в IE массив rules[] может содержать только фактические правила таблицы стилей.

Объект CSSRule имеет два свойства, которые могут использоваться переносимым способом. (В стандартном API правила, не относящиеся к правилам стилей, не имеют этих свойств, и потому, возможно, вам потребуется пропускать их при обходе таблицы стилей.) Свойство selectorText — это CSS-селектор для данного правила, а свойство style — это ссылка на доступный для записи объект CSSStyleDeclaration, который описывает стили, связанные с этим селектором. Напомню, что CSSStyleDeclaration — это тот же самый тип, который используется для представления встроенных и вычисленных стилей.

Объект CSSStyleDeclaration может применяться для чтения существующих или создания новых стилей в правилах. Нередко при обходе таблицы стилей интерес представляет сам текст правила, а не разобранное его представление. В этом случае можно использовать свойство cssText объекта CSSStyleDeclaration, в котором содержатся правила в текстовом представлении.

В дополнение к возможности получения и изменения существующих правил таблиц стилей имеется возможность добавлять правила в таблицу стилей и удалять их из таблицы. Стандартный прикладной интерфейс определяет методы insertRule() и deleteRule(), позволяющие добавлять и удалять правила:

document.styleSheets[0].insertRule("H1 < text-weight: bold; >", 0);

Браузер IE не поддерживает методы insertRule() и deleteRule(), но определяет практически эквивалентные им функции addRule() и removeRule(). Единственное существенное отличие (помимо имен функций) состоит в том, что addRule() ожидает получить селектор и стиль в текстовом виде в двух отдельных аргументах.

Создание новых таблиц стилей

Наконец, имеется возможность создавать совершенно новые таблицы стилей и добавлять их в документ. В большинстве браузеров эта операция выполняется с помощью стандартных приемов, реализованных в модели DOM: создается новый элемент и вставляется в документ в раздел , затем с помощью свойства innerHTML добавляется содержимое таблицы стилей. Однако в IE8 и в более ранних версиях новый объект CSSStyleSheet необходимо создавать с помощью нестандартного метода document.createStyleSheet(), а текст таблицы стилей добавлять с помощью свойства cssText.

Пример ниже демонстрирует создание новых таблиц:

// Добавляет таблицу стилей в документ и заполняет ее указанными стилями. // Аргумент styles может быть строкой или объектом. Если это строка, // она интерпретируется как текст таблицы стилей. Если это объект, то каждое // его свойство должно определять правило стиля, добавляемое в таблицу. // Именами свойств являются селекторы, а их значениями соответствующие стили function addStylesheet(styles) < // Сначала необходимо создать новую таблицу стилей var styleElt, styleSheet; if (document.createStyleSheet) < //Если определен IE API, использовать его styleSheet = document.createStyleSheet(); >else < var head = document.getElementsByTagName("head")[0]; styleElt = document.createElement("style"); // Новый элемент head.appendChild(styleElt); // Вставить в // Теперь новая таблица находится в конце массива styleSheet = document.styleSheets[document.styleSheets.length-1]; > // Вставить стили в таблицу if (typeof styles === "string") < // Аргумент содержит текстовое определение таблицы стилей if (styleElt) styleElt.innerHTML = styles; else styleSheet.cssText = styles; // IE API >else < // Аргумент объект с правилами для вставки var i = 0; for(selector in styles) < if (styleSheet.insertRule) < var rule = selector + " "; styleSheet.insertRule(rule, i++); > else < styleSheet.addRule(selector, styles[selector], i++); >> > >