Css

Программирование Web
сайтов. СSS.
Долинин А.А., учитель информатики и ИКТ
МБОУ «Уренская СОШ № 1»

CSS
Cascading Styles Sheets - Каскадные Таблицы Стилей.
Внешний вид сайта :
• Размеры элементов
• Позиционирование
• Цветовое оформление
• Фоновые цвета и изображения
• ……

Отличия от HTML.
HTML CSS
текст структурированный форматированный
текст текст
<h><p> специальные тэги СSS
для браузеров,
<table>
для форматирования

Преимущества CSS
• Разграничение кода и оформления
• Разное оформление для разных устройств
• Расширенные по сравнению с HTML способы оформления
элементов
• Ускорение загрузки сайта
• Единое стилевое оформление множества документов
• Группировка различных HTML тэгов
• Централизованное хранение

Базовый синтаксис CSS
• Селектор { свойство1: значение; свойство2: значение; }
h1 { color: red; font-weight: normal; }
• Не чувствителен к регистру, переносу строк, пробелам,
табуляции
Nortel Networks Confidential

• В отдельном файле – связанный стиль
• Глобальные стили
• Внутренние стили
Способы добавления стилей на
страницу

Связанный стиль
<html>
<head>
<title>Связанный стиль</title>
<link rel="stylesheet"
type="text/css"
href="style/style.css" />
</head>
<body>
….
</body>
</html>

Файл сss
H1 {
color: red;
font-size: 200%;
font-family: Arial;
text-align: center;
}
P {
padding-left: 20px;
}

Преимущества связанного стиля
• Главный принцип – разделение кода и оформления
• Управление отображением множеством документов
Изменения во внешней
таблице стилей влияют на
все HTML документы
Ссылки HTML документов на ту же самую таблицу стилей
style.css

