Включение CSS в html-код. Включение CSS в HTML (стр.1)

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

Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.

CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила: значение правила). Никаких кавычек в значениях правил не ставим! Пример:

Color: red; background: #cccccc ;

Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:

  • Вложение(inline).
  • Встраивание(embeding).
  • Связывание(linking).

Основа документа - html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.

Метод вложения (inline) CSS

Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила: значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):

Обычный текст

"color:red; background:#cccccc" > К это абзацу применен стиль методом встраивания.

Метод встраивания (embeding) CSS

Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:

< style type= "text/ css"> p { color: red ; background: #cccccc } Здесь применен стиль методом вложения. Обычный текст

В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “{ }”.

Элемент “style” ставят только в элементе “head”.

Метод связывания (linking) CSS

Чтобы каждый раз в документ не писать стилевое оформление (не загружать документ), надо в одном месте написать правила css и применять их к разным документам (к неограниченному из количеству).

Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение.css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.

Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:

Т.е. указываем файл со стилями через гиперссылку на него. Браузер подгружает стилевой файл и применяет правила из него ко всему документу. По сути это работает так же, как и элемент “style”, но только находится в отдельном файле. И мы можем в любом документе поставить ссылку на css-файл. Это очень удобно, т.к. я правлю стили в одном единственном файле; один раз загрузив таблицу стилей, при переходе на следующие страницы браузер больше за этим файлом css не полезет, он достанет его из кэша (типа временного хранилища загруженных файлов). Тем самым я экономлю трафик и ускоряю отображение страницы.

Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel (rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ - это таблица стилей.

Стили можно добавить тремя способами.

Внутренние стили

Внутренний стиль - это своего рода расширение html-тега. Такой стиль создается в случае необходимости задать какие-либо свойства для конкретного объекта, а не группы объектов. Эти свойства называютcя атрибутами стиля.

Для создания такого стиля используется параметр style , который есть у всех тегов. Параметру style присваиваются перечисленные через "точку с запятой" атрибуты с заданными значениями. Значения атрибутам присваиваются не знаком "равно" , как обычно, а знаком "двоеточие" .

Например, Вы хотите, какой-то конкретный заголовок написать оранжевым цветом и размером 22 пиксела. Для этого напишите следующее:

Урок 1

Урок 1

Разберем этот пример. Фраза "Урок 1" выделена тегом заголовка

. У тега

создается стиль с помощью параметра style . У стиля задаются 2 атрибута color (цвет) и font-size (размер шрифта), разделенные "точкой с запятой" . Атрибуту color присваивается значение #CD6600 , атрибуту font-size присваивается значение 22px .

Глобальные стили

Глобальные стили создаются в случае необходимости задать какие-либо свойства для группы объектов. Такие стили создаются в начале документа внутри тега и их действие распространяется на весь документ.

Глобальные стили добавляются в документ следующим образом:

  1. Внутри тега вставляется парный тег

    красного цвета и размером 20 пикселов:



    После добавления этих стилей, все заголовки Вашего документа, выделенные тегами

    и

    без дополнительных тегов будут обладать нужными свойствами. И если Вы захотите изменить или добавить какое-либо свойство, Вы просто измените или добавите его в соответсвующем стиле.

    Связанные стили

    Таблицы связанных стилей (Linked Style Sheet) создаются в отдельном файле с расширением .css и подключаются к документу (или нескольким документам).

    Этот способ добавления стилей наиболее удобный из всех описанных способов и предоставляет большее число возможностей для web-разработчика.

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

    Во-вторых, можно изменять стили без изменения html-страниц. И все изменения автоматически применятся ко всем страницам, к которым подключен файл стилей.

    И, в-третьих, при первой загрузке браузер кэширует (запоминает) такие файлы, поэтому загружаться Ваш сайт будет несколько быстрее.

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

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



    Где параметры rel="stylesheet" и type="text/css" - постоянные, а параметру href присваивается адрес файла стилей. Адрес может быть как абсолютный, так и относительный.

    Например:



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

    стиль1 {
    атрибут1: значение;
    атрибут2: значение;
    ...
    }
    стиль2 {
    атрибут1: значение;
    атрибут2: значение;
    ...
    }
    ...

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

    оранжевого цвета и размером 22 пиксела и все заголовки

    красного цвета и размером 20 пикселов. Для этого создадим файл стилей style.css, содержащий следующее:

    h1 {
    color: #CD6600;
    font-size: 22px
    }
    h2 {
    color: #FF0000;
    font-size: 20px
    }

    И подключим этот файл к нашему документу, пишем в нем:



    Что такое каскадные таблицы стилей CSS?

    CSS (Cascade Style Sheet) - каскадные таблицы стилей. Это своего рода расширение HTML, дающее web-разработчику дополнительные возможности.

    Стиль (style) - это набор элементов форматирования текста. Например, цвет текста, шрифт, размер, выравнивание и т.д. Все эти параметры можно хранить в стилях.

    Но ведь и HTML позволяет оформлять текст с помощью тегов форматирования. В чем же преимущество CSS перед HTML?

    Преимущества CSS перед HTML

    1. CSS одним действием позволяет изменять сразу всю группу параметров.

      Чтобы на сайте все заголовки, заданные тегами

      ,

      ,

      и

      были одного цвета, в обычном HTML для этого нам понадобилось бы каждый заголовок поместить в контейнер с параметром color="#CD6600" :

      Заголовок 1


      ...

      Заголовок 4

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

      А с помощью CSS мы создадим стиль для тегов

      ,

      ,

      и

      в отдельном файле. И все заголовки, заданные этими тегами, без дополнительных тегов будут обладать нужными свойствами.

      И если мы захотим изменить какое-либо свойство у заголовков, нам достаточно будет изменить стиль тегов, и все заголовки будут автоматически изменены.

    2. Стили предоставляют разработчику гораздо больше возможностей по сравнению с обычным HTML.

      Например, с помощью стилей можно задать такие свойства текста, которые нельзя задать с помощью стандартных параметров того или иного html-тега.

    3. Все стили можно хранить в отдельном файле. Браузер кэширует (запоминает) такие файлы, поэтому загружаться Ваш сайт будет немного быстрее.

    Сочетание различный видов стилей

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

    Например, сделаем все заголовки

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


    h1 {
    color: #CD6600
    }


    Заголовок 1


    Заголовок 2


    Заголовок 3


    В результате данного примера "Заголовок 1" и "Заголовок 3" будут оранжевого цвета, а "Заголовок 2" - красного.

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

    Таблицы связанных стилей

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

    Пример 1. Подключение таблицы связанных стилей

    Стили

    Hello, world!

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

    Достоинства данного способа

    1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
    2. Можно изменять таблицу стилей без модификации веб-страниц.
    3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
    4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

    Таблицы глобальных стилей

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

    Hello, world!

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

    . На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

    Внутренние стили

    Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style , а его значения указываются с помощью языка таблицы стилей (пример 3)..

    Пример 3. Использование внутренних стилей

    Стили

    Hello, world!

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

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

    Пример 4. Сочетание разных методов подключения стилей

    Стили

    Hello, world!

    Hello, world!

    В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.



    Атрибут http-equiv="Content-Style-Type" указывает на то, что данный элемент МЕТА относится к таблице стилей, а атрибут content="text/css" показывает, что таблицы стилей будут написаны на языке CSS . Чтобы разобраться, как добавляются стили в HTML-документ, давайте вернемся кпримеру самого первого документа, который мы создали в процессе изучения HTML. Напомню, это была страничка с описанием строительной фирмы "Дом". Выглядела она так:

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


    Атрибут style может использоваться в любом элементе HTML для задания его стиля оформления. В кавычках указывается правило CSS , описывающее, какое оформление должен иметь элемент. В данном случае задается цвет (color ) и указывается конкретный цвет (green - зеленый ). В качестве разделителя параметра и его значения в CSS используется двоеточие .

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

    Таблица стилей, заданная внутри элемента HTML при помощи атрибута style , называется внутренней .


    Недостаток внутренних таблиц стилей заключается в их неуниверсальности . В результате использования атрибута style только один заголовок в документе станет зеленым. Для остальных придется точно так же задавать атрибут style либо следует создать троенную таблицу стилей.

    Встроенные таблицы стилей

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

    Существует четыре способа задания CSS стиля для тегов HTML .

    1) Inline-стиль .

    2) Внедрённый стиль

    3) Импортированный стиль.

    4) Стиль из файла .

    И в этой статье мы разберём все четыре способа.

    Для начала первый способ - это inline-стиль . Данный стиль указывается непосредственно в самом теге. Например:

    текст

    В данном случае мы задали, чтобы элемент "текст " будет размером в 150% и выравнен по центру . Это пример inline-стиля .

    Второй способ - это внедрённый CSS стиль , то есть стиль, который задаётся в голове документа, в теге . Например, так:



    Здесь будет происходить следующее: для всех элементов внутри тега

    будет сделано следующее: их цвет будет красным и отступ сверху будет 100 пикселей.

    Третий способ задания CSS стиля - это импортированные стили . Они также, как и внедрённые задаются в голове документа, но уже из файла. Вот пример:



    Здесь ко всей странице будут применяться стили из файла "my.css ".

    И последние вид CSS стилей - это стили из файла. Данный способ является самым частым, и заключается он в подключении файла стиля через тег в голове документа. Например, таким образом:



    Данный способ очень похож на предыдущий способ, но здесь не используется тег