2. Синтаксис и принцип работы css
CSS имеет строго определенный синтаксис, т.е. правила, по которым создаются таблицы стилей.
В CSS, в отличие от HTML, нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей в CSS является правило, которое определяет, как будет выглядеть тот или иной элемент в документе.
Рассмотрим структуру правила:
Селектор - это HTML элемент, которому вы хотите придать определенный стиль. Непосредственно за селектором, пишется блок объявления стилей, который обязательно заключается в фигурные скобки.
Каждое объявление состоит из свойства и значения.
Свойство - это атрибут стиля, который вы хотите изменить. Каждое свойство имеет значение.
После свойства ставится двоеточие.
Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой.
Показанное выше правило указывает на то, что все заголовки первого уровня в документе будут голубого цвета с размером шрифта 14 пикселей.
Чтобы сделать код CSS более читаемым, вы можете располагать одно объявление на одной строке, например так:
|
Css Комментарии
Комментарии используются, чтобы пояснить ваш код, и могут помочь вам, когда вы будете редактировать исходный код позже. Комментарии игнорируются браузерами.
CSS комментарий начинается с "/*", и заканчивается "*/".
/*Это комментарий*/ p { text-align:center; /*Это другой комментарий*/ color:black; font-family:arial; }
3. Способы подключения CSS к HTML документу.
Существует три способа вставки таблицы стилей:
Внешняя таблица стилей
Внутренняя таблица стилей
Встроенный стиль
Внешняя Таблица Стилей
Внешняя таблица стилей идеально подходит, когда стили должны применяться ко многим страницам. С помощью внешней таблицы стилей вы можете изменить вид целого Веб сайта путем редактирования одного файла.
Каждая страница должна ссылаться на таблицу стилей, используя тег <link>. Тег <link> находится в head-секции:
|
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> |
Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать какие-либо html теги. Таблица стилей сохраняется в файле с расширением .css.
Пример файла таблицы стилей:
|
hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} |
Пробелы
между значением свойства и его единицами
измерения не ставятся!
"margin-left:20 px" (вместо "margin-left:20px") будет работаеть в IE (браузере Internet Explorer), но не в браузерах Firefox или Opera.
Внешняя таблица стилей - это просто текстовый файл с расширением .css.
Допустим у нас есть таблица стилей style.css и несколько страниц html, причем все это расположено в одной папке. Тогда в каждом документе, который мы хотим подключить, в голове документа(между тегами <head> и </head>) необходимо прописать строчку:
<link rel="stylesheet" type="text/css" href="style.css">
Эта строка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
ПРИМЕР:
Откройте Блокнот(или другой редактор) и создайте с помощью него два файла находящихся в одной папке: CSS файл - style.css и HTML файл - index.html .
Файлы примерно следующего содержания:
style.css
h1{color:blue;font-size:14px}
index.html
<html> <head> <title>Работаем со стилями</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразится высотой всего лишь 14 пикселей и будет голубого цвета</h1> </body> </html>
Если вы все сделали правильно, то запустив в браузере файл index.htm увидите :
Итак, меняя стилевые правила во внешней таблице стилей, можно управлять дизайном сколь угодно большого количества страниц.
Но для этого нам необходимо подключить внешнюю таблицу стилей ко всем страницам html, дизайном которых мы хотим управлять.