CSS - Gotovimyrok.com
реклама
CSS
История
• Термин «каскадные таблицы стилей» был
предложен Хокон Виум Ли в 1994 году.
Совместно с Бертом Босом он стал
развивать CSS.
Уровень 1 (CSS1) - 1996
1. Параметры шрифтов.
2. Цвета.
3. Атрибуты текста.
4. Выравнивание
5. Свойства блоков.
Уровень 2 (CSS2) - 1998
•
•
•
•
•
•
•
Блочная верстка.
Типы носителей.
Звуковые таблицы стилей.
Страничные носители.
Расширенный механизм селекторов.
Указатели.
Генерируемое содержание.
Уровень 3 (CSS3) – 2011
•
•
•
•
•
элементы со сглаженными углами;
линейные и сферические градиенты;
тень;
небезопасные шрифты
анимация и различные эффекты
переходов;
• новые способы задания цветов.
Синтаксис CSS
Селектор
Свойство
К какому
HTML-тегу
(тегам)
применяется
свойство
Свойство
HTMLтега
(тегов)
:
Значение
Значение
свойства
Примеры
•
•
•
•
body {background-color: #FF0000;}
body {background-image: url("butterfly.gif"); }
h1 { color: #ff0000; }
h1 { color: #990000; background-color: #FFFF00; }
Как работает CSS
• Метод 1: Инлайн/In-line (атрибут style)
• Метод 2: Внутренний (тэг style)
• Метод 3: Внешний (ссылка на таблицу
стилей)
Метод 1: Инлайн/In-line (атрибут style)
<html>
<head>
<title>Пример</title>
</head>
<body style="background-color: #FF0000;">
<p>Это красная страница</p>
</body>
</html>
Метод 2: Внутренний (тэг style)
<html>
<head>
<title>Пример</title>
<style type="text/css"> body {backgroundcolor: #FF0000;} </style>
</head>
<body>
<p>Это красная страница</p>
</body>
</html>
Метод 3: Внешний (ссылка на
таблицу стилей)
• Рекомендуемый метод - создание
ссылки на так называемую
внешнюю таблицу стилей.
• Внешняя таблица стилей это просто
текстовый файл с расширением .css.
Метод 3: Внешний (ссылка на
таблицу стилей)
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css"
href="style/style.css" />
</head>
<body> ...
<link rel="stylesheet"
type="text/css"
href="style/style.css" />
Практическая работа
• Создайте css-документ для данной
страницы
Проверка кода
• body {
background-color: #FF0000;
• h1 { color: #990000;
•
background-color: #FC9804;
• font-family: arial, verdana, sans-serif; }
}
• h2 { color: #007845;
•
background-color: #FC9804;font-weight: bold;font-weight:
bold;}
• table { сolor: #007845;
•
background-color: #FC9804;font-style: italic;font-weight:
bold;font-size: 30px;
• border-style:solid; border-width:1px;
• border-color:black;}
• tr,td
• {border-style:solid; border-width:1px;
• border-color:black;}
