Способы добавления стилей на страницу
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.
Связанные стили
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link> . Данный тег помещается в контейнер <head> , как показано в примере 3.1.
Пример 3.1. Подключение связанных стилей
HTML5 CSS 2.1 IE Cr Op Sa Fx
Значение атрибута тега <link> — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере 3.2.
Пример 3.2. Файл со стилем
Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.
Глобальные стили
При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера <style> , как показано в примере 3.3.
Пример 3.3. Использование глобального стиля
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере задан стиль тега <h1> , который затем можно повсеместно использовать на данной веб-странице (рис. 3.1).
Рис. 3.1. Вид заголовка, оформленного с помощью стилей
Внутренние стили
Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style , а его значением выступает набор стилевых правил (пример 3.4).
Пример 3.4. Использование внутреннего стиля
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере стиль тега <p> задаётся с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).
Рис. 3.2. Использование внутренних стилей для изменения вида текста
Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 3.5 применяется сразу два метода добавления стиля в документ.
Пример 3.5. Сочетание разных методов
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей (рис. 3.3).
Рис. 3.3. Результат применения стилей
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import . Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.
После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него. В примере 3.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.
Пример 3.6. Импорт CSS
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере показано подключение файла header.css , который расположен в папке style.
Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7).
Пример 3.7. Импорт в таблице связанных стилей
В данном примере показано содержимое файла mysite.css , который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега <link> .
Вопросы для проверки
1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?
- Связанные стили.
- Глобальные стили.
- Блочные стили.
- Внутренние стили.
- Экспорт стиля.
2. В данном примере, какой цвет будет у текста на веб-странице?
- Чёрный
- Красный
- Зелёный
- Синий
- Оливковый
3. Какой HTML-код применяется для подключения внешнего CSS-файла?
- <style>mystyle.css</style>
- <style>@mystyle.css</style>
- <link rel=»stylesheet» href=»mystyle.css»>
- <link>@import url(mystyle.css)</link>
- <stylesheet>mystyle.css</stylesheet>
4. Какой атрибут используется для определения внутреннего стиля?
Тег <style> в html
В третьем уроке HTML мы рассмотрели все самые распространенные html теги. К каждому из них можно было также подставить параметр style и мы постоянно ссылались на это. Настало время поговорить о том, что именно можно прописать в этом параметре, но для начала расскажу о теге <style> . Вообще для чего он нужен и почему так важен.
Синтаксис тега <style>
Между <style> и </style> прописываются стили, а точнее свойства CSS (размер шрифта, цвет, фон, отступы, шрифт и т.п.). Это написание равносильно таблице стилей CSS . Кстати описывать стиль можно в любом месте на странице, т.е. необязательно это делать в заголовочных тегах head, но по хорошему тону, стили располагаются именно там.
Новый стиль любого класса описываются в формате точка, далее название класса, а в фигурных скобках описывается стиль. Синтаксис следующий:
В таком формате мы создаем глобальный стиль, который можно использовать в любом теге.
Чтобы сделать стиль только для какого тега нужно указать его перед точкой:
Это означает, что мы можем применять его только для тега <b>
Кстати, чтобы не прописывать всегда класс ( class=»» ) часто употребляемым тегам, мы можем задать стиль по умолчанию любому тегу. Например, чаще всего для популярного тега <p> задается стиль по умолчанию следующим образом:
Рассмотрим практичный пример с <style>
Например . Html код:
Преобразуется на странице в следующее:
Обратите внимание, что в class мы указали styletest — потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов <font> , но и для других. Например, для <b> , <u> и т.д. — для всех тегов, которые поддерживают параметр class.
Выше разобранный пример можно сделать по-другому (не используя class):
Результат будет таким же как и предыдущий пример.
В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style vhtml»>color: blue; font-size:12px; font-family:Arial «. Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами ( class vhtml»>какой-то класс «). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.
Задание стилей для вложенных тегов
Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:
Например, .cen a говорит о том, что этот стиль будет использован только в блоке с классом cen. В нашем примере мы подразумеваем этот блок тегом <div>. Чаще всего такие конструкции встречаются именно для дивов.
Таблица стилей CSS
Чтобы упростить работу со стилями, создают специальную «таблицу стилей CSS«, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head
В данном случае таблица стилей (назовем её style.css ) должна содержать следующее:
Теперь вернемся к первому примеру, который можно сделать более универсально, подключив в заголовке таблицу стилей.
Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css , а там где нужно его применить писать class=»имя стиля» .
Плюсы при использовании таблицы стилей
- Файлы .css можно сжимать и кэшировать, за счет этого страница грузится быстрее
- Стиль прописывается в одном месте, а значит его легко изменить. Представьте, как сложно было бы менять стиль на каждой странице при любой небольшой правке
- Это позволяет уменьшить html код и является правильным тоном. На странице должен быть контент, а не описание стилей.
Использование стилей html через ID
Теперь рассмотрим как можно использовать стили через ID . Для начала, необходимо в таблице стилей (назовем её primerid.css ) написать следующее:
Обратите внимание, что сначала пишется название тега, далее # , далее название ID и потом аргументы стиля.
Для использования ID, код html страницы должен содержать примерно следующее:
Вместо параметра class нужно написать id, в остальном все также. Также можно использовать и вложенные конструкции. Как правило, id не используют для описание стилей.
Теперь расскажу о том, какие аргументы можно задавать в стилях. Их довольно много.
Аргументы и свойства в style
1. Свойство background: цвет — задает цвет фона. Цвет можно выбрать любым. Цвет может быть задан в виде шестизначного кода (например, #53A32B; ) или конкретное название цвета (например, red ). Выбрать подходящий цвет можно на странице: коды и названия html цветов.
Аналогом является: background-color: цвет .
Более подробно про фон читайте в отдельной статье: как сделать фон для сайта.
2. Свойство background-image: url(‘images/bg.png’); — фоном будет картинка. В скобках указывается адрес фона изображения.
3. Свойство background-repeat: repeat — использовать фоновую картинку многократно. Другие возможные параметры:
- repeat-x — повторять фоновое изображение только по горизонтали
- repeat-y — повторять фоновое изображение только по вертикали
- no-repeat — не повторять фоновое изображение
4. Свойство border: 1px solid red; — вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:
- dotted — рамка будет покрыта не сплошной линией, а точками
- dashed — рамка будет покрыта тире, пробел, тире и т.д.
- double — двойная рамка
- groove — рифлёная 3D граница
Цвет и размер области рамки можно изменять. Цвет можно задавать в формате #XXXXXX или писать название цвета. Выбрать цвет можно на странице коды и названия html цветов
Рамку можно задавать избирательно, т.е. только с тех сторон, где это нужно:
- border-bottom: 1px solid red; — линия будет только снизу
- border-top: 1px solid red; — линия будет только сверху
- border-right: 1px solid red; — линия будет только справа
- border-left: 1px solid red; — линия будет слева
Можно совмещать эти параметры, т.е. сделать линию только слева и снизу. Более подробно про задание границ читайте в специальной статье: свойство css border
5. Свойство color: #fc0ab1; — задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.
6. Свойство font-family: value; — задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:
- Verdana (я пользуюсь этим шрифтом)
- Times New Roman
- Arial
- Courier New
- Comic Sans MS
- Georgia
- Impact
Более подробно про шрифты и их выбор читайте в статьях:
7. Свойство font-size: 15px; — задает размер текса, в данном случае 15px. Можете вместо px так же писать другие единицы размерности: em и om .
8. Свойство font-weight: value; — задает толщину текста (насыщенность). Возможные значения:
- bold — полужирное
- bolder — жирное
- lighter — светлое
- normal — обычный
Можно толщину задавать цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. Более подробно читайте в статье: свойство CSS font-weight
9. Свойство height: 100%; — задает высоту. Можно задавать в %, а можно в пикселях (px). Например: height: 100px .
10. Свойство padding-top: 5px; — отступ сверху. Возможно задать значение auto . Аналогичный тег: margin-top с разницей, что padding — отступ внутри элемента, а margin — от других элементов.
11. Свойство padding-right: 4px; — отступ справа. Возможно задать значение auto . Аналогичный тег: margin-right.
12. Свойство padding-bottom: 5px; — отступ снизу. Возможно задать значение auto . Аналогичный тег: margin-bottom.
13. Свойство padding-left: 4px; — отступ слева. Возможно задать значение auto . Аналогичный тег: margin-left.
14. Свойство width: 100%; — задает ширину. Можно задавать в %, а можно в пикселях (px).
15. Свойство overflow: value; — область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:
- visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины
- hidden — отображается только область внутри элемента, остальное будет обрезано
- scroll — всегда добавляются полосы прокрутки
- auto — полосы прокрутки добавляются только при необходимости
Более подробно читайте в статье: свойство CSS overflow
16. Свойство text-align: value; — выравнивание текста. Возможные значения параметра:
- left — по левому краю
- right — по правому краю
- center — по центру
- justify — выравнивание по левому и правому краю
- auto — автоматически
- inherit — наследование значения предка
Более подобно читайте в статье свойство CSS text-align
17. Свойство float: value; — определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:
- left — по левому краю
- right — по правому краю
- none — отсутствует
- inherit — наследование значения предка
18. Свойство line-height: 22px; — устанавливает межстрочный интервал в пикселях. Более подробно про растояние между строками читайте в статье свойство CSS line-height
19. Свойство white-space: value; — задает отображение между пробелами. Возможные значения:
- normal — обычное значение
- nowrap — пробелы не учитываются, переносы строк в коде HTML игнорируются
- pre — текст показывается с учетом всех пробелов и переносов, в случае длинной строки будет добавлена полоса прокрутки
- pre-line — пробелы не учитываются, текст автоматически переносится на следующую строку
- pre-wrap — сохраняются все пробелы и переносы, автопереход на следующую строку
- inherit — наследование значения предка
Более подробно читайте в статье: свойство CSS white-space
20. Свойство display: value; — определяет способ показа элемента. Имеет довольно много параметров:
- block — элемент показывается как блочный
- inline — элемент отображается как встроенный
- inline-block — создает блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу
- inline-table — элемент является таблицей
- list-item — элемент выводится как блочный и добавляется маркер списка
- none — временно удаляет элемент из документа. С помощью скриптов можно сделать его появление
- run-in — устанавливает элемент как блочный или встроенный в зависимости от контекста
- table — элемент является блочной таблицей
- table-caption — задает заголовок таблицы подробно
- table-cell — элемент представляет собой ячейку таблицы
- table-column — назначает элемент колонкой таблицы
- table-column-group — элемент является группой одной или более колонок таблицы
- table-footer-group — используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы
- table-header-group — элемент предназначен для хранения одной или нескольких строк ячеек
- table-row — элемент отображается как строка таблицы
- table-row-group — создает структурный блок, состоящий из нескольких строк таблицы
Более подробно читайте в статье: свойство CSS display
21. Свойство text-decoration: value; — опция для редактирования внешнего вида текста. Имеет несколько параметров:
- blink — мигающий текст
- line-through — перечеркнутый текст
- overline — верхнее подчеркивание текста
- underline — нижние подчеркивание текста
- none — выводит обычный текст
- inherit — наследуется у предка
Более подробно читайте в статье: свойство CSS text-decoration
22. Свойство text-transform: capitalize; — преобразование текста в заглавные или прописные буквы.
- capitalize — первый символ каждого слова в предложении будет заглавным
- lowercase — перевод всего текста в нижний регистр
- uppercase — перевод всего текста в верхний регистр
- none — не менять ничего
- inherit — наследование предка
Более подробно читайте в статье: свойство CSS text-transform
23. Свойство letter-spacing: 2px; — задает расстояние между буквами. Более подробно читайте в статье: свойство CSS letter-spacing
Так же стоит обратить внимание на возможности стилей для тега <a> , но они будут рассмотрены отдельно здесь: HTML тег а.
Уважаемый читатель, теперь Вы имеете представление о стилях в html. Вы можете делать Ваши странички более красивыми. Рассмотренные выше возможности стилей являются поверхностными и для профессионального использования Вам понадобятся более глубокие знания. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующему уроку.
HTML Стили
Для визуального оформления html-страницы применяются различные стили элементов.
Установка стиля HTML элемента может быть сделана с помощью атрибута style .
HTML атрибут style имеет следующий синтаксис:
где property является CSS свойством, value является CSS значением.
Вы узнаете больше про CSS далее в этом учебнике.
Background Color — Цвет фона
CSS свойство background-color определяет цвет фона для HTML элемента.
Этот пример устанавливает цвет фона в powderblue ( темноголубой ).
Пример
Color — Цвет текста
CSS свойство color определяет цвет текста для HTML элемента:
Пример
Font-family — Семейство шрифтов
CSS свойство font-family определяет семейство шрифта, которое используется для HTML элемента:
Пример
Font-size — Размер текста
CSS свойство font-size определяет размер текста для HTML элемента:
Пример
Text-align — Выравнивание текста
CSS свойство text-align определяет горизонтальное выравнивание текста для HTML элемента:
Пример
Резюме раздела
- Используйте атрибут style для стилизации HTML элементов
- Используйте свойство background-color для установки цвета фона
- Используйте свойство color для установки цвета текста
- Используйте свойство font-family для установки семейства шрифтов
- Используйте свойство font-size для установки размера текста
- Используйте свойство text-align для выравнивания текста
HTML Упражнения
Вопросы для самоконтроля
- Что такое стилизация HTML-страницы?
- Какой атрибут определяет стиль HTML-элемента?
- Какое CSS свойство определяет цвет фона для HTML-элемента?
- Какое CSS свойство определяет цвет текста для HTML-элемента?
- Какое CSS свойство определяет семейство шрифта, который используется для HTML-элемента?
- Какое CSS свойство определяет размер текста для HTML-элемента?
- Какое CSS свойство определяет горизонтальное выравнивание текста для HTML-элемента?
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
HTML Стили
CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.
Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).
Вот как это выглядит для элемента </p>:
Пример: применение стилей к элементу <p>
Способы добавления CSS стилей
Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:
- Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега <link> .
- Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега <style> , который обычно располагается в разделе <head> HTML-документа .
- Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.
Давайте познакомимся со всеми тремя способами на конкретных примерах.
Внешняя таблица стилей
CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTML-документах. Например, чтобы выбрать все элементы <p> , т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:
Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles.
Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами <head> и </head> :
Пример: Внешняя таблица стилей
Внутренняя таблица стилей
Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style> , который обычно находится в элементе <head> , но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.
Тег <style> позволяет записывать внутри себя код в формате CSS:
Пример: Внутренняя таблица стилей
В данном примере мы с помощью CSS установили цвет фона для элемента <body> : background-color:palegreen, цвет и тип шрифта для заголовков <h1> : color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p> : font-size:20px; color:red; text-align:center.
Встроенный стиль
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:
Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style> .
В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования: