Наверняка Вы уже слышали о CSS, но не знаете, что это такое? На этой странице Вы узнаете, что такое CSS (Cascading Style Sheets — Каскадные Таблицы Стилей), для чего они нужны и что можно сделать с их помощью.

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

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

В классическом HTML структура и дизайн идут вперемешку: рядом с текстовым абзацем его цвет, выравнивание, размер и тип шрифта и т.п.

Идея CSS

Смысл CSS в том, чтобы отделить HTML-код страницы от элементов ее оформления. Проще говоря, HTML-код указывает браузеру, что это, мол, заголовок 1, это параграф, а это таблица или картинка. А все оформление выносится в отдельный файл, который приклепляется при помощи ссылки на него к нужным (или ко всем) страницам сайта.

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

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

Использование CSS значительно экономит время

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

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

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

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

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

Какие преимущества дает CSS

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

Современный подход к созданию сайтов, так называемая блочная верстка (при помощи тегов DIV) предполагает активное использование стилей, а это в свою очередь предполагает знание свойств CSS и их правильное применение.

Основные преимущества, которые дает CSS:

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

Полагаю, вы уже создали свою первую интернет-страничку. На следующей странице мы познакомимся с синтаксисом CSS и подключим к нашей web-странице внешнюю таблицу стилей.

Идем далее >>