Создать 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 – каскадные таблицы стилей. Специальный файл (или несколько файлов), который отвечает за оформление страницы. Имеет расширение *.css . В этот файл заносятся параметры, которые будут применяться к тем или иным элементам на странице.

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

1. Создадим страницу HTML.

Я поместил в нее такой код:

Вот как выглядит страница:

2. Вторым шагом создадим файл style.css

(делается это через блокнот: создаете файл, жмете «сохранить как», в параметре тип файла ставите все файлы, в имени ставите style.css). Пока что ничего в файл писать не будем. Просто сохраним.
3. Теперь, чтобы файл стилей работал, нам нужно присоединить его к странице HTML.

Делается это так:

В теге HEAD нужно прописать одну строчку:

У меня файл стилей лежит в одной папке с файлом HTML страницы, поэтому я указываю только имя. Если у вас стили лежат, например, в папке css, то вам нужно было бы прописать href=”css/style.css” .

В нашей страничке пока еще ничего не изменилось:

4. Теперь можно начинать писать стили.

Откроем файл style.css с помощью блокнота и пропишем в нем правило для заголовка:

H1 {font-size:18px; font-family:Arial;}

Обновляем страницу и видим, что ничего не изменилось.

Чтобы изменения вступили в силу, нужно в файле HTML придать нужному тегу атрибут class=”имя стиля”.

Пропишем тегу h1 атрибут class=”h1”. Теперь результат должен измениться:

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

5. Теперь назначим стиль для простого параграфа. Сделаем это другим способом.

Пропишем в таблицу стилей следующее:

P {font-family:Verdana; color:#cc0000;}

Обновим страницу. Как вы заметили, мы здесь не добавляли атрибут class, а параграфы изменились, причем оба. Дело в том, что мы ввели в стили «p» без точки. Это значит, что для всей страницы, к которой привязана данная таблица стилей, мы переназначили параметры тега абзаца. Вне зависимости от того, есть у него дополнительные параметры или нет.

6. Сейчас рассмотрим еще один способ назначения стилей.

Давайте добавим в таблицу стилей следующую строку:

p#abc {font-family:Arial; font-size:14px; color:#c0c0c0;}

Как видите, второй параграф изменился. Если помните, мы назначили этому параграфу идентификатор id=”abc”. Наша строчка в таблице стилей как раз и означает, что данное правило будет действовать только для тех параграфов, которые имеют id=”abc”.

7. Давайте приступим к списку.

Пропишем в таблицу стилей такие правила:

ul {border:1px solid #000000; background-color:#CCCCCC;}

li {font-size:16px; color:#FF0000; text-decoration:underline;}

Как видите, вокруг нашего списка появилась рамка, фон стал серым, а пункты списка – красными и подчеркнутыми.

Вне зависимости от того, оформляете ли вы текст через CSS или форменные элементы, делается это одинаково. Главное – понять структуру правил CSS, а остальное – мелочи.

Вот и итоговый результат нашей работы.

Задачи сделать это шедевром не было, поэтому прошу не ругать. Главное, чтобы вы поняли, как работает CSS.
__
При поддержке everalp.ru - выполнение кровельных работ.

Каскадные таблицы стилей бывают трёх видов и, соответственно, включаются в html-код тремя способами.

1. Внутренние таблицы стилей . Задаются внутри элементов при помощи атрибута stile , например:

   Заголовок синего цвета

   Результатом всего этого будет:

   Заголовок синего цвета

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

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

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

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

   
   
   
   
   
   
   

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

   
   

   Заголовок третьего уровня, расположенный по центру html-документа

   
   

   Заголовок шестого уровня, выравненный по правому краю веб-страницы

   
   
   

   После этого создаём новый файл такого содержания:

   H1 {color:blue;}
   H3 {color:red;}
   H6 {color:green;}

   И сохраняем его как style с расширением *css . Результат смотри . Это наш html-файл с заголовками. Разберём теперь как работает эта конструкция. В html-документе с заголовками мы между тегами ... написали такую строчку:

   Здесь при помощи тега мы подключаем таблицы стилей к html-документу. Атрибут href ссылается на место, где размещён файл со стилями, это обязательный атрибут. Атрибут type мы уже знаем, он указывает тип таблицы стилей. Атрибут rel указывает отношение подключаемого файла к данному html-документу. В нашем случае значение атрибута rel="stylesheet" обозначает, что мы добавили основную таблицу стилей. Плюс такого метода задания таблиц стилей заключается в том, что ели захочется поменять дизайн сайта в целом, достаточно изменить только один файл с таблицами стилей.

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

Таблицы связанных стилей

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

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

Hello, world!

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

Достоинства данного способа

1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
2. Можно изменять таблицу стилей без модификации веб-страниц.
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей

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

Hello, world!

В данном примере показано изменение стиля заголовка

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

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

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style , а его значения указываются с помощью языка таблицы стилей (пример 3)..

Пример 3. Использование внутренних стилей

Hello, world!

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

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

Пример 4. Сочетание разных методов подключения стилей

Hello, world!

Hello, world!

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.