Синтаксис CSS

A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Синтаксис CSS Урок 3

Автор: MilovanovV
Категория: HTML сайты » html теги
18-08-2011, 23:07

Синтаксис CSS - итак, мы знаем, что для форматирования содержимого html страниц, используются html теги, которые в своих возможностях ограничены.

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

Давайте отметим, в каких местах наших html документов, мы можем размещать блоки определения стилей.

В зависимости от ситуации, стили могут быть определены в трёх местах html документа.

1. Блоки определения стилей могут быть расположены прямо в описании тега. Вот перечень тегов, где это возможно сделать:

 <BODY>, <DIV>, <P>, <SPAN>

2. Мы можем сделать определение стилей внутри контейнера head, то есть в заголовке html документа (смотрите урок1):



<head>

<style>

</ style>

</ head>

3. И наконец, определение стилей может быть вынесено в отдельный файл:



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

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

Если же мы работаем с большим количеством документов, например с сайтом, содержащим большое количество страниц, то определение тилей лучше вынести в отдельный файл.

Во втором уроке, мы отмечали, что выносить определение таблицы стилей в отдельный файл, считается нормальным, если размер кода стилей превышает 10% от всего кода публикуемых html документов.

Ну что же, теперь давайте перейдем к синтаксису CSS.

В зависимости от того, как определяются стили, синтаксис записи CSS, может быть различным.

В начале, давайте рассмотрим случай, когда стили определяются внутри html тегов.

Внутри тега, определение стилей осуществляется через атрибут style.

Запись начинается с угловой скобки, затем идет тег, далее через пробел, идет атрибут style. Затем идёт знак равенства, за которым следуют кавычки.

В кавычках, через точку с запятой, идут свойства стилей и через двоеточие их значения.

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



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	 <html>
	 <head>
	       <title>Описание стилей в html теге.</title>
	 </head>
	 <body>
	 <P style='color: red'>
			 Это текст красного цвета.
	 </p>
	 <P style='color: green; border: solid red; font-size: 22pt; border-width: 1px'>
	 Это текст зелёного цвета в рамке - красного цвета.
	 </p>
	 </body>
	 </html>

Если открыть данный html код браузером, то мы увидим примерно следующую картинку:

CSS стили синтаксис

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

Вот пример html кода:



<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

<html

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Пример описания стилей в заголовке - head</title>

<style type="text/css">

P{ font-size: 120%; font-family: Verdana, Arial; color: Red }   

</style>

</head>

<body>

<P>Синтаксис CSS</P>

<br />

<P>Стили HTML– это здорово!</P>

</body>

</html

И вот, соответствующая этому коду картинка:

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

Предположим, что имя файла с описанием стилей - file.css, вот содержимое этого файла: p { font-size: 100%; font-family: Verdana, Arial; color: Blue } Тогда при открытии html документа следующего содержания: <!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"> <html> <head> <title>Пример описания стилей в отдельном файле</title> <link href="file.css" rel="stylesheet" type="text/css"/ </head> <body> <P>Синтаксис CSS</P> </body> </html>

Браузер нам откроет следующую страницу:

Ну вот, пожалуй, и всё, что касается CSS синтаксиса.

В следующем уроке, мы с Вами рассмотрим такие важные понятия для CSS, как классы и идентификаторы CSS.

Автор: Виктор Милованов