Лекция 10. Основы CSS.

Национальный аэрокосмический университет
им. Н.Е.Жуковского «ХАИ»
ОСНОВЫ РАБОТЫ В ИНТЕРНЕТ.
ЛЕКЦИЯ №10.
CSS. Каскадные таблицы стилей и
способы их подключения. Классы.
Идентификаторы. Псевдоклассы.
Фурманов Алексей Аркадиевич

CSS (англ. Cascading Style Sheets —
каскадные таблицы стилей) — технология
описания внешнего вида документа,
написанного на HTML.
Стиль – это набор визуальных свойств
элементов/тэгов HTML с сопоставленными
ему значениями этих свойств.
Предназначен для изменения графических
свойств элемента.
CSS

селектор[: псевдокласс] [, селектор[: псевдокласс]] […n]
{
свойство :значение [ значение] […n] ;
[свойство :значение [ значение] […n] ;]
[свойство :значение [ значение] […n] ;][…n]
}
селектор = тэг|[тэг].имя_класса|#идентификатор_элемента
Например:
table.mytable {
border: 1px solid black;
}
в HTML:
<TABLE class=“mytable”><TR><TD>…
Структура стиля

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

2) Внедрённые таблицы стилей:
Внедрённая таблица стилей представляет собой фрагмент
таблицы стилей, который подключается непосредственно в
основной файл .html
Например:
<html>
<head>
<style type="text/css”>
.mylist
{
color:red;
}
</style>
</head>
<body>
<ol class=“mylist”>
…

3)При помощи атрибута STYLE:
Например:
<body>
<ol style=“color:red;backgroud-color:black;”>
…

1)Основной атрибут (например: <TD color=red>)
2)Атрибут STYLE (<TD style=“color:red”>)
3)Внедрённые стили (<STYLE >color:red</STYLE>)
4)Внешние стили (<LINK href=“style.css”>)
Например:
.mylist{color:red;}
</style>
<ol class=“mylist” style=“color:green;” color=“blue” >

<ol class=“mylist” style=“color:green;”>

Приоритеты применения стилей

Предназначены для установки одинакового стиля группе однотипных
тэгов.
Например:
.myredclass {color:red;}
</style>
<table class=“myredclass”> <!-– КРАСНЫЙ -->
<ol class=“myredclass” > <!-– КРАСНЫЙ -->
<div class=“myredclass”> <!-– КРАСНЫЙ -->
-------
.myredclass {color:red;}
table.myredclass {color:green;}
</style>
<div class=“myredclass”> <!-– КРАСНЫЙ -->
<table class=“myredclass”> <!-– здесь будет ЗЕЛЁНЫЙ :) -->
Классы

Предназначены для установки стиля одному конкретному тэгу.
Например:
#myredtable {color:red;}
</style>
<table id=“myredtable”>
<table id=“myredtable”> <!-– НЕЛЬЗЯ!!! -->
<div id=“myredtable”> <!-– НЕЛЬЗЯ!!! -->
Допускается только один тэг с таким идентификатором!!!
Идентификаторы

Предназначены для установки графических характеристик элемента,
которому присущи поведенческие свойства.
Например:
A.mylink:hover {color:red;}
</style>
<a class=“mylink”>Cсылка при наведении станет красной</a>
Существующие псевдоклассы:
link - непосещенные ссылки
visited - посещенные ссылки
hover - ссылки при наведении на них курсора мыши
active - активные ссылки
focus – элемент с фокусом ввода
Псевдоклассы

Предназначены для задания стиля вложенным тэгам в иерархии тэгов
документа.
Например:
div.mydiv table {border:2px dashed red;}
div.mydiv table td {color:green;}
</style>

<table><tr><td>test</td><tr></table>
<div class=“mydiv”>

<table><tr><td>test</td><tr></table>
</div>
Контекстные селекторы

Лекция 10. Основы CSS.

More Related Content

Similar to Лекция 10. Основы CSS.

More from Alexey Furmanov

Лекция 10. Основы CSS.