Быстрая CSS-верстка шаблонных элементов

Бесплатная библиотека готовых CSS-стилей от web-студии VOLEGO.RU для быстрой верстки макетов, шаблонов страниц и декорирования элементов HTML-разметки. Селекторы, описанные в микрофреймворке полностью свободны для модификации, копирования и использования.

Способы подключения CSS

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

1) Прямое встраивание

Применить стиль CSS можно без использования каких-либо селекторов напрямую, прописав стиль в свойстве style конкретного элемента, например:

					
текст внутри блока будет красным
Здесь текст будет не только красным, но еще и жирным.

Такой способ указания стилей очень неудобен для поддержки и делает HTML-разметку крайне "замусоренной", поэтому применять его нужно с крайней осторожностью.

2) Группировка стилей

Можно присвоить CSS-селекторы нужным элементам и собрать все стили в одном блоке <style>, который обычно выносят в раздел <HEAD> страницы, но можно вставлять такое описание и по "ходу страницы".

					<!doctype html>
					<html lang=ru>
						<head>
							Заголовок страницы
							
							
							
						</head>
						<body>
							
зеленый текст, свойство которого задано в разделе HEAD
красный текст, свойство которого задано в теле страницы
</body> </html>

3) Подключение внешним файлом

Самый популярный способ подключения стилей CSS - делать это при помощи внешних файлов, путем включения в раздел <HEAD> или тело страницы записи со ссылкой на файл, содержащий описание селекторов и стилей CSS:

<link type='text/css' rel='stylesheet' href='http://mysite.ru/css/mycss.css'/>

Этот способ всем хорош:

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

2. При включенном кэшировании со стороны сервера - не требуется загружать файлы стилей повторно.

3. Возможность применения сторонних программ и препроцессоров для работы с CSS-кодом.

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

4) Асинхронная (отложенная) загрузка

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

					function loadcssfile(filename){
						var fileref=document.createElement("link");
						fileref.setAttribute("rel", "stylesheet");
						fileref.setAttribute("type", "text/css");
						fileref.setAttribute("href", filename);
					}
				

В качестве параметра, этой функции передается URL-файла со стилями:

					window.onload = function(){
						if(window.innerWidth>1000){
							loadcssfile("http://mysite.ru/css/mycss.css");
						}
					}
				

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

5) Модификация при помощи скриптов

Под данным способом подразумевается изменение стиля или CSS селекторов элемента при помощи JavaScript, JQuery или других распространенных js-библиотек.

document.getElementById('my_element').style.color="red";

Данный скрипт применит красный цвет для шрифта внутри элемента, ID которого установлен как my_element.

Такой же результат можно получить, используя JQuery:

$( "#my_element" ).css('color','red');

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

Заключение

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

Оставить отзыв или сообщение




Код защиты

Мы искренне хотим сделать максимально-полезный ресурс для как можно большего числа web-разработчиков.

Будем признательны за любой отзыв, совет, предложение или идею о том как нам еще улучшить наш проект, а так же за ссылку на наш сайт:

http://mycss.volego.ru