Тег <style> в html

В третьем уроке HTML мы рассмотрели все самые распространенные html теги. К каждому из них можно было также подставить параметр style и мы постоянно ссылались на это. Настало время поговорить о том, что именно можно прописать в этом параметре, но для начала расскажу о теге <style>. Вообще для чего он нужен и почему так важен.

Синтаксис тега <style>

<head>
...
<style type="text/css">
...
описание стилей
...
</style>
...
</head>

Между <style> и </style> прописываются стили, а точнее свойства CSS (размер шрифта, цвет, фон, отступы, шрифт и т.п.). Это написание равносильно таблице стилей CSS. Кстати описывать стиль можно в любом месте на странице, т.е. необязательно это делать в заголовочных тегах head, но по хорошему тону, стили располагаются именно там.

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

.NAME_STYLE{
...
...
...
}

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

<div class="NAME_STYLE"></div>
<b class="NAME_STYLE"></b>
<u class="NAME_STYLE"></u>

Чтобы сделать стиль только для какого тега нужно указать его перед точкой:

b.style1{
...
...
...
}

Это означает, что мы можем применять его только для тега <b>

Кстати, чтобы не прописывать всегда класс (class=””) часто употребляемым тегам, мы можем задать стиль по умолчанию любому тегу. Например, чаще всего для популярного тега <p> задается стиль по умолчанию следующим образом:

.p{
font-size: 12px;
color: #CCC;
font-family: Arial;
...
}

Чаще всего по умолчанию прописывают стили тегам <a>, <table>, спискам <ul>, тегам <h1>-<h6>.

Рассмотрим практичный пример с <style>

Например. Html код:

<html>
<head>
<style type="text/css">
.styletest {
color: blue;
font-size: 12px;
font-family: Arial;
}
</style>
</head>
<body>
<font class="styletest">Этот текст будет синим, шрифт Arial и размером 12 пикселей</font>
</body>
</html>

Преобразуется на странице в следующее:


Этот текст будет синим, шрифт Arial и размером 12 пикселей

Обратите внимание, что в class мы указали styletest — потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов <font>, но и для других. Например, для <b>, <u> и т.д. — для всех тегов, которые поддерживают параметр class.

Выше разобранный пример можно сделать по-другому (не используя class):

<font style="color: blue; font-size: 12px; font-family: Arial">
Этот текст будет синим</font>

Результат будет таким же как и предыдущий пример.

В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style=”color: blue; font-size:12px; font-family:Arial“. Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами (class=”какой-то класс“). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.





Задание стилей для вложенных тегов

Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:

<head>
<style type="text/css">
.cen a { /*стиль по умолчанию для тега <a> в блоке cen*/
стиль для link1;
}
.cen a.class2 {
стиль для link2;
}
.cen .inblock a {
стиль для link3;
}
.cen .inblock a.class4 {
стиль для link4;
}
</style>
</head>
<body>
<div class="cen">
...
<a href="">LINK_1</a>
<a class="class_2" href="">LINK_2</a>
<div class="inblock">
<a href="">LINK_3</a>
<a class="class_4" href="">LINK_4</a>
</div>
...
</div>
</body>

Например, .cen a говорит о том, что этот стиль будет использован только в блоке с классом cen. В нашем примере мы подразумеваем этот блок тегом <div>. Чаще всего такие конструкции встречаются именно для дивов.

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

Чтобы упростить работу со стилями, создают специальную “таблицу стилей CSS“, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head

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

В данном случае таблица стилей (назовем её style.css) должна содержать следующее:

.styletest {
color: blue;
font-size: 12px;
font-family: Arial;
}

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

<html>
<head>
<link rel="stylesheet" type="text/css href="style.css"/>
</head>
<body>
<font class="styletest">Этот текст будет синим, шрифт Arial и размером 12 пикселей</font>
</body>
</html>

Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css, а там где нужно его применить писать class=”имя стиля”.

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

  • Файлы .css можно сжимать и кэшировать, за счет этого страница грузится быстрее
  • Стиль прописывается в одном месте, а значит его легко изменить. Представьте, как сложно было бы менять стиль на каждой странице при любой небольшой правке
  • Это позволяет уменьшить html код и является правильным тоном. На странице должен быть контент, а не описание стилей.

Использование стилей html через ID

Теперь рассмотрим как можно использовать стили через ID. Для начала, необходимо в таблице стилей (назовем её primerid.css) написать следующее:

font#yellow{color:yellow}
font#orange{color:orange}
b#niz{font-size:12px;}
b#verh{font-size:11px;}
.cen b#slash{color:blue} /*Для вложенных <b id="slash"> в блок cen*/
p#center{text-align:center}
b#map{font-size:18px; color:navy}

Обратите внимание, что сначала пишется название тега, далее #, далее название ID и потом аргументы стиля.

Для использования ID, код html страницы должен содержать примерно следующее:

<html>
<head>
<link rel="stylesheet" type="text/css href="primerid.css"/>
</head>
<body>
<font id="yellow">Желтый текст через ID</font>
<b id="verh">Этот текст имеет размер 11 пикселей</b>
</body>
</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

Более подробно про шрифты и их выбор читайте в статьях:

  • Какой выбрать шрифт для сайта
  • Свойство font






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. Вы можете делать Ваши странички более красивыми. Рассмотренные выше возможности стилей являются поверхностными и для профессионального использования Вам понадобятся более глубокие знания. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующему уроку.

Ссылка на следующий урок: Урок 5. HTML тег а – подробное описание с примерами




Читайте также:

• Что такое CSS

• HTML тег <img> – подробное описание с примерами

• HTML тег <form> – подробное описание с примерами

• Как скруглить углы в HTML через CSS

• Как вставить музыку на сайте

• Как сделать карту изображений (карта ссылок)

• Как сделать слайдер

• Как сделать обтекание картинки текстом

• Как открыть ссылку в новом окне

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.