Iamandi Veronica

ВВЕДЕНИЕ В CSS
Iamandi Veronica
Базовый синтаксис CSS
селектор {
свойство1: значение;
свойство2: значение;
}
селектор — некоторое имя стиля, для которого

добавляются параметры форматирования
Пример использования стилей
<html>
<head><title>Заголовки</title>
<style>
h1 { color: #a6780a; font-weight: normal; }
h2 { color: olive; border-bottom: 2px solid black; }
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
Способы добавления стилей на страницу
1. Внутристрочная стилевая информация.
2. Использование элемента STYLE в разделе HEAD
HTML–документа.
3. Определение внешних стилевых таблиц.
Внутристрочная стилевая информация.
Атрибут style
<P style="color: green; font-weight: bold; font-family:
Arial;">
Этот текст имеет зеленый цвет и выводится жирным.
Шрифт Arial.
</P>
________________________________
Этот текст имеет зеленый цвет и выводится
жирным. Шрифт Arial.
Использование тэга style в разделе HEAD
HTML–документа.
<html><head><title>…<title>
<style>
p {color: green; font-weight: bold; font-family: Arial;}
</style>
</head>
<body>
<p>Этот текст имеет зеленый цвет и выводится жирным. Шрифт
Arial. </p>
</body></html>
_____________________________________________
Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial.

Определение внешних стилевых таблиц. Тэг
link
<html>
<head><title>…<title>
<link href="mystyle.css" rel="stylesheet"
type="text/css">
</head>
</body>
<h1>Заголовок</h1>
<p>Текст документа…</p>
</body>
</html>
Определение внешних стилевых таблиц.
Стилевой файл
H1 { color: #000080;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
P { padding-left: 20px; }
Преимущества стилей
• Разграничение кода и оформления
• Разное оформление для разных устройств
• Расширенные по сравнению с HTML способы
оформления элементов
• Ускорение загрузки сайта
• Единое стилевое оформление множества
документов
• Централизованное хранение
Синтаксис
Синтаксис описания стилей в общем виде
представляется следующим образом:
selector[, selector[, ...]]{attribute:value;
[atribute:value;...]}
или
selector selector [selector ...]
{attribute:value;[atribute:value;...]}
Первый вариант перечисляет селекторы, для
которых действует данное описание стиля.
Второй вариант задает иерархию вложенности
селекторов, для совокупности которых
определен стиль.
Описание селектора
Селектор - имя элемента разметки
i, em {color:#003366,font-style:normal}
a, i {font-style:normal;font-weight:bold;
text-decoration:line-through}
Первая строка этого описания перечисляет селекторы-
элементы, которые будут отображаться одинаково:
<i>Это курсив</i> и это тоже <em>курсив</em>
Это курсив и это тоже курсив
Последняя строка определяет стиль отображения
вложенного в гипертекстовую ссылку курсива:
<a name=empty><i>abc</i></a>
abc
Селектор - имя класса
<style>
.k {color:darkred;background-color:white;}
</style>
<p class=kuku>Этот параграф мы отобразим
темно-красным цветом по белому фону.</p>
<p>Эту <a class=k>гипертекстовую ссылку</a>
мы отобразим темно-красным цветом по белому
фону.</p>
Этот параграф мы отобразим темно-красным цветом по
белому фону.
Эту гипертекстовую ссылку мы отобразим темно-
красным цветом по белому фону.
Селектор - идентификатор объекта
Описание стиля для объекта задается строкой, в
которой селектор представляет собой имя этого
объекта с лидирующим символом "#":
a.mainlink {color:darkred;text-
decoration:underline;font-style:italic;}
#blue {color:#003366}
<a class=mainlink>основная гипертекстовая
ссылка</a>
<a class=mainlink id=blue>модифицированная
гипертекстовая ссылка</a>
основная гипертекстовая ссылка

модифицированная гипертекстовая ссылка
Наследование и переопределение
• Сначала применяются стили умолчания
браузера
• Стили умолчания браузера переопределяются
прилинкованными стилями (элемент LINK
заголовка документа).
• Прилинкованные стили переопределяются
описаниями стилей в элементе STYLE
• Стили элемента STYLE переопределяются
атрибутом STYLE в любом из элементов
разметки
Свойства блоков
Отступы (margins)
p {margin-left:50px;margin-right:5px;
margin-top:15px;margin-bottom:50px;
padding:0px; text-align:left;}
Набивка (padding)
p {padding-left:100px;
padding-right:50px;
padding-top:20px;
padding-bottom:10px;
text-align:left;
border-width:1px;}
Управление цветом
Цвет текста:
td {color:darkred;}
p {color:darkred;}
i {color:#003366;font-style:normal;}
Цвет фона:
<body bgcolor=...>...</body>
<table bgcolor=...>...</table>
<span style="background-color:#003366;
color:white;">как строковые элементы
разметки</span>
p {background: gray http://kuku.ru/kuku.gif
no-repeat fixed center center;}
Шрифты
• font-family - семейство начертаний шрифта
(гарнитура);
• font-style - прямое начертание или курсив;
• font-weight - "усиление" (насыщенность)
шрифта, "жирность" букв;
• font-size - размер шрифта (кегль). Задается в
пикселях (px) и типографских пунктах (pt);
• font-variant - вариант начертания (обычный или
мелкими буквами - капитель).
Гарнитура
<p align=left style="font-size:24px;
font-family:serif;color:darkred;">Эта
строка набрана пропорциональным шрифтом с
засечками.</p>
font-family:sans-serif;color:darkred;">Эта
строка набрана пропорциональным шрифтом без
засечек.</p>
font-family:monospace;color:darkred;">Эта
строка набрана моноширинным шрифтом.</p>
Начертание
<p style="color:darkred;
font-style:normal;">Прямое начертание</p>
<p style="color:darkred;
font-style:italic;">Курсив</p>
<p style="color:darkred;font-style:italic;
font-weight:bold;">Курсив</p>

Iamandi Veronica

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Iamandi Veronica

Загружено:

Авторское право:

Доступные форматы

ВВЕДЕНИЕ В CSS

селектор — некоторое имя стиля, для которого

Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial.

основная гипертекстовая ссылка

Вам также может понравиться