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

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

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

Таким образом с помощью языка HTML вы формируете структуру web-страниц, например задаете . А с помощью правил CSS вы задаете то, как эти элементы html-документа будут отображаться в браузере. То есть задаете тип и цвет шрифта, выравнивание текста, цвет фона элементов, различные отступы и др. Причем одно правило CSS может влиять на визуальное представление сразу нескольких элементов веб-страницы.

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

Добавление стилей или как подключить CSS к HTML документу

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

1. Первый способ заключается в размещении стилей в отдельном файле или нескольких файлах с расширением.css. В этом случае для подключения CSS стилей используется link , в котором прописан путь до внешнего файла стилей. Помещается этот метатег в раздел заголовков соответствующей веб страницы между тегами head. Вот формат его написания:

Путь до файла стилей записывается в качестве значения атрибута href. Атрибут rel указывает браузеру чем является файл на который ссылается тег link. Значение «stylesheet» говорит о том, что этот файл внешняя таблица стилей. В атрибут type указывается тип MIME файла. Для внешней таблицы стилей тип MIME «text/css».

Так примерно будет выглядеть строчка подключения стилей CSS в html коде:

...
.css"/>
...

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

2. Второй способ заключается в написании так называемых глобальных стилей , которые прописываются прямо в html коде веб-страницы. Их заключают в парный тег style и обычно помещают в секцию заголовка между тегами head:

...

...

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

3. Третий способ это так называемые встроенные или внутренние стили. Для этого просто в требуемый html тег нужно поместить атрибут Style , который включает в себя в качестве параметров набор CSS свойств:

Абзац с серым фоном и красным текстом

Причем свойства заданные в атрибуте style применяются только к одному элементу html. Обычно этот способ подключения стилей применяют на этапе отладки дизайна сайта, а затем переносят полученные CSS свойства в файл с внешними стилями.

Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.

Селектор {
Свойство: Значение;
Свойство: Значение;
...
Свойство: Значение
}

Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):

• селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
• пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
• между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
• свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
• пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
• так же код не чувствителен к регистру символов.

Чтобы было понятней рассмотрим несколько примеров.

Разберем данное CSS правило:

• body — это селектор, который представляет из себя имя тега ;
• background — свойство стиля, с помощью которого задаются параметры фона;
• #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.

В итоге данный стиль применится к элементу body web страницы и окрасит фон страницы в заданный цвет. Рассмотренный стиль называется стилем переопределения тега , потому что в качестве селектора указано имя тега без символов < и >.

Рассмотрим еще пример:

h1 {
font-size: 24px;
color: green;
}

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

зеленым цветом и задаст ему размер шрифта 24 пикселя.

В качестве селектора тега, кроме имени тега, можно указывать класс :

Yellowtext {color:yellow}

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

В этом абзаце оранжевый текст

В примере мы привязали к тегу

Css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.

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

Cursivtext {font-style: italic}

желтый текст курсивом

В этом примере к тегу

Мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.

Кроме классов в качестве селектора правила css можно использовать идентификатор , который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:

• в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
• привязка к html элементу осуществляется через атрибут id , в качестве значения которого устанавливают имя стиля без знака решетки;
• значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.

Рассмотрим пример для ясности:

#textcenter{text-align: center;}

Текст по центру

К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.

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

h1.redtext, p strong {color: red}

В примере через запятую указано два селектора: «h1.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h1 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p:

Этот заголовок отображается красным цветом

обычный текст, красный текст

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

Да, и еще один момент, который уже затрагивался в предыдущем уроке, но я его повторю еще раз. Часто многие новички боятся уже одного словосочетания «Каскадные таблицы стилей» или просто «таблицы стилей», поэтому, когда они встречают подобные выражения в тексте, то подсознательно им кажется, что они не понимают о чем идет речь. Так вот, на самом деле нет никаких таблиц в том виде, к которому вы привыкли - нет. А эти слова описывают только одно - все то, что относится к CSS, то есть различные правила CSS, свойства, значения и так далее. В общем, все то, что мы с вами будем изучать в этом учебнике. Кстати, сюда же можно отнести и просто слова «CSS» и «стили».

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

Подключение встроенных стилей (inline) заключается в применении атрибута style к определенному тегу на странице. В этом случае значением атрибута является одно или несколько (через точку с запятой) с соответствующими значениями. Как правило, такой способ используется в тех случаях, когда надо изменить характеристики конкретного элемента на одной определенной странице.

Общий синтаксис

<тег style="свойство:значение; свойство:значение; ...">...

