КАСКАДНАЯ ТАБЛИЦА СТИЛЕЙ Что такое CSS? CSS (англ

Download Report

Transcript КАСКАДНАЯ ТАБЛИЦА СТИЛЕЙ Что такое CSS? CSS (англ 

КАСКАДНАЯ ТАБЛИЦА СТИЛЕЙ
Что такое CSS?
CSS (англ. Cascading Style Sheets —
каскадные таблицы стилей) — формальный
язык описания внешнего вида документа,
написанного с использованием языка
разметки.
Основной целью разработки CSS являлось
разделение описания логической структуры
веб-страницы (которое производится с
помощью языков разметки) от описания
внешнего вида этой веб-страницы.
Уровень 2, ревизия 1 (CSS2.1). Рекомендация
W3C, принята 7 июня 2011 года. CSS2.1 основана
на CSS2. Кроме исправления ошибок, в новой
ревизии изменены некоторые части спецификации,
а некоторые и вовсе удалены. Удаленные части
могут быть в будущем добавлены в CSS3.
Уровень 3 (CSS3) Разрабатываемая версия
В отличие от предыдущих версий спецификация
разбита на модули, разработка и развитие
которых идёт независимо.
CSS3 основан на CSS2.1, дополняет существующие
свойства и значения и добавляет новые.
Нововведения: закругленные углы блоков,
анимация, введение переменных (?).
Способы подключения CSS к
документу
1. Связанные стили
Используются для одиночного тега в
котором стиль задается с помощью
атрибута style
Например:
<p style="font-size: 120%; font-family:
monospace; color: #cd66cc">Текст</p>
2. Глобальные стили
Стили описаны в голове документа внутри
тега <style>. Например:
<head>
…
<style>
h1 {
font-size: 1.2em;
font-family: Verdana, Arial,
Helvetica, sans-serif;
color: #333366;
}
</style>
...
</head>
3. Внешние стили
Стили вынесены в отдельный текстовый
файл с расширением .css
Файл CSS можно подключить двумя
способами:
1. Ссылка с помощью тега <link>
В голове документа помещается тег:
<link rel="stylesheet" href="style.css">
2. Импорт с помощью директивы @import
В голове документа, с помощью тега
<style media="all">
@import url(style.css);
</style>
Каскадирование
CSS называются каскадными, потому что
одновременно могут использоваться несколько
разновидностей стилей.
Стили по мере увеличения приоритета:
● Параметры браузера по умолчанию
● Параметры стиля пользователя (браузер)
● Внешние CSS
● Импортируемые CSS (последний прочитанный файл
имеет более высокий приоритет)
● Глобальные стили
● Связанные стили
● Атрибуты тегов HTML
Правила построения CSS
селектор1, селектор2
{
свойство1: значение;
свойство2: значение;
свойство3: значение;
}
Селектор определяет, на какие части документа
распространяется правило
Правила построения CSS
body {
font-family: Arial, Verdana, sans-serif;
font-size: 0.9em;
/* Размер шрифта */
color: #000080;
/* Цвет текста */
}
h1
{
background: #faf0e6; /* Цвет
border: 2px dashed maroon; /*
color: #a0522d;
/* Цвет
padding: 7px;
/* Поля
текста */
Рамка */
текста */
вокруг текста */
}
h2 {
}
color: #556b2f;
margin: 0;
/* Цвет текста */
/* Убираем отступы */
margin-top: 0.5em;
/* Отступ сверху */
p {
}
Типы селекторов
1. Универсальный
* {
margin: 0;
padding: 0;
}
2. Селектор элементов
p {
font-family: arial, sans-serif;
}
Типы селекторов
3. Селектор классов
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
4. Селектор идентификаторов
#paragraph1 {
margin: 0px;
}
Типы селекторов
5. Селектор псевдоклассов
a:active {
color: blue;
}
6. Селектор атрибутов
a[href="http://www.somesite.com"] {
font-weight: bold;
}
Классы и идентификаторы
Класс или идентификатор может быть
присвоен тегу HTML посредством атрибутов
class или id этого тега:
p.Big {
font-family: arial, sans-serif;
color: maroon;
}
div#First {
background-color: silver;
}
...
<div id="First">
...
<p class="Big">
...
Классы и идентификаторы
Основное отличие между классами
элементов и идентификаторами элементов в
том, что в документе какой-нибудь класс
может быть присвоен сразу нескольким
элементам, а идентификатор — только
одному. Также отличие в том, что могут
существовать множественные классы.
Идентификаторы широко используются в
JavaScript для нахождения уникального
элемента в документе.
Теги <div> и <span>
Тег <div> используется для ограничения
блочных тегов и может содержать внутри
себя другие HTML-элементы:
<div style="position:absolute; left:0px;
top:0px; font-size:10pt; border-style:groove;
padding:4px">
Тег <span> можно вставлять в другой тег
и является встраиваемым:
В этой строке текст будет <span style="fontstyle:italic; color:red">курсивом и выделен
красным цветом</span>
Домашнее задание
Подготовить сообщение:
Сферы применения CSS
● История CSS
●