Введение в CSS, встраивание в HTML. Добавление CSS

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

Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.

CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила: значение правила). Никаких кавычек в значениях правил не ставим! Пример:

Color: red; background: #cccccc ;

Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:

Вложение(inline).
Встраивание(embeding).
Связывание(linking).

Основа документа - html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.

Метод вложения (inline) CSS

Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила: значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):

Обычный текст

"color:red; background:#cccccc" > К это абзацу применен стиль методом встраивания.

Метод встраивания (embeding) CSS

Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:

< style type= "text/ css"> p { color: red ; background: #cccccc } Здесь применен стиль методом вложения. Обычный текст

В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “{ }”.

Элемент “style” ставят только в элементе “head”.

Метод связывания (linking) CSS

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

Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение.css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.

Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:

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

Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel (rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ - это таблица стилей.

CSS (Cascading Style Sheets) - язык для управления стилем Web-страниц.
Применение CSS позволяет значительно сократить объем HTML-документов, особенно если у вас имеется множество страниц с однотипным стилем и, в то же время, упростить работу по созданию и добавлению новых документов. Сохранив описание различных стилей в отдельных файлах, вы сможете с легкостью манипулировать стилями.

Описание CSS

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

Файл style.css

Файл index.htm

Пример Содержание Документа

Если файл стилей находится на другом сервере, необходимо указать его полный URL
href="("http://...")" Можно описать стили и в коде Web-страницы, внутри тэга , как показано в следующем примере:

Файл index.htm

Пример Глобальных Таблиц Стилей

В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах WEB-страницы. То есть все текстовые элементы, находящиеся внутри тэгов

и на этой странице будут отображаться красным курсивом, с размером символа в 32 пикселя.
И последний вариант - описание стиля находится непосредственно внутри тэга элемента к которому применяется этот стиль, например:

Данный стиль применяется только к этой надписи

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

Теперь рассмотрим случай, когда необходимо присвоить стили не всем одинаковым элементам страницы, а только некоторым - для этого используется параметр CLASS = "имя класса" или идентификатор ID="имя элемента" , которое может быть присвоено любому элементу страницы (параграф, таблица и т.д.).
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).
Например, указав в описании стиля:

Bold_italic {font-weight: bold; font-style:italic}

Можно сделать так, что только некоторые ячейки таблицы будут отображаться жирным курсивом. Для этого присвоим им стиль класса bi:

Внимание! Названия классов чувствительны к регистру.

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

Псевдоклассы и псевдоэлементы:

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

Синтаксис:
селектор:псевдокласс { свойства }
селектор.класс:псевдокласс { свойства }
селектор:псевдоэлемент { свойства }
селектор.класс:псевдоэлемент { свойства }

Список псевдоклассов и псевдоэлементов:

Псеводоклассы ссылок - эти псевдоклассы элемента , обозначающего ссылку.
active (активная ссылка)
visited (посещенный ранее URL)
hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в NN).
Псевдоэлементы первой строки. Может быть использован с block-level элементами (p, h1 и т.д.).Изменяет стиль первой строки этих элементов.
Псевдоэлементы первой буквы. Влияет не на всю строку, а только на первый символ.

ПРИМЕР: a:link,a:visited {color:blue} a:active {color:red} a:hover {text-decoration:none}

Краткое описание языка CSS

Дополнения

Меры длины (Синтаксис: "+"/"-"XX ед.изм)
ПРИМЕР: -566pt em - ems высота используемого элементом шрифта ex - x-height ширина буквы "x" используемого элементом шрифта px пикселы in дюймы cm сантиметры mm миллиметры pt точки (1pt = 1/72in) pc picas (1pc = 12pt) Процентные меры
ПРИМЕР: -566% -/+%XX Уменьшение/увеличение в процентах. Цвета Название цвета ПРИМЕР: magenta #rrggbb Цвет в RGB, где rr,gg,bb - шестнадцатиричное число.
ПРИМЕР: #00cc00 rgb(x,x,x) Цвет в RGB, где "х" десятичное число от 0 до 255.
ПРИМЕР: rgb(0,204,0) #rgb Цвет в RGB, где r,g,b - шестнадцатиричное число.
ПРИМЕР: #0c0 rgb (x%,x%,x%) Цвет в RGB, где где "х%" число от 0.0 до 100.0.
ПРИМЕР: rgb(0%,80%,0%)

Некоторые хитрости управления стилями

