CSS: Урок 1. Внедрение CSS в HTML документ

Пятница, 03 Декабря 2010 г. 15:59 + в цитатник

или три способа подключить CSS самостоятельно

Будем рады познакомиться! – Каскадные таблицы стилей.

CSS разработан с целью манипулирования внешним видом элементов страницы.

Каскадные таблицы стилей не являются независимым инструментом — включаются в HTML тремя способами.

Внедрение CSS в HTML теги

Способ линейного внедрения CSS был рассмотрен в HTML уроках:

                            <p style="color:red; font-weight:bold">Текст красного цвета, полужирный</p>

Результат:

Текст красного цвета, полужирный

Внедрение CSS в секцию <head> </head>

Этот способ пригоден для оформления web-сайтов с небольшим количеством страниц, он также подходит для новичков, так как все манипуляции произходят в рамках одного документа:

                  <html>

            <head>

            <title> </title>

            <style type="text/css">

            p {color:#006633}

            .forexample {color:Yellow}

            #ident {color:#ffffff; font-weight:bold}

            body {background-color:#66cc66}

            </style>

                              </head>

            <body>

            <p>Текст параграфов этого документа  темно-зеленого цвета</p>

            <p>Текст</p>

            <p class="forexample">А здесь текст желтый</p>

            <p id="ident">Текст белого цвета, полужирный</p>

            <h2 class="forexample">Заголовок</h2>

            <p>Текст</p>

            </body>

            </html>

Результат: внедрение CSS в HTML документ

Атрибут со значениями type="text/css" внутри тега <style> сообщает, встроенному в браузер интерпретатору, что применены стилевые описания, то есть CSS. Обратите внимание на синтаксис: первым делом назван селектор (p, body, .forexample, #ident), затем открыта фигурная скобка, прописан атрибут со значением, фигурная скобка закрыта. Атрибуты между собой разделяются точкой с запятой.

Свойства, назначенные селектору .forexample, распространяться на все элементы, которые содержат class="forexample", в пределах одного документа. Что касается селектора #ident, то он управляет всем, что содержит id="ident". Значения атрибутов class="" и id="" могут содержать цифры, но не должны начинаться с цифр.

Ссылка на внешний файл с расширением .css

Попробуйте представить, что ваш сайт содержит несколько десятков страниц, а вы решили сменить цвет заголовков... Используя третий способ, достаточно изменить несколько значений во внешнем .css файле, чтобы добиться желанного результата.

В текстовом редакторе создайте файл следующего содержания:

         @charset "windows-1251";

             /* CSS Document */ 

            

            body {background-color:#0000cc}

            p {color:#222255}

            .forexample {color:Orange}

            #ident {color:#ffffff; font-weight:bold}

Сохраните его в папке, в которой находится файл index.html, но не с .html расширением, а с .css, например, как file.css.

Атрибуты и значения

@charset "windows-1251"; – определяет кириллистическую кодировку.
/* CSS Document */ – так вводятся комментарии в CSS.

Код из примера выше может быть представлен таким образом:

         @charset "windows-1251";

             /* CSS Document */ 

            

            body {

            background-color:#0000cc 

            }

            p { 

            color:#222255

            }

            .forexample {

            color:Orange 

            }

            #ident {

            color:#ffffff;

            font-weight:bold 

            }

Приблизительная структура HTML документа:

                  <html>

            <head>

            <title> </title>

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

            </head>

            <body>

            <p>Текст параграфов этого документа  темно-синего цвета</p>

            <p>Текст</p>

            <p class="forexample">А здесь текст оранжевый</p>

            <p id="ident">Текст белого цвета, полужирный</p>

            <h2 class="forexample">Заголовок</h2>

            <p>Текст</p>

            </body>

            </html>