Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка

1 Февраль, 2011

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я, наконец-то, добрался до первой статьи в рубрику Уроки CSS. Очень давно уже хотел начать рассмотрение стилей, ибо они в купе с Html являются тем основным инструментарием, который позволит вам уверенно работать над своим проектом. Без этих базовых познаний вам будет довольно трудно реализовать и раскрыть весь потенциал вашего сайта.

Даже в том случае, если вы используете в качестве движка какую-нибудь CMS, которая благодаря встроенному визуальному редактору позволяет тонко настраивать внешний вид статей, то вам все равно понадобятся навыки верстки. На сайте всегда найдется то, что вам обязательно захочется подвинуть, поправить, изменить или удалить, и делать вам это придется напрямую, правя код или же изменяя его стилевое оформление.

Важность знания CSS при работе с сайтом


Про базовые понятия я уже немного писал в рубрике HTML для начинающих, затронув там вопросы создания основных элементов веб страниц:

  1. Как вставлять изображения в Html код с помощью тега IMG описано тут и тут
  2. Как создавать гиперссылки — здесь
  3. Маркированные и нумерованные списки — тут
  4. Таблицы различной сложности и вложенности — тут
  5. Html формы — здесь
  6. Фреймы на основе Iframe и Frame — тут
  7. Вставка видео и другого медиаконтенкта с помощью Embed и object — здесь
  8. Doctype, Html комментарии — тут
  9. Как задаются цвета в Html и CSS коде — здесь
  10. Форматирование текста в HTML, Html шрифты, Strong, Em, B, I — тут
  11. Пробелы и спецсимволы (мнемоники) в Html коде — здесь

Думаю, что для быстрого редактирования, этих материалов будет вполне достаточно, тем более, что в последнее время сам по себе язык гипертекстовой разметки несколько потерял свою значимость при работе над внешним видом сайта после того, как стала популярной блочная верстка.

Дело в том, что сейчас чистый Html выполняет лишь роль поставщика содержимого веб страницы и позволяет в том или ином виде организовать ее структурное оформление (упомянутые выше списки, таблицы, формы, изображения, ссылки и т.п.).

И если вы попробуете посмотреть страницу с отключенными стилями, то весь текст будет, скорее всего, выводиться в одну колонку, исчезнут фоновые изображения, шапка, изменятся шрифты и, в общем-то, просмотр информации в таком виде уже нельзя будет назвать комфортным.

Это как раз лишний раз подтверждает, какую огромную и важную роль выполняют сейчас стили в оформлении внешнего вида сайта. Они отвечают за цветовое оформление проекта, за те шрифты, которые используются в тексте и заголовках, за размещение и позиционирование отдельных элементов дизайна.

Даже малейшее изменение внешнего вида (добавление иконки RSS ленты, счетчиков посещений и т.п.) потребует внесения изменений в CSS код.

Я постараюсь рассказывать о работе с ним не в академической манере, упоминая о всех возможностях таблиц каскадных стилей (именно так в переводе расшифровывается аббревиатура CSS), а в сугубо практической манере изложения, упоминая в основном только те аспекты, которые в первую очередь могут вам понадобиться при работе над дизайном своего проекта.

Итак, давайте приступим. У этого языка стилевой разметки есть свой синтаксис написания свойств и правил. Но он будет отличен от Html, хотя ничего сложного из себя не представляет. Наверное, первое отличие, которое следует отметить — это не критичность CSS кода к пробелам.

Его свойства можно писать вообще даже без пробелов и в одну строку (благодаря этому CSS код можно сжать специальными программами для увеличения скорости загрузки вашего сайта).

Правда такой способ представления (в одну строчку) сильно снижает его читаемость, и оптимизировать его следует, наверное, уже после окончательного завершения работы над дизайном своего проекта.

По аналогии с Html, где имеется набор тегов с различными атрибутами, в CSS имеется ряд свойств, способных принимать различные значения, с помощью которых и осуществляются манипуляции с дизайном.

