1. Национальный аэрокосмический университет
им. Н.Е.Жуковского «ХАИ»
ОСНОВЫ РАБОТЫ В ИНТЕРНЕТ.
ЛЕКЦИЯ №10.
CSS. Каскадные таблицы стилей и
способы их подключения. Классы.
Идентификаторы. Псевдоклассы.
Фурманов Алексей Аркадиевич
2. CSS (англ. Cascading Style Sheets —
каскадные таблицы стилей) — технология
описания внешнего вида документа,
написанного на HTML.
Стиль – это набор визуальных свойств
элементов/тэгов HTML с сопоставленными
ему значениями этих свойств.
Предназначен для изменения графических
свойств элемента.
CSS
4. 1) Внешние таблицы стилей:
Внешняя таблица стилей представляет собой отдельный файл
*.css, в котором описаны все стили и этот файл подключается в
основной файл .html при помощи специальной команды.
Например:
<LINK rel="stylesheet" type="text/css" href="style.css"
media="all"/>
media="all“ = media="screen,print”
----------------------------
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="print.css"
media="print"/>
</head>
<body>
…
Способы подключения CSS - 1
5. 2) Внедрённые таблицы стилей:
Внедрённая таблица стилей представляет собой фрагмент
таблицы стилей, который подключается непосредственно в
основной файл .html
Например:
<html>
<head>
<style type="text/css”>
.mylist
{
color:red;
}
</style>
</head>
<body>
<ol class=“mylist”>
…
Способы подключения CSS - 2
7. 1)Основной атрибут (например: <TD color=red>)
2)Атрибут STYLE (<TD style=“color:red”>)
3)Внедрённые стили (<STYLE >color:red</STYLE>)
4)Внешние стили (<LINK href=“style.css”>)
Например:
<style type="text/css”>
.mylist{color:red;}
</style>
<ol class=“mylist” style=“color:green;” color=“blue” >
<!--Цвет будет BLUE (синий)-->
<ol class=“mylist” style=“color:green;”>
<!--Цвет будет GREEN (зелёный)-->
Приоритеты применения стилей
8. Предназначены для установки одинакового стиля группе однотипных
тэгов.
Например:
<style type="text/css”>
.myredclass {color:red;}
</style>
<table class=“myredclass”> <!-– КРАСНЫЙ -->
<ol class=“myredclass” > <!-– КРАСНЫЙ -->
<div class=“myredclass”> <!-– КРАСНЫЙ -->
-------
<style type="text/css”>
.myredclass {color:red;}
table.myredclass {color:green;}
</style>
<div class=“myredclass”> <!-– КРАСНЫЙ -->
<table class=“myredclass”> <!-– здесь будет ЗЕЛЁНЫЙ :) -->
Классы
9. Предназначены для установки стиля одному конкретному тэгу.
Например:
<style type="text/css”>
#myredtable {color:red;}
</style>
<table id=“myredtable”>
<table id=“myredtable”> <!-– НЕЛЬЗЯ!!! -->
<div id=“myredtable”> <!-– НЕЛЬЗЯ!!! -->
Допускается только один тэг с таким идентификатором!!!
Идентификаторы
10. Предназначены для установки графических характеристик элемента,
которому присущи поведенческие свойства.
Например:
<style type="text/css”>
A.mylink:hover {color:red;}
</style>
<a class=“mylink”>Cсылка при наведении станет красной</a>
Существующие псевдоклассы:
link - непосещенные ссылки
visited - посещенные ссылки
hover - ссылки при наведении на них курсора мыши
active - активные ссылки
focus – элемент с фокусом ввода
Псевдоклассы