вход

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

css

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

Что такое CSS

 

CSS это аббревиатура от слов - Cascading Style Sheets, что в переводе с английского означает Каскадные Таблицы Стилей. Эти таблицы являются специальным программным кодом, с помощью которого web-программисты могут оформлять свои html-страницы так, как им хочется, а именно: менять цвета различных элементов, начиная от границ и заканчивая текстом, устанавливать свои шрифты, производить позиционирование элементов, подгружать фоновые картинки для блоков или списков и многое-многое другое.

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

Так в чём же основной смысл CSS и для чего было сделано разделение: отдельно стили, отдельно содержимое? Важнейшая задача CSS - это настроить внешний вид в соответствии с требованиями пользователя, при этом оставив нетронутой базовую разметку сайта, то есть отделить логику и структуру самой web-страницы (которая задаётся с помощью различных языков разметки) от фактического описания внешнего вида этой страницы (всё это и делается с помощью CSS)

То есть сами html или php файлы не должны содержать внутри себя элементы разметки со стилями, а только, при необходимости, - атрибуты типа class или id. А весь внешний вид элементов разметки и его содержимого должен определяться непосредственно в каскадных таблицах стилей. Использование CSS позволяет не только улучшить доступность html документа для различных видов устройств: экран монитора или мобильного устройства, вывод документа на печать, вывод на устройство позволяющее читать слепым (шрифт Брайля) и даже чтение голосом, но и уменьшает сложность и многократное использование одних и тех же стилей в разных местах документа!

Как подключить каскадные таблицы стилей?

Подключаются такие файлы обычно следующей конструкцией:

<head>   
.....  
 <link rel="stylesheet" href="style.css" type="text/css" />
</head>

Где тег <link> обязательно располагается между тегами <head> и </head>, а у самого тега <link> присутствует обязательный параметр “href”, который указывает на месторасположения файла стилей style.css

Но встречается и такой метод подключения как:

<head> 
..... 
<style type="text/css"media="all"> 
  @import url(style.css); 
</style> 
</head>

Здесь файл стилей подгружается с помощью директивы @import, которая располагается между тегами <style> и содержит обязательный параметр url, в котором указывается путь до самого файла стилей

Так же CSS конструкции можно записывать и непосредственно в html-файле, заключив стили в теги <style>…</style>

<head> 
..... 
<style type="text/css"> 
   html { color: #ff000; }  
</style>  
</head>

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

Почему именно каскадные таблицы стилей?

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

1) inline-стили - это те самые стили, которые повсеместно использовались ранее и добавлялись к различным элементам с помощью атрибута “style” непосредственно в разметке документа. Такие стили обладают наивысшим приоритетом при генерации страницы браузером, эти стили будут применены почти всегда, даже если возникает конфликт свойств с внешними стилями, указанными для текущего элемента, за исключением применения конструкции !important - об этом будет в одной из следующих статей по CSS;

2) внедренные стили - это стили, которые перечислены в теге <style>, непосредственно в заголовке документа. Эти стили будут иметь меньший приоритет по сравнению с предыдущим способом подключения, и в случае возникновения конфликта с inline-стилями, применяться не будут;

3) импортированные стили - это стили из внешне загружаемого файла .css, которые подключены к html документу с помощью директивы @import. Такой вид подключения ещё менее приоритетный, чем предыдущие и стили будут применены только в случае отсутствия аналогичных конструкция в двух других способах (встроенные и внедрённые);

4) связанные стили - это самые распространённые стили, которые присоединяются к html-файлу конструкцией в виде тега <link>. Данный способ обладает наименьшим из возможных приоритетов, и стили будут применены в самую последнюю очередь, после того, как браузер не найдёт аналогичных правил в оставшихся способах подключения

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

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Что такое CSS, как подключить таблицу стилей и почему именно каскадные?

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.