Как пользоваться CSS
Разберем 2 подтемы, которые позволят лучше понимать возможности CSS и использовать лаконичные и удобные стили в HTML уже сейчас. Первая тема - использование стилей внутри тега, вторая - использование стилей CSS вне тегов. О преимуществах каждого метода читайте далее.
Использование CSS внутри тега
Преимуществом такого метода является быстрое написание стиля для отдельного тега. Например можно задать тексту красный цвет, не отвлекаясь от редактирования кода. Для этого в теге шрифта ("<span>") можно просто прописать CSS-стиль. Пример:
<span style="color:red;">красное_слово</span>
По правилам CSS не важно, в каком теге Вы напишете style="color:red;" - всё равно текст внутри этого тега станет красным. Например, напишем тоже самое в теге картинки. И что это даст? То, что текст, который виден до загрузки картинки (параметр alt), будет естественно красным. В итоге мы получаем, что если какой-то тег имеет в себе текст в любом виде, то цвет этого текста можно задавать одинаковым правилом style="color:цвет;" .
У многих новичков могут возникнуть по крайней мере 7 вопросов:
1. Какие кавычки использовать, одинарные или двойные? - используйте любые, главное чтобы не было логической путаницы. К примеру если начинаете с двойных, то и заканчивайте ими: style="color:red;" , а не так: style='color:red;" . Многие параметры CSS имеют строковое значение, например путь к файлу для фона элемента: style="background: URL('img/kartinka.jpg') ;" - так вот, в таких случаях внутреннюю строку пишите в других кавычках. Тоже самое к примеру с именем шрифта: style="font-family:'Arial','Verdana','Tahoma';" .
2. Нужны ли вообще кавычки внутри параметров CSS? - на ваше усмотрение. Саму "заготовку" вида style="" пишите всегда с кавычками. А внутренние параметры можно без кавычек. Например: style="font-family:Verdana;" - здесь я написал название шрифта без кавычек. То же самое и с путем к картинке, можно писать без кавычек. НО! Если имя шрифта, или путь, или любая другая строчка внутри CSS параметра содержит пробелы или особенные символы типа запятой, то ее обязательно нужно писать в кавычках. Пример с фоном: style="background: URL('img/moia kartinka.jpg') ;" - здесь в пути к файлу есть пробел, поэтому пишется в кавычках. Замечу, что пробел в любых параметрах HTML и CSS, которые обозначают путь к файлу, нужно писать как %20 (процент-двадцать) - это специальное обозначение пробела чтобы не разрывать строку.
3. Как ставить пробелы в параметрах, и нужны ли они вообще? - я имею ввиду как правильно писать: style="color: red ;" или style="color:red;" или style=" color : red ; ". На самом деле без разницы как писать, как Вам удобно. Главное чтобы в специальных строчных параметрах типа имени шрифта, или пути к файлу, не возникли лишние пробелы или не исчезли имеющиеся. Например чтобы имя шрифта "Segoe UI" не стало "SegoeUI", или файл "kartinka.jpg" не стал " kartinka.jpg ".
4. Как разделять параметры? - когда параметров несколько, то разделяйте их точкой с запятой: style="color:red;font-family:Verdana;height:30px;" . Из этого следует одно пожелание - не пишите несколько раз style="..." в одном теге 
5. Когда параметр всего один, нужна ли точка с запятой в конце? - на ваше усмотрение. Например нет разницы style="color:red" или style="color:red;" . Однако ставить ";" в конце одиночного параметра можно для удобства - а вдруг Вы допишете что-то еще, так уменьшается шанс, что вы упустите ";".
6. Есть ли разница между большими буквами и малыми? - параметры всегда пишутся малыми буквами. С большой буквы можно писать строчные параметры - например имя шрифта "Arial".
7. Как задавать цвет? - цвет можно написать тремя способами - именем цвета по-английски, например "red" или "yellow". Также можно писать шестнадцатеричный код цвета, например "#FFFF00" означает желтый цвет, а "#FF0000" - красный цвет. Третий способ - те же коды цветов, но в сокращенном виде: "#FF0" - желтый, "#F00" - красный. Ну и для примера, как это делается: <font style="color:#666;">серый_шрифт</font>. Кавычки для обозначения цвета не нужны. Коды или английские названия цветов для HTML и CSS можно найти в интернете, обычно они представлены в виде удобной таблицы. Еще есть специальные программки, которые выдают код после выбора цвета в палитре - очень удобно. Предложу даже мою программку, когда-то делал для себя
Как я уже говорил в посту "Зачем нужен CSS", найти справочник параметров CSS легко. Запомнить раз и навсегда несколько основных параметров тоже очень просто. Остальные можно подсматривать по необходимости в справочниках, в которых всё обычно понятно, типа: цвет фона - background-color, отступ слева - margin-left, высота строки - line-height...
Использование CSS вне тегов
Писать стиль CSS вне тегов тоже очень просто. Правила те же, что и для "внутреннего" стиля. Преимущества - возможность задать стиль для множества тегов сразу, тем самым сокращая размер HTML странички. Более того, можно задать стиль для множества страниц, вынеся его во внешний файл стилей, так называемую CSS-таблицу.
Теперь обо всём по порядку.
Создать стиль для нескольких тегов легко. Для этого вверху HTML кода страницы, между <head> и закрывающим </head>, нужно создать тег <style>, Пример:
<style>
</style>
Между <style> и </style> и будем писать стили для тегов. Но чтобы задать какому-то тегу стиль, сначала нужно как-то обратиться к этому тегу, то есть написать для какого тега создаем стиль.
Для этого в CSS придумано несколько способов:
1. В каждом теге можно написать его класс: class="имя_класса". Например: <font class="krasn"></font>. Класс можно написать в любых тегах, и сколько угодно раз на странице. Класс всегда пишется на английском и без пробелов.
2. В тегах страницы можно написать уникальное имя, называемое идентификатором: id="имя". Например: <p id="verh_podpis"></p>. Идентификатор не может повторяться на странице, но можно написать несколько разных идентификаторов, например на странице может быть один "верхний_заголовок", одно "правое_поле" или одна "панель_картинок". Идентификатор всегда пишется на английском и без пробелов.
Теперь расскажу как же всё-таки сделать рабочий стиль. Пример:
В <head> пишем как я говорил:
<style>
</style>
Внутрь пишем обращение к тегу. Например обращение по классу:
<style>
.moi_klass
</style>
Точку перед "moi_klass" я поставил потому, что к классу обращаются через точку. Теперь напишем, что-же за стиль мы хотим сделать у тега. Например красный цвет букв (color:red):
<style>
.moi_klass { color:red }
</style>
Вы уже поняли, что стиль для класса нужно писать в фигурных скобках. Давайте разберем, как это всё повлияет на документ. На самом деле пока никак. Ведь мы не прописали в нужных нам тегах класс "moi_klass". А как только пропишете, всё будет работать. Напишу для ясности всю картину кода HTML + CSS.
<html>
<head>
<style>
.moi_klass { color:red }
</style>
</head>
<body>
<span class="moi_klass">красные буквы</span>
<span class="moi_klass">тоже красные буквы</span>
</body>
</html>
По идентификатору обращаться также легко, только вместо точки нужно использовать решетку:
<style>
#moi_id { color:red }
</style>
Внутри тега <style> можно писать много разных стилей, например:
<style>
#moi_id { color:red }
.moi_klass { color:red }
.levoe_menu { height: 30px }
</style>
Также внутри фигурных скобок можно писать много CSS-параметров:
<style>
#moi_id { color: red; font-family: Verdana; }
.moi_klass { color: red; height: 18px; width: 200px; }
.levoe_menu { height: 30px; font-size: 24px; }
</style>
Кроме обращения по классу и идентификатору, есть обращение по названию тега. Например к div, table, td и так далее. Такое обращение пишется без всяких начальных символов:
<style>
span { color:red }
div { height: 100px }
</style>
При обращении по названию тега, все соответственные теги страницы примут описанный стиль. Это особенно удобно например при написании заглавия статьи, просто нужно создать стиль для H1 или возможно для H3, и все заглавия могут принять один цвет букв, один размер и шрифт.
Бывают частые ситуации, когда нужно задать стиль вложенных тегов. Например нужно, чтобы все ссылки (<a></a>) внутри параграфа (<p></p>) были черными. Попробуем в стилях обратиться к ссылкам и задать им черный цвет шрифта:
<style>
a { color: black }
</style>
В описанном стиле получается, что все ссылки страницы станут черными. А нам нужно, чтобы только ссылки параграфов (абзацев) были черными, а остальные, например ссылки меню, остались прежними. Для этого в стилях нужно учесть вложенность (иерархию). Делается это так:
<style>
p a { color: black }
</style>
Ничего сложного, просто в строчку указываем как-бы путь к конечному элементу. Для большей понятности приведу пример HTML:
<div>
<p>
<span><a href="pixpaint.com">Уроки</a></span>
</p>
</div>
Теперь через CSS-стили сделаем ссылку черной:
<style>
div p span a { color: black }
</style>
То есть я думаю понятно, что вложенность просто пишем в строчку по порядку, от старшего к вложенному.
Здесь я описал обращение по названиям тегов, но не забываем что есть идентификаторы и классы. Опять наглядный пример:
<div id="text_content">
<p>
<span class="zagolovok"><a href="pixpaint.com" class="caption">Мой сайт</a></span>
</p>
</div>
Стиль черной ссылки будет такой:
<style>
#text_content p #zagolovok .caption { color: black }
</style>
У вас может возникнуть вопрос, почему в CSS я не пишу просто обращение к классу ссылки ".caption". Да, это можно сделать, но когда важно изменение стиля именно той ссылки, а не всех ссылок которые имеют класс ".caption", то мой пример становится актуальным. Другими словами, в CSS Вы можете написать, что ссылки с классом ".caption" синие, но ниже добавить, что однако ссылки с тем же классом ".caption" расположенные в меню должны быть красными. Делается примерно так (допустим что у меню задан идентификатор id="#menu"):
<style>
.caption { color: blue }
#menu .caption { color: red }
</style>
Внешние CSS-таблицы
Ну пока хватит дрессироваться на правилах CSS, расскажу лучше про внешние таблицы стилей, которые можно прикрепить к страничкам всего сайта. Например есть 10 страниц, и у них нужен примерно одинаковый дизайн, т.е. определенные элементы имеют одинаковый стиль. Примером может служить любой профессиональный сайт, ну или простой блог.
Задача одинакового стиля страниц решается не одинаковой записью в теге <style>...</style> в коде каждой страницы, и уж тем более не обычным HTML кодом с его параметрами в тегах. Для этой задачи создается общий CSS файл (расширение .css), а в нем без всяких тегов пишутся стили. Например создается файл abc.css, а в нем пишутся голые стили:
.caption { color: blue; padding: 10px; }
#menu .caption { color: red; }
p { margin-top: 10px; font: 12px/18px Verdana; }
... ну и так далее. Потом этот файл нужно включить в странички. Делается это в теге <head>...</head>, а именно так:
<head>
<link rel="stylesheet" type="text/css" href="путь_к_файлу_css">
</head>
Путь к файлу CSS можно писать относительный, например просто "abc.css" если он лежит в той же папке, что и странички. Замечу, что эти файлы не подгружаются каждый раз при вызове страницы, а хранятся в кэше браузера. Поэтому можно загрузить одну страницу сайта, и стили всего сайта уже будут в памяти компьютера - это дает прирост скорости загрузки страниц, т.к. их стилевая часть уже загружена.
Всё, все странички лаконично написаны, их HTML код короткий и понятный, а сайт быстро грузится. Надеюсь, что помог Вам ознакомиться с основными моментами использования CSS, желаю удачи. Оригинал статьи на neonhtml.pixpaint.com.
Если Вам понравилась статья, подпишитесь на получение новых статей по RSS.
Хорошее описание,
на мой взгляд нехватает тут несколько для новичков важных пометок. Они не влияют на общие принципы, но именно новички обычно совершают эти ошибки.
1. во первых я бы сказал нужна пометка, на разные версии CSS, что в одних возможно а в других нельзя использовать кочто.
2. пометка о том, что разные браузеры могут одни и те же теги интрпритировать по разному.
3. надо вырабатывать сразу свою стилистику, иначе можно быстро запутатся. У вас я только прочёл, момент касающийся ковычек(именно по стилю).
Как я уже сказал, это не сильно относится к основному тексту, но по нему видать что написанно для начинающих. А именно они делают такие ошибки, и хотя бы коротко надо их ткнуть на эти проблеммы носом.
Да, как-то я недосмотрел. Насчет своей стилистики, это я думаю всем понятно станет, если долго писать, ну или смотреть чужие таблицы, хотя упомянуть надо.
по-моему пример с font это плохо. Зачем с мертвыми тегами статью писать
to Павел:
Спасибо за замечание. Сначала подумал что так типа нагляднее для новичков будет, но да, Вы правы.