Главная | Регистрация | Вход Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Все для Ucoz » Статьи вебмастеру » CSS для тех кто в танке + пара советов (CSS для тех кто в танке + пара советов)
CSS для тех кто в танке + пара советов
cska7777777Дата: Понедельник, 04.01.2010, 20:51 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 474
Статус: Offline
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;}
 
Форум » Все для Ucoz » Статьи вебмастеру » CSS для тех кто в танке + пара советов (CSS для тех кто в танке + пара советов)
Страница 1 из 11
Поиск:

Copyright MyCorp © 2018
Футбол на Soccer.ru: Новости футбола России и Европы онлайн, Евро кубки и чемпионаты Live Каталог Казахстанских ресурсов TABU SmartTop.info