В этой теме я постараюсь изложить вам основы основ CSS.

Первый урок

Это первый урок, из серии уроков про CSS. В этом уроке мы расмотрим:

-Предистроия CSS
-Размещение стилей на HTML страницах, классы и идентификаторы
-Немного про написание хорошего, понятного кода

Ну что ж, приступим?

В первые годы существования сеть WWW была не более чем набором связаных документов, форматированных и структурированных с помощью HTML. По мере увеличения популярности WWW язык HTML все больше использовался в презентационных целях. Вместо заголовочных элементов разработчики стали применять атрибуты и полужирные шрифты для создания визуальных эффектов. Таблицы HTML были предназначены для вывода табличных данных, однако они сразу же начали применятся для верстки страниц.
Довольно быстро средства HTML потеряли свое первоначальное значение, и код стал маловразумительным нагромождение дескрипторов. После этого появились WYSISYG (What You See Is What You Get - что видим, то и получаем), но вместо того чтобы упростить ситуацию, инструменты WYSISYG только усугубили ее: они дополнительно добавили в код HTML огромное количество дескрипторов, понять которые стало еще труднее. В общем ситуация стала невыносимой, и нужно было что-нибудь предпринять.
И тогда появились таблицы CSS. Благодаря им возникла возможность управлять внешним видом страницы, не вторгаясь в нее, и отдалить презентационные аспекты документа от его содержимого. Разметка опять стала простой, а дизайнеры вновь стали интересоваться кодом документа. Появилась возможность переопределять стили браузера. Дизайнеры стали применять элементы HTML, основываясь не на их внешнем виде, а на том, каковы их функции.

Ну вот, с историей мы разобрались. Теперь давайте уделим наше внимание CSS.
Есть три варианта "пометить" HTML элемент для того, что б присвоить ему стиль.

-Через классы
-Через идентификаторы
-Написать стиль в самом элементе

Немного больше подробностей:
Классы и идентификаторы являются именами, к которым можно "привязать" стиль из таблицы CSS. Чаще всего используют классы, частично из-за того, что классы можно применять к нескольким элементам одновременно. Для того, что б присвоить какому-то элементу класс ничего сложного делать не надо:
<a href="http://example.com" class="firstLink">...</a>
<a href="http://example.com" class="secondLink">...</a>
<a href="http://example.com" class="secondLink">...</a>
<a href="http://example.com" class="firstLink">...</a>
Для имени класса (и идентификатора) можете использовать любые слова, но имя должно начинаться с буквы (следующими могут быть цифры, нижнее подчеркивание "_", дефис "-", и понятное дело другие буквы). Так же все эти имена устойчивы к регистру букв, тоесть firstLink и firstlink - разные имена.

Идентификаторы мало, чем отличаются от классов. Идентификаторы присваиваются с помощью атрибута id и в отличие от классов идентификатор должен быть уникальным, тоесть он может присваиваться только одному элементу на странице:
<a href="http://example.com" id="firstLink">...</a>
<a href="http://example.com" id="secondLink">...</a>
<a href="http://example.com" id="secondLink">...</a> - второй раз уже нельзя..

В таблицах CSS стили, присваиваемые через идентификатор начинаются со знака "#", а через класс со знака ".", но про это позже.

Ну и, наконец, последний способ - написать стиль непосредственно в элементе:
<a href="http://example.com" style="Вот здесь пишут стили, про которые вы узнаете в следующих уроках">...</a>
Ура! Теперь мы знаем как "прикрепить" стиль к HTML элементу. Наступила очередь CSS таблиц.

Таблицы могут находится в отдельном файле или просто на странице в специальных тегах <style>...</style> или <link>
Что б вставить таблицу CSS на страницу мы используем тег <style>:
<style type="text/css">
/* Тут могли быть ваши стили */
<!--
@import url('сслыка на таблицу');
-->
</style>
С помощью @import url можно подключать внешние файлы к таблице, так же это можно делать с помощью тега <link>, но он не должен находится между тегами <style>...</style>
<link href="ссылка на внешний файл" rel"stylesheet" type="text/css">

В CSS как и во многих языках можно делать комментарии:
//вся строка после символов "//" является комментарием
/* эта строка - комментарий
и даже эта, пока не доберется до символа "*/" */

Для присвоения стиля в таблицах CSS используются селекторы. В практике Web-дизайна чаще всего используются селекторы типов и нисходящие селекторы.
Селектор типа используется для присвоения стиля всем элементам заданного типа, например всем гиперссылкам, абзацам, заголовкам. Для создания селектора типа нужно всего лишь поместить в таблице CSS имя элемента (т.е. типа) перед определение стиля, как в приведенных ниже примерах:
p {color: black;} //между "{" и "}" находятся стиль. в данном случае все абзацы станут черного цвета
a {text-decoration: underline;} // все ссылки будут подчеркнуты
h1 {font-weight: bold;} // все заголовки будут выведены жирным
Про сами "команды" стилей мы поговорим с вами позже, а сейчас наша цель узнать про нисходящие селекторы.
Нисходящие селекторы позволяют присваивать стили элементам, вложенным в заданные элементы или группы элементов. Нисходящий селектор создается путем добавления пробела между двумя селекторами. В следующем примере заданный стиль будет присваиваться только гиперссылкам (дескриптор а), вложенным в элементы списков (дескриптор li). Следовательно, данный стиль не повлияет на гиперссылки, расположенные в простых абзацах (тег р)
li a {text-decoration: underline;}
Для более специфичного задания элементов используются селекторы идентификаторов и классов. Именно с помощью них мы можем присвоить стиль элементам имеющим идентификаторы (id) и/или классы (class). Для первого используется символ "#", а для второго "точка". В приведенном ниже примере первый стиль присваивает полужирный шрифт элементу intro, а второй задает вывод всех элементов класса datePosted зеленым цветом.
#intro {font-weight: bold;}
.datePosted{color: green;}

<p id="intro"> Некотрый текст</p>
<p class="datePoster>01.02.03</p>
Примечание: Не злоупотребляйте именами идентификаторов и классов. Например, если нужно стилизировать заголовки в разных областях страницы по-разному не используйте для них личные классы. Существует более простой и элегантный способ решить эту проблему:
#mainContent h1 {font-size: 1.8em;}
#secondaryContent h1 {Font-size: 1.2em;}

<div id="mainContent">
<h1>Добро пожаловать на мой сайт!</h1>
...
</div>
<div id="secondaryContent">
<h1>Последние новости</h1>
...
</div>
Приведенный пример прост и очевиден. Тем не менее, примененные в нем четыре типа селекторов предоставляют мощный и гибкий инструмент присвоения стилей огромному количеству элементов. Количество классов должно быть как можно меньшим. Слишком большое количество классов - верный признак того, что документ плохо структурирован (на юкозе классов многовато, но дело в том что это делалось что б пользователи могли изменить внешний вид каждого элемента (нам же не дают менять полностью весь код)). Что бы уменьшить их количество, подумайте, чем элементы разных классов отличаются друг от друга. Довольно часто обнаруживается, что они отличаются только внешним видом на экране. Вместо присвоения им разных классов попытайтесь присвоить класс или идентификатор их родительскому элементу, а затем присваивайте им стили с помощью нисходящих селекторов.

Про написание понятного кода будет совсем немного
Используйте понятные для вас имена
Плохое имя: hsdkjw
Хорошее имя: mainNav
Оставляйте комментарии, где это уместно
Старайтесь писать код так, что б он был легко читаемым и понятным для вас

Автор: SleepWalker(www.udf.su/)