Глобальные стили
<html>
<head>
<title>Глобальные стили</title>
<style type="text/css">
H1 {
font-size: 120%;
font-family: Verdana;
color: #333366;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

Внутренние стили
<html>
<head>
<title>Внутренние стили</title>
</head>
<body>
<p
style="font-size: 120%;
font-family: monospace;
color: #cd66cc">
Пример текста
</p>
</body>
</html>

Иерархия стилей
Внутренний
Глобальный
Связанный

Пример иерархии.
<html>
<head>
<title>Иерархия</title>
H1 {
font-size: 120%;
font-family: Arial;
color: green;
}
</style>
</head>
<body>
<h1 style="font-size: 36px; font-family: Times; color: red">
Заголовок 1</h1>
<h1>Заголовок 2</h1>
</body>
</html>

Значение стилевых свойств
• Строка
• Число
• Проценты
• Размер
• Цвет
• Адрес
• Ключевое слово

Строки, числа, проценты
• Строки
'Гостиница "Турист"'
"Гостиница 'Турист' "
"Гостиница "Турист" "
• Числа
p { font-weight: 600; /* Жирное начертание */
line-height: 1.2; /* Межстрочный интервал */ }
• Проценты
TABLE { width: 100%; /* Ширина таблицы в процентах */ }

Размеры. Относительные единицы.
Единица Описание
em
Размер шрифта
текущего
элемента
ex
Высота символа
x
px Пиксел
% Процент
<html>
<head>
<title>Относительные единицы</title>
H1 { font-size: 30px; }
P { font-size: 1.5em; }
</style>
</head>
<body>
<h1>Заголовок – 30 пикселов</h1>
<p>Размер текста 1.5 em</p>
</body>
</html>

Размеры. Абсолютные единицы.
Единица Описание
in
Дюйм (1 дюйм равен
2,54 см)
cm Сантиметр
mm Миллиметр
pt
Пункт (1 пункт равен 1/72
дюйма)
pc
Пика (1 пика равна 12
пунктам)
<html>
<head>
<title>Абсолютные единицы</title>
H1 { font-size: 24pt; }
P { margin-left: 30mm; }
</style>
</head>
<body>
<h1>Заголовок - 24 пункта</h1>
<p>Сдвиг текста вправо на 30
миллиметров
</p>
</body>
</html>

Цвет
• по шестнадцатеричному значению
#rrggbb или #rgb : #ffee0 или #fe0
• по названию
white, silver, black, green …..
• в формате RGB
rgb(255, 0, 0) или rgb(100%, 20%, 20%).

Имя Цвет Код Описание
white #ffffff или #fff Белый
silver #c0c0c0 Серый
gray #808080 Темно-серый
black #000000 или #000 Черный
maroon #800000 Темно-красный
red #ff0000 или #f00 Красный
orange #ffa500 Оранжевый
yellow #ffff00 или #ff0 Желтый
olive #808000 Оливковый
lime #00ff00 или #0f0 Светло-зеленый
green #008000 Зеленый
aqua #00ffff или #0ff Голубой
blue #0000ff или #00f Синий
navy #000080 Темно-синий
teal #008080 Сине-зеленый
fuchsia #ff00ff или #f0f Розовый
purple #800080 Фиолетовый

<html>
<head>
<title>Цвета</title>
BODY { background-color: #3366CC; /* Цвет фона страницы */ }
H1 { background-color: RGB(249, 201, 16);
/* Цвет фона под заголовком */ }
P { background-color: maroon; /* Цвет фона под текстом абзаца */
color: white; /* Цвет текста */ }
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<p>Абзац темно красного цвета на голубом фоне.</p>
</body>
</html>

• URI (Uniform Resource Identifier) – унифицированный
идентификатор ресурсов
Указание пути к файлу
url(‘Относительный или абсолютный адрес файла’)
Адреса

Адреса
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=Windows-1251">
<title>Добавление фона</title>
body { background:
url('http://webimg.ru/images/156_1.png') no-repeat; }
div { background: url(images/warning.png) no-
repeat; padding-left: 140px; }
</style>
</head>
<body>
<div>Внимание, запрашиваемая страница не
найдена!</div>
</body>
</html>

Ключевые слова
• Ключевые слова пишутся без кавычек
Правильно: P { text-align: right; }
Неверно: P { text-align: "right"; }

Селекторы. Теги
• Любой тэг HTML для которого определены правила
форматирования - цвет, фон, размер и т.д.
Тег { свойство1: значение; свойство2: значение; ... }

Селекторы. Классы.
• Для определения стиля отдельного элемента или задать
разные стили для одного тэга
Тег.Имя класса { свойство1: значение;
свойство2: значение; ... }
• Имена классов начинаются с символа,
• Могу содержать ‘-’ и ‘_’
• К тэгу добавляется параметр class = “Имя класса”

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Классы</title>
P { /* Обычный абзац */
text-align: justify; /* Выравнивание текста по ширине */ }
P.cite { /* Абзац с классом cite */
color: navy; /* Цвет текста */
margin-left: 20px; /* Отступ слева */
border-left: 1px solid navy; /* Граница слева от текста */
padding-left: 15px; /* Расстояние от линии до текста */ }
</style>
</head>

<body>
<p>Это обычный абзац с
селектором-тэгом.</p>
<p class="cite">Это абзац с
применением класса.</p>
</body>
</html>

Селекторы.Классы.
• Без указания конкретного тэга
.Имя класса { свойство1: значение;
При такой записи класс можно применять к любому тэгу

<html>
<head>
<title>Классы</title>
.gost {
color: green; /* Цвет текста */
font-weight: bold; /* Жирное начертание */
}
.term {
border-bottom: 1px dashed red; /* Подчеркивание под текстом */
}
</style>
</head>

<body>
<p>Абзац,<span
class="gost">зеленый текст класса
‘gost’</span>,а это обычный текст,
<b class="term">жирный с
подчеркиванием</b>, конец абзаца.
</p>
</body>
</html>

Селекторы.Классы
• Одновременное использование нескольких классов
• Перечисляются в параметре class через пробел
• Если есть одинаковые стилевые свойства, то берется
свойство у класса, который указан в коде ниже

<html>
<head>
<title>Облако тегов</title>
.level1 { font-size: 1em; }
.level2 { font-size: 1.5em; }
.level3 { font-size: 2em; }
A.tag {
color: #468be1; /* Цвет ссылок */
}
</style>
</head>

<body>
<div>
<a href="/term/1" class="tag
level3">Paint.NET</a>
level3">Photoshop</a>
level2">цвет</a>
level1 level2">фон</a>
level1">палитра</a>
</div>
</body>
</html>

Селекторы.Идентификаторы.
• ID селектор – уникальное имя элемента
#Имя идентификатора { свойство1: значение;
• Идентификаторы начинаются с символа,
• Могу содержать ‘-’ и ‘_’
• К тэгу добавляется параметр id = ”Идентификатор”
• Идентификаторы должны быть уникальны – встречаться в
документе один раз

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=Windows-
1251">
<title>Идентификаторы</title>
#c1-2 { color : red }
h1,h2 { color: navy }
</style>
</head> <body>
<h1 id="c1">Глава 1</h1>
<h2 id="c1-1">Глава 1.1</h2>
<h2 id="c1-2">Глава 1.2</h2>
<h1 id="c2">Глава 2</h1>
</body>
</html>

Селекторы.Идентификаторы.
• Идентификаторы можно применять к конкретному тэгу
Тег#Имя идентификатора { свойство1: значение;

<html>
<head>
<title>Идентификаторы</title>
P { color: green; /* Зеленый цвет текста */
font-style: italic; /* Курсивное начертание текста */ }
P#opa {
color: red; /* Красный цвет текста */
border: 1px solid #666; /* Параметры рамки */
background: #eee; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>

<body>
<p>Обычный параграф</p>
<p id="opa">
Параграф необычный</p>
</body>
</html>

Контекстные селекторы
• Для вложенных тэгов
• Можно задать стиль для отдельного тэга и для тэга,
расположенного внутри другого
Тег1 Тег2 { ... }
• Стиль будет применен к Тег2, когда он расположен внутри Тэг1
<Тег1>
<Тег2> ... </Тег2>
</Тег1>

<html>
<head>
<title>Контекстные селекторы</title>
P B {
font-family: Times, serif; /* Семейство шрифта */
font-weight: bold; /* Жирное начертание */
color: navy; /* Синий цвет текста */
}
</style>
</head>

<body>
<div><b>
Жирное начертание текста
</b></div>
<p><b>
Одновременно жирное
начертание текста
и выделенное цветом</b></p>
</body>
</html>

Контекстные селекторы.
Более широкие возможности контекстные селекторы дают
при использовании идентификаторов и классов. Это позволяет
устанавливать стиль только для того элемента, который
располагается внутри определенного класса.
Легко управлять стилем одинаковых элементов,
изображений и ссылок например, оформление которых
различается в разных областях страницы.

<html> <head>
<title>Контекстные селекторы</title>
A { color: green; /* Зеленый цвет текста для всех ссылок */ }
.menu {
padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
background: #fc0; /* Цвет фона */
}
.menu A {
color: navy; /* Темно-синий цвет ссылок */
}
</style> </head>

<body>
<div class="menu">
<a href="1.html">Русская кухня</a> |
<a href="2.html">Украинская кухня</a> |
<a href="3.html">Кавказская кухня</a>
</div>
<p><a href="text.html">Другие материалы
по теме</a></p>
</body>
</html>

Селекторы атрибутов.
Атрибут СSS
Простой
селектор
атрибута
Q[title] {
color: maroon; /* Цвет текста */
}
Атрибут со
значением
A[target="_blank"] {
background: url(images/blank.png) 0 6px no-repeat;
/* Параметры фонового рисунка */
padding-left: 15px; /* Смещаем текст вправо */
}

Атрибут СSS
Значение
атрибута
начинается с
определенного
текста
A[href^="http://"] {
font-weight: bold /* Жирное начертание */
}
Значение
атрибута
заканчивается
определенным
текстом
A[href$=".ru"] { /* Если ссылка заканчивается
на .ru */
background: url(images/ru.png) no-repeat 0
6px; /* Добавляем фоновый рисунок */
padding-left: 12px; /* Смещаем текст вправо
*/
}

Атрибут СSS
Значение
атрибута
содержит
указанный текст
[href*="htmlbook"] {
background: yellow; /* Желтый цвет фона */
}

<body>
<q title="title">
Текст в кавычках
</q>
<br><br>
<a href="link2" target="_blank">
Ссылка в новом окне</a>
<br><br>
<a href="http://example.com" >Внешняя ссылка</a>
<br><br>
<a href="http://www.yandex.ru">В домене ‘ru’</a>
<br><br>
<a href="http://www.htmlbook.ru/html/">Ссылка на htmlbook</a>
</body>

Селекторы.Псевдоклассы.
• Определяют динамическое состояние элемента, которое
изменяется со временем или с помощью действий
пользователей
• Пример: текстовая ссылка, меняющая цвет при наведении
мышки
Селектор:Псевдокласс { Описание правил стиля }

Псевдокласс Описание
active
Происходит при активации
пользователем элемента.
Например, ссылка становится
активной, если навести на нее
курсор и щелкнуть мышкой.
link
Применяется к непосещенным
ссылкам, т.е. таким ссылкам, на
которые пользователь еще не
нажимал. Браузер некоторое время
сохраняет историю посещений,
поэтому ссылка может быть
помечена как посещенная хотя бы
потому, что по ней был
зафиксирован переход раньше.

focus
Применяется к элементу при получении им
фокуса. Например, для текстового поля
формы получение фокуса означает, что
курсор установлен в поле, и с помощью
клавиатуры можно вводить в него текст.
hover
Активизируется, когда курсор мыши
находится в пределах элемента, но щелчка
по нему не происходит.
visited
Применяется к посещенным ссылкам.
Обычно такая ссылка меняет свой цвет по
умолчанию на фиолетовый, но с помощью
стилей цвет и другие параметры можно
задать самостоятельно

<html>
<head>
<title>Псевдоклассы</title>
A:link { color: #036; /* Цвет непосещенных ссылок */ }
A:visited { color: #606; /* Цвет посещенных ссылок */ }
A:hover {
color: #f00; /* Цвет ссылок при наведении на них курсора мыши */ }
A:active {
color: #ff0; /* Цвет активных ссылок */
}
</style>
</head>

<body>
<p>
<a href="1.html">
Ссылка 1</a> |
<a href="2.html">
Ссылка 2</a> |
<a href="3.html">
Ссылка 3</a></p>
</body>
</html>

Группирование селекторов.
H1,H2,H3 { font-family: Arial, Helvetica, sans-serif; }
H1 {
font-size: 160%;
color: #003;
}
H2 {
font-size: 135%;
color: #333;
}
H3 {
font-size: 120%;
color: #900;
}
H1 { font-family: Arial, Helvetica, sans-serif;
font-size: 160%;
color: #003;
}
font-size: 135%;
color: #333;
}
font-size: 120%;
color: #900;
}

Наследование селекторов
• Наследование – перенос правил форматирования для элементов,
находящихся внутри других
table { color: red;
border: 3px dashed black;
}
color – наследуется td;
border – не наследуется
Для того, чтобы определить,
наследуется свойство или нет, см. справочник:
http://htmlbook.ru/css

Группирование элементов - span
• Для элементов уровня блока
<p>Кто рано ложится и рано встаёт, тот будет
<span class="benefit">здоровым</span>,
<span class="benefit">богатым</span>
и <span class="benefit">умным</span>.
</p>
В CSS: span.benefit {color:red;}

Группирование элементов - div
• Для группирования одного и
более блок-элементов
<div id="winter">
В CSS:
<ul><li>Лыжи</li>
<li>Коньки</li>
<li>Сноуборды</li>
</ul> </div>
<div id="summer">
<ul> <li>Велосипеды</li>
<li>Ролики</li>
<li>Мячи</li>
</ul> </div>
#winter {
background:#0DF;
}
#summer {
background:#FA0;
}

Цвет и фон.
• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

Цвет и фон. Color
h1 {color: red}

Цвет и фон. background-color
body { background-color: #FFCC66; }
h1 { color: #990000;
background-color: #FC9804; }

Цвет и фон. background-image
body { background-color: #FFCC66;
background-image: url("butterfly.gif");
}

Цвет и фон. background-repeat
• repeat-x
• repeat-y
• repeat
• no-repeat
body
{ background-color: #FFCC66;
background-image:
url("butterfly.gif");
background-repeat: no-repeat; }

Цвет и фон. background-attachment
• scroll
• fixed
body
background-image:
background-repeat: no-repeat;
background-attachement: fixed;
}

Цвет и фон. background-position
• 2cm 2cm
• 50% 25%
• top right
Body
background-image:
background-position: right bottom;
}

Background-сокращенная запись
[background-color] | [background-image] |
[background-repeat] | [background-attachment] |
[background-position]
• background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
• background: #FFCC66 url("butterfly.gif") no-repeat;

Шрифт.
• font-family
• font-style
• font-weight
• font-size
• font

Шрифт.font-family
h1 {font-family: arial,
verdana,
sans-serif;}
h2 {font-family:"Times New Roman",
serif;}

Шрифт.font-style
h1 {font-family: arial,
verdana,
sans-serif;}
h2 {font-family:
"Times New Roman",
serif;
font-style: italic;}

Шрифт.font-weight
• normal
• bold
• 100-900
td {font-family: arial,
verdana,
sans-serif;
font-weight: bold;}

Шрифт.font-size
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

font – сокращенная запись
font-style | font-variant | font-weight | font-size | font-family
p { font: italic bold 30px arial, sans-serif; }

Текст.
• text-align
th { text-align: right; }
td { text-align: center; }
p { text-align: justify; }
Остальные параметры
для текста см. в
справочнике

Боксовая модель.
top
bottom
left right
margin
border
padding
content
margin
border
padding
content

Блочная модель.

Поля.
• margin – расстояние от каждой стороны элемента до соседних
элементов (краев документа)
body { margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px; }
или
body { margin: 100px 40px 10px 70px; }

Поля.
body { margin: 100px 40px 10px 70px; }
p { margin: 5px 50px 5px 50px; }

Заполнение.
• padding – внутреннее
расстояние между содержимым
элемента и его рамкой
h1 { background: yellow;
padding: 20px 20px 20px 80px;
}
h2 { background: orange;
padding-left:120px; }

Рамки.
• border-width
• border-color
• border-style
• border

Рамки
h1 { border-color: red green blue orange
border-style: solid;
border-width: thick;
}

Высота и ширина
• width
• height
div.box { height: 500px;
width: 200px;
border: 1px solid black;
background: orange; }

Позиционирование элементов.

Позиционирование элементов.
Расположить бокс в системе координат где угодно
h1 { position:absolute;
top: 100px;
left: 200px; }

Типы позиционирования.
• Абсолютное
– Элемент не оставляет после позиционирования пустого
пространства
– position: absolute;
• Относительное
– Оставляет пустое пространство после позиционирования,
положение рассчитывается относительно оригинального
положения элемента
– position: relative

Абсолютное
#box1 { position:absolute;
top: 50px;
left: 50px; }
top: 50px;
right: 50px; }
bottom: 50px;
right: 50px; }
bottom: 50px;
left: 50px; }

Относительное
#dog1 { position:relative;
left: 350px;
bottom: 150px; }
left: 150px;
bottom: 500px; }
left: 50px;
bottom: 700px; }
http://www.html.net/tutorials/css/lesson14_ex1.php

Слои. z-индекс
• z-index – элемент с большим номером перекрывает элемент с
меньшим номером.

Слои. z-индекс
#ten_of_diamonds {
position: absolute;
left: 100px; top: 100px;
z-index: 1; }
#jack_of_diamonds {
position: absolute;
left: 115px; top: 115px;
z-index: 2; }
…..

Приложение. Полезные источники в
интернете.
Таблица цветов : http://www.stm.dp.ua/web-design/color-html.php
Таблица шрифтов: http://www.ampsoft.net/webdesign-
l/WindowsMacFonts.html
Примеры готовых разметок:
http://htmlbook.ru/layout

Css

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to Css

Similar to Css (20)

More from Andrey Dolinin

More from Andrey Dolinin (20)

Css