3 Создание html-страниц, стилизованных
ПРИ ПОМОЩИ CSS
3.1 Цель работы
Изучение основ каскадных таблиц стилей и их использование для отображения элементов HTML-страниц.
3.2 Указания к организации самостоятельной работы студентов
Во время выполнения работы необходимо ознакомится с литературой [1 – 3], материалами конспекта лекций и информацией, приведенной в подразделе 3.4.
3.3 Описание программного продукта, используемого для выполнения лабораторной работы
Для выполнения лабораторной работы используется ПЭВМ, операционная система Windows 2007, Web-браузер Internet Explorer / Opera / Google Chrome, текстовый редактор.
3.4 Порядок выполнения работы и указания к ее выполнению
3.4.1 Рассмотрим некоторые основные теоретические положения, необходимые для выполнения данной лабораторной работы
CSS-код – это просто написанные инструкции, которые говорят браузерам (таким, как Firefox и Internet Explorer), как отображать те или иные вещи на странице. CSS (Cascading Style Sheets) – каскадные таблицы стилей.
Также как в HTML есть теги, в CSS есть «селекторы». Под селекторами следует понимать имена, которые описывают стили во внутренних и внешних таблицах стилей.
Когда пишется CSS код, то должны иметь в виду, что некоторые селекторы будут иметь более высокий приоритет, чем другие, последний селектор, не всегда переопределяет предыдущие, которые написаны для этих элементов.
У каждого селектора есть свойства, которые находятся внутри фигурных скобок. Все селекторы сгруппированы с помощью фигурных скобок: { }.
В CSS существуют следующие виды селекторов (рис. 3.1).
Рисунок 3.1 – Виды селекторов CSS
1) Селекторы тэгов.
Можно выбирать элементы на странице для оформления по названию тэга.
Пример 1. Код в CSS для селектора body, p, li, который определяет, как будут выглядеть тело страницы, абзац и заголовки:
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
Установили ширину 80% для тегов <p>, что позволит контролировать ширину текста в одном легком для редактировании месте.
Пример 2. Стилизация списка (тег <li >) с помощью CSS:
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(./images/arrowSmall.gif);
}
Код, указанный выше, использует картинки в качестве маркеров списка и устанавливает пространство между элементами списка в полтора раза больше нормального (150 %). Но не обязательно использовать картинки в качестве маркеров.
Чтобы использовать маркеры без картинок, достаточно удалить этот атрибут: list-style-image: url(../images/arrowSmall.gif);
Пример 3. В качестве маркеров списка можно использовать disc (диск) (рис. 3.2), circle (круг) и square (квадрат), тогда
li {
list-style-type: disc;
line-height: 150%;
}
Рисунок 3.2 – Маркировка списка в виде диск
2) Cелектор ID.
Данный вид селекторов позволяет производить более точную выборку и используется, когда необходимо выбрать только один определенный элемент на странице, с предварительно заданным идентификатором (не может быть двух элементов с одним и тем же ID).
Идентификатор для элемента задается с помощью атрибута id (<p id="идентификатор">текст</p>).
Пример 4. Код в HTML с описанием идентификаторов для элементов "navigation" и "centerDoc".
<html>
<head>
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="navigation">
<h2>The Main navigation</h2>
<ul>
<li><a href="cssTutorialPage1.htm">Page One</a></li>
<li><a href="cssTutorialPage2.htm">Page Two</a></li>
</ul>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
<p> Go to the Web Designers Killer Handbook home page and grab the
practice HTML page that we will used as the starting template for this
tutorial. You can find it under the heading: 'To create the practice HTM
page do the following:'.
Follow the instructions there and create your basic HTML page
... and do it now!</p> </div>
</body>
То есть, в примере 3 сделаны два контейнера (div) и каждому из них присвоен уникальный идентификатор ID:
<div id="navigation">
...
</div>
Для того, чтобы затем оформить данный элемент необходимо обратиться к
идентификатору в таблицах стилей СSS добавив перед ним символ "#" (# перед именем CSS-селектора – этот селектор особого вида – ID-селектор), например, (#идентификатор {color:red}).
Пример 5. Код правил для ID в myCSS.css для элемента навигации #navigation и документа #centerDoc.
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
В примере 5 все селекторы сгруппированы с помощью фигурных скобок: { }. Вот эти селекторы без содержания (оно было удалено):
#navigation {
/*Смотрите, нет никаких CSS-правил!*/
}
#centerDoc {
/*Смотрите, нет никаких CSS-правил!*/
}
Строка font-weight: normal – весь текст будет набран обычным шрифтом, а если font-weight: bold – текст внутри div будет набран жирным шрифтом. FONT задает параметры шрифта элемента страницы. Заменяет атрибуты font-family, font-height, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке. font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight}]. Альтернативный формат: font: caption|icon|menu|message-box|small-caption|status-bar.
Строка border-right: 1px solid #C6EC8C – элемент div навигации расположен слева и имеет границу в виде тонкой зеленой рамки шириной в 1 пиксель справа от элемента div. BORDER задает все свойства границ элемента страницы в один прием. Заменяет атрибуты border-color, border-style и border-width. Значения этих атрибутов могут располагаться в любом порядке. border: [{border-color}] [{border-style}] [{border-width}]. Значение по умолчанию medium none.
Строка position: absolute говорит браузеру, что поместить блок div на страницу надо как есть (для того, чтобы установить, каким образом вычисляется положение элемента в плоскости экрана position: static|absolute|relative).
Рассмотрим код для centerDoc (пример 5).
Строка padding: 0 0 20px 0; /*top right bottom left*/ говорит браузеру, что нужно вставить отступ в 20px (пикселей) снизу div с ID ‘centerDoc’
Эта блочная модель состоит из: padding (отступ), margins (поля), borders (рамки) и сам контент. Это позволяет поместить рамку вокруг элементов и расставить элементы относительно других. Порядок изнутри наружу выглядит так: контент -> padding -> border -> margin.
Контроль пространства перед рамкой (padding) и после нее (margin) влияет на разметку текста.
Строка margin-top: 50px для div centerDoc означает, что верхнее поле 50 пикселей, а margin-top: 0px для div navigation означает, что centerDoc будет ниже, чем navigation на 50px.
3) Селектор class.
На первый взгляд нет никакой разницы, что использовать: id или class. Ведь присвоив одинаковые параметры CSS стилей для id и class – результат будет идентичен. На самом деле, отличий между id и class в CSS практически нет, за исключением приоритета их обработки.
Данный вид селекторов позволяет выбирать для оформления не единственный элемент, а группу элементов.
С помощью атрибута class можно задать, что элемент относится к группе (<p class="имя_группы">текст</p>).
Например, <p class="my_class_r7t" id="my_id_r7t">Этому абзацу присвоены класс my_class и идентификатор my_id.</p>
Для того чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).
Псевдоклассы – это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором. Вот список всех псевдоклассов:
hover – Стиль элемента на который наведён курсор мыши.
active – Стиль для ссылки которая становится активной, но переход по ней еще не совершен.
visited – Стиль для недавно посещённой ссылки.
link – Стиль для нечасто посещаемой ссылки.
focus – Стиль элемента находящегося в фокусе.
first-child – Стиль первого дочернего элемента.
lang – Определяет язык, который используется в фрагменте документа.
Рассмотрим пример описания правил в CSS для псевдоклассов.
Пример 6. Код описания для ссылок (navigation)
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
4) Селекторы атрибутов.
Элементы на странице могут быть выбраны по их атрибутам.
Пример 7. Код в CSS, определяющий правила для элементов, у которых задан атрибут src (рис. 3.3).
<html>
<head>
<style type='text/css'>
/* Оформит все элементы, у которых задан атрибут src */
[src]
{
border-color:green;
border-style:solid;
border-width:3px;}
</style>
</head>
<body>
<img src='mountimg.jpg' alt='Ергаки 2010'/>
<br /><br />
<img src='mountimg1.jpg' alt='Кузнецкий алатау 2010' width='300' /></body>
<p>У данного элемента не будет зеленой рамки потому, что у него нет атрибута src. </p>
</html>
Рисунок 3.3 – Вид странички с атрибутом src