Учебник CSS. Бесплатные уроки по CSS. Изучаем каскадные таблицы стилей и пробуем красиво оформлять веб-сайты и страницы.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Уроки CSS. В этой рубрике уже есть публикации CSS правила и CSS синтаксис, CSS свойства. Я хочу поговорить о том, почему просто необходимо использовать таблицу стилей CSS и о возможностях CSS. Давайте вспомним две публикации из рубрики CSS меню: горизонтальное CSS меню для сайта и Горизонтальное выпадающее CSS меню, вертикальное выпадающее CSS меню. Там вы наглядно можете увидеть всю простоту и легкость оформления при помощи каскадных таблиц стилей CSS.

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

При помощи CSS можно создавать и удалять рамки вокруг HTML документа, CSS позволяет изменять шрифты, цвет шрифта, размер шрифта. CSS позволяет управлять отступа между HTML элементами и внутри HTML элементов.

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

Не забываем подписываться на RSS-ленту, twitter и на публичную страницу Вконтакте.

Возможности CSS или почему использовать HTML атрибуты – это смертный грех.

Конечно, использовать HTML атрибуты приходится и очень часто, например, когда вы создаете рассылку на e-mail, вы никуда просто не денетесь от тегов <font>, <span>, тегов логического форматирования и тегов непосредственного форматирования. Часто используются атрибуты: href, id, class, title, onclick и т.д., в общем, все HTML атрибуты, которые относятся к группе универсальных HTML атрибутов и атрибутов событий HTML.

Но поверьте, использовать атрибуты: color, background и пр. для оформления страниц вашего сайта – это смертный грех! Во-первых, такие страницы не будут валидны, во-вторых вы дико увеличиваете объем кода ваших страниц, а соответственно  и объем работы и затраченное времени, а время – деньги.

Но зачем что-то говорить? Давайте лучше посмотрим на примере возможности таблицы стилей CSS. Давайте создадим HTML заголовок <h1>:

[php]

<h1>Самый главный заголовок</h1>

[/php]

А наш заказчик нам говорит: хочу, чтобы все заголовки моего сайта были синего цвета, фон вокруг заголовка был серым, он обязательно должен быть написан курсивным шрифтом, заголовок должен быть подчеркнут. Да, в HTML есть все средства, чтобы это сделать, но чтобы это сделать, помимо тега <h1> нам необходимо использовать теги <u> и <font> и массу HTML атрибутов. Все, что я написал выше в таблице стилей CSS уместится в одно CSS правило:

[php]

h1{

color:#555;

font: italic 2 em Times;

text-decoration:underline;

background:gray;

}

[/php]

Теперь-то я убедил, что все пользователи, которые используют HTML атрибуты для оформления своих страниц люди, которых нужно причислять к лику святых еще при жизни? Сейчас я задал CSS стили, которые можно было бы заменить HTML атрибутами и HTML тегами, но давайте посмотрим на то, чего не умеет HTML и какие возможности есть у CSS, продолжаем задавать стили для заголовка:

[php]

h1{

color:#555;

font: italic 2 em Times;

text-decoration:underline;

background:gray url (newpict.png) repeat x;

border: 2px solid orange;

margin-bottom:0;

padding: 7px;

}

[/php]

Все стало вообще круто, при помощи таблицы стилей CSS мы сделали следующее: вокруг заголовка появилась рамка оранжевого цвета, фоном заголовка стала картинка, которая будет повторяться, если потребуется по оси Х, рамка будет отстоять от заголовка как минимум на 7 пикселов, у заголовка в нижней части элемента есть пустое пространство, и мы его удалили. Я надеюсь, что убедил вас в том, что функций у CSS действительно много.

Простота и легкость CSS стилей. Уменьшаем объем кода при помощи CSS. Функции CSS.

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

Допустим, у нас есть HTML документ, в котором очень много заголовков второго и третьего уровня, и мы хотим, чтобы текст заголовков второго уровня был зеленым, а текст заголовков третьего уровня был красным. Чтобы изменить цвет текста средствами HTML мы должны использовать тег <font> и атрибут color для каждого заголовка, то есть для каждого элемента <h2> и <h3>(HTML цвета, таблица цветов RGB):

[php]

<h2><font color=”green”>Второй по важности заголовок</font></h2>

<h3>><font color=”red”>Третий по важности заголовок</font></</h3>

<h2>Второй по важности заголовок</h2>

<h3>Третий по важности заголовок</h3>

<h2>Второй по важности заголовок</h2>

<h3>Третий по важности заголовок</h3>

<h2>Второй по важности заголовок</h2>

<h3>Третий по важности заголовок</h3>

[/php]

Я не мазохист, поэтому не буду изменять цвет всех заголовков средствами HTML, а воспользуюсь возможностями каскадной таблице стилей CSS:

[php]

h2{

color: green;

}

h3{

color:red;

}

[/php]

Все, теперь все HTML заголовки второго уровня на странице будут зеленые, а заголовки третьего уровня красный. Более того, если вам захочется поменять цвет заголовков, то вы просто откроете таблицу стилей CSS и измените всего лишь одну строчку, а не 20 или 30 строк. Точнее, мы просто изменим одно единственное CSS правило и всё!

Но я подозреваю, что вам этого мало, хорошо, давайте так: помните пример из предыдущего раздела с заголовком первого уровня. Представим ситуацию, заказчик говорит: хочу, чтобы все заголовки на сайте выглядели так же, как и заголовок первого уровня. Ну вот давайте, пишите теги <font>, <u>, пишите HTML атрибуты, да ладно, шучу я, достаточно просто изменить одну строку в таблице стилей CSS, просто добавить CSS селекторы к существующему CSS правилу:

[php]

h1, h2, h3, h4, h5, h6{

color:#555;

font: italic 2 em Times;

text-decoration:underline;

background:gray url (newpict.png) repeat x;

border: 2px solid orange;

margin-bottom:0;

padding: 7px;

}

[/php]

Теперь все заголовки на web-странице будут выглядеть одинаково, а те, кто считает, что HTML атрибуты понятней и проще для оформления, пусть попробуют поставить таймер и засечь за какое время они зададут стили для 20-30 заголовков на странице при помощи HTML, у меня на это ушло 3 секунды.

Обычно, все CSS стили хранятся в одном файле, и это очень удобно, потому что так проще изменять отображение web-страниц, проще редактировать код. Конечно, вы можете разбить свою таблицу стилей на несколько файлов, но вопрос: зачем? Чтобы потом вспоминать в каком файле что находится? Или чтобы увеличить время загрузки страницы и формирование ее браузером? Или чтобы увеличить объем кода HTML документа, ведь каждую таблицу стилей нужно подключить.

Применение CSS стилей для нескольких документов. CSS файл.

Помимо того, что вы можете объединять CSS стили и CSS правила в один документ, вы можете использовать одну таблицу стилей CSS сразу для большого числа документов. Вы можете создать один CSS файл и подключать его к различным HTML документам, точнее импортировать CSS файл во множество документов. Именно таким образом сейчас оформляются все сайты, создаются темы для WordPress, шаблоны для Joomla и темы Drupal.

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

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)