В табл. 3.1 приведено краткое описание css селекторов.
Таблица 3.1 – Краткое описание CSS селекторов
|
Селектор |
Пример |
Описание |
|
#идентификатор |
#el1 |
Выберет все элементы на странице, которые имеют идентификатор el1 (которые имеют атрибут id='el1'). |
|
.класс |
.group1 |
Выберет группу элементов на странице, которые имеют класс group1 (которые имеют атрибут class='group1'). |
|
элемент |
P |
Выберет все абзацы на странице. |
|
* |
* |
Выберет все элементы на странице. |
|
:not(x) |
:not(div) |
Выберет все элементы на странице кроме элементов div. |
|
:link |
a:link |
Выберет все не посещенные ссылки на странице |
|
:visited |
a:visited |
Выберет все посещенные ссылки на странице. |
|
:hover |
a:hover |
Выберет все ссылки, на которые наведен курсор мыши. |
|
:active |
a:active |
Выберет все активные в данный момент ссылки (на которые щелкнули мышкой). |
|
[атрибут] |
p[id] |
Выберет все абзацы на странице, которые имеют атрибут id. |
|
::selection |
::selection |
Оформляет выделенный пользователем текст. |
|
[атрибут=значение] |
p[id="el1"] |
Выберет все абзацы на странице, которые имеют атрибут id со значением el1. |
|
[атрибут~=значение] |
a[href~="wisdomweb]" |
Выберет все ссылки с атрибутом href содержащим в значении подстроку "wisdomweb" отделенную пробелами от остального содержимого. |
|
[атрибут^=значение] |
[src^="http://"] |
Выберет все элементы имеющие атрибут src со значением начинающимся на "http://". |
Продолжение табл. 3.1
|
Селектор |
Пример |
Описание |
|
[атрибут$=значение] |
[src$=".gif"] |
Выберет все элементы имеющие атрибут src со значением заканчивающимся на ".gif". |
|
[атрибут=*значение] |
[src*="picture"] |
Позволяет выбрать все элементы имеющие атрибут src со значением содержащим подстроку "picture". |
|
:first-child |
p:first-child |
Выберет все абзацы, которые являются первыми в родительском элементе. |
|
:last-child |
div:last-child |
Позволяет выбрать все элементы div являющиеся последними элементами потомками в родительском. |
|
:first-line |
p:first-line |
Оформит первую сточку всех абзацев на странице. |
|
:first-letter |
p:first-letter |
Оформит первую букву всех абзацев на странице. |
|
эл1 эл2 |
div p |
Выберет все абзацы являющиеся потомками элемента div. |
|
эл1 > эл2 |
div > p |
Выберет все абзацы являющиеся потомками элемента div. |
|
эл1 + эл2 |
div + p |
Выберет все абзацы следующие после элемента div. |
|
элемент1~элемент2 |
div~p |
Выберет все элементы div находящиеся перед элементом p. |
|
:before |
p:before |
Вставит произвольное содержимое перед элементом p. |
|
:after |
p:after |
Вставит произвольное содержимое после элемента p. |
|
:focus |
input:focus |
Выберет все активные элементы ввода на странице. |
|
:enabled |
:enabled |
Позволяет выбрать все работоспособные элементы ввода. |
|
:disabled |
:disabled |
Позволяет выбрать все неработоспособные элементы ввода. |
|
:first-of-type |
div:first-of-type |
Позволяет выбрать все элементы div являющиеся первыми в родительском. |
|
:last-of-type |
div:last-of-type |
Позволяет выбрать все элементы div являющиеся последними в родительском. |
|
:only-of-type |
div:only-of-type |
Позволяет выбрать все элементы div, которые являются уникальными родительском. |
|
:nth-child(x) |
div:nth-child(3) |
Позволяет выбрать все элементы div являющиеся третьими по счету в родительском. |
|
:nth-last-child(x) |
div:nth-last-child(2) |
Позволяет выбрать все элементы div являющиеся вторыми элементами потомками в родительском с конца. |
|
:root |
:root |
Позволяет выбрать корневой элемент документа. |
|
:empty |
p:empty |
Позволяет выбрать пустые абзацы. |
3.4.2 Порядок выполнения работы
1. В текстовом редакторе "Блокнот" создать шаблон базового документа, сохранить его, как HTML-страницу, которую будем использовать для этой лабораторной работы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Лабораторная 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
Текст документа ….
</body>
</html>
2. Создать папку с названием myCSSwebsite. Затем поместить HTML-файл в эту папку. В этой же директории создать новый текстовый документ и назвать его myCSS.css.
3. Для того, чтобы созданная HTML страничка отображалась в соответствии с заданным стилем, необходимо прикрепить ее к CSS-файлу (добавить в документ НTML):
<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>
Как и в случае со ссылкой обычной страницы, используется атрибут ‘href’, который в этот раз указывает на CSS-документ, содержащий весь CSS-код. Код в CSS-документе будет воздействовать на страницу, т.к. она ссылается на CSS-файл. Это не единственный способ связать CSS-код со страницей. Итак, в приведенной выше ссылке, название имени CSS-файла можно описать с помощью следующей конструкции: ‘href=”myCSS.css’. Атрибут ‘type=”text/css’ говорит браузеру, что ссылка указывает на CSS-страницу. Самое важное здесь – это то, что ссылка указывает на CSS-файл с именем ‘myCSS.css’.
4. В HTML-файле добавить следующий код между тегами* <body> и </body>:
<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 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>
Получилось два контейнера ("navigation", "centerDoc"). Каждому из них присвоен уникальный идентификатор ID. Сохранить созданную HTML-файл в формате *.Html и *.txt.
5. В файле myCSS.css должны быть описаны правила для:
- body, p, li (пример 1 и 3);
- h1 и h2:
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
6. В файле myCSS.css должны быть описаны правила для псевдоклассов (пример 6).
7. В файле myCSS.css должен быть описан элемент навигации #navigation и сам документ #centerDoc - селектор ID (пример 5).
В результате, сохранить созданный файл myCSS.css.
На экране должна быть следующая картинка рис. 3.4.
Рисунок 3.4 – Окно созданной HTML-странички
8. Добавить в созданный документ изображение, которое бы располагалось под текстом по центру странички.
3.5 Содержание отчета
1. Теория по CSS верстке.
2. Текст нового HTML-документа.
3. Текст созданного CSS-файла.
4. Таблица с кратким описанием CSS селекторов.
5.Копия экрана с отображением HTML-документа.
6. Выводы по работе.
3.6 Контрольные вопросы
Определение CSS.
Описать, как происходит прикрепление CSS-файла к HTML-документу.
Понятие селектор.
Понятие идентификатор, привести пример синтаксиса.
Понятие селекторы тэгов, привести пример синтаксиса.
Привести пример стилизации списка (тег <li >) пунктов с маркером квадрат при помощью CSS.
Понятия класс и псевдокласс, привести пример синтаксиса.
Понятие селекторы атрибутов, привести пример синтаксиса.
Значение атрибутов: FONT, BORDER, POSITION.
В чем отличие padding, border, margin?