В этом уроке мы рассмотрим основы CSS и посмотрим, как это все выглядит на практике. Если же вы еще не знаете для чего нужны CSS и зачем их применяют при создании сайтов, то я рекомендую вам ознакомиться с уроком Что такое CSS.
Раз уж Вы решили изучить основы CSS то вам уже наверняка известно, что HTML состоит из тегов, каждый из тегов по умолчанию, отображает свое содержимое (то что заключено между тегами) определенным образом, т. е. он имеет какой-то свой стиль оформления. При помощи CSS мы можем поменять этот стиль и придать тому или иному объекту такой вид, который нам необходим.
Описание стилей различных элементов заключается между тегами <STYLE></STYLE>. Сам способ записи в CSS не такой как запись тегов в HTML. Присвоение свойств какому либо элементу делается при помощи следующей записи:
селектор { свойство: значение; }
-где селектор это тег, класс или идентификатор, которому мы хотим присвоить определенные свойства, свойство это свойство данного тега которое мы хотим изменить, а значение это значение которое мы хоти присвоить данному свойству.
Свойство и значение записывается в фигурных скобках, после свойства идет двоеточие, а после значения точка с запятой. Во всем остальном CSS не чувствителен к регистру, переносу строк, пробелам, т. е. саму запись вы можете осуществлять, как вам будет удобно.
Ниже приведен пример, чтобы Вы могли видеть, как это работает на практике. В данном примере с помощью CSS задан цвет текста. Создайте из этого кода HTML страницу. Для этого скопируйте данный код, вставьте его в текстовый редактор “Блокнот”, а затем пройдите в пункт меню "Файл" >> "Сохранить как...", и сохраните этот файл с расширением .html После этого откройте сохраненный файл при помощи вашего браузера и Вы увидите, что текст имеет синий цвет.
Code
<html>
<head>
<title>Моя первая страница с использованием CSS</title>
<STYLE >p {color:#330099;}</STYLE>
</head>
<body>
<p>Пример использования CSS при оформлении текста</p>
</body>
</html>
Вот что у Вас должно получиться:
Обратите внимание, что описание стилей в html коде располагаются между тегами <head></head>, а тег p которому присваивается свойство пишется без угловых скобок. Кроме этого мы можем расширить свойства нашего тега p и задать нашему тексту не только цвет, но и размер и фон и т. д.
Добавьте свойства, которые имеются в коде расположенном ниже (или просто замените старый код на код расположенный ниже) и посмотрите, что получится с вашим текстом.
Code
<html>
<head>
<title>Моя первая страница с использованием CSS </title>
<STYLE >p {color:#330099;background-color:#FFFF99;font:14px Verdana, Arial, Helvetica, sans-serif;}</STYLE>
</head>
<body>
<p>Пример использования CSS при оформлении текста</p>
</body>
</html>
В результате получится следующее:
Существует три способа использования стиля, выше в двух случаях мы рассмотрели вариант, когда описание стилей находится в самом html файле и располагается вверху между тегами <head></head>.
Кроме этого описание стилей может быть расположено в самом html коде. Например, создадим тот же стиль для тега p, только поменяем размер и цвет текста. Код в этом случае будет выглядеть так:
Code
<P STYLE="color: #009900; background-color:#FFFF99; font:18px Verdana, Arial, Helvetica, sans-serif;">2-й пример использования CSS при оформлении текста</P>
Скопируйте его и вставьте в любое место между тегами <body></body>. Получится следующее:
Обратите внимание, что ранее мы уже задавали стиль тегу <p> и по логике везде, где на данной странице мы будем использовать тег <p> он должен отображаться, так как мы задумали заранее. Однако браузер всегда отдает предпочтение тому стилю, который мы задали непосредственно в html коде перед текстом. Поэтому во втором случае Вы можете видеть, что цвет и размер текста поменялся.
Ну и третий способ использования стиля это когда его выносят в отдельный файл, а в html коде оставляют только ссылку на данный файл. Данный способ является наиболее предпочтительным, потому как при его использовании страницы не нагружаются лишним кодом, а если вам понадобится поменять вид какого либо элемента, то для этого вам будет достаточно поменять стиль в одном CSS файле и это изменение отобразится на всех страницах, с которыми связан этот файл.
Для того чтобы посмотреть как это работает, сделайте следующее: в той же папке где лежит ваша страница которую мы создали ранее, создайте текстовый документ, затем из кода ранее созданной нами страницы вырежьте то что расположено между тегами <STYLE></STYLE> и вставьте его во вновь созданный текстовый документ, а потом сохраните его с именем style и расширением .css. Сами теги <STYLE></STYLE> в html документе удалите, а вместо них вставьте следующий код:
Code
<link rel="stylesheet" href= "style.css">
Этот код и является ссылкой на ваш css файл по которой браузер найдет ваши стили и отобразит содержимое страницы должным образом. Если вы все сделаете правильно то у Вас должно получится два файла лежащих в одной папке, один с расширением .html и содержащий код:
Code
<html>
<head>
<title>Моя первая страница с использованием CSS </title>
<link rel="stylesheet" href= "style.css">
</head>
<body>
<p>Пример использования CSS при оформлении текста</p>
</body>
</html>
И второй файл style.css который содержит стили, его код должен выглядеть так:
Code
p {color:#330099;
background-color:#FFFF99;
font:14px Verdana, Arial, Helvetica, sans-serif;}
Затем запустите html страницу, и Вы увидите то же оформление текста что и ранее но только теперь оно уже берется из отдельного файла style.css. Последний вариант использования стилей, когда они вынесены в отдельный файл является наиболее удобным и предпочтительным.
Поэтому чаще всего используется именно такой способ при создании интернет страниц. Вот и все что касается основ CSS. Более подробно о том, как использовать стили для оформления своих страниц читайте в других уроках посвященных CSS.
