Boolean.org.ua - Странички сайта и CSS стили

Странички сайта и CSS стили

Автор: Дмитрий Львов
Обновлено: 2010-05-30 14:24:50
Просмотров: 127

ID: 249
Тип материала: Урок
Раздел: CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

Глобальные стили добавляются в документ следующим образом. Внутри тега <head> вставляется парный тег <style> с параметром type="text/css". Внутри тега <style> располагаются все стили для данного документа. Стили разделяются просто переносом строки. Стиль описывается так: пишется название стиля и ставятся "фигурные скобки" { }.

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

 
 <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-страниц. И все изменения автоматически применятся ко всем страницам, к которым подключен файл стилей.

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

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

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

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

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

Например, к нашим урокам файл стилей style_school.css можно подключить так:

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

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

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

...

Посмотрите, как устроен файл style_school.css.

Для примера создадим документ с заголовками (откройте его, посмотрите, как он выглядит без стилей, и посмотрите его код). Сделаем все заголовки <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>

Получится такой документ (откройте его, посмотрите, как он выглядит с применением стилей, и посмотрите его код).

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

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

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

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

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

Источник: http://www.colorpilot.ru/

Коментарии к данному материалу(0):

Коментарии не найдены

Другие материалы по категории: CSS

Красивая полоса прокрутки сайта (Урок)

Оформляем красивые заголовки (Урок)

Преимущества и недостатки каскадных таблиц стилей (Урок)

Единицы измерения CSS (Урок)

Прозрачность в CSS (Урок)

Предварительная загрузка изображений (Урок)

Отступы на веб-странице (Урок)

Подключаем каскадные таблицы стилей (Статья)

Работаем с задним фоном в CSS (Статья)

Различия атрибутов ID и CLASS (Статья)

Частичное либо полное копирование материалов, представленных на этом ресурсе, запрещено! Cлужба поддержки

Главное меню

По категориям

Реклама

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

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

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

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

Новые материалы

Видеоуроки

Интересные ссылки

Статистика