Счётчики





Рейтинг@Mail.ru

Яндекс.Метрика




Навигация



Стили CSS


Основа работы с каскадными таблицами стилей - CSS


design_css_html

CSS (Cascading Style Sheets) каскадные таблицы стилей - язык описания внешнего вида документа, написанного с использованием языка разметки. Чтобы было понятнее - таблицы стилей нужны для создания личного раздела, для редактирования дизайна HTML-страниц собственного сайта.

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

Таблицы стилей бывают двух типов - внутренние и внешние, в зависимости от того, где расположены стили, непосредственно на самой странице (внутренние), или во внешнем файле, связанном с веб-страницей определённым адресом.

Внутренняя таблица это набор стилей, которые являются частью HTML кода веб-страницы и всегда должны находиться меду элементами <style> и </style> в теле тега <head>, пример:

<head>

<style>

hr { color: sienna; }

p { margin-left: 20px; }

h1 { margin: 30px auto 0px center; }

body { background-image: url("img/back40.gif"); }

</style>

</head>

Теги <style> и </style> сообщают вашему браузеру, что данные, расположенные между ними, являются CSS кодом. Такие таблицы стилей являются не самым лучшим способом для проектирования дизайна сайта, состоящего из большого количества страниц. Во-первых, такой код придётся копировать и вставлять в каждую страницу, а ещё труднее будет потом всё это редактировать при новых изменениях. Во-вторых, каждый такой вставленный код во много раз увеличивает размер HTML кода на странице в целом, в следствии чего, страница будет дольше загружаться.

Можно писать стили даже отдельно для каждого тега, пример для тега "DIV" - <div style="border: 1px solid red; background-color: yellow;">Элемент DIV</div>. Минус от такого типа стилей заключается в больших неудобствах, смешивается структура HTML документа и стилизация CSS, поиск и правка таких стилей занимает достаточно много. времени.

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

design_css

Внешняя таблица стилей, это обычный текстовый файл, содержащий в себе весь CSS-код. В его содержимое не должны входить никакие HTML-теги, поэтому тег <style> в нём указывать не надо, при сохранении текстового файла со стилями надо установить имя файла (которое может быть любым), но обычно это "styles" и с расширением ".css".

Для подключения внешней таблицы стилей, вам нужно прикрепить её к HTML-документу с помощью тега <link>, который должен располагаться внутри тега <head>.

<head>

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

</head>

Тег <link> должен содержать три атрибута:

1.href="styles.css" - определяет название и расширение внешнего CSS-файла, который может отличаться в зависимости от того, где вы его храните, к примеру в папке CSS --- "css/styles.css"

2.rel="stylesheet" - указывает тип ссылки; в данном случае это ссылка на таблицу стилей,

3.type="text/css" - указывает тип файла, на который ссылается тег

К страницам можно присоединять множество таблиц стилей, добавляя несколько тегов <link>, каждый из которых будет указывать на свой файл с таблицей стилей - основной и для мобильной версии и т.д.

Плюс от использования внешних таблиц стилей заключается в том, что если потребуется внести изменения в CSS-код при большом количестве страниц на сайте, то отредактировать CSS-код придётся только в одном файле, а не во всех HTML-документах.




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