Создать css-файл так же легко, как и html. Достаточно зайти в любой текстовой редактор, например Блокнот, и там создать файл с расширением css . Дадим ему стандартное название - style.css .

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

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

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

Внимание

В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и данный файл.

В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и наш файл (например, index.html). Если расположение css-файла изменилось, то в атрибуте href надо внести соответствующие изменения. Например, часто бывает, что под CSS создают отдельную папку (что удобно и логично). Но тогда атрибут href будет выглядеть по-другому:

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

Иногда можно увидеть и другую конструкцию css, которая вставлена непосредственно в html-тег

Текст синего цвета, размер 14 пикселей

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

Встроенные таблицы стилей

Существует более простой способ вставки CSS . Если Вы не хотите создавать отдельный файл CSS, а использовать нужно только пару свойств, то подойдёт этот вариант. Начнём сразу с примера

Заголовок первого уровня

Заголовок второго уровня, синий

Заголовок третьего уровня

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

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

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

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style . Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента

:

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

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

  Пример: Внутренняя таблица стилей

  • Попробуй сам »

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen , цвет и тип шрифта для заголовков

  : color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов

  : font-size:20px; color:red; text-align:center .

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

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

  Параграф

  Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  Задачи

  • Выравнивание текста по центру

    Используя встроенный стиль к параграфу выровняйте текст по центру.

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

  Суть способа в том, что CSS выноситься в отдельный файл (или файлы). А в HTML указывается, какие именно CSS-файлы к нему нужно применить.

  Представляем внешнюю таблицу

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

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

  Тег link для внешних таблиц стилей

  Для подключения внешнего CSS используется тег .

  Знакомься, тег link:

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

  Примеры подключения CSS

  Как правило, используются три атрибута:

  • — отвечает за установку взаимосвязи и в данном случае имеет значение "stylesheet";
  • — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип "text/сss";
  • — абсолютный или относительный путь к самому CSS-файлу.

  Также есть возможность подключать индивидуальные CSS в зависимости от устройства отображения. Для этого служит атрибут media. Подробнее с его значениями можно ознакомиться в .

  Пример подключения дополнительной таблицы стилей для устройств печати:

  Пример подключения CSS с использованием (ie6.css будет подключен только, если страница просматривается с помощью браузера, который идентифицируется, как IE6):

  Достоинства внешних CSS

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

  1. Один и тот же CSS-файл может «обслуживать» сколько угодно HTML-страниц. Объем HTML уменьшится, вносить изменения, общие для всех страниц сайта, значительно проще.
  2. Можно разделить правила на логические блоки (общие стили, стили для конкретных разделов сайта), расположить их в нескольких разных CSS-файлах и, для отдельных страниц, подключать только нужные. Только учти, что тут палка о двух концах — с одной стороны получаем меньший размер подключенного CSS (ненужные файлы стилей не грузятся), с другой стороны — больше мелких файлов со стилями — это больше обращений к серверу, что, понятно, не очень хорошо скажется на быстродействии.
  3. Можно выделять стили для конкретных браузеров и подключать их с помощью условных комментариев. Это используется для укрощения особо упрямых браузеров. Правда, с помощью условных комментариев так же можно подключить и вложенную таблицу, но выглядеть такая конструкция будет реально громоздко.

  Резюме

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

  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);

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

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

  Осуществить данную задачу можно тремя способами:

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

  Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.

  Атрибут style.

  Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.

  Пишется так:

  style="" >

  Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента

  Ну например:

  style="color: #ff0000; font-size:12px" > это параграф с индивидуальным стилем

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

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

  
  
  
  
  
  style="background-color: #c5ffa0" >
  

  style="color: #0000ff; font-size:18px" >Всё о слонах

  
  
  
  

  Купить слона

  
  

  style="color: #ff0000; font-size:14px" >

  
  

  style="color: #0000ff; font-size:16px" >Взять слона на прокат

  
  

  style="color: #ff0000; font-size:14px" >

  
  
  
  

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

  Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

  Взгляните на пример, ниже к нему будут комментарии.

  
  
  
  
  
  
  
  

  Всё о слонах

  
  

  На этом сайте Вы найдёте любую информацию о слонах.

  
  

  Купить слона

  
  

  У нас Вы можете по выгодным ценам приобрести лучших слонов!!

  
  

  Взять слона на прокат

  
  

  Только у нас Вы можете взять любых слонов на прокат!!

  
  
  
  

  Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

  ,

  - будут синими а параграфы

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

  Теперь обещанные комментарии:

  Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

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

  CSS в отдельном внешнем файле.

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

  Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

  Body {background-color: #c5ffa0}
  a {color:#000060; font-weight: bold;}
  a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
  h1 {color: #0000ff; font-size:18px}
  h2 {color: #ff00ff; font-size:16px}
  p {color: #600000; font-size:14px}

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

  Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

  Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

  Тег имеет атрибуты:

  href - Путь к файлу.
  rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

  • shortcut icon - Определяет, что подключаемый файл является .
  • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
  • application/rss+xml - Файл в формате XML для описания ленты новостей.

  type - MIME тип данных подключаемого файла.

  Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

  Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

  Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

  Файл mystyle.css
  body {background-color: #c5ffa0}
  a {color:#000060; font-weight: bold;}
  a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
  h1 {color: #0000ff; font-size:18px}
  h2 {color: #ff00ff; font-size:16px}
  p {color: #600000; font-size:14px}
  Файл index.html
  
  
  
  
  
  
  
  

  Меню:

  
  Всё о слонах.
  Купить слона.
  Взять слона на прокат.
  

  ---

  
  

  Всё о слонах

  
  

  На этом сайте Вы найдёте любую информацию о слонах.

  
  
  
  Файл elephant.html
  
  
  
  
  
  
  
  

  Меню:

  
  Всё о слонах.
  Купить слона.
  Взять слона на прокат.
  

  ---

  
  

  Купить слона

  
  

  У нас Вы можете по выгодным ценам приобрести лучших слонов!!

  
  
  
  Файл elephant1.html
  
  
  
  
  
  
  
  

  Меню:

  
  Всё о слонах.
  Купить слона.
  Взять слона на прокат.
  

  ---

  
  

  Взять слона на прокат

  
  

  Только у нас Вы можете взять любых слонов на прокат!!

  
  
  
  

  В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

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

  • Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
  • Используйте тег