Использование классов css

Цель урока: знакомство с понятием класса в css. Рассмотрены примеры использования классов

Содержание:

Создание и использование классов CSS
Универсальные классы или CSS селектор ID
Каскадирование css стилей
CSS наследование стилей

Создание и использование классов CSS

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

.имя_класса{
  свойство1: значение;
  свойство2: значение;
}

Подробнее:

Чтобы добавить класс, необходимо:

1.

Для элементов (тегов) к которым будут применены свойства класса, нужно прописать атрибут class с придуманным названием класса в качестве значения атрибута:
<h1 class="my_class">В моей душе</h1>
<h1 class="my_class">В моей душе</h1>

2.

В отельном стилевом файле (style.css) или в области head текущего документа прописать свойства созданного класса

Идентификатор класса всегда начинается с точки (.)
h1.my_class {
	color: RGB(215,40,40); 
	text-align: center
	}
h1.my_class { color: RGB(215,40,40); text-align: center }
В данном примере класс my_class будет «привязан» именно к тегу h1, т.е. для других тегов с аналогичным классом свойства работать не будут.

Можно написать без привязки к конкретному тегу:
.my_class {
	color: RGB(215,40,40); 
	text-align: center
	}
.my_class { color: RGB(215,40,40); text-align: center }
В данном случае класс будет применен к любым тегом данного класса

Пример: Создать два класса с названиями red1 и class1. Один класс применить для заголовков h1, другой класс применить для тегов p

Выполнение:

<html>
<head>
<style type="text/css">

h1.red1 {
	color: RGB(215,40,40); 
	text-align: center
	}
p.class1{color:#3366FF; font-family:Arial}

</style>
</head>
<body>
<h1 class="red1">В моей душе</h1>
<p class="class1"> 
Я хочу быть ребенком: наивным и смелым,<br>
Ничего не бояться и верить в добро.<br>
Я бы снова писала по черному белым:<br>
Два плюс два - ну, четыре, конечно равно!
</p>
<p> Конец </p>

Результат:

В моей душе

Я хочу быть ребенком: наивным и смелым,
Ничего не бояться и верить в добро.
Я бы снова писала по черному белым:
Два плюс два — ну, четыре, конечно равно!

Конец

Задание: скопируйте код страницы. Измените страницу меню сайта так, чтобы одни пункты меню были темного цвета (класс .dark), а другие – светлого ( класс .light).
Для гиперссылки добавить свойство: text-decoration:none;

<html>
<head>
	<title> Классы </title>
<style type="text/css">
...
</style>
</head>
<body> 
<center><h3> Главное меню </h3></center>
<ul>
	<a href="#" class="dark"><li>Введение</li></a>
	<a href="#" class="dark"><li>Глава1</li></a>
	<a href="#" class="dark"><li>Глава2</li></a>
	<a href="#" class="dark"><li>Заключение</li></a>
</ul>
<center><h3> Дополнительное меню </h3></center>
<ul>
	<a href="#" class="light"><li>Тест</li></a>
	<a href="#" class="light"><li>Глоссарий</li></a>
	<a href="#" class="light"><li>Литература</li></a>
</ul>
</body>
</html>

Примеры использования классов с тегами и просто классов:

Универсальные классы или CSS селектор ID

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

Синтаксис:

#имя_класса{
  свойство1: значение;
  свойство2: значение;
}

Подробнее:

1.

Необходимо задать атрибут id с уникальным значением для того элемента, к которому будет применен универсальный класс:
<h2 id="steel">Заголовок</h2>
<h2 id="steel">Заголовок</h2>
Значение атрибута id придумывается самостоятельно и должно быть единственным таким значением id на всей веб-странице.

2.

В стилевом файле (style.css) либо в области head текущей веб-страницы задается стиль для селектора id:
<style type="text/css">
#steel {
  color: RGB(155,180,190);
  font-weight:bold
}
</style>
<style type="text/css"> #steel { color: RGB(155,180,190); font-weight:bold } </style>
В стилях опознавательным знаком для универсального селектора является символ #

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

Выполнение:

<html>
<head>
<style type="text/css">

#steel {
  color: RGB(155,180,190); /* изменили цвет в системе RGB */
  font-weight:bold /* установили жирный шрифт */
}

</style>
</head>
<body>
<h2 id="steel">Заголовок со стилем</h2>
<h2>Заголовок без стиля</h2>
</body>
</html>

Результат:

Заголовок со стилем

Заголовок без стиля

Стиль универсального селектора также может быть определен для конкретного тега:

h2#steel {
  color: RGB(155,180,190); /* изменили цвет в системе RGB */
  font-weight:bold /* установили жирный шрифт */
}

В таком случае стиль будет влиять только на селекторы h2, другие теги с атрибутом id="steel" оформлены стилем не будут.

Задание: Задайте уникальный стиль для главного заголовка сайта. Опишите стиль в отдельном файле style.css и подключите стилевой файл к странице. В качестве свойств созданного стиля желательно использовать следующие:

Выравнивание текста:

{
text-align:center|right|left|justify;
}

Оформление текста:

{
text-decoration:overline|line-through|underline|blink;
}

Преобразование текста:

{
text-transform:uppercase|lowercase|capitalize;
}

Стиль шрифта:

{
font-style:normal|italic|oblique;
}

Размер шрифта:

{
font-size:30px|2.5em;
}

Каскадирование css стилей

Каскадирование css стилей означает преемственность применения того или иного стиля в зависимости от используемого метода подключения css. Рассмотрим на примере:

На примере видно, что приоритетным является метод встраивания использования стилей. Следующим по приоритету следует метод вложения и только потом — метод связывания (стиль в отдельном файле)

Важно: В случае, если пользовательская таблица стилей содержит !important, то это правило имеет приоритет над любым правилом, описанным в таблице стилей:

P { font-size: 24pt!important; }

Пример: создать правило для дочернего класса .children, исходя из того, что тег данного класса вложен в родительский тек с классом .parent

Тег с классом .children будет иметь цвет #666, а тег с классом .parent — #999. Однако, если мы уберем свойство color: #666 у селектора .parent .children, то цвет дочернего элемента наследуется от родителя и станет равным #999. В этом заключается особенность наследования.

CSS наследование стилей

Вложенность тегов или их иерархия распространяется и на наследование стилей. Рассмотрим на примере:

К оглавлению