Урок №2. Принцип работы CSS. Подключение таблицы CSS.

 


 

В CSS, как и в других языках программирования, есть строго прописанные правила, по которым создаются таблицы стилей. Язык CSS отличается от HTML практически всем. У него нет ни тегов, ни атрибутов, ни элементов, которые, свойственны разметке HTML. Главным орудием языка является правило, которое определяет, как будет выглядеть нужный элемент в Вашем документе.

Правило в CSS имеет вот такую структуру:

   P{color:red; font-size:19px; background-color:blue;}

 

Разберем все детальнее.

Р – так называемый селектор, данная часть правила определяет к какому тегу будет применено правило, в Вашем документе. В нашем случае это тег параграфа <p>. О селекторах и их разновидностях поговорим дальше, по ходу обучения.

За типом селектора следуют фигурные скобки, это называется блоком объявления стилей, именно в них вписывается вся информация, которая должна быть отображена в желаемом документе.

Каждое «объявление» состоит из двух частей – свойства и значения. После свойства ставится двоеточие и без пробела вписывается значение, после чего в обязательном порядке должно быть закрыто точкой и запятой, как в примере. Свойств может быть несколько, разделяются они точкой и запятой + пробел или абзац + новое свойство.
Лично я, для удобства, каждое свойство пишу с новой строки, так потом легче искать и разбираться.

Вот так будет выглядеть правило, если описать все словами:

Селектор{Свойство:Значение; Свойство:значение;}

 

Некоторые говорят, что после последнего свойства ставить току и запятую не обязательно, но я говорю — СТАВЬТЕ, иначе таблица стилей может работать не корректно.

 


 

Подключение таблицы CSS.

Как Вы уже знаете, прелесть CSS в том, что при помощи одного документа, можно управлять стилем всего сайта, а это может быть и 300 и 1000 страниц, согласитесь, удобная штука.

Что бы управлять стилем всего сайта, нужно сначала таблицу стилей подключить к конкретному сайту.

Таблица стилей, это просто текстовый документ с расширением .css.

Что бы подключить таблицу к сайту, достаточно в голове документа вставить ссылку на нужный файл.

Делается это с помощью тега <link>

Пример:

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

 

В этой строке содержится команда для браузера, что стиль HTML-документа выходит из CSS-документа.
Попробуйте сделать это сами.

Откройте блокнот и создайте два файла, к примеру: mysite.html и style.css

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

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

 

Согласитесь не лучший вариант для обучения.

Теперь пропишите банальную разметку и правило.

В файле mysite.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Первая таблица стилей</title>

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

     </head>

     <body>

       <h1>Это самый крупный заголовок, но при помощи CSS, я сделал его очень маленьким да еще и розового цвета.</h1>

     </body>

   </html>

 

А файл style.css следующего содержания:

   h1 {color:pink;

   font-size:6px;

      }

 

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

Задавать стили CSS можно и непосредственно в документе HTML, а конкретно в голове документа. Делается это с помощью тега <style></style>, без создания дополнительных документов.

Пример:

     <head>

       <title>Работаем со стилями</title>

       <style type="text/css">

          h1 {color:pink;

          font-size:6px;}

       </style>

     </head>

 

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

Жду Вас на следующем уроке.

 


 

Закрыть меню