Тема №5

Тема: Основы CSS

1. Введение в CSS.

2. Подключение CSS к HTML.

3. Правила и селекторы CSS.

4. Селекторы по идентификатору.

5. Селекторы по классу.

6. Псевдоэлементы и псевдоклассы.

1.Введение в CSS

Как вы помните HTML - это язык разметки, но его создатели так хотели улучшить жизнь сайтостроителей, что добавляли в него элементы и параметры, отвечающие за внешний вид страницы: теги <font>, <b>, <i>, <bgcolor> и так далее.

Но на какой-то момент код страниц стал таким громоздким и нечитабельным, что стало ясно - этот путь ведет "в никуда". Тогда было принято решение разделить разметку страницы (HTML) и ее визуальное оформление (CSS).

Что такое CSS

CSS (Cascading Style Sheets) - каскадные таблицы стилей.

Стиль - набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня (теги <h1>) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.

Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...). Набор стилей всех элементов называют таблицей стилей.

Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.

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

CSS позволяет значительно сократить размер кода и сделать его читабельным.

CSS позволяет задавать такие параметры, которые нельзя задать только языком HTML. Например, убрать подчеркивание у ссылок.

CSS позволяет легко изменять внешний вид страниц. Представьте, вы сделали сайт из 50 страниц, на которых все заголовки синего цвета. Через какое-то время, вы захотели поменять синий цвет на зеленый. Вам придется пройтись по всем 50 страницам и поменять цвет в соответствующем атрибуте. С CSS вам придется сделать это лишь один раз, в таблице стилей.

С CSS связана так называемая блочная верстка сайта.

2.Подключение CSS к HTML

Связывание. В этом случае стили описываются в отдельном файле с расширением *.css. пусть наш файл со стилями – Mystyle.css. Подключим его к нашему HTML-документу, делается это с помощью тега <link>, помещаемого в <head></head>.

<head>

</head>

Подключать можно одновременно несколько файлов, для этого можно добавлять несколько тегов <link>.

Внедрение в документ. В этом случае стили описываются в самой HTML-странице, в теге <style></style>, который помещается в <head></head>.

/* здесь описываем сами стили */

</style>

Оперативное определение (внедрение в тег). Стиль назначается конкретному тегу. Это делается путём назначения тегу атрибута style, значением которого является описание стиля. Атрибут style поддерживают все теги, отображаемые на странице.

<bodystyle=”color: blue; background-color: #FFFFFF”>

Импорт. Имеется в виду назначение странице стиля, импортированного с другой страницы по её URL-адресу. Прописывается импорт в теге <style></style>.

