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

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

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

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

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

<h1 style="color: #CD6600; font-size: 22px">Урок 1</h1>

Получим:

Урок 1

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

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

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

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

  1. Внутри тега <head> вставляется парный тег <style> с параметром type="text/css";
  2. Внутри тега <style> располагаются все стили для данного документа. Стили разделяются просто переносом строки.
  3. Стиль описывается так: пишется название стиля и ставятся "фигурные скобки" { }.
  4. Между "фигурными скобками" пишутся все атрибуты стиля с присвоенными значениями, разделенные "точкой с запятой". Значения атрибутам присваиваются "двоеточием", а не знаком "равно". После значения последнего атрибута "точку с запятой" ставить необязательно.
<head>
<style type="text/css">
стиль1 {
   атрибут1: значение;
   атрибут2: значение;
   ...
}
стиль2 {
   атрибут1: значение;
   атрибут2: значение;
   ...
}
...
</style>
</head>

Например, сделаем все заголовки <h1> оранжевого цвета и размером 22 пиксела и все заголовки <h2> красного цвета и размером 20 пикселов:

<head>
<style type="text/css">
h1 {
   color: #CD6600;      <-- стиль для тега <h1>
   font-size: 22px
}

h2 {
   color: #FF0000;      <-- стиль для тега <h2>
   font-size: 20px
}

</style>
</head>

После добавления этих стилей, все заголовки Вашего документа, выделенные тегами <h1> и <h2> без дополнительных тегов будут обладать нужными свойствами. И если Вы захотите изменить или добавить какое-либо свойство, Вы просто измените или добавите его в соответсвующем стиле.

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

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

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

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

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

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

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

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

<head>
   <link rel="stylesheet" type="text/css" href="/mystyle.css">
</head>

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

Например:

<head>
   <link rel="stylesheet" type="text/css" href="/style.css">
</head>

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

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

Для примера создадим любой html документ с заголовками, посмотрите, как он выглядит без стилей. Сделаем все заголовки <h1> оранжевого цвета и размером 22 пиксела и все заголовки <h2> красного цвета и размером 20 пикселов. Для этого создадим файл стилей style.css, содержащий следующее:

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

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

<head>
   <link rel="stylesheet" type="text/css" href="/style.css">
</head>

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

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

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

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

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

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

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

    <font color="#CD6600"><h1>Заголовок 1</h1></font>
        ...
    <font color="#CD6600"><h4>Заголовок 4</h4></font>

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

    А с помощью CSS мы создадим стиль для тегов <h1>, <h2>, <h3> и <h4> в отдельном файле. И все заголовки, заданные этими тегами, без дополнительных тегов будут обладать нужными свойствами.

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

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

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

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

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

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

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

<head>
h1 {
color: #CD6600
}
</head>

<body>
<h1>Заголовок 1</h1>
<h1 style="color: #FF0000">Заголовок 2</h1>
<h1>Заголовок 3</h1>
</body>

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

Добавить комментарий