Почти все основные CSS свойства вы сможете найти на моем блоге в статьях с подробным их описанием и конкретными примерами использования.

  1. Для оформления шрифтов: Font (Weight, Family, Size, Style) и Line Height — тут
  2. Для оформления текста в Html: text-decoration, vertical-align, text-align, text-indent — здесь
  3. Для задания цвета фона или фоновой картинки: Background (color, position, image, repeat, attachment) — тут
  4. Для настройки внешнего вида списков: List style ( type, image, position) — здесь
  5. Для задания отступов, рамок и границ: Padding, margin и border — тут
  6. Задаем тип отображения Html элементов на вебстранице: Display (block, none, inline) — здесь
  7. Для описания области контента при блочной верстке: Height, width и overflow — тут
  8. Инструменты блочной верстки: Float и clear — здесь
  9. Способы позиционирования Html элементов: (правила left, right, top и bottom) для Position (absolute, relative и fixed) — тут
  10. Z-index и CSS правило Cursor — здесь

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

Как подключить CSS стили к Html документу


Но начать я хочу не с синтаксиса или свойств таблицы каскадных стилей, а с описания тех способов, с помощью которых можно их подключить к Html документу. Таких способов существует только три и самым часто используемым из них является размещение стилей в отдельном файле с расширением .css или нескольких таких файлах.

В этом случае, в головной части кода (между тегами Head) каждого Html документа (вебстраницы) вашего ресурса обязательно должен быть прописан в специальном теге (link) путь до этого внешнего CSS файла, ибо в противном случае посетители вашего проекта рискуют увидеть его в довольно неприглядном виде.

Если же строчка с кодом подключения файла CSS будет иметь место, то браузер сразу же после того, как прочтет этот путь, начнет его загрузку и подключит стилевое оформление, не дав посетителям увидеть ваш сайт неодетым. Строчка подключения внешних стилей может выглядеть примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<link rel="stylesheet" href="http://ktonanovenkogo.ru/wp-content/themes/Organic/style.css" type="text/css" media="screen" />
</head>

Если вы используете CMS, то головная часть Html кода будет формироваться в одном из файлов PHP из папки с используемой вами темой оформления. Для движков Joomla, WordPress и SMF можете узнать расположение этого файла, формирующего открывающие и закрывающие теги HEAD, из этой публикации.

Два других способа подключения стилей к веб документу используются реже, нежели внешние файлы, но иногда бывает удобно и актуально использовать именно их. В обоих случаях CSS код будет прописываться прямо в Html документе.

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

Кстати, если хотите более подробно изучить эту тему, то посмотрите статью — что это такое Style и Link для связывания языка Css и Html.

Глобальные стили прописываются внутри открывающего и закрывающего тегов STYLE и, в принципе, могут располагаться в любом месте кода вебстраницы, но чаще всего их помещают в головную часть документа между открывающим и закрывающим тегами HEAD:

<head>
...

<style type=”text/css”>
...
"CSS свойства глобальных стилей, применяемые ко всему Html документу"
...
</style>
...
</head>

Последний способ подключения реализуется за счет внутренних (встроенных) стилей. Для этого в требуемый Html тег вам нужно будет добавить атрибут Style, включающий в себя в качестве параметров CSS свойства, написанные с учетом синтаксиса таблиц каскадных стилей.

Код может выглядеть, например, так:

<p style=”color:#aa87cc";font-size:14px;font-family:verdana;”>Я абзац, выделенный красным цветом, других таких на сайте нет</p>

В тег абзаца P мы добавили свойства по правилам внутренних стилей, таким образом текст в данном абзаце будет выводиться шрифтом Verdana размером 14 пунктов и цветом, закодированным в #aa87cc.

Причем эти свойства будут применены исключительно только к данному абзацу. Я иногда использую внутренние (встроенные) стили на этапе отладки дизайна для ускорения процесса по внесению изменений, а затем переношу полученные CSS свойства в файл с внешними стилями.

Синтаксис CSS — правила, свойства, селекторы

