Применение технологии каскадных таблиц стилей

CSS (от английского Cascading Style Sheets — каскадные таблица стилей) — это специальная технология для описания внешнего вида электронного документа, то есть для его оформления. Описание осуществляется посредством языка разметки. CSS применяют для оформления документов формата HTML .CSS обеспечивает более эффективную, быструю и удобную работу электронных документов и web приложений. CSS стили помогают обрабатывать такие элементы оформления страниц, как шрифт, цветовая гамма, позиционирование элементов, обеспечивает более эффективную работу с изображениями.

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

Существует целое множество причин, по которым рекомендуется использовать CSS:

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

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

Каскадные таблицы имеют очень полезное свойство — кэширование. То есть при открытии страницы в память web-браузера загружается файл CSS стилей, web-браузер его распознает и запоминает. Таким образом, при следующем открытии страницы web-браузер уже будет уметь распознавать эти стили. Принцип работы аналогичен работе кэш памяти в Windows — сначала проверяется соответствие с содержимым кэш памяти и при отсутствии необходимой информации загружается новая. А если в кэш памяти присутствует нужные данные, то их использование уже осуществляется непосредственно из кэш. Такой процесс обеспечивает наиболее эффективную работу с ресурсами. Тоже самое и в браузере. Благодаря этой технологии, страницы открываются значительно быстрее.

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

Недостатки применения CSS стилей.

Во-первых, это неважная кроссбраузерная совместимость, проще говоря, различные браузеры немного по разному интерпретируют css. Эта проблема частично решается заданием Doctype.

Во-вторых, проблема оценки результата в процессе верстки web приложения. Связь кода и стилей не явная и для просмотра результатов вам потребуется запускать приложение на выполнение. Для HTML верстки есть визуализированные редакторы, позволяющие приблизительно оценить работу с применением css.

Разработчики со всего мира пользуются технологией CSS. Благодаря этой технологии в сети Интернет появляются красочные сайты, отвечающие всем требованиям современного сайтостроения. С применением каскадных таблиц стилей дизайнеры реализуют самые смелые свои идеи и задумки. Технология CSS стала настоящим переворотом в индустрии web-дизайна, новым словом в процессе проектирования web-ресурсов.

Описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением .css, а для связывания html-документа с этим файлом применяется тег :

Пример кода:

" css/style.css" .

#midbar{padding-bottom:30px;

width:655px;

float:left;

margin-left:20px}.

/*задание свойств слоя «Block1», входящего в слой «midbar"*/.

#midbar .block1{margin-bottom:30px;

width:655px;

border: 10px solid #ddd;

border-radius: 15px}.

/*аналогично для слоя «а» */.

#midbar .block1 a{text-indent: 20px;

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

color:black;

text-decoration:none}.

#midbar .block2 {width:655px;

border: 10px solid #ddd;

border-radius: 15px;}.

#midbar .block2 tr img{ border: 5px solid #ddd;

border-radius: 15px}.

#midbar .block2 table div{text-indent: 20px;

text-align:justify;

padding:10px;

padding-bottom:20px;

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

color:black;

text-decoration:none;

cursor: pointer}.

/*чередование цвета фона для строк таблицы *>

#midbar .block2 table tr: nth-child (odd){background-color:#ddd}.

#midbar .block2 table tr: nth-child (even){background-color:white}.

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