Основы веб / практика / 3_CSS

Лабораторная работа №3

Использование каскадных таблиц стилей

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

Cascading Style Sheets (Таблицы Каскадных Стилей) – это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента web-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.

Благодаря CSS можно изменить гарнитуру, размер шрифта, межстрочные интервалы и многие другие элементы страницы по средствам одной команды, которая применяется не только к одной странице, но и ко всему web-узлу.

При использовании CSS, стилевое оформление применяется на странице одним из способов:

1. С помощью внешней связанной таблицы.

2. С помощью внутренней таблицы стилей.

3. С помощью внедренных стилевых правил.

Внешней таблицей стилей называется файл, содержащий правила CSS. Он связывается с одной или несколькими web-страницами. При использовании внешних таблиц стилей, их необходимо подключить к вашей web-странице одним из способов:

<link href=”mainstyle.css” rel=”stylesheet” type=”text/css”>

или

<style type=”text/css”>

<! - -

@import url(“mainstyle.css”);

-- >

</style>

Внутренней таблицей стилей называется список всех CSS-стилей данной страницы. Все внутренние таблицы стилей помещаются между парой тегов <style>…</style>. Пример:

<style type=”text/css”>

<!- -

body {

color: #545C66;

background: #FFFFFF;

}

h1 {

font-size: 1.5em;

font-weight: normal;

}

.small {

color: #8E9CAE;

}

-->

</style>

<!- - и - -> не позволяют браузерам старых версий, которые не поддерживают таблицы стилей, отображать правила CSS.

Метод внедрения правил стилей заключается во внедрении стиля внутрь HTML-дискрипторов при помощи атрибута style. Пример:

<div style="width:100%;float:left;"></div>

<font style="text-align:center;top:62px; left:300px”></font>

Задание 1. Внедрение стилевых правил

1. Создайте новый параграф (можно использовать уже имеющиеся параграфы).

2. Внедрение стилевых правил осуществляется с помощью атрибута style, который присутствует почти у всех тегов. В окне кода (Code) у тега p добавьте атрибут style, поставьте равно, после чего появится выпадающий список свойств, которые вы можете определить для стиля параграфа.

3. Выберите в списке свойство text-align, дважды щелкнув на нем. Сразу появится выпадающий список возможных значений этого свойства. Выберите значение center.

4. Просмотрите документ в браузере. Текст выровнялся по центру.

5. Добавим к стилю еще свойства. В атрибуте style после слова center поставьте точку с запятой и пробел. Снова выпадет список свойств. Выберите свойство font-family со значением Arial, Helvetica, sans-serif.

6. Аналогичным образом добавьте следующие свойства и их значения:

• font-size:16px;

• font-style:italic;

• text-decoration:overline;

• color:#CC0000";

Самостоятельное задание 1:

1. Для тегу h1 задайте стиль со свойствами: background-color:#CC0000; text-align:center;

2. Для тегу table задайте стиль со свойствами: border:1px; border-color:#000033; border-bottom:4px; border-bottom-color:#CC0000; text-align:center;

3. Для тега body задайте стиль со свойствами

• background-color: цвет;

• background-image: адрес картинки;

• background-attachment: возможные значения fixed, scroll

• background-position: Xpx Ypx (вместо координат могут быть заданы способы выравнивания – right, left, top, bottom, center и др.)

• background-repeat: возможные значения repeat, no- repeat, repeat-x, repeat-y (способы организации повторения картинок)

Задание 2: Создание внутренней таблицы стилей

1. Создайте внутреннюю таблицу стилей.

2. Задайте стилевое правило для тега <a> – текст без подчеркивания text-decoration: none.

3. У тега <a> есть псевдоклассы, которые можно использовать в качестве селектора:

• a:link – определяет вид непосещенных ссылок;

• a:visited – определяет вид уже посещенных ссылок;

• a:link – определяет вид непосещенных ссылок;

• a:active – определяет вид активных ссылок;

• a:hover – определяет вид ссылки при наведении на нее мыши.

Задайте селектору a:hover оформление текста без подчеркивания

<style type="text/css">

<!--

a {

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

-->

</style>

4. Сохраните и посмотрите результат. Обратите внимание, что стиль применяется только к выбранной странице, на остальных страницах ссылки остались подчеркнутыми.

5. Измените цвет уже посещенных ссылок.

Задание 3: Создание внешней таблицы стилей

1. Создайте в текстовом редакторе новый документ и сохраните его с именем mycss.css в папке css.

2. Скопируйте в документ стили для тега a, a:hover.

3. Прикрепите таблицу стилей ко всем html-документам: в разделе заголовка вставьте на него ссылку:

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

4. Сохраните документы, запустите главную страницу сайта и посмотрите, что теперь указанные стили применились ко всем страницам.

Обратите внимание! Теперь, если вы захотите изменить вид ссылок, достаточно будет исправить параметры стилей только в одном документе – mycss.css, а не в каждом по отдельности.

Обратите внимание! Внутренние таблицы стилей переопределяют стили из внешних таблиц, внутренние стилевые правила переопределяют как внешние так и внутренние таблицы стилей. То есть если вы зададите разные стили для тега body во внешней таблице и во внутренний, то применится стиль, заданный во внутренней таблицы стилей.

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

Обратите внимание! Классы в css описываются так

.имя_класса {стилевые правила}

Чтобы применить класс нужно у необходимого тега определить атрибут class=”имя_класса”.

Идентификаторы в css описываются так

#имя_идентификатора {стилевые правила}

Чтобы применить идентификатор нужно у необходимого тега определить атрибут id=”имя_идентификатора”.

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

Классы, напротив, можно использовать в документе произвольное количество раз. Поэтому, если некоторые свойства присущи сразу нескольким элементам страницы, использование классов можно считать идеальным решением.

Любому элементу можно одновременно присвоить и класс, и идентификатор. В качестве примера такого элемента можно привести все расположенные на странице поля для ввода текста; для обращения к ним в сценарии на JavaScript каждому полю придется также задать уникальный идентификатор. При этом не нужно определять для него какие-либо стили.

5. Создадим новый стиль – mystyle. Установите у него стилевые правила:

• Font (Шрифт): times New Roman;

• Size (Размер): 14;

• Style (Начертание): italic;

• Color (Цвет): красный (#FF0000)

6. Примените стиль к любому абзацу в вашем документе. Сохраните и просмотрите результат.

Обратите внимание! Один и тот же класс может иметь разные стилевые правила, в зависимости от того к какому тегу он прикреплен:

p.myclass { Size (Размер): 14}

td. myclass { Size (Размер): 12}

Теперь если вы примените класс myclass к абзацу <p>, то шрифт будет 14 размера, а если к ячейке таблицы <td> – то 12 размера.