СОДЕРЖАНИЕ

Селекторы типа id и class
Псевдо-элементы
Псевдо-классы
Другие свойства и значения в CSS

ГЛОБАЛЬНЫЙ АТРИБУТ ID В HTML

В HTML5 глобальный атрибут может быть использован

СЕЛЕКТОР ТИПА „ID”

Селектор id использует атрибут id определенного HTML-тега, с целью

РЕЗУЛЬТАТ ПРИМЕРА

СЕЛЕКТОР ТИПА „CLASS”

Селектор class использует глобальный HTML-атрибут - class
Селектор „class”

РЕЗУЛЬТАТ ПРИМЕРА

СЕЛЕКТОР ТИПА „CLASS”

Есть возможность указания что конкретные HTML-элементы будут затронуты каким-то

РЕЗУЛЬТАТ ПРИМЕРА

ОПРЕДЕЛЕНИЕ ДВУХ КЛАССОВ ДЛЯ ОДНОГО HTML ЭЛЕМЕНТА

Для определения двух или более

РЕЗУЛЬТАТ

ПСЕВДО-КЛАССЫ В CSS

Псевдо-класс используется для определения особого состояния какого-то элемента
Используется для:

ПРИМЕР ПСЕВДО-КЛАССОВ

Разное представление ссылок
Пример:
body { background-image:url(../imagini/fluturi.png);
padding-top:10px;
padding-left:10px;}
h1 { text-align:center;
color:purple;
text-transform: uppercase;
text-shadow: 2px 2px 3px #FF0000;}
/*

ПОРЯДОК ОПРЕДЕЛЕНИЯ

Тогда когда определяются все события, при помощи псевдо-элементов для ссылок,

Файл .html

Бабочки...

Самой многочисленной … условиях.

РЕЗУЛЬТАТ ПРИМЕРА

выбранная ссылка

наведенный курсор на ссылку

не посещенная ссылка

ПСЕВДО-КЛАССЫ И КЛАССЫ CSS

Псевдо-классы и классы css можно комбинировать
Пример (mov):
a.evidentiat:hover {
color:

РЕЗУЛЬТАТ ПРИМЕРА

ПСЕВДО-КЛАСС „FIRST-CHILD” И „LAST-CHILD”

Псевдо-класс first-child позволяет выбрать первый элемент-потомок
А псевдо-класс last-child — позволяет выбрать

РЕЗУЛЬТАТ

ПСЕВДОКЛАСС :NTH-CHILD

Псевдо-классы из предыдущего примера относятся к семейству псевдо-классов, помогающих выбирать элементы по

Псевдокласс  :focus

Псевдо-класс :focus позволяет выбрать элемент, который в данный момент в фокусе
Например, текстовое поле, в которое

ДРУГИЕ ПСЕВДОКЛАССЫ

Список и описание других псевдо-классов смотрите по ссылке: http://www.w3schools.com/css/css_pseudo_elements.asp

УСЛОВНЫЕ СЕЛЕКТОРЫ

… или селекторы атрибутов - чаще всего такие селекторы

ПРИМЕР ОПРЕДЕЛЕНИЯ СЕЛЕКТОРОВ-АТРИБУТОВ

РЕЗУЛЬТАТ

ПСЕВДО-ЭЛЕМЕНТЫ CSS

Псевдо-элемент CSS используется для определения стиля определенной части элемента
Псевдо-элемент может

ПСЕВДО-ЭЛЕМЕНТ „::first-line”

Используется для определения стиля первой строки текста
Может быть использован и

ПРИМЕР ПСЕВДО-ЭЛЕМЕНТА „::first-line”

p::first-line
{ color: #9922cc;
font-size: 16px;
font-weight: bold;
font-variant: small-caps;
}
Результат:

ПСЕВДО-ЭЛЕМЕНТ „::first-letter”

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

ПРИМЕР ПСЕВДО-ЭЛЕМЕНТА „::first-letter”

p::first-letter
{
color: #ff11ee;
font-size: 40px;
}
Результат (многочисленного применения псевдоэлементов):

ПСЕВДО-ЭЛЕМЕНТЫ И КЛАССЫ CSS

Пример:
p.prim::first-letter
{
color: #ff11ee;
font-size: 40px;
}
Часть .html файла:
…

Самой многочисленной

РЕЗУЛЬТАТ ПРИМЕРА

ПСЕВДО-ЭЛЕМЕНТЫ „::before” и „::after”

„::before” используется для вставки какого-то контента перед элементом
„::after”

РЕЗУЛЬТАТ ПРИМЕРА

ПСЕВДО-ЭЛЕМЕНТ ::selection

Псевдо-элемент ::selection выделяет часть HTML-элемента, ту часть которую выделяет пользователь на странице

CSS СВОЙСТВА ДЛЯ ССЫЛОК

Ссылки можно стилизовать разными способами
Используя псевдо-классы (a:link, a:visited,

ОПРЕДЕЛЕНИЕ ЦВЕТА ФОНА И ТЕКСТА ССЫЛКИ
a:hover { background-color:#7700aa;
color:white;}
a:active { background-color:#aa7700;
color:white;}

ОПРЕДЕЛЕНИЕ СТИЛЕЙ ДЛЯ СПИСКОВ

Свойство “list-style-type” используется для определения маркировки списка
Свойство „list-style-image”

РЕЗУЛЬТАТ ПРИМЕРА

Другие значения для свойства „list-style-type”: disc, armenian, circle, cjk-ideographic, decimal,

СТИЛИ ДЛЯ ГРАНИЦ

Используя свойство „border” можно определить стиль, толщину и цвет

ПРИМЕР ДЛЯ СОЙСТВА «BORDER»

body{background: radial-gradient(pink, white, pink);}
p.none {border-style: none;}
p.dotted {border-style: dotted;

РЕЗУЛЬТАТ ПРИМЕРА

СОКРАЩЕННАЯ ФОРМА СВОЙСТВА „BORDER”

Сокращенная форма, „border”, может быть использована если соблюдается

СВОЙСТВА ДЛЯ ТАБЛИЦ И ЕЕ ЭЛЕМЕНТОВ

Свойство „border” используется для определения стиля

СВОЙСТВА ДЛЯ ТАБЛИЦ И ЕЕ ЭЛЕМЕНТОВ

Свойство „width” и „height” используется для

РЕЗУЛЬТАТ ПРИМЕРА ДЛЯ СВОЙСТВ „width” и „height”

СВОЙСТВА ДЛЯ ТАБЛИЦ И ЕЕ ЭЛЕМЕНТОВ

Выравнивание текста в ячейках таблицы осуществляется

РЕЗУЛЬТАТ ПРМЕРА ДЛЯ СВОЙСТВ „text-align” , „vertical-align”, „padding”

ОПРЕДЕЛЕНИЕ ПРОСТРАНСТВА ОТ СОДЕРЖИМОГО ДО ГРАНИЦЫ

Свойства padding определяют пространство между контентом

ПРИМЕР

p {     padding-top: 25px;     padding-right: 50px;     padding-bottom: 25px;     padding-left: 50px; }
Или можно определить пространство для верхней и нижней стороны, вместе и

СВОЙСТВО „DISPLAY”

Свойство „display” используется для определения типа контейнера для вывода HTML-элемента
Данное

ПРИМЕР ПРИМЕНЕНИЯ СВОЙСТВА

ПРИМЕР ПРИМЕНЕНИЯ DISPLAY. СТИЛИ

.meniu{ width: 100%; height: 50px; margin: 5px auto;

ДРУГИЕ ЗНАЧЕНИЯ ДЛЯ СВОЙСТВА „DISPLAY”

display:table  задает элементу тип таблица. Особенности табличных элементов:
можно