Указывайте относительные а не абсолютные размеры шрифтов.

Указывая абсолютные размеры шрифтов, вы лишаете людей, просматривающих ваши странички, возможности увеличивать или уменьшать размер шрифтов с помощью специальной кнопочки в броузере в соответствии с разрешением их дисплея и зрением. Шрифты будут отображаться только такого размера, который вы указали при написании странички.
Поэтому, желательно использовать для этих целей указание размеров в процентах. В этом случае размер шрифта будет меньше (больше) на указанное вами количество процентов, чем при оформлении его с помощью стандартного HTML-тега.

Заключайте описания стилей в тэг комментариев

Это делается для того, чтобы устаревшие браузеры, не понимающие тэг

Можно указать значения отступов вокруг объектов, как отрицательные величины.

Этот трюк позволяет накладывать один слой текста на другой и получать очень интересные и необычные результаты.
Следующий код создает заголовок, который выглядит трехмерным без использования графики.

Text

Отступ в первой строке абзаца.

Укажите в описании стилей

P { text-indent: 1cm; }

Теперь первые строки каждого нового абзаца будут выводиться с "красной" строки.

CSS расшифровывается как «Cascading Style Sheets», что в переводе означает «Каскадные таблицы стилей». Используется для оформления веб-страниц. Если в HTML-коде находится содержимое (то, что покажет браузер), то CSS определяет его оформление (то, как браузер это покажет). Прелесть CSS в том, что с помощью одного стиля можно оформить сразу все однотипные элементы страницы или целого сайта (сразу все ссылки, абзацы, списки). CSS-стилем вы один раз определяете, как должен выглядеть тот или иной элемент, например, картинки, и они меняют свое оформление сразу во всех документах. Чтобы изменить форматирование текста по всему сайту, вам достаточно изменить CSS-код всего один раз.

Основные элементы CSS

Как HTML состоит из тегов , атрибутов и значений, так и CSS состоит из своих собственных элементов. Суть конструкций CSS можно объяснить так: «Указать, какой элемент страницы оформить, и указать, как его оформлять». Вот составляющие конструкции CSS.

Селектор . Идентификатор, который указывает браузеру, к какому именно элементу страницы применить оформление. Благодаря ему обозреватель «понимает», что стиль предназначен, например, для оформления списков или таблиц.
Блок объявления стилей . Пишется после селектора и заключается в фигурные скобки. В нём задаётся стиль элемента (его оформление). Блок объявления стилей состоит из двух частей.
Свойство . Аналог атрибута в HTML. Определяет, какое именно свойство оформления будет изменено.
Значение . Задаётся свойству через двоеточие и определяет, как именно свойство будет изменено.

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

Типы селекторов

В зависимости от того, свойства каких элементов страницы они определяют, селекторы бывают разных типов.

Универсальный . Задаёт правила всем элементам страницы, для которых не установлены другие правила.
Код * {font-size: 14px;} устанавливает размер шрифта 14 пикселей всем элементам документа, для которых не заданы другие правила с помощью других селекторов.
Тега. Этот тип селектора задаёт правила форматирования для содержимого определённого HTML-тега. Название селектора совпадает с именем дескриптора, только пишется без угловых скобок: p , h1 , ul .
Например, код h2 {color: red;} устанавливает зелёный цвет текста для всех заголовков второго уровня, то есть содержимого тегов
.
Атрибута . С помощью этой группы селекторов можно определить стиль оформления содержимого всех тегов, которым задан определённый атрибут. Селекторы можно задавать более точно, указывая не только имя атрибута, но и присвоенное ему значение, а также название содержащего его тега. Этим можно пользоваться, чтобы делать оформление более индивидуальным.
Класса . Вид селекторов на случай, когда нужно по-разному оформить содержимое тегов одного типа. Например, ссылки в нижней части сайта вы хотите сделать красными, тогда как все остальные должны оставаться синими, как и были. Чтобы применить правила класса к элементу сайта, нужно указать имя класса в атрибуте class соответствующего тега.

Предположим, с помощью класса step отдельным элементам нужно задать отступ слева в 15 пикселей.

CSS-код будет таким:

Step {margin-left: 15px;}

HTML-код, который привяжет элемент к правилу, будет следующим:

Текст с отступом

Идентификатора . Используется совместно с атрибутом id HTML-тега и используется, когда свойства нужно задать единственному элементу. В отличие от селектора класса, перед именем которого ставится точка, пишется через «решётку»:

