CSS-верстка в школьном сайтостроительстве|Большое Шемякино

что такое CSS

CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей.

Что можно делать с помощью CSS?

CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. Потерпите, и увидите!

HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет б?льшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

В чём разница между CSS и HTML?

HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру.

Это также привело к тому, что оригинальные тэги структурирования, такие как <table>, стали всё больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>, поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах.

CSS был создан для исправления этой ситуации путём предоставления web-дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.

Какие преимущества даст мне CSS?

Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества CSS:

управление отображением множества документов с помощью одной таблицы стилей;
более точный контроль над внешним видом страниц;
различные представления для разных носителей информации (экран, печать, и т. д.);
сложная и проработанная техника дизайна.

Как работает CSS?

Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнaете многие коды. Посмотрим на конкретном примере.

Базовый синтаксис CSS

Скажем, нам нужен серый цвет фона web-страницы:

В HTML это можно сделать так:


	<body bgcolor=#сссссс>

С помощью CSS того же самого результата можно добиться так:


	body  {
background-color: #сссссс;
}

Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:

Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.

Применение CSS к HTML-документу

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.

Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:

<html>
	  <head>
	    <title>Example</title>
	  </head>
	  <body style="background-color: #FF0000;">
	    <p>This is a red page</p>
	  </body>
	</html>

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:

<html>
	  <head>
	    <title>Example</title>
	    <style type="text/css">
	      body {background-color: #FF0000;}
	    </style>
	  </head>
	  <body>
	    <p>This is a red page</p>
	   < /body > 
	</html>

Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей.

Внешняя таблица стилей это просто текстовый файл с расширением *.css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css.Это можно проиллюстрировать так:

Необходимо создать ссылку из HTML-документа (index.html) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

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

Обратите внимание, как указан путь к вашей таблице стилей атрибутом <href>.

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами

<head> и </head>.

Например, так:

<html>
	  <head>
	    <title>My document</title>
	    <link rel="stylesheet" type="text/css" href="#">
	  </head>
	  <body>
	  ...

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.

Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.

Давайте посмотрим, как это сделать.

Попытайтесь сделать это сами

Откройте NeonHTML и создайте два файла - HTML-файл и CSS-файл - такого содержания:

index.html

<html> <head> <title>CSS-блочная верстка</title> <link rel="stylesheet" type="text/css" href="#"> </head> <body> <h1>Моя первая таблица стилей</h1> </body> </html>

style.css

body {
	  background-color: #FF0000;
	}

Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".html")

Откройте index.html в NeonHTML нажав F9 и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!

подробнее см.здесь...

http://ru.html.net/tutorials/css/

SHEMIACINO.RU

css-блочная верстка

разработка html странички