Таблица стилей, CSS

Очень часто одному и тому же объекту мы задаём определённые свойства. Например шрифту, абзацу, слову, таблице и т.д. Если это просто наклонный шрифт, или выделение жирным, то тут ни какой мороки. Но если абзацу надо придать сразу несколько свойств. И шрифт и цвет и межстрочный интервал и т.д. А если такая операция повторяется очень часто? Правильно, тут и руки отвалятся, писать всё время одно и тоже. Вот тут то и приходит на помощь таблица стилей (CSS). Её можно расположить как в отдельном документе, так и прямо в создаваемом.

Прямо на страничке создавать не рекомендую. Если придётся поменять некоторые свойства элемента, то придётся менять на каждой страничке. Можно конечно заменить при помощи программы, той же Adobe Dreamweaver. Но все программы иногда косячат. Поэтому лучше не стоит. А если создадите таблицу стилей на отдельной страничке, ни каких проблем. Надо что то изменить - изменили в одном документе и изменения происходят на всём сайте.


Теперь создадим документ. В ваше программе, выберите - создать - CSS. Или что то в таком духе, у кого какая программа, а я всё об Adobe Dreamweaver. Название можете выбрать любое. Я дак, что бы не путаться лишний раз, назвал просто css и создал отдельную папку. Потом когда таблиц стилей стало побольше, появились и другие названия :) Подключить к страничке очень просто. В нижнем меню есть функция - присоединить таблицу стилей. Можно и руками присоединить, просто пропишите на страничке, до закрывающего тега </head> следующее:

<link href="http://seozar.ru/css/site.css" rel="stylesheet" type="text/css">

http://seozar.ru/css/site.css - адрес до вашей таблицы стилей.

Можно прописать таблицу CSS и прямо на странице вашего сайта. Обратите внимание не ссылку на таблицу, а саму таблицу. В целом для сайта так делать не желательно. Но иногда хочется выделить какую то страничку из общей массы, или ещё какая то причина, не важно. Можно конечно задать свойства и непосредственно элементу. Но если присоедините таблицу стилей, да не одну, а к примеру приделаете ещё гостевую. То одни стили перекроют другие и будет у вас на сайте каша. В это случае лучше присваивать id и задавать более высокий приоритет. Но об этом чуть позже. Пример:

<style type="text/css">
.s1 a, .s2 a, .s3 a {font-family: Arial, Helvetica, sans-serif;font-size: 13px;color: #00C;}
.s1 a:hover {
text-decoration: none;
border-bottom: dotted 1px #00C;
}
.s2 a:hover {
text-decoration: none;
-webkit-transform: scale(1.2) rotate(-2deg);
-moz-transform: scale(1.2) rotate(-2deg);
-o-transform: scale(1.2) rotate(-2deg);
-ms-transform:scale(1.2) rotate(-2deg);
transform: scale(1.2) rotate(-2deg);
}
.s3 a:hover {
text-decoration: none;
background-image: url(http://seozar.ru/images/sozdanie-raskrutka-sajta/fon1.1.png);
}
</style>

<style type="text/css"> - открывает таблицу стилей.

</style> - закрывает таблицу CSS. Вот между этими двумя тегами и надо прописывать свойства присвоенных классов.

.s1, .s2, .s3 - это классы.

В данном случае поменял свойства выделения ссылок. Прописывается тоже до закрывающего тега </head>

Кстати о куче таблиц - если вы начнёте присоединять к своему сайту - форумы, галереи, гостевые и т.д. У вас появится много таблиц стилей. Тут возможны несколько вариантов действий. Свалить всё в одну таблицу стилей. Это будет жесть :) Можете сделать их изолированными друг от друга. Что бы таблицы стилей не пересекались друг с другом. Это лучший вариант, можно сделать сайт более разнообразным в оформлении. Но к сожалению не всегда это получается. Иногда приходится вписывать форум, или гостевую прямо в дизайн сайта. И вот тут начинается. Все таблицы смешались и пошёл бедлам. Родного сайта можно не узнать.


Тут я рекомендую сделать ещё одну таблицу стилей. И в ней прописать по очереди все остальные таблицы. Самая последняя таблица в списке будет самой приоритетной. То есть какие свойства пропишите там, те и будут главными. Но не всегда. Есть такая штука, как назначенный приоритет:

!important;

Если пропишите в свойствах какого-либо элемента, то эти свойства и станут главнее. К примеру:

a:focus {outline: none !important;}
a:focus {outline: none;}

Хоть нижнее свойство и указано последним, но главным будет первое, так как у него приоритет.

Вот пример списка таблиц стилей:

@import url("tweaks.css");
@import url("colours.css");
@import url("forum.css");

В кавычках прописываете ваши адреса, до нужных вам таблиц. В данном примере - forum.css - самая главная таблица.


Посредством таблицы стилей, таблицы CSS, как её ещё иногда называют - можно любому элементу на вашей страничке присвоить любые свойства. Почти любые, по крайней мере те, что успели придумать :)

Немного рекламы :)

Цена щебень за 1 м3.

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP