аватар |

Уроки / CSS /

Урок 1. Как подключить таблицу стилей CSS?

Как создать таблицу стилей, css?


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

Скрин

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

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


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

<html>
   <head>
      <title>Внешнее подключение CSS</title>

      <!-- Ниже расположена ссылка на нашу таблицу стилей.  -->
      <link rel="stylesheet" type="text/css" href="style.css">

   </head>

<body>

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

</body>
</html>

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

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


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


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

<p style="color:blue; font-size:14px;">Текст синего цвета, размер 14 пикселей</p>


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

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


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

<html>
   <head>
      <title>Внешнее подключение CSS</title>

      <!-- Ниже расположены стили  -->
         <style>
          h2{ color:blue } 
         </style>
      <!-- Только заголовки второго уровня будут синего цвета  -->

   </head>

<body>

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня, синий</h2>
<h3>Заголовок третьего уровня</h3>

</body>
</html>


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

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



Распечатать
Похожие статьи
02 марта 2015 18:30 Урок 10. Плавающие элементы
02 августа 2013 14:33 Урок 4. Оформление и декор текста в CSS
19 мая 2014 17:42 Урок 7. Рамка элемента CSS
30 июня 2014 15:53 Урок 8. Как установить цвет текста и фон элемента в CSS?
30 января 2013 16:49 Что такое CSS, основные понятия


Комментарии к статье (vk.com)