ВНИМАНИЕ! Конкурс по программированию!

Проект Programmers.kz и школа hotPen3D2D предлагает Вам курсы по веб-дизайну, веб-программированию и компьютерной графике. Подробности здесь.

 
Информация к новости
 (голосов: 0)

Стили

Категория: WEB-Design » HTML » Уроки HTML

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

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

Стили устанавливаются в самом начале HTML-документа, в теле тэга <head>...</head> 


 <html>
 <head>
  <title>Пример использования стилей</title>
   <style>
   P: {COLOR: blue; FONT-SIZE: 11pt; 
FONT-FAMILY: Arial}
   </style>
 </head>
 <body>
  <p>Дизайн этого текста задан с помощью стиля.
 </body>
 </hmtl>

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

Рассмотрим фрагмент кода: 


 <head>
  <title>Пример использования стилей</title>
   <style>
   P: {COLOR: blue; FONT-SIZE: 11pt; 
FONT-FAMILY: Arial}
   </style>
 </head>

Все стили (в нашем случае он один — для тэга <p>) помещаются в теле тэга <style>...<style>

Сами стиль с параметрами записываются в следующей последовательности:

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

В нашем случае для тэга <p> было указано три параметра:

  1. COLOR: blue — задание цвета шрифта
  2. FONT-SIZE: 11pt — размер шрифта
  3. FONT-FAMILY: Arial — тип шрифта

Разумеется для тэга <p> помимо указанных трех, можно задать еще ряд параметров:

Параметр Возможные значения
background-color: все доступные цвета
font-weight bold, light, extra-light
margin-left
margin-right
margin-top
margin-bottom 		Значения отступа: слева
справа
сверху
снизу
text-align left, right, center
text-indent смещение в процентах или пикселях
text-decoration underline, italic, line-through

В следующий раз мы подробнее рассмотрим возможности стилей.
Источник: web-brodilka.ru

Вернуться Комментариев: 0

Наш сайт рекомендует:

Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Введите два слова, показанных на изображении: *