Пример подключения в CSS встроенных стилей

Параграф 1

Параграф 2

Результат в браузере

Параграф 1

Параграф 2

Внутренние стили

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

Пример подключения в CSS внутренних стилей

Параграф 1

Параграф 2

Результат в браузере

Параграф 1

Параграф 2

Внешние стили

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

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

Пример подключение в CSS внешних стилей

Параграф 1

Параграф 2

Содержимое файла style.css

Body { background: #ccccff; /* цвет фона страницы */ } p { color: red; /* цвет текста параграфов */ font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */ font-size: 150%; /* размер шрифта */ text-align: center; /* текст по центру */ border: 5px green double; /* стили рамки */ }

Результат в браузере

Параграф 1

Параграф 2

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

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

Подключение CSS через правило @import

Еще один способ подключения стилей, находящихся в отдельных файлах заключается в использовании правила . Это правило служит для объединения нескольких таблиц стилей в одну, что иногда бывает достаточно удобно. Подключение происходит во внешние или внутренние таблицы стилей, для этого после имени правила записывается конструкция url(), где в кавычках (" ") указывается адрес файла с CSS. Либо url() вообще не пишется, а сразу идут кавычки и адрес файла. Общий синтаксис следующий.

Во внешней таблице стилей

@import url("адрес файла"); @import "адрес файла"; ...

Во внутренней

Давайте рассмотрим использование этого правила во внешних таблицах стилей, для этого я вам приведу два примера для сравнения.

Пример 1: обычное подключение внешних стилей

Содержимое страницы.

Пример 2: подключение внешних стилей совместно с CSS-правилом @import

Содержимое страницы.

Содержимое файла style1.css

@import url("style/style2.css"); @import url("style/style3.css"); Ниже здесь дополнительно могут идти обычные стили со свойствами, значениями и т.д.

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

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

Пользовательские стили

Во многих браузерах есть возможность для подключения файла с CSS самими пользователями, чтобы они могли менять внешний вид просматриваемых сайтов, как говорится, «под себя». Например, изменить размер и гарнитуру шрифта, цвет текста и фона каких-то элементов и т.д. Естественно в этом случае стили создаются уже самим пользователем. Допустим, в Internet Explorer подключить пользовательские стили можно перейдя в: Сервис → Свойства обозревателя → Общие → Оформление.

Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса». С вами вебмастер Александр! В прошлой статье мы разобрали, что такое CSS-стили и насколько огромное значение они имеют в WEB-программировании.

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

Не будем откладывать дело в долгий ящик и приступим!

Подключение отдельного CSS-файла!

Один из самых удобных и простых способов подключения стилей является подключение отдельного файла со стилями. Для этого нужно при помощи текстового редактора notepad++ (или любого другого) создать файл с расширением.css и поместить в той же папке, что и файл, к которому мы хотим его разместить.

После чего в HTML-файле между тегами разместить следующий код:

Теперь давайте разберем, что все это значит:

Link # в переводе с английского обозначает «ссылка». Таким образом мы показываем браузеру, что далее у нас пойдет речь пойдет о ссылке. rel= # данным атрибутом мы показываем, какое отношение файл CSS имеет к файлу HTML. "stylesheet" # а именно то, что CSS-файл является каскадной таблицей стилей. type="text/css" # тут все просто: это указание того, что файл написан в текстовом формате и имеет расширение.css href="style.css" # это ссылка на файл с CSS-стилями.

Как по мне, это и есть наиболее предпочтительный способ подключения стилей CSS.

Прописываем стили непосредственно в HTML-файле (первый способ)

Следующим способом указывания CSS-стилей является их прописывание непосредственно в HTML-документе. Выглядит это так:

Если мы посмотрим, как будет отображаться данный HTML-документ в браузере, то увидим, что текст между тегами стал красного цвета. И используя атрибут style, мы говорим, что далее у нас идут параметры стиля отображения. Color — это селектор, отвечающий за цвет. Red — это значение данного селектора. Таким способом мы можем выделять определенным типом отображения какие-то отдельные части текста.

Размещение каскадных таблиц стилей внутри HTML (второй способ)

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

Тут пример: отображение CSS-стилей в документе HTML

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

Подключение нескольких CSS-файлов к одному HTML-документу.

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

Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.

Тут пример: отображение CSS-стилей в документе HTML

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

Ссылка на CSS-файл внутри на файл этого же типа.

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

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

Во-вторых, в уже подключенный файл вписываем следующий код:

@import url("style-2.css");

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

Тест на закрепление материала:

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

Вариант 1:

Вариант 2 :

Вариант 3:

Вариант 4:

Можем ли мы разместить каскады CSS непосредственно в файле HTML?

Всем доброго времени суток.

Итак, в одной из предыдущих статей мы с Вами познакомились с .

Но мы не рассмотрели один очень важный вопрос. А именно — как привязать CSS стили к HTML коду страниц нашего сайта.

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

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

Давайте начнем.

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

1. Внутренние таблицы стилей CSS.

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

Это конечно немного неудобно, но все же такая возможность существует и я не могу об этом не сказать.

Итак, первый способ привязки CSS стилей к коду страницы — использование тега , применяются ко всему содержимому HTML-документа. Их может быть сколько угодно, хоть все стили для всего сайта. Но это немного неправильно. Об этом расскажу немного ниже, когда буду рассматривать внешние таблицы стилей.

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

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

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

Но вносить при этом изменения в общую таблицу стилей нет смысла. Баннер — явление временное. Сегодня один, завтра другой. Поэтому проще прописать стили для него прямо внутри кода этого баннера.

То есть нам нужно подключить CSS стили только к определенному элементу страницы. Это делается очень просто — при помощи атрибута style .

Стили, прописанные таким образом действуют только на тот элемент, в теге которого они размещены. В данном случае, только на этот абзац (тег

). И ни на какой другой!

2. Внешние таблицы стилей.

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

Так вот, как обещал, рассказываю, почему лучше использовать именно внешние таблицы стилей.

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

Почему это происходит.

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

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

Первый способ самый распространенный — это использовать тег с атрибутами: rel ="stylesheet" type ="text/css" href ="файл стилей.css" внутри кода заголовка страницы (тег ).

Например:

1 2 3 4

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

Данные пример присоединяет к странице CSS стили, прописанные в файле style.css. Они действуют на протяжении всего документа.

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

Можно ее использовать как для добавления одних таблиц стилей к другим, так и для присоединения файла таблиц стилей к HTML документу. Для этого ее нужно прописать внутри тега

Стили

Результат в данном случае будет абсолютно ем же, что и в предыдущем случае.

Часто элемент style определяется внутри элемента head , однако может также использоваться в других частях HTML-документа. Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор, после чего в фигурных скобках идет все те же определения свойств css и их значения, что были использованы в предыдущем примере.

Второй способ делает код html чище за счет вынесения стилей в элемент style. Но также есть и третий способ, который заключается в вынесении стилей во внешний файл.

Создадим в одной папке с html странице текстовый файл, который переименуем в styles.css и определим в нем следующее содержимое:

H2{ color:blue; } div{ width: 100px; height: 100px; background-color: red; }

Это те же стили, что были внутри элемента style. И также изменим код html-страницы:

Стили

Здесь уже нет элемента style , зато есть элемент link , который подключает выше созданный файл styles.css:

Таким образом, определяя стили во внешнем файле, мы делаем код html чище, структура страницы отделяется от ее стилизации. При таком определении стили гораздо легче модифицировать, чем если бы они были определены внутри элементов или в элементе style , и такой способ является предпочтительным в HTML5 .

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

Также возможна ситуация, когда все эти подходы сочетаются, а для одного элемента одни свойства css определены внутри самого элемента, другие свойства css определены внутри элемента style, а третьи находятся во внешнем подключенном файле. Например:

А в файле style.css определен следующий стиль:

Div{ width:50px; height:50px; background-color:red; }

В данном случае в трех местах для элемента div определено свойство width, причем с разным значением. Какое значение будет применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:

• Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше итоговой шириной будет 120 пикселей
• Далее в порядке приоритета идут стили, которые определены в элементе style
• Наименее приоритетными стилями являются те, которые определены во внешнем файле.

Атрибуты html и стили css

Многие элементы html позволяют устанавливать стили отображения с помощью атрибутов. Например, у ряда элементов мы можем применять атрибуты width и height для установки ширины и высоты элемента соответственно. Однако подобного подхода следует избегать и вместо встроенных атрибутов следует применять стили CSS. Важно четко понимать, что разметка HTML должна предоставлять только структуру html-документа, а весь его внешний вид, стилизацию должны определять стили CSS.

Валидация кода CSS

В процессе написания стилей CSS могут возникать вопросы, а правильно ли так определять стили, корректны ли они. И в этом случае мы можем воспользоваться валидатором css, который доступен по адресу http://jigsaw.w3.org/css-validator/ .
Вот видеоурок как подключить CSS к HTML