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/
