Подключение CSS к Web-странице
7 991 просмотров
26.02.2012 | 
Автор: Подключения 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 обязательно пригодятся.
Как хорошо, что я наткнулась на эту стать. Мне была необходима информация, так как создали сайт,и теперь надо продвигать его. Спасибо Вам. И Удачи!
Месяца два назад это все для меня выглядела бесмысленно. Как же все меняется в этой жизни. Спасибо за подсказку. Начну разбирать по костачке эту тему. Успехов в продвижение вашего ресурса!
было бы интересно почитать по подробнее о практическом применении CSS. подожду ваших следующих статей 🙂
Всем спасибо за внимание к моему ресурсу, хорошо, напрягусь и подробнее попытаюсь объяснить о практическом применении.
Когда-нибудь я обязательно стану специалистом в Подключении CSS к Web-странице!
Интересная статья, процветания вам и вашему сайту.
У Вас очень полезный и интересный сайт,удачи в продвижении.
Спасибо, и Вам успехов.
У Вас сайт, хороший очень! Шаблон красивый, содержание интересное! Учусь в Старт Ап проекте. Нравится. А Вы!? Как долго, вернее, сколько времени, ушло у Вас на обустройство сайта? Сколько уделяете ему сейчас? Заходите в гости! Вам, буду рад! Дружим сайтами?! Успехов Вам творческих, благополучия достойного. Так держать!
Спасибо Анатолий за посещения, моему сайту полгода, первые полтора-два месяца уделял сайту больше времени, сейчас возможностей для этого меньше, но часик-другой в день нахожу.Предложение дружбы принимаю, и желаю Вам тоже успехов.
Попал на завершение серии, нужно будет почитать сначала, а то не понятного много. Спасибо за разъяснения.
Для всех вебмастеров очень нужные знания.У Вас очень востребованная тема сайта, буду заглядывать , чтобы научиться чему-то новому.Удачи!
Очень интересная статья! Спасибо за подробное и понятное раскрытие темы!
Как говорится «не Боги горшки обжигают», обязательно научимся и этому. Спасибо, что помогаете нам лепить из глины наши «горшочки».
Полезная информация для начинающих, но для надежности и подкрепления материала статьи необходимо купить книгу по CSS.
Спасибо!
Пожалуйста, в конце статьи есть ссылка на бесплатные материалы от Евгения Попова. Там же можно купить и полный курс по CSS.
Интересно, но непонятно. Вы пишете: «Синтаксис; пример использования; способ подключения…». А что после этого получается?
Валерий, после этого Вы можете использовать эти описания на страницах своего сайта. В нашем с Вами случае, используя CMS WordPress для размещения сайта, можно ничего не предпринимать. Но если Вас не устраивает какой-то элемент дизайна, то, разбираясь в тонкостях использования CSS, Вы можете это исправить. Например размер шрифта для постов, цвет шрифта, цвет фона и т.п.
Всем посетителям спасибо за внимание, очень рад, если эта информация принесла Вам пользу.
Нужная информация!
Спасибо, Юрий!
Я ответил на некоторые свои вопросы. Спасибо
полезный у вас сайт. правда для меня это все сложно, может с вашей помощью разберусь)
То что мне было нужно когда то, но сейчас уже разобрался. Спасибо многим пригодиться
Спасибо за информацию. Но, честно говоря, я ничего не поняля, для чего это нужно.
HTML учила очень давно, еще в 2004 году, когда только узнала об интернете. Потом это дело забросила, поэтому CSS для меня темный лес 🙂 Теперь хоть буду знать, как его в коде идентифицировать
Отличная статья, спасибо, что подробно рассказали, как можно подключить файл стилей CCS, действительно при подключении нужно обращать внимание на версии, которые поддерживает ваш сервис. Спасибо.
Да, применение CSS сильно упрощает работу с HTML Не надо делать столько лишней работы. И разобраться в принципе не сложно.
Спасибо.
Успехов.
Не сомневаюсь в полезности информации, но для меня это пока сложно. Добавила Ваш сайт в закладки.
Сайт есть, но в HTML-коде абсолютный профан, но хотелось бы изучить.
так значит вот где собака зарыта! я пытался собственноручно изменить размер и цвет шрифта, цвет фона и поместить то что мне нужно в то место, куда я хочу, но у меня ничего не вышло… страница оставалась пустой, или все выходило из берегов…
а это значит все дело в CSS…??????
скажите, а можно будет Вас спросить и попросить помощи? меня интересуют вопросы дизайна…
Чем смогу помогу, а для начала посмотрите страницу на моем сайте «Уникальная тема WordPress» в правом сайдбаре есть виджет «Популярные записи».
Здравствуйте Юрий!
Первый раз на Вашем сайте.
Интересная у Вас тема.
Я к Вам с ответным визитом. Вы были у меня на сайте 06.03.2012 в 15:24
Не забыл, рассказал друзьям о Вашей страничке.
(Не поленился и прошел по кнопочкам в твиттере, в контакте и на Facebook)
Хотел пройтись по рекламным ссылкам, но не нашел.
Приглашаю навестить и мой сайт и оставить свои комментарии и рассказать друзьям о моей страничке.
Не забудьте заглянуть и на мою рекламу.
Буду благодарен, если Вы это сделаете!
Если Вам интересна моя тема, то можете слева на сайте подписаться ПОЛЕЗНАЯ ИНФОРМАЦИЯ
и получать все свеженькое на почту.
Всех, кто оставляет у меня комментарии, стараюсь по возможность посещать.
Присоединяйтесь, если желаете, к сайту. Слева есть виджет «Присоединиться к сайту».
Также под каждой статьей есть кнопки после слов «Связь со мной».
Подключайтесь, будем дружить.
Удачи!
Профессиональная статья. Но для меня, так сказать «чайника», — это очень сложно.
Это для меня пока темный лес, если честно, но надо будет разбираться
Спасибо за полезную информацию.
Все очень просто и понятно мало кто простым языком может обьяснить все