CSS урок 2. Использование классов

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

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

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

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

Подробнее:

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

1.

Для элементов (тегов) к которым будут применены свойства класса, нужно прописать атрибут class с придуманным названием класса в качестве значения атрибута:

<h1 class="red1">В моей душе</h1>
2.

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

Идентификатор класса всегда начинается с точки (.)

h1.red1 {
	color: RGB(215,40,40); 
	text-align: center
	}

В данном примере класс red1 будет «привязан» именно к тегу h1, т.е. для других тегов с аналогичным классом свойства работать не будут.

Можно написать без привязки к конкретному тегу:

.red1 {
	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

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

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

Синтаксис:

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

Подробнее:

1.

Необходимо задать атрибут id с уникальным значением для того элемента, к которому будет применен универсальный класс:

<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>

В стилях опознавательным знаком для универсального селектора является символ #

Пример: для первого заголовка 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;
}

оформление текста css
Преобразование текста:

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

свойство css text-transform
Стиль шрифта:

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

свойство css font-style
Размер шрифта:

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

css размер шрифта


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

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

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

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


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

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

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

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

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*


Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить