CSS. Способы внедрения.

     Метод 1. Прямое включение CSS в HTML теги.
     Например, с помощью атрибута style, цвет фона страницы можно установить так:
<html>
  <head>
    <title>Пример</title>
  </head>
  <body style="background-color: #FFFFCC;">
    <p>Страница желтого цвета</p>
  </body>
</html>

     Метод 2: Размещение CSS в теге <head>... </head>.
     Описание стиля страницы должно быть заключено в контейнер <style type="text/css"> ...</style>, который, в свою очередь, должен находится в <head>...</head>. С помощью метода 2, установить цвет фона страницы и цвет текста можно так:
<html>
  <head>
    <title>Пример</title>
    <style type="text/css">
      body {background-color: #c0c0c0;}
      p {color:#CC0000}
      .example1 {color:Yellow}
      #example2 {color:#008000}
    </style>
  </head>
  <body>
   <p>Страница серого цвета,а текст заключенный в параграф красного цвета.</p>
   <p class="example1">А этот текст, заключенный в параграф, желтого цвета цвета.</p>
   <p id="example2">Ну,а этот текст, заключенный в параграф, зеленого цвета.</p>
</body>
</html>

Результат: (открыть в браузере)


 

     Атрибут type="text/css" тега <style> сообщает браузеру, что документ содержит CSS- каскадные таблицы стилей. Далее, мы присваиваем селекторам example1 и example2 (название может быть любым) свойства {color:Yellow} и {color:#008000}, которые и будут распространяться на любые элементы документа содержащие class="example1" и id="example2". Использование класса class="" и идентификатора id="" является аналогичным и можно использовать любой из них.

      Метод 3: Внешний- ссылка на таблицу стилей.
     Этот метод является лучшим из всех перечисленных методов. С помощью него можно управлять стилем всех страниц сайта. Допустим, если вы хотите изменить цвет фона сразу на всех страницах, вам достаточно изменить лишь одно значение в .css файле. Создается он в обычном текстовом редакторе (блокнот) с расширением .css, например, style1.css и размещается в той же папке что и index.html
     Создадим такой файл:
@charset "windows-1251"
body {background-color: #c0c0c0;}
p {color:#CC0000}
.example1 {color:Yellow}
#example2 {color:#008000}

@charset "windows-1251";
– вводит кириллистическую кодировку.

     Теперь, в html- документе необходимо прописать ссылку на внешний CSS-фаил. Делается это одной строчкой HTML-кода:
<link rel="stylesheet" type="text/css" href="style1.css" />

<html>
<head>
<title>Пример</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<p>Страница серого цвета,а текст заключенный в параграф красного цвета.</p>
   <p class="example1">А этот текст, заключенный в параграф, желтого цвета цвета.</p>
   <p id="example2">Ну,а этот текст, заключенный в параграф, зеленого цвета.</p>
</body>
</html>

Результат: (открыть в браузере)


 

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

 
Загрузка...