#exclusive {color:orange;}

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

P i {fint-family: Century;}

Остальные группы селекторов основаны на совмещении перечисленных типов, а также на принципе наследования, когда дочерний элемент берёт свойства родительского.

Комбинировать и группировать селекторы удобно во многих ситуациях. Например, чтобы задать правила класса step только для ссылок, нужно указать оба селектора через точку (сначала тег, потом класс):

A.step {margin-left: 15px;}

Как подключить CSS к HTML-странице?

Заставить инструменты создания сайтов взаимодействовать друг с другом можно несколькими способами. По методу добавления стили делятся на следующие категории.

Встроенные стили

Задаются в документе прямо внутри HTML-тега с помощью атрибута style . Имеют наивысший приоритет. Это значит, что если для одного и того же элемента задано разное оформление, то предпочтение будет отдано правилу, которое прописано внутри тега. Селектор для встроенного стиля не нужен, так как связь стиля и тега очевидна - оформление тега в нём и задано.

Следующий код задаёт размер и цвет шрифта тексту внутри тега

Текст, оформленный с помощью внутреннего стиля.

Глобальные стили

Задаются тегом …

Связанные стили

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

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

Чтобы связать правила из CSS-файла с HTML-страницей, используется тег , добавленный в контейнер , и его атрибуты.

Вот строка, связывающая правила из файла mystyle.css с HTML-страницей:

rel="stylesheet" определяет, что тег ссылается на файл таблицы стилей, href="mysyle.css" задаёт его адрес. Правила адресации такие же, как у обычных ссылок – путь может быть абсолютным, относительным и т. д.

Импортированные стили

С помощью команды @import можно добавить стили из CSS-файла в текущую таблицу. Это может потребоваться, например, если вы хотите дополнить индивидуальное оформление документа, заданное с помощью глобальных стилей, универсальными правилами из отдельного файла. Со встроенными стилями метод использовать нельзя.

Код ниже импортирует в документ таблицу файла any.css , которая находится в папке с редактируемым HTML-документом:

@import url(any.css);

Команда прописывается строкой ниже открывающего тега

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента .

Примечание: тут мы рассматриваем атрибут style для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Подробнее о возможностях CSS вы можете почитать в CSS самоучителе .

Код примера познакомит вас с новым способом форматирования документа:

Этот текст написан красным цветов с помощью шрифта Verdana.

Этот текст написан зеленым цветом с помощью шрифта Times.

Этот текст имеет размер 30 пикселей.
Попробовать »
Внимательно посмотрите на пример, с помощью атрибута style мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. Встроенный стиль применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).

Примечание: посмотреть наследуется ли значение применённого свойства дочерними элементами или нет, можно в CSS справочнике на странице с данным свойством.

Варианты вставки и использования CSS в HTML-документ.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей ) — технология описания внешнего вида документа, написанного языком разметки.

Произвести вставку (include) CSS в HTML можно несколькими способами.

Указание CSS-свойств через атрибут style

Атрибут style (с англ. стиль ) — определяет стилевую информацию для соответствующего элемента. Атрибут style применим почти ко всем элементам документа. Например:

example of using style

Результатом использования стиля color:red станет строка красного цвета. Смысл использования такого варианта заключается в возможность определить CSS-свойства для отдельно взятого элемента документа.

Вставка CSS-правил в контейнер style

Тег style (с англ. стиль ) — используется для определения стилей элементов web-страницы. Следует отметить, что тег style следует размещать внутри контейнера head . Например:

Атрибут type — сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили. В нашем случае это text/css .

Смысл использования такого варианта заключается в возможность определить CSS-правил для ряда селекторов. В приведённом примере, для селектора p определено CSS-свойство color как red .

Вставка CSS-файла при помощи тега link

Тег link устанавливает связь с внешним документом, в нашем случае CSS-фалом. Следует отметить, что тег link всегда размещается внутри контейнера head . Например:

В данном случае, атрибут rel определяет отношения между текущим документом, и файлом style.css , как stylesheet (с англ. таблица стилей ). Значением атрибута type является MIME-тип данных подключаемого файла, т.е. text/css . Последний атрибут href содержит путь к подключаемому CSS-файлу.

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

Импорт CSS-правил

Команда @import (с англ. импорт ) — аналогична тегу link , за исключением того, что вставке CSS-файла производится в текущую таблицу стилей. Например: