CSS (Cascading Style Sheets — каскадные таблицы стилей) — язык описания внешнего вида документа.
Зачем нужен CSS
Используется для задания шрифтов, цветов, расположения отдельных блоков и других моментов внешнего представления web-страниц. Основная цель разработки CSS — разделение описания логической структуры web-страницы от описания внешнего вида этой web-страницы (которое теперь производится с помощью CSS). CSS позволяет представлять один и тот же документ в различных методах вывода или стилях, таких как экранное представление, печатное представление и т.д.
Как подключить css
Правила CSS пишутся и располагаются в таблицах стилей. CSS — это обычный текстовый файл (.css), в котором написано большое множество стилей для элементов web-страницы и комментариев к ним.
Таблицу стилей, которая находится в отдельном файле (.css), можно подключить к web-документу посредством тега <link> между тегами <head> и </head>
<head> <!-- тут разные мета-теги и т.д. --> <link rel="stylesheet" type="text/css" href="path/to/style.css"> </head>
Так же стили css можно писать прямо в вашем html документе между тегами <style></style>. Но желательно все css правила выносить в отдельные css файлы.
<head> <!-- тут разные мета-теги и т.д. --> <style type="text/css"> body { color: red; } </style> </head>
Правила CSS
Правила построения очень просты. Сначала пишется селектор, затем открываются фигурные скобки { }. В скобках пишутся свойства и через двоеточие значение.
селектор, селектор { свойство: значение; свойство: значение; свойство: значение; }
Селекторы CSS могут быть:
- селекторами элементов;
p {font-family: Garamond, serif;}
- идентификаторов;
#paragraph1 {margin: 0;}
- классов;
.note {color: red; background: yellow; font-weight: bold;}
Это далеко не все варианты селекторов. О них вы можете почитать по ссылке: ссылка на css селекторы.
Классы, идентификаторы элементов.
Идентификаторы элементов задаются через атрибут id. Классы элементов задаются через ключевое слово class. Классов и идентификаторов может быть несколько у одного элемента.
<div id="first"> ... </div> <p class="big red simple"> ... </p>
Небольшой пример таблицы стилей css
p { font-family: Tahoma, serif; } #news p { /* стиль тега p у элемента с id="news" */ color: blue; } h2 { font-size: 10px; color: green; background: white; } p#paragraph1 { margin: 0; } .note { color: red; background: yellow; font-weight: bold; } a:hover { /* стиль для наведения на ссылки */ text-decoration: none; }
И, наконец, несколько полезных ссылок.
Очень качественный справочник по CSS свойствам: http://htmlbook.ru/css/
Учебник по CSS: http://ru.html.net/tutorials/css/