Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

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

Даже в том случае, если вы используете в качестве движка какую-нибудь CMS (Joomla, WordPress, SMF), которая благодаря встроенному визуальному редактору позволяет тонко настраивать внешний вид статей, то вам все равно понадобятся базовые познания в Html и Css. На сайте всегда найдется то, что вам обязательно захочется подвинуть, поправить, изменить или удалить, и делать вам это придется напрямую, правя Html код сайта или же изменяя его CSS свойства.

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

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

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

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

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

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

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

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

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

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

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

Если же строчка с кодом подключения файла 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). Для движков Joomla, WordPress и SMF вы можете узнать расположение этого файла, формирующего открывающие и закрывающие теги HEAD, из этой публикации. Данную информацию я привожу вам для общего сведения и понимания механизма работы внешних (связанных) CSS стилей.

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

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

<head>
...

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

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

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

В Html тег абзаца P мы добавили свойства CSS по правилам внутренних стилей, таким образом текст в данном абзаце будет выводиться шрифтом Verdana размером 14 пунктов и цветом, закодированным в #aa87cc (Коды цвета в Html). Причем эти CSS свойства будут применены исключительно только к данному абзацу. Я иногда использую внутренние (встроенные) CSS стили на этапе отладки дизайна для ускорения процесса по внесению изменений, а затем переношу полученные CSS свойства в файл с внешними стилями.

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

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

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

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

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

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

В фигурных скобках можно написать сколько угодно пар «Свойство — Значение» для данного CSS правила, разделяя их точкой с запятой. Все, что заключено в фигурных скобках называют одним общим термином — блок объявлений, а пару «Свойство — Значение» называют 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;}

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

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

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

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

В CSS файле шаблона вашего сайта вы можете увидеть так называемые комментарии, которые призваны вносить некоторую ясность в назначение того или иного куска CSS кода или отдельного CSS правила. Комментарии могут помочь вам ориентироваться в стилевом файле, но нужно помнить, что комментарии немного увеличивают размер CSS файла, а следовательно после окончания работы над дизайном сайта, вы можете прогнать 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; */

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

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

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

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

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

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

Можете также посмотреть видео «Что такое стили CSS»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

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

• Учебник Html
  • Что такое язык Html, валидатор W3C и Html тэги
  • Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Коды цвета в Html и CSS коде (RGB палитра)
  • Как в Html код вставить картинку и html ссылку
  • Img и обтекание картинки текстом
  • Гиперссылки (a, target blank, href, якоря)
  • Html список (UL, OL, DL и LI)
  • Html таблица (Tr, Th, Td, Table)
  • Html формы - теги Form и Input
• Справочник CSS для начинающих
  • CSS - что это такое
  • CSS селекторы
  • Font (Weight, Family, Size, Style)
  • Background в CSS (color, position, image, repeat, attachment)
  • Padding, margin и border
  • Height, width и overflow
  • Float и clear в CSS
  • Position (absolute, relative и fixed)
• Блочная Div верстка сайта в Html и CSS

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

Очень обяжете, если воспользуетесь этим блоком кнопок:

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

Наверх