@import: url(http://www....)

</style>

3.Правила и селекторы CSS

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

Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:

Пример

body{

background: blue;

color: white;

}

h1{

color:red;

}

h2{

color:yellow;

}

4.Селекторы по идентификатору

В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них - розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.

В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:

<p id="pink">Текст параграфа с идентификатором (id).</p>

Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body.

Пример CSS:

p{

  color:black;

p#pink{

color:pink;

Мы сначала указали сделать текст всех параграфов черным, а текст параграфа с id "pink" сделать розовым. Наш селектор состоит в данном случае из элемента (p), разделителя (#) и имени идентификатора (pink).

Важно запомнить, что на странице может быть только один идентификатор (id). Т.е. для нашего примера нельзя создать два параграфа с id "pink", параграф с таким id может быть только один. Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей

5.Селекторы по классу

В примере выше мы создали параграф с розовым цветом текста и указали, что такой id может быть только один. Но, что делать, если мы хотим, чтобы розовый цвет текста был у двух или трех параграфов. Для этого в HTML существует параметр class, в качестве значения которого указывается его имя.

Давайте добавим в нашу html-страницу еще пару параграфов и присвоим им class="pink":

<pid="pink">Абзац с идентификатором</p>

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

Пример CSS:

p#pink

  color:pink;

p.pink

  color:pink;

Подведем промежуточный итог:

если все подобные элементы (например, все заголовки h1) должны иметь один стиль, то селектор состоит только из этого элемента (например, p{color:black;})

если элемент (любой: абзац, заголовок...) должен отличаться от всех остальных, то ему присваивается идентификатор (id) и разделителем в таблице стилей является знак решетки (#), например, p#pink{color:pink;} .

если же на странице будет несколько элементов с одинаковым стилем, то им присваивается класс (class) и разделителем в таблице стилей является знак точки (.), например, p.pink{color:pink;}.

идентификатор имеет более высокий приоритет, чем класс. Поэтому, если для какого-либо элемента будет указан и класс, и идентификатор (что не противоречит принципам CSS), то применен будет стиль идентификатора.

Как уже упоминалось идентификаторы и классы можно задавать любым элементам html. Но часто бывает так, что мы хотим несколько разных элементов выделить одним стилем, например, зеленым цветом. В таком случае можно воспользоваться унифицированным селектором. В таких селекторах имя элемента не указывается, указываются точка или решетка, как признак класса или идентификатора и имя. Например:

.red{

color:red;

}

#yellow{

color:yellow;

}

Контекстный селектор

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

i{ color:green;}

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

pi{ color:green;}

Так мы указали, применять данный стиль к элементам i, которые находятся в элементах p. Названия элементов при этом отделяются пробелом. Такие селекторы называют контекстными.

Группировка селекторов

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

h1, h2, h3{ color:green;}

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

h1, h2, h3{ color:green;}

h1{ font-size:18px;}

h2{ font-size:16px;}

h3{ font-size:14px;}

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

6. Псевдоэлементы и псевдоклассы

Как было сказано выше, CSS применяется к элементам HTML. Но есть несколько элементов, которых не существует в HTML, но они присутствуют на странице (первая буква слова и первая строка абзаца). Такие элементы и называют псевдоэлементами. Им можно задавать стиль, также как и элементам HTML.

К псевдоэлементам относят:

first-letter - задает стиль первой букве слова.

p:first-letter{ color:red; }

first-line - задает стиль первой строке абзаца. Выделим первую строку нашего абзаца синим цветом. Для этого в таблице стилей напишем:

p:first-letter{

color:red;

}

p:first-line{

color:blue;

}

Псевдоклассы

В CSS существуют четыре псевдокласса, они позволяют работать со ссылками. Как вы знаете, у ссылок есть четыре состояния: простая, активная, посещенная и та, на которую наведен курсор. Состояние ссылок зависит от действия пользователя, и браузер, в зависимости от этих действий может применять разные стили. Для описания этих стилей и существуют псевдоклассы.

a:link - задает стиль обычной ссылки.
a:active - задает стиль активной ссылки.
a:visited - задает стиль посещенной ссылки.
a:hover - задает стиль ссылки, на которую наведен курсор.

В HTML все элементы можно разделить на два типа: блочные и строчные.

Блочные элементы визуально создают самостоятельную структурную единицу - блок. К ним можно отнести, например, элементы H1-H6, P, DIV. Такие элементы отделяются от других абзацными отступами.

Строчные элементы выводятся линейной строкой. К ним можно отнести, например, элементы I, B, U, S и другие.

Блок имеет прямоугольную форму:

Итак, у блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого.

Затем идет граница блока (border), которая может быть как видимой, так и невидимой.

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

Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.

Позиционирование блоков

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

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

· абсолютное позиционирование

· относительное позиционирование

· плавающая блоковая модель

Для определения схемы позиционирования используется свойство position, оно может принимать четыре значения, соответствующие выбранной схеме позиционирования:

static - блок позиционируется в нормальном потоке. Это значение по умолчанию.
relative - относительное позиционирование (относительно нормального потока).
absolute - абсолютное позиционирование
fixed - фиксированное позиционирование (фиксируется относительно области просмотра).

Абсолютное позиционирование

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

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

Относительное позиционирование

При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке.

#blok1, #blok2, #blok3

{ border:1px solid red; width:150px; height:50px; }

#blok2

{ position:relative; left:50px; top:25px; }

Плавающие блоки
Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно.

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

Плавающие блоки определяются свойством float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта:

left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.
right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.

· none - блок не перемещается и позиционируется согласно свойству position.

Виды и свойства блоков

Как вы помните, элементы могут быть блочными и строчными (урок 8). По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span и a - строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство может принимать одно из четырех значений.

display:block - Это значение делает элемент блочным.

display:inline - Это значение делает элемент строчным.

display:list-item - Это значение делает любой элемент частью списка.

display:none - Это значение убирает элемент со страницы

Надо сказать, что в CSS есть еще одно свойство на первый взгляд похожее на display:none. Это свойство, отвечающее за видимость блока - visibility. Оно может принимать два значения: visible (отображать) и hidden (сделать невидимым).

Слои

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

Также и в CSS, мы можем создать несколько слоев, на каждом разместить необходимые элементы и пронумеровать слои с помощью свойства z-index. Чем больше номер, тем выше слой находится в стопке слоев. Например, если сделать 6 слоев, то пользователь сначала увидит именно слой z-index:6.

Слои часто используются при создании раскрывающихся меню.

Шаг 1

function books()

{ document.getElementById("book").style.visibility='visible'; document.getElementById("movie").style.visibility='hidden'; document.getElementById("musik").style.visibility='hidden'; document.getElementById("game").style.visibility='hidden'; }

function movies()

{ document.getElementById("book").style.visibility='hidden'; document.getElementById("movie").style.visibility='visible'; document.getElementById("musik").style.visibility='hidden'; document.getElementById("game").style.visibility='hidden'; }

function musiks()

{ document.getElementById("book").style.visibility='hidden'; document.getElementById("movie").style.visibility='hidden'; document.getElementById("musik").style.visibility='visible'; document.getElementById("game").style.visibility='hidden'; }

function games()

{ document.getElementById("book").style.visibility='hidden'; document.getElementById("movie").style.visibility='hidden'; document.getElementById("musik").style.visibility='hidden'; document.getElementById("game").style.visibility='visible'; }

Шаг 2

Подключить js

Шаг 3

<a href="#" onMouseOver="books();">Книги</a>

<a href="#" onMouseOver="movies();">Фильмы</a><a href="#" onMouseOver="musiks();">Музыка</a>

</div>

Сайт создан по технологии «Конструктор сайтов e-Publish»