Урок 9. Дизайн сайта с использованием CSS стилей. Теория.

Мы с Вами уже пробовали создать табличный дизайн сайта. Он получился очень даже ничего, но… такой вариант дизайна не совсем удачный и мы его привели просто в качестве возможного варианта. Почему? Да хотя бы потому, что для разных разрешений монитора пользователей Ваш сайт, при таком варианте дизайна, будет выглядеть совершенно по-разному… и зачастую не в лучшую сторону. Так же код страницы получается очень громоздким, и это притом, что такой код должен быть на всех страницах Вашего сайта для того, чтобы соблюдался общий дизайн! Не самая лёгкая работа, и уж точно не для слабонервных!

Не спешите расстраиваться! Для решения этой проблемы существуют CSS каскадные таблицы стилей!

Стиль – это те параметры, которые задают внешнее представление каждого объекта, т.е. каждый элемент страницы может иметь свой, индивидуальный стиль. И для этого не нужно писать кучу громоздких кодов на каждой странице! Как так? Это Вы поймёте дальше!

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

Чем еще CSS лучше простого табличного дизайна? С помощью CSS Вы можете задавать такие параметры, которые только языком HTML задать не получится. С помощью CSS можно легко и быстро изменить внешний вид страниц, не меняя код на каждой странице сайта отдельно!

Если мы Вас убедили, то переходим к рассмотрению того, что же такое CSS и с чем его едят!

В языке CSS нет тэгов и параметров – в нем есть правила. Правила это состоит из блока и селектора, и заключается в фигурные скобки {правило}:

Body {color: red; font-size: 10px}

Дословно этот код значит: стиль для содержимого тэга body{цвет текста:красный; размер текста:10 пикселей} , где body – это селектор, а содержимое в {__} – это блок объявления стилей, т.е. сначала указывается селектор (элемент, к которому применяется стиль), а в фигурных скобках – свойства и значение для этого элемента.

В том случае, если одинаковых элементов много, а для них нужны разные стили, существует идентификатор элементов. Он задаётся при помощи параметра id, значением которого задаётся уникальное имя для каждого элемента, например элемент абзаца с идентификатором:

<p id=”k”>Текст с идентификатором (id)</p>, где k – это уникальное имя идентификатора, т.е. для еще одного элемента абзаца нужно задавать уже другое имя. Обычно имена id задаются по смыслу элемента, чтобы было легче понять, для чего служит выделенный определённым стилем элемент, кроме имён тэгов (к примеру имя table для id задавать нельзя).

Важно!!! Одинаковые имена идентификаторов для двух разных элементов задавать нельзя!

Если же выбранный стиль необходимо применить к нескольким элементам, то необходимо воспользоваться параметром class, которому так же присваивается имя:

<p class="k">Абзац с классом (class) k</p>

Для указания стиля такого класса, в таблице стилей указывается правило, где в качестве селектора указывается элемент «р» и имя k, но теперь это имя класса, так что в качестве разделителя ставим точку (.):

 Для того, чтобы указать стиль для этого класса, в таблице стилей напишем правило, где в качестве селектора снова будет использоваться элемент p и имя pink, но в данном случае это имя класса, поэтому в качестве разделителя будет использоваться точка (.):

p. k{
color:red; }

Абзацев с таким стилем может быть сколько угодно!

Важно!!! Идентификатор id выше приоритетом, чем класс, поэтому, если к одному элементу применить и идентификатор и класс, то применится стиль идентификатора, а не класса!

В том случае, если необходимо выделить несколько элементов одним стилем, применяется унифицированный селектор (без указания имени элемента):

.red{
 color:red;
}

#red{
  color:red;}

Здесь решетка или точка (на Ваше усмотрение) является признаком класса или имени и идентификатора. Теперь какому бы элементу не задавался класс red, цвет текста у него станет красным.

Существует еще такое понятие, как Контекстный селектор. Он применяется в том случае, когда, например, мы хотим задать изменение цвета лишь для выделенного полужирным шрифтом текста:

b{
color:green;
}

p b{
color:green;
}

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

Важно!!! В таких случаях названия элементов отделяются пробелом!

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

h1, h2, h3{
color:green;
}

Важно!!! Если Вы не задаёте элементу свойство color, то он наследует его от предка, т.е. если задать цвет для body, но не задать для p, то текст, содержащийся в элементе р всё равно будет такого цвета, который задан для body, т.к. р находится в структуре body. Это так называемый принцип наследования.

Если цвет мы можем задавать тексту, то фон можно задавать любому элементу: странице, заголовку, абзацу и т.д. Задаёт цвет фона background-color. По умолчанию он не наследуется, но при желании его можно сделать наследуемым указав значение inherit.

body{
background-color:black;
color:yellow; }

Здесь фон элемента body будет черным а цвет текста желтым.

body{
background-image:url(imaige.gif);
background-color:red;
color:yellow;
}

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

Если прописать такой код для Вашей страницы то, по умолчанию, это изображение будет повторяться. Во избежание этого существует background-repeat. Он задаёт возможность повторения фонового изображения:

Repeat – повторять изображение по горизонтали и вертикали;

Repeat-x – повторять по горизонтали;

Repeat-y – повторять по вертикали;

body{
background-image:url(imaige.gif);
  background-repeat:no-repeat;
 background-color:red;
  color:yellow;
}

background-attachment - указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения:

scroll - фон прокручивается вместе с текстом. Это значение используется по умолчанию.

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

body{ 
 background-image:url(imaige.gif);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:red;
  color:yellow;
}

body{ 
 background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-color:red;
  background-position:15% 40%;
  color:yellow;}

body{ 
 background-image:url(imaige.gif);
  background-repeat:no-repeat;
  background-color:red;
  background-position:50px 50px;
  color:yellow;
}

body{
  background-image:url(imaige.gif);
  background-repeat:no-repeat;
  background-color:red;
  background-position:center top;
  color:yellow;
}

Изображение будет выровнено по горизонтали - по центру, а по вертикали - по верхнему краю страницы. Также можно задать параметры left, center, right для первого значения и top, center, bottom для второго значения.

Поделиться...