Как подключить CSS файл к HTML странице? Добавление CSS

Viber OUT 04.08.2019

Когда браузер читает таблицу стилей, он форматирует документ в соответствии с ней.

Три Способа Вставить CSS

Существует три способа вставки таблицы стилей:

  • Внешняя таблица стилей
  • Внутренняя таблица стилей
  • Встроенный стиль

Внешняя Таблица Стилей

Внешняя таблица стилей идеально подходит, когда стили должны применяться ко многим страницам. С помощью внешней таблицы стилей, вы можете изменить вид целого Веб сайта путем редактирования одного файла. Каждая страница должна ссылаться на таблицу стилей, используя тег . Тег находится в head-секции:

Не оставляйте пробелов между значением свойства и его единицами измерения! "margin-left:20 px" (вместо "margin-left:20px") будет работаеть в IE (браузере Internet Explorer), но не в браузерах Firefox или Opera.

Внутренняя Таблица Стилей

Внутренняя таблица стилей используется когда отдельный документ имеет уникальный стиль. Вы определяете внутренние стили в head-секции страницы HTML, используя тег

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

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



    Заголовки в html-документе.



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


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


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


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

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

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

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

  • В этой главе речь пойдет о том, как внедрить 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

    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 элементов.

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

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




    Тег style



    Всё о слонах


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


    Купить слона


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


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


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




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

    ,

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

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

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

    Тег идет непосредственное объявление стилей тех или иных 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 для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
    • Используйте тег

      Здесь будет происходить следующее: для всех элементов внутри тега

      будет сделано следующее: их цвет будет красным и отступ сверху будет 100 пикселей.

      Третий способ задания CSS стиля - это импортированные стили . Они также, как и внедрённые задаются в голове документа, но уже из файла. Вот пример:



      Здесь ко всей странице будут применяться стили из файла "my.css ".

      И последние вид CSS стилей - это стили из файла. Данный способ является самым частым, и заключается он в подключении файла стиля через тег в голове документа. Например, таким образом:



      Данный способ очень похож на предыдущий способ, но здесь не используется тег