Каскадная таблица стилей CSS

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

Каскадные таблицы стилей дают больше свободы веб-дизайнерам, но и привносят некоторую путаницу применения CSS.

Как создать каскадные таблицы стилей CSS?

Изначально язык гипертекстовой разметки HTML разрабатывался для форматирования веб-страниц. Однако, в HTML-стандарте недостаточно разработан творческий аспект.

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

GF Веб-студия

Заказать сайт

Что же можно сделать с помощью каскадной таблицы стилей CSS?

В создании каскадной таблицы стилей, то есть .CSS-файлов нет ничего сложного.
Это такие же обычные текстовые файлы, как и HTML. Они могут создаваться в любом текстовом редакторе. Например, Блокнот Windows или Notepad++. Или же в профессиональном редакторе веб-страниц. Например, Adobe Dreamweaver.

Самое главное – поменять расширение файла на .css, хотя специальные программы делают это автоматически.



Чтобы добавить каскадную таблицу стилей CSS на HTML-страницу, необходимо выбрать наиболее приемлемый способ.

Добавление каскадных таблиц стилей

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

Добавить каскадную таблицу стилей CSS на веб-страницу можно тремя способами.

Внутренние стили – самый простой вариант реализации каскадной таблицы стилей CSS, но он не обеспечивает достаточной гибкости. Стиль применяется только к тому тегу, в котором он определен, и совершенно не влияет на остальные элементы страниц. Для определения внутреннего стиля используется атрибут style.

Например,
внутренний стиль, устанавливающий цвет расположенного только в пределах элемента Н1 текста, будет выглядеть так:

<H1 style=”color: blue”>Это основной заголовок синего цвета.<H1>
Этим способом форматирование применяется для всей веб-страницы. Контейнерный тег <STYLE> размещается в HTML-документе внутри тега <HEAD>.

Например,
Объявление стиля будет выглядеть так:

<HEAD>
<STYLE>
H1
{color:blue}
</STYLE>
</HEAD>

Если текст на веб-странице поместить внутри тега <H>, то этот текст будет отформатирован синим цветом.
Этим способом можно задать стилевое оформление для всего сайта. Если сайт состоит из большого количества страниц, то изменять какое-либо его стилевое оформление достаточно трудоемко.

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

Таким образом, все изменения, вносимые в него, автоматически приведут к изменению форматирования связанных веб-страниц.

Например.
Создание связи с .css-файлом.

1.Создайте файл с расширением .css, в котором задайте кегль, цвет шрифта или любые другие настройки.

2. Создайте HTML-файл с содержимым сайта.

3. Добавьте следующий фрагмент кода внутрь тега-контейнера <HEAD>.
<HEAD>
<LINK rel=stylesheet href=”имя_файла.css” type=”text/css”>
</HEAD>

4.Разместите .css и .html-файлы на удаленном сервере.


Это все, что нужно сделать. Теперь, чтобы изменить форматирование веб-страниц, достаточно просто заменить старый .css-файл новым.

Можно также добавить несколько .css-файлов к одному HTML-документу, просто перечислив их в заголовке, как показано в следующем примере.

<HEAD>
<LINK rel=stylesheet href=” файла1.css” type=”text/css”>
<LINK rel=stylesheet href=” файла2.css” type=”text/css”>
<LINK rel=stylesheet href=” файла3.css” type=”text/css”>
</HEAD>


Запомните! Если .css-файл отделен от HTML-документа, то тег <STYLE> уже не используется.
Обратите внимание на разницу в коде HTML при различных вариантах использования технологии каскадной таблицы стилей CSS.

Способ 2: Объявление стиля с помощью тега <STYLE>.

<HEAD>
<STYLE>
H1
{color:blue}
</STYLE>
</HEAD>


Способ 3: Отдельный .css-файл.

H1 {
color:blue
}



Каскадным таблицам стилей позволяют создавать адаптивный дизайн сайта, который хорошо смотрится на всех мобильных устройствах.

Каскадные таблицы стилей для сайтов responsive

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

Вы можете заказать создание сайта с адаптивным дизайном прямо сейчас.
GF Веб-студия

Заказать сайт

В начало

GFWebStudio создания сайтов

GFWebStudio оказывает услуги по созданию эффектной презентации бизнес-плана или бизнес-проекта в программе Microsoft PowerPoint. Имеется большая коллекция готовых шаблонов.