Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Включение CSS в html-код

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

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

    <H2 style="color:blue;">Заголовок синего цвета</H2>

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

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

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

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

    <style type="text/css">
     h2{
     color:blue;
     }
    </style>

    Если написать такой код между тегами <head>...</head>, то все заголовки первого уровня будут синими. При этом способе стили задаются при помощи тегов <style>...</style>. Также тегу <style> необходимо задать обязательный атрибут type, который в случае с CSS всегда указывает тип таблицы стилей text/css. Используя этот способ задания, дизайн веб-страницы можно поменять, изменив содержимое между тегами <style>...</style>, но не сайта в целом.

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

    <html>
     <head>
      <title>Заголовки в html-документе.</title>
      <link href="style.css" type="text/css" rel="stylesheet">
     </head>
     <body>
      <H1>Заголовок первого уровня</H1>
      <H3 ALIGN=CENTER>Заголовок третьего уровня, расположенный по центру html-документа</H3>
      <H6 ALIGN=RIGHT>Заголовок шестого уровня, выравненный по правому краю веб-страницы</H6>
     </body>
    </html>

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

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

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

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

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

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


<<Предыдущая | В раздел | Следующая>>