CSS или Cascading Style Sheets, что переводится как "Каскадные Таблицы
Стилей" это особая раметка языка html с помощью которой указываются
стили отображения для отдельно взятых элементов сайта или кода в общем.
Таблица стилей может быть как в самом коде страницы в виде блока в HEAD: Code <style type="text/css">
.style1 {color: #FF0000}
</style>
...так и вынесена за пределы документа в отдельный файл с расширением
.css и подключена в страницу вот таким кодом, который добавляется между
тегами HEAD: Code <link type="text/css" rel="StyleSheet" href="http://ваш сайт.ru/Style.css" /> Сам файл с расширением .css будет при этом представлять из себя обычный текстовый документ с подобным содержанием: Code * Начало таблицы стилей */
.style1 {color: #FF0000}
/* конец таблицы стилей (это просто комментарий для вас) */ ID и CLASS - В чем разница?
Для начала запомните: назначить какой либо параметр для элемента на
странице можно присвоив ему класс (class) или идентификатор (ID). Вот
пример присвоения тегу DIV класса Code <div class="divstyle">содержимое</div> и идентификатора: Code <div id="divstyle">содержимое</div> В самом css классы и идентификаторы соответственно пишутся по разному: Code /* Вот это класс */
.divstyle {color: #FF0000}
/* А вот это идентификатор */
#divstyle {color: #FF0000}
Теперь давайте разберемся, чем же они различаются, ведь кажется что
делают они одно и тоже... но нет. Идентификатор - он и есть
идентификатор - для каждого элемента он уникальный. Классы же можно
присваивать в любом количестве любым элементам. О присвоении классов мы
поговорим позднее.. Присвоение классов элементам Как я уже сказал, класс может быть присвоен множеству разных элементов. Элементу может быть присвоен как один класс: Code <html>
<head>
<style type="text/css">
.style1 {color: #FF0000}
.style2 {font-style: italic;}
</style>
</head>
<body>
<span class="style1">ТЕКСТ</span>
</body>
</html> так и несколько! В этом случае классы прописываются через запятую: Code <html>
<head>
<style type="text/css">
.style1 {color: #FF0000;}
.style2 {font-style: italic;}
</style>
</head>
<body>
<span class="style1 , style2">ТЕКСТ</span>
</body>
</html> Но можно прописать дополнительные стили прямо в элементе не обращаясь к таблице: Code <html>
<head>
<style type="text/css">
.style1 {color: #FF0000;}
.style2 {font-style: italic;}
</style>
</head>
<body>
<span style="color: #FF0000; font-style: italic;">ТЕКСТ</span>
</body>
</html> Идентификатор же не допустит такой вольности, его можно указать для каждого элемента только в одном числе: Code <html>
<head>
<style type="text/css">
.style1 {color: #FF0000;}
.style2 {font-style: italic;}
#textstyle {font-style: underline;}
</style>
</head>
<body>
<span id="textstyle">ТЕКСТ</span>
</body>
</html> Селекторы для классов Первый вид селекторов, это непосредственное указание имени обьекта в стиле(в этом случае перед классом не ставится точка): Code p {font-family: "Garamond", serif;} В этом примере для параграфа назначается шрифт Garamond - тоесть все апраграфы на странице будут выводиться этим шрифтом.
Второй вид селекторов, это селекторы с указанием не только класса но и
id нужного обьекта (в данном случае стиль будет присваиваться только
параграфу с id, равным paragraph1) Code p#paragraph1 {margin: 0;} Так же и наоборот (Класс будет применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным news): Code #news p {color: blue;}
|
