CSS это посто и просто необходимо.

нужно знать обязательно. [2009-08-20]
Автор: Андрей Каструбин

ЧТО ТАКОЕ CSS-разбор полётов.

Я честно пытался прочесть много литературы и просто обалдеваю, как можно простейшие вещи объяснить так, что даже знающий человек ни черта не поймёт!!!
В общем, я скажу пару слов от себя, а весь этот заумный текст от профи (который очень полезен, но вникать долго) прочитаете в других уроках.
Не обессудьте, это выдавлено из моего мозга, а вбито туда путём проб и ошибок. Приступим:

CSS -это каскадные таблицы стилей, которые могут быть расположены, как в теле HTML документа, так и во внешнем файле с расширением *.css.
Их основное предназначение сократить работу по оформлению Web-страниц.

Согласитесь, написать

<font id=bred> Вот так-то.</font>
<!--или--> 
<font class=bred> Вот так-то.</font>

гораздо короче, чем:

<font  size="12" color="#FF0000" face="Verdana, Geneva,  sans-serif" align="center">
<strong><em> 
Вот так-то. 
</em></strong>  </font>

а если учесть, что вам это надо повторить раз 100… ну вы меня поняли.

И так, как же сделать так, что бы эксплоуер понял, что есть такая вещь как CSS и начал это кушать? Для этого надо подключить эти каскадные таблицы стилей к Web-страницам.
Есть 4 вида подключения и хранения стилей CSS

1. Всё храниться в теле документа и сами стили втом числе, непосредственно между тегами
<head> … </head> вставляется такой код <stile type="text/css">........</style> (не будем углубляться, что он означает и какие библиотеки подключает, погоды нам это не сделает):

<head>…
<STYLE TYPE="text/css">p: {text-align: justify;} #text: {COLOR:  GREEN:} ...ещё стили </STYLE> 
</head>
<body>
<p>как то так</p> 
<p class='text'>как то так</p>
</body>

затем в теле документа между тегами
<body>… используются автоматически тегами либо после указания id=… class=… в любых тегах …</body>
Прим: в этом случае использовать можно только в данной страничке (не очень удобно, но автономно всё будет работать). :

2. В отдельном файле на сервере сайта. В теле документа непосредственно. между тегами
<head> … </head> вставляется такой код:

<head>
<link  href = "путь/имя файла.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>как то так</p> 
<p class='text'>как то так</p>
</body>

затем в теле документа между тегами
<body>… используются автоматически тегами либо после указания id=… class=… в любых тегах …</body>
Прим: файл *.css лучше всего хранить в корневой папке сайта там же где и index.php применять можно ко всем страницам сайта (на мой взгляд, оптимальный вариант, но вариант не автономен).

3. В отдельном файле, но храниться по определённому адресу в интернете. В теле документа непосредственно. между тегами
<head> … </head> вставляется такой код:

<head>
<STYLE  TYPE="text/css">@import  URL( http://www.myserver.ru/css/file.css );<STYLE>
<head>
<body>
<p>как то так</p> 
<p class='text'>как то так</p>
</body>

затем в теле документа между тегами <body>… используются автоматически тегами либо после указания id=… class=… в любых тегах …</body>
Прим: применять можно ко всем страницам любых сайтов (на мой взгляд, не плохой вариант, но лично я делаю для каждого сайта отдельный файлик, что бы не захламляться)

4. Используется нотации CSS непосредственно в тегах кода web-страницы

<ТЕГ STYLE="свойство: значение">….</ТЕГ>

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

А теперь надо показать тегам, что конкретно нужно взять и как это использовать, что бы всё было красиво.

Приступим...... И так, как присвоить стиль элементу на страничке? Есть несколько способов:
Просто указать в файле *.css теги без скобок p … body транскрипция такая:
TEG (body)
имя с точкой (.bred)
имя с решёткой (#bred)
затем двоеточие(:) и в фигурных кавычках сами стили({...;}), самое главное не забывать после каждого стиля ставить точку с запятой (;)

body:
{ 
font-family:  Arial, Helvetica, sans-serif; /*название шрифта*/
background-image:  url(im/vf_M.jpg);/*рисунок фона*/ 
background-repeat:  no-repeat; /* vf_M.jpg не дублируется*/
background-position:  center 0px; /* vf_M.jpg в центре сверху*/
}

Все эти свойства будут применены ко всем страницам, где встречается тег <body> как только файл *.css будет к ним подключен (смотри выше)
Так же можно сделать для любого тега: <h1> <td> и т.п.!

2. Class='bred' имя класса может быть любое. В файле *.css пишется так (обратим внимание на точку перед именем):

.bred: 
{ 
font-size:14px; /*размер шрифта*/
color: #FF0; /*цвет текста*/
text-align: center;/*выравнивание по центру*/
background-color:#006600; /*цвет фона*/
padding:10px; /*отступ со всех сторон 10 px */
}

Все эти свойства будут применены ко всем страницам, где в тег будет вставлено class='bred' .
Например: …

3. id="bred" имя id может быть любое. В файле *.css пишется так :(обратим внимание на решётку перед именем)

#bred: 
{
font-size:14px; /*размер шрифта*/ 
color: #FF0; /*цвет текста*/
text-align: center;/*выравнивание по центру*/
background-color:#006600; /*цвет фона*/
padding:10px; /*отступ со всех сторон 10 px */
vertical-align:  top; /*вертикально вверху*/ 
}

Все эти свойства будут применены ко всем страницам, где в тег будет вставлено id=''bred'' .
Например: …

Прим: причём у class и id имя может совпадать!

Ну , чтож осталось самое простое создатьсаму таблицу стилей и делается это так:
1. как вариант стырить у кого то с сайта и разобрать по болтикам.
2. наити в интернете любой CSS редактор и пользуясь подсказками сотворить свой шедевр дизайна. (самый реальный вариант)
3. создать файл в любом текстовом редакторе и сохранить его с расширением .css, затем пользуясь ниже предоставленной табличкой сделать то, что вам нужно. Будет долго, но зато руку набьёте.

зы: мой совет начинайте не с CSS, а с HTML или PHP кода и помере необходимости создавайте стили какие вам необходимы, то есть нужен текст, напишите стиль для текста , начали табличку ваять - для таблички. Это намного нагляднее и вам меньше путаници.

ну к бою))) наилучших вам пожеланий!

• • •