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

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

Синтаксис 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" "http://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

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

Синтаксис CSS тег style

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



Предположим, что имя файла с описанием стилей - 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, как  классы и идентификаторы CSS.

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

 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации