Подключения CSS к HTML-документу позволяет широко реализовать все преимущества стандарта CSS при создании веб-страниц. Существуют следующие способы использования каскадных таблиц стилей:

Использование CSS непосредственно в HTML-коде.

Синтаксис записи

<ТЕГ STYLE=”свойство:значение”> содержание тега </тег>

Пример использования в HTML:

<P STYLE=”color:green”> Текст зеленого цвета </P>

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

 

Включение инструкций CSS подпрограммой

Этот способ используется в тех случаях, когда в использовании CSS файла нет необходимости, допустим, эти стили применяются только на одной странице.  Реализация этого способа заключается в записи директив CSS  между тегами <STYLE TYPE=”text/css”>  </STYLE>.  Эти тэги являются составляющими заголовка страницы <HEAD>.

Пример использования:

<HTML>
    <HEAD>
    <TITLE> Заголовок </TITLE>

    <STYLE TYPE=”text/css”>
           P { text-align: left }
           H2 { color: green }
    </STYLE>

    </HEAD>

    <BODY>
          Содержимое веб-страницы
    </BODY>

</HTML>

Заодно вспомнили структуру странички в html.

 

Подключение CSS файла тегом <STYLE>

Этот способ заключается в подключении css-файла, содержащего описания всех элементов стилей и их свойств. Этот файл хранится отдельно от веб-страниц, чаще в другой директории. Тег <STYLE> включается в заголовок страницы <HEAD>. На практике это может выглядеть таким образом.

<HEAD>
    <STYLE TYPE=”text/css”>
        @import url(<a href=”http://sait.ru/css/style1.css”>
        http://sait.ru/css/style1.css </a>)
    </STYLE>
</HEAD>

 

Подключение CSS файла тегом <LINK>

Этот способ подключения напоминает предыдущий и является наиболее чаще используемым. В заголовок страницы <HEAD> добавляется тег <LINK>. Синтаксис записи следующий.

<LINK REL=STYLESHEET TYPE=”text/css” HREF=”URL”>

На месте параметра URL подставляется полный или сокращенный адрес расположения css-файла, в котором описаны все необходимые элементы и их свойства.

Пример использования:

<HEAD>
    <TITLE> Заголовок </TITLE>
        <LINK REL=STYLESHEET TYPE=”text/css” HREF=”../css/style2.css”>
</HEAD>

 

Также необходимо отметить, что стандарты CSS можно применять на всех http-серверах. Ограничения по использованию описания тех или иных свойств возможны на уровне браузеров. Это значит, что не все описания на тех или иных браузерах будут выглядеть одинаково. Поэтому перед применением редко применяемых решений их желательно протестировать на предмет кроссбраузерности, то есть отображении сайта в разных браузерах. Как это делается я описывал в статье «Аудит сайта, проверка кроссбраузерности».

Для получения более полной информации по теме CSS подпишитесь на бесплатный курс Евгения Попова

На этом я планирую завершить серию статей по стандартам CSS. Еще, видимо напишу одну-две статьи о практическом применении и о развитии CSS. Надо только время выкроить. Спасибо за внимание, всем здоровья и успехов.

Комментарии (40) на “Подключение CSS к Web-странице”

  • Надежда пишет:

    Это для меня пока дебри, но надеюсь разберусь, делу время!

  • Артем пишет:

    У Вас очень замечательный сайт, удачи Вам в ваших начинаниях.

  • ТОП-Тренинг пишет:

    Спасибо, думаю такие знания css обязательно пригодятся.

  • Ольга пишет:

    Как хорошо, что я наткнулась на эту стать. Мне была необходима информация, так как создали сайт,и теперь надо продвигать его. Спасибо Вам. И Удачи!

  • Sergiu75 пишет:

    Месяца два назад это все для меня выглядела бесмысленно. Как же все меняется в этой жизни. Спасибо за подсказку. Начну разбирать по костачке эту тему. Успехов в продвижение вашего ресурса!

  • катерина пишет:

    было бы интересно почитать по подробнее о практическом применении CSS. подожду ваших следующих статей :)

  • Юрий пишет:

    Всем спасибо за внимание к моему ресурсу, хорошо, напрягусь и подробнее попытаюсь объяснить о практическом применении.

  • Виктория Волевач пишет:

    Когда-нибудь я обязательно стану специалистом в Подключении CSS к Web-странице!

  • Ирина пишет:

    Интересная статья, процветания вам и вашему сайту.

  • николай пишет:

    У Вас очень полезный и интересный сайт,удачи в продвижении.

  • Анатолий пишет:

    У Вас сайт, хороший очень! Шаблон красивый, содержание интересное! Учусь в Старт Ап проекте. Нравится. А Вы!? Как долго, вернее, сколько времени, ушло у Вас на обустройство сайта? Сколько уделяете ему сейчас? Заходите в гости! Вам, буду рад! Дружим сайтами?! Успехов Вам творческих, благополучия достойного. Так держать!

    • Юрий пишет:

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

  • vitaliy_siriy пишет:

    Попал на завершение серии, нужно будет почитать сначала, а то не понятного много. Спасибо за разъяснения.

  • Светлана пишет:

    Для всех вебмастеров очень нужные знания.У Вас очень востребованная тема сайта, буду заглядывать , чтобы научиться чему-то новому.Удачи!

  • Валерий пишет:

    Очень интересная статья! Спасибо за подробное и понятное раскрытие темы!

  • Галина пишет:

    Как говорится “не Боги горшки обжигают”, обязательно научимся и этому. Спасибо, что помогаете нам лепить из глины наши “горшочки”.

  • Григорий пишет:

    Полезная информация для начинающих, но для надежности и подкрепления материала статьи необходимо купить книгу по CSS.
    Спасибо!

    • Юрий пишет:

      Пожалуйста, в конце статьи есть ссылка на бесплатные материалы от Евгения Попова. Там же можно купить и полный курс по CSS.

  • Валерий пишет:

    Интересно, но непонятно. Вы пишете: “Синтаксис; пример использования; способ подключения…”. А что после этого получается?

    • Юрий пишет:

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

  • Юрий пишет:

    Всем посетителям спасибо за внимание, очень рад, если эта информация принесла Вам пользу.

  • nadezhdapol пишет:

    Нужная информация!
    Спасибо, Юрий!

  • Максим Ивенко пишет:

    Я ответил на некоторые свои вопросы. Спасибо

  • Евгения пишет:

    полезный у вас сайт. правда для меня это все сложно, может с вашей помощью разберусь)

  • Fatikh пишет:

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

  • Надежда пишет:

    Спасибо за информацию. Но, честно говоря, я ничего не поняля, для чего это нужно.

  • Екатерина пишет:

    HTML учила очень давно, еще в 2004 году, когда только узнала об интернете. Потом это дело забросила, поэтому CSS для меня темный лес :) Теперь хоть буду знать, как его в коде идентифицировать

  • Виктория пишет:

    Отличная статья, спасибо, что подробно рассказали, как можно подключить файл стилей CCS, действительно при подключении нужно обращать внимание на версии, которые поддерживает ваш сервис. Спасибо.

  • Виктор пишет:

    Да, применение CSS сильно упрощает работу с HTML Не надо делать столько лишней работы. И разобраться в принципе не сложно.
    Спасибо.
    Успехов.

  • Елена пишет:

    Не сомневаюсь в полезности информации, но для меня это пока сложно. Добавила Ваш сайт в закладки.

  • Алла пишет:

    Сайт есть, но в HTML-коде абсолютный профан, но хотелось бы изучить.

  • Денис пишет:

    так значит вот где собака зарыта! я пытался собственноручно изменить размер и цвет шрифта, цвет фона и поместить то что мне нужно в то место, куда я хочу, но у меня ничего не вышло… страница оставалась пустой, или все выходило из берегов…
    а это значит все дело в CSS…??????
    скажите, а можно будет Вас спросить и попросить помощи? меня интересуют вопросы дизайна…

    • Юрий пишет:

      Чем смогу помогу, а для начала посмотрите страницу на моем сайте “Уникальная тема WordPress” в правом сайдбаре есть виджет “Популярные записи”.

  • Виктор Всеволодович пишет:

    Здравствуйте Юрий!
    Первый раз на Вашем сайте.
    Интересная у Вас тема.

    Я к Вам с ответным визитом. Вы были у меня на сайте 06.03.2012 в 15:24
    Не забыл, рассказал друзьям о Вашей страничке.
    (Не поленился и прошел по кнопочкам в твиттере, в контакте и на Facebook)
    Хотел пройтись по рекламным ссылкам, но не нашел.
    Приглашаю навестить и мой сайт и оставить свои комментарии и рассказать друзьям о моей страничке.
    Не забудьте заглянуть и на мою рекламу.
    Буду благодарен, если Вы это сделаете!
    Если Вам интересна моя тема, то можете слева на сайте подписаться ПОЛЕЗНАЯ ИНФОРМАЦИЯ
    и получать все свеженькое на почту.
    Всех, кто оставляет у меня комментарии, стараюсь по возможность посещать.
    Присоединяйтесь, если желаете, к сайту. Слева есть виджет «Присоединиться к сайту».
    Также под каждой статьей есть кнопки после слов «Связь со мной».
    Подключайтесь, будем дружить.
    Удачи!

  • Сергей пишет:

    Профессиональная статья. Но для меня, так сказать “чайника”, – это очень сложно.

  • Максим Ивенко пишет:

    Это для меня пока темный лес, если честно, но надо будет разбираться

  • Сергей Бочкарев пишет:

    Спасибо за полезную информацию.

  • Дмитрий пишет:

    Все очень просто и понятно мало кто простым языком может обьяснить все

Оставить комментарий

Популярные записи