 |
|
Урок 2: Синтаксис и принцип работы CSS
Содержание
1. Урок 1: Что такое CSS3
2. Урок 2: Синтаксис и принцип работы CSS 3
3. Урок 3: Цвет и фон в CSS5
4. Урок 4: Шрифты в CSS 7
5. Урок 5: Текст в CSS 9
6. Урок 6: Списки в CSS 10
7. Урок 7: Ссылки в CSS 11
8. Урок 8: Типы селекторов в CSS 12
9. Урок 9: Блоковая модель в CSS 13
10. Урок 10: Рамки в CSS 13
11. Урок 11: Поля (margin) и отступы (padding)14
12. Урок 12: Высота(height) и ширина(width) блоков15
13. Урок 13: Позиционирование блоков15
14. Урок 14: Плавающие блоки(свойство float)16
15. Урок 15: Слои в CSS 17
Урок 1: Что такое CSS
Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде.
CSS - это сокращение от Cascading Style Sheets - в переводе Каскадные таблицы стилей. CSS работает со шрифтами, полями, таблицами, отступами, картинками и др. и представляет значительно более широкие возможности, чем простой html.
Изначально html использовался исключительно для разметки содержимого документа. Т.е. с его помощью указывалось мол это параграф, а это таблица, а это - картинка. CSS предоставил возможность точного дизайна, поддерживаемого всеми браузерами.
Основные преимущества CSS :
- управление дизайном любого количества документов с помощью одной таблицы стилей;
- более точный дизайн страниц, поддерживаемый всеми браузерами;
- разделение документа на две составляющие: структура и дизайн, благодаря чему исходный код становится чистым и легко читаемым
- новые расширенные возможности по сравнению с обычным html
Урок 2: Синтаксис и принцип работы CSS
В CSS, в отличие от HTML, нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе.
Рассмотрим структуру правила:
Как видно из рисунка выше, сначала записывается так называемый селектор, показывающий к какому html тегу(тегам) применяется то или иное свойство.
Далее, непосредственно за селектором, пишется блок объявления стилей, который обязательно заключается в фигурные скобки.
Каждое объявление в свою очередь состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой(см.рисунок) причем после последнего объявления точку с запятой можно не ставить.
Показанное выше правило указывает на то, что все заголовки первого уровня в документе будут голубого цвета с размером шрифта 14 пикселей.
Подключение CSS таблицы к HTML документу.
Внешняя таблица стилей это просто текстовый файл с расширением .css.
Допустим у нас есть таблица стилей style.css и несколько страниц html, и причем все это расположено в одной папке. Тогда в каждом документе который мы хотим подключить, в голове документа(между тегами <head> и </head>) необходимо прописать строчку:
<link rel="stylesheet" type="text/css" href="style.css">
Эта строка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
index.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Работаем со стилями</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразится высотой всего лишь 14 пикселей и будет голубого цвета</h1>
</body>
</html>
style.css :
h1{color:blue;font-size:14px}
Ниже еще два способа подключения стилей, которые не требуют внешней таблицы стилей, но это очень неудобно.
1. Можно располагать правила стилей непосредственно в голове документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Работаем со стилями</title>
<style type="text/css">
h1{color:blue;font-size:14px}
</style>
</head>
<body>
<h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1>
</body>
</html>
2. Также, можно задавать стиль с помощью атрибута style :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Работаем со стилями</title>
</head>
<body>
<h1 style="color:blue;font-size:14px">Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1>
</body>
</html>