- •Занятие № 22 Лабораторная работа № 17
- •Инструкционно-технологическая карта
- •I. Краткие теоретические сведения
- •Правила и селекторы css.
- •Селекторы css
- •Контекстный селектор
- •Группировка селекторов
- •Свойства шрифта
- •Цветовая гамма.
- •Text-decoration - Задает специальное оформление текста: подчеркнутый, зачеркнутый и т.П.
- •Text-underline-position - Задает местонахождение линии подчеркивания: выше или ниже текста.
- •Text-align - Определяет горизонтальное выравнивание текста.
- •Text-align-last - Задает горизонтальное выравнивание последней строки абзаца.
- •Границы
- •Outline-width Задает толщину внешней границы элемента. В отличие от свойства border-width, для outline-width нельзя устанавливать границу для каждой стороны элемента индивидуально.
- •Синтаксис
- •Значения
- •II. Задание на практическую работу
- •III. Контрольные вопросы
Селекторы css
Селекторы по идентификатору
В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них - розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.
В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:
<p id="pink">Текст параграфа с идентификатором (id).</p>
Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор:
<html>
<head>
<title>CSS id</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Это заголовок первого уровня</h1>
Здесь просто текст
<h2>Это заголовок второго уровня</h2>
Здесь просто текст
<p>Простой абзац</p>
<p id="pink">Абзац с идентификатором (id)</p>
</body>
</html>
Если посмотреть сейчас на нашу страницу в браузере, то наши абзацы оба белого цвета. Добавим в таблицу стилей (style.css) стили для наших абзацев:
body{
background: blue;
color: white;
}
h1{
color:red;
}
h2{
color:yellow;
}
p{
color:black;
}
p#pink{
color:pink;
}
Мы сначала указали сделать текст всех параграфов черным, а текст параграфа с id "pink" сделать розовым. Наш селектор состоит в данном случае из элемента (p), разделителя (#) и имени идентификатора (pink).
Важно запомнить, что на странице может быть только один идентификатор (id). Т.е. для нашего примера нельзя создать два параграфа с id "pink", параграф с таким id может быть только один. Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей.
Селекторы по классу
В примере выше мы создали параграф с розовым цветом текста и указали, что такой id может быть только один. Но, что делать, если мы хотим, чтобы розовый цвет текста был у двух или трех параграфов. Для этого в HTML существует параметр class, в качестве значения которого указывается его имя.
Давайте добавим в нашу html-страницу еще пару параграфов и присвоим им class="pink":
<html>
<head>
<title>CSS class</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Это заголовок первого уровня</h1>
Здесь просто текст
<h2>Это заголовок второго уровня</h2>
Здесь просто текст
<p>Простой абзац</p>
<p id="pink">Абзац с идентификатором</p>
<p class="pink">Абзац с классом (class) pink</p>
<p class="pink">Абзац с классом (class) pink</p>
</body>
</html>
Для того, чтобы указать стиль для этого класса, в таблице стилей напишем правило, где в качестве селектора снова будет использоваться элемент p и имя pink, но в данном случае это имя класса, поэтому в качестве разделителя будет использоваться точка (.):
Body {
background: blue;
color: white;
}
h1{
color:red;
}
h2{
color:yellow;
}
p{
color:black;
}
p#pink{
color:pink;
}
p.pink{
color:pink;
}
Абзацев с таким классом может быть сколько угодно.
Как уже упоминалось идентификаторы и классы можно задавать любым элементам html. Но часто бывает так, что мы хотим несколько разных элементов выделить одним стилем, например, зеленым цветом. В таком случае можно воспользоваться унифицированным селектором. В таких селекторах имя элемента не указывается, указываются точка или решетка, как признак класса или идентификатора и имя. Например:
.red{
color:red;
}
#yellow{
color:yellow;
}
Таким образом, какому бы элементу мы не задали class="red" (заголовку, параграфу или ссылке), цвет текста у него станет красным. Одному элементу на странице (любому) мы можем задать id="yellow" и цвет текста этого элемента станет желтым.