Для подключения внешней таблицы стилей предназначен тег. Способы добавления CSS стилей. Примеры подключения CSS

Android

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

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style . Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента

:

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

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

    Пример: Внутренняя таблица стилей

    • Попробуй сам »

    Заголовок

    Текст первый

    Текст второй

    Текст третий

    Внутренняя таблица стилей

    Заголовок

    Текст первый

    Текст второй

    Текст третий

    В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen , цвет и тип шрифта для заголовков

    : color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов

    : font-size:20px; color:red; text-align:center .

    Встроенный стиль

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

    Параграф

    Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

    Заголовок

    Текст первый

    Текст второй

    Текст третий

    Задачи

    • Выравнивание текста по центру

      Используя встроенный стиль к параграфу выровняйте текст по центру.

    >> Таблицы стилей CSS

    Обучающие курсы:

    Таблицы стилей CSS

    Таблицы стилей CSS

    С помощью стилей CSS можно установить стандартное начертание для содержимого каких-либо текстовых дескрипторов. Есть три основных приема использования различных стилей.
    Первый способ - задать общий стиль для определенных дескрипторов. Установленное начертание будет в документе у всех дескрипторов, для которых мы установим стиль. Вот основные атрибуты, которые можно задать стилю:

    Font-family - имя шрифта;
    font -size - размер;
    font-weight - жирность;
    font-style - стиль (normal, italic - курсив, oblique - наклонный);
    color - цвет;
    background-color - цвет фона;
    background-image - рисунок для фона;
    text-align - выравнивание.

    Это лишь очень малая часть всех предусмотренных атрибутов. Общий принцип построения встроенной таблички стилей таков.

    Рассмотрим пример использования таблицы стилей (листинг 12.10).

    Листинг 12.10.

    Пример использования таблицы стилей


    Работа с таблицей стилей</ТIТLЕ> <br> <STYLE TYPE="text/css><br> H1, P {font-family: "Arial"; font-size: 14pt; text-align: right}<br> H2, H4 {color: "green"; font-style: italic}<br> </STYLE><br> </HEAD><br> <BODY><br> <Р>Мой текст </P><br> <Н1>Мой заголовок первого уровня/Н1><br> <Н2>Мой заголовок второго уровня/Н2><br> <НЗ>Мой заголовок третьего уровня</НЗ> <br> <Н4>Мой заголовок четвертого уровня</Н4> <br> </B0DY> <br> </HTML></p> </blockquote> <p>Как это будет выглядеть в окне браузера, показано на рис. 12.4.</p> <p><i><u>Рис. 12.4. Результат выполнения листинга 12.10 </u> </i></p> <p>Можно создать подобную таблицу стилей в отдельном файле, а затем встроить ее в HTML- страницу с помощью дескриптора <LINK> с атрибутами REL (значение "stylesheet"), TYPE (необязательного, как и в дескрипторе <STYLE>, со значением "text/css") и HREF с адресом таблицы стилей (расширение должно быть. css).</p> <p>Зададим для каждого дескриптора свой стиль. Для этого надо использовать атрибут Style. Создадим HTML-страницу по-новому (листинг 12.11).</p> <p><i><u>Листинг 12.11. </u> </i><br><i><u>Пример использования атрибута Style </u> </i></p> <p><img src='https://i0.wp.com/java-study.ru/images/samouchitel/12-7.gif' width="100%" loading=lazy></p> <p>Создадим теперь класс со стилями. Пример создания подобного класса представлен в листинге 12.12.</p> <p><i><u>Листинг 12.12. </u> </i><br><i><u>Создание класса со стилями </u> </i></p> <p><img src='https://i2.wp.com/java-study.ru/images/samouchitel/12-8.gif' width="100%" loading=lazy></p> <p>Чтобы работать со слоями, необходимо использовать таблицу стилей CSS. Рассмотрим основные атрибуты для работы с ними:</p> <blockquote> <p>Position - откуда отмеряются координаты;<br> absolute - относительно левого верхнего угла;<br> relative - относительно положения курсора в тексте;<br> static - относительно фона;<br> width - ширина слоя;<br> height - высота слоя;<br> left - координата по оси х;<br> top - координата по ос у;<br> z - Index - старшинство слоя.</p> </blockquote> <p>Это самые основные атрибуты. Подобие слоев можно создавать с помощью дескриптора <DIV>...</DIV>. <br> Давайте переделаем пример программы из раздела «Слои в HTML» для учета возможностей Internet Explorer - получится почти идентичный слой (листинг 12.13).</p></span> <p><b>CSS (Cascading Style Sheets), или каскадные таблицы стилей </b>, используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.</p> <p>Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.</p> <p>Объявление стиля состоит из двух частей: элемента веб-страницы — <b>селектора </b>, и команды форматирования — <b>блока объявления </b>. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2014/12/css_osnovy.png' align="left" width="100%" loading=lazy> Рис. 1. Структура объявления CSS-стиля <h2>Виды каскадных таблиц стилей и их специфика</h2> <i> </i><h3>1. Виды таблиц стилей</h3> <h4>1.1. Внешняя таблица стилей</h4> <p><b>Внешняя таблица стилей </b> представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега <link> , расположенного внутри раздела <head></head> . Такие стили работают для всех страниц сайта.</p> <p>К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов <link> , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).</p><p> <head> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/assets.css" media="all"> </head> </p><p>Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .</p> <h4>1.2. Внутренние стили</h4> <p><b>Внутренние стили </b> встраиваются в раздел <head></head> HTML-документа и определяются внутри тега <style></style> . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).</p><p> <head> <style> h1, h2 { color: red; font-family: "Times New Roman", Georgia, Serif; line-height: 1.3em; } </style> </head> <body> ... </body> </p><h4>1.3. Встроенные стили</h4> <p>Когда мы пишем <b>встроенные стили </b>, мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:</p><p> <p style="font-weight: bold; color: red;">Обратите внимание на этот текст.</p> </p><p>Такие стили действуют только на тот элемент, для которого они заданы.</p> <h4>1.4. Правило @import</h4> <p><b>Правило @import </b> позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:</p><p> <style> @import url(mobile.css); p { font-size: 0.9em; color: grey; } </style> </p><p>Правило @import также используется для подключения веб-шрифтов:</p><p> @import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic); </p><h3>2. Виды селекторов</h3> <p><b>Селекторы </b> представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.</p> <h4>2.1. Универсальный селектор</h4> <p>Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .</p> <h4>2.2. Селектор элемента</h4> <p>Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .</p> <h4>2.3. Селектор класса</h4> <p>Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег <h1> и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.</p><p> <h1 class="headline">Инструкция пользования персональным компьютером</h1> .headline { text-transform: uppercase; color: lightblue; } </p><h4>2.4. Селектор идентификатора</h4> <p>Селектор идентификатора позволяет форматировать <b>один </b> конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.</p><p> <div id="sidebar"></div> #sidebar { width: 300px; float: left; } </p><h4>2.5. Селектор потомка</h4> <p>Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .</p> <p>Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:</p> <p>p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;</p> <p>p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента <p>First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .</p> <h4>2.6. Дочерний селектор</h4> <p>Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.<br> Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .</p> <h4>2.7. Сестринский селектор</h4> <p>Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня.</p> <p>h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом <h1> , не затрагивая остальные абзацы;</p> <p>h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.</p> <h4>2.8. Селектор атрибута</h4> <p>Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:</p> <p>[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;</p> <p>селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;</p> <p>селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;</p> <p>селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;</p> <p>селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;</p> <p>селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;</p> <p>селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;</p> <p>селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .</p> <h4>2.9. Селектор псевдокласса</h4> <p>Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:</p> <p>:hover — любой элемент, по которому проводят курсором мыши;</p> <p>:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;</p> <p>:active — элемент, который был активизирован пользователем;</p> <p>:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;</p> <p>:invalid — поля формы, содержимое которых не соответствует указанному типу данных;</p> <p>:enabled — все активные поля форм;</p> <p>:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;</p> <p>:in-range — поля формы, значения которых находятся в заданном диапазоне;</p> <p>:out-of-range — поля формы, значения которых не входят в установленный диапазон;</p> <p>:lang() — элементы с текстом на указанном языке;</p> <p>:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;</p> <p>:target — элемент с символом # , на который ссылаются в документе;</p> <p>:checked — выделенные (выбранные пользователем) элементы формы.</p> <h4>2.10. Селектор структурных псевдоклассов</h4> <p>Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:</p> <p>:nth-child(odd) — нечётные дочерние элементы;</p> <p>:nth-child(even) — чётные дочерние элементы;</p> <p>:nth-child(3n) — каждый третий элемент среди дочерних;</p> <p>:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;</p> <p>:nth-child(n+2) — выбирает все элементы, начиная со второго;</p> <p>:nth-child(3) — выбирает третий дочерний элемент;</p> <p>:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;</p> <p>:first-child — позволяет оформить только самый первый дочерний элемент тега;</p> <p>:last-child — позволяет форматировать последний дочерний элемент тега;</p> <p>:only-child — выбирает элемент, являющийся единственным дочерним элементом;</p> <p>:empty — выбирает элементы, у которых нет дочерних элементов;</p> <p>:root — выбирает элемент, являющийся корневым в документе — элемент html .</p> <h4>2.11. Селектор структурных псевдоклассов типа</h4> <p>Указывают на конкретный тип дочернего тега:</p> <p>:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;</p> <p>:first-of-type — выбирает первый дочерний элемент данного типа;</p> <p>:last-of-type — выбирает последний элемент данного типа;</p> <p>:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;</p> <p>:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.</p> <h4>2.12. Селектор псевдоэлемента</h4> <p>Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:</p> <p>:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;</p> <p>:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;</p> <p>:before — вставляет генерируемое содержимое перед элементом;</p> <p>:after — добавляет генерируемое содержимое после элемента.</p> <h3>3. Комбинация селекторов</h3> <p>Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:</p> <p>img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .</p> <h3>4. Группировка селекторов</h3> <p>Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:</p><p>H1, h2, p, span { color: tomato; background: white; } </p><h3>5. Наследование и каскад</h3> <p>Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.</p> <h4>5.1. Наследование</h4> <p><b>Наследование </b> является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.</p> <p>Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .</p> <h5>Принудительное наследование</h5> <p>С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию.</p> <h5>Как задаются и работают CSS-стили</h5> <p>1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);</p> <p>2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;</p> <p>3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/01/nasledovanie-stiley.png' align="left" width="100%" loading=lazy> Рис. 2. Режим разработчика в браузере Google Chrome <p>4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.</p><p> <div id="wrap" class="box clear"></div> div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;} </p><h4>5.2. Каскад</h4> <p><b>Каскадирование </b> — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.</p> <h5>Правило!important</h5> <p>Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.</p> <h5>Специфичность</h5> <p>Для каждого правила браузер вычисляет <b>специфичность селектора </b>, и если у элемента имеются конфликтующие объявления свойств, во внимание принимается правило, имеющее наибольшую специфичность. Значение специфичности состоит из четырех частей: 0, 0, 0, 0 . Специфичность селектора определяется следующим образом:</p> <p>для id добавляется 0, 1, 0, 0 ;<br>для class добавляется 0, 0, 1, 0 ;<br>для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;<br>для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;<br>универсальный селектор не имеет специфичности.</p><p>H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/ </p><p>В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.</p> <h5>Порядок подключённых таблиц</h5> <p>Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в разных таблицах будут встречаться разные значения свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.</p> <p>Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.</p><h2>Внешняя таблица стилей</h2><p>Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент <link> . Он располагается внутри <head> , как показано в примере 1.</p><p>Пример 1. Подключение внешних стилей</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Стили

    Заголовок

    Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.

    Содержимое файла style.css показано в примере 2.

    Пример 2. Содержимое файла style.css

    H1 { font-family: "Lobster", cursive; color: green; }

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

    Внутренняя таблица стилей

    Стили пишутся в самом HTML-документе внутри элемента

    Заголовок

    В данном примере задан стиль элемента

    , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со

    Заголовок 1

    Заголовок 2

    В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка - зелёный цвет через элемент

    Заголовок 1

    Заголовок 2

    В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

    В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.

    Осуществить данную задачу можно тремя способами:

    • Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
    • Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
    • Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.

    Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.

    Атрибут style.

    Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.

    Пишется так:

    style="" >

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

    Ну например:

    style="color: #ff0000; font-size:12px" > это параграф с индивидуальным стилем

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

    По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.




    Атрибут style

    style="background-color: #c5ffa0" >

    style="color: #0000ff; font-size:18px" >Всё о слонах



    Купить слона


    style="color: #ff0000; font-size:14px" >


    style="color: #0000ff; font-size:16px" >Взять слона на прокат


    style="color: #ff0000; font-size:14px" >




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

    Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

    Взгляните на пример, ниже к нему будут комментарии.




    Тег style



    Всё о слонах


    На этом сайте Вы найдёте любую информацию о слонах.


    Купить слона


    У нас Вы можете по выгодным ценам приобрести лучших слонов!!


    Взять слона на прокат


    Только у нас Вы можете взять любых слонов на прокат!!




    Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

    ,

    - будут синими а параграфы

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

    Теперь обещанные комментарии:

    Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

    Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

    CSS в отдельном внешнем файле.

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

    Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

    Body {background-color: #c5ffa0}
    a {color:#000060; font-weight: bold;}
    a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
    h1 {color: #0000ff; font-size:18px}
    h2 {color: #ff00ff; font-size:16px}
    p {color: #600000; font-size:14px}

    О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

    Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

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

    Тег имеет атрибуты:

    href - Путь к файлу.
    rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
    • shortcut icon - Определяет, что подключаемый файл является .
    • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
    • application/rss+xml - Файл в формате XML для описания ленты новостей.
    type - MIME тип данных подключаемого файла.

    Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

    Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

    Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

    Файл mystyle.css
    body {background-color: #c5ffa0}
    a {color:#000060; font-weight: bold;}
    a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
    h1 {color: #0000ff; font-size:18px}
    h2 {color: #ff00ff; font-size:16px}
    p {color: #600000; font-size:14px}
    Файл index.html



    каскадная таблица стилей



    Меню:


    Всё о слонах.
    Купить слона.
    Взять слона на прокат.

    Всё о слонах


    На этом сайте Вы найдёте любую информацию о слонах.




    Файл elephant.html



    каскадная таблица стилей



    Меню:


    Всё о слонах.
    Купить слона.
    Взять слона на прокат.

    Купить слона


    У нас Вы можете по выгодным ценам приобрести лучших слонов!!




    Файл elephant1.html



    каскадная таблица стилей



    Меню:


    Всё о слонах.
    Купить слона.
    Взять слона на прокат.

    Взять слона на прокат


    Только у нас Вы можете взять любых слонов на прокат!!




    В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

    В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

    • Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
    • Используйте тег