Ну вот и добрались мы до более интересных вещей, на мой взгляд, нежели способы использования (подключения) CSS — синтаксис написания правил. Тут, кстати, все просто, но все это я, пожалуй, могу сравнить с игрой в шахматы, ибо ходы фигур (синтаксис стилевой разметки) изучить не сложно, но по-настоящему играть дано увы не каждому.

Профессиональные верстальщики устроены все же несколько иначе, чем обычные люди, и склад ума у них, по моему мнению, особый. Лично я не умею играть в шахматы, хотя и знаю все ходы фигур, также я не научился виртуозно владеть CSS, хотя и знаю наизусть почти все свойства и основные правила написания кода.

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

Это доступно всем, и именно такими базовыми познаниями в каскадных таблицах стилей я и хочу попробовать поделиться с вами в этой серии статей. Посмотрим как получится, ибо одно дело уметь самому, а другое дело — пытаться научить этому других.

Итак, давайте рассмотрим CSS правило и узнаем из каких частей оно состоит и как эти части отделяются друг от друга:

Селектор {Свойство: Значение; Свойство: Значение}

В фигурных скобках можно написать сколько угодно пар «Свойство — Значение» для данного правила, разделяя их точкой с запятой. Все, что заключено в фигурных скобках называют одним общим термином — блок объявлений, а пару «Свойство — Значение» называют объявлением.

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

Также этот код не чувствителен к регистру используемых вами символов (заглавные или прописные буквы для CSS не имеют различий), переносу строк и символам табуляции, поэтому вы можете оформлять правила так, как вам удобно, а после окончания работы над дизайном весь файл с ними можно оптимизировать в специально предназначенных для этого программах.

Например, можно CSS правило записать в одну строку:

p {color:#aa87cc";font-size:14px;font-family:verdana;}

А можно записать и так:

p {
color:#aa87cc";
font-size:14px;
font-family:verdana;
}

В принципе, CSS допускает и такую трактовку приведенного выше кода:

p {color:#aa87cc";}
p {font-size:14px;}
p {font-family:verdana;}

Но предпочтительным для восприятия и в плане оптимизации размера этот способ записи нельзя назвать. Лучше все относящиеся к одному селектору прописать в одном правиле.

Кстати, если у вас возникнет такая ситуация, что для одного и того же селектора будет задано повторно тоже самое свойство, но с другим значением, то браузер выполнит в результате то, которое будет написано ниже в коде. Например, в приведенном примере:

p {color:blue;}
p {color:black;}

Браузер отобразит текст в абзацах именно черным цветом, т.к. это правило расположено ниже в коде.

CSS селектор призван указывать браузеру, к какому именно элементу Html документа нужно будет применить данное плавило. В качестве селектора может быть использован какой-либо тег (P, H1-6, BODY, TABLE и т.д.), но также могут использоваться и так называемые классы или ID.

Кроме того, бывают и составные селекторы (контекстные), в которых несколько простых селекторов разделены пробелом. В общем тема CSS селекторов заслуживает того, чтобы прочитать все накопленные материалы.

  1. Простейшие селекторы тега, класса (class), Id, универсальный и селекторы атрибутов — тут
  2. Селекторы псевдоклассов и псевдоэлементов (hover, first-child, first-line) — здесь
  3. Приоритеты (Important), примеры комбинаций и группировки селекторов, пользовательские и авторские стили — тут

Комментарии и размеры в языке стилевой разметки

В CSS файле шаблона вашего сайта вы можете увидеть так называемые комментарии, которые призваны вносить некоторую ясность в назначение того или иного куска кода или отдельного правила.

Они могут помочь вам ориентироваться в стилевом файле, но нужно помнить, что комментарии немного увеличивают размер CSS файла, и, следовательно, после окончания работы над дизайном сайта вы можете прогнать код через оптимизаторы, обрезающие комментарии и пробелы.

Для того, чтобы браузер не пытался интерпретировать комментарии как CSS код, вам нужно их заключить в специальные слеши со звездочками:

/* текст комментария */

Иногда разработчики шаблонов могут закомментировать даже некоторые правила для того, чтобы вы только в случае необходимости могли бы воспользоваться заложенными возможностями:

.tabberlive .tabbertab {
 padding:5px;
  border-top:0;
   position:relative;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */
 /* overflow:auto; */

Ну и еще несколько слов стоит сказать про возможные значения свойств. Тут на самом деле все регламентировано и каждое свойство имеет свой набор значений, которые могут состоять из слов, цифр, процентов, различных размеров, кода цвета, Url адреса.

Следует отметить, что в случае использования в значениях свойств десятичных дробей, их нужно разделять точкой, причем ноль в качестве целой части можно не писать (0.5 или .5 будет интерпретировано браузером одинаково).

Примечательно, что при задании размера шрифта нужно указывать в значениях как относительные единицы размера шрифта (em, px, px или просто %), так и абсолютные единицы (pt, cm, mm). Чаще используют относительные единицы, но бывает, что размер шрифта указывают в pt (пунктах — 1/72 дюйма). Читате подробнее про единицы размеров (пикселы, Em и Ex), цвет и наследование в CSS.

Немного отвлекаясь от темы замечу, что относительная единица em позволяет задать размер шрифта относительного того размера, что принят в используемом пользователем браузере как размер текста по умолчанию.

Поэтому 1em можно принять за 100% и тогда, для увеличения размера текста относительно принятого в браузере по умолчанию, нужно будет прописать в CSS свойстве значение, например, 1.1 em. А для уменьшения — 0.9 em.

Размер шрифта задаваемый в ex по логике работы схож с em, с той лишь разницей, что за 100 процентов берется высота строчной буквы «x». Но самой популярной относительной единицей задания размера шрифта является, конечно же, px — пиксель.

Вы, наверное, уже давно знакомы с этой относительной единицей измерения, ибо она представляет из себя минимальную точку, из которых состоит экран пользователя, на котором он просматривает данный текст.

Допустим, монитор, на котором я печатаю этот текст, имеет разрешение 1280 на 1024 пикселя и физический размер минимальной точки (пикселя) у меня может отличаться от любого другого монитора или телефона, на котором может быть просмотрен тот же самый текст. Достаточно удобный способ, учитывающий удобство восприятия текста пользователем.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Уроки CSS

Комментарии и отзывы

Reprisal

Русский текст в заголовке в рассылке e-mail отобразился в уникод кодах. То есть вместо «Свежая статья на блоге KtoNaNovenkogo.ru» было «Свежая статья на блоге KtoNaNovenkogo.ru»

Reprisal

P.S. В комментах, разумеется, отображается нормально. Смотреть нужно html код второй надписи

Дмитрий

Reprisal: спасибо, я заметил, но это, похоже, общий глюк Feedburner, ибо все рассылки на которые я подписан пришли ко мне на почту в таком неказистом виде.

Артем

А что с Дизайном сайта, все как то поплыло как будто все стили и картинки отключены, это какой то эксперимент?

Дмитрий

Артем: подскажите, пожалуйста, в каком браузере (Windows или линукс)?

Артем

Windows XP. а на 7 все ровно.

Вот буквально минуту назад опять все четко стало, а до этого все было криво, я писал уже Вам недели 2 назад 🙂 Просто в какое то время, ну когда ВЫ начали ускорять сайт все и полетело у меня.

Дмитрий

Артем: спасибо большое за ответ, минуту назад я просто отключил статическое Gzip сжатие CSS и JS — похоже, что оно все таки не во всех браузерах корректно работает.

Сантьяго

Дмитрий, подскажите пожалуйста, как в joomla задать страницам сайта вид page/2, page/3 и так далее

Aleks

Дмитрий спасибо за ценные статьи. У меня на блоге, я думаю, необходимо увеличить размер шрифта контента. Подскажите пожалуйста , как сделать. Спасибо.

Галин Бойк (мл)

А дальше?

Дмитрий

Галин Бойк (мл): вот-вот приступлю к продолжению, просто решил сначала осветить все оставшиеся вопросы связанные с Html. Завтра будет последняя статья по теме Html про фреймы, ну, а в ближайшее время, думаю, уже писать буду исключительно про CSS и верстку. Извините за задержку.

Подписаться не комментируя