Чертёж девятый, половина первая: CSS или каскадные таблицы стилей

Работа, которой мы займёмся сегодня, значительно отличается от всего, что мы делали до сих пор. Можешь считать, что мы переходим на иной уровень, где нам доступно то, чего раньше мы не могли сделать. Например, красная строка. Попробуй-ка создать её средствами HTML — вставить несколько пробелов подряд в начале строки не получится, браузер все пробелы объединит в один. Поэтому придётся использовать символ, называемый неразрывным пробелом и обозначаемый  . И таких символов надо будет вставить в начале каждого абзаца штук 5 или 7... Красиво? Удобно?

Использование CSS (Cascading Style Sheet) позволяет просто и быстро решить эту и другие проблемы с оформлением странички, создать свой стиль.

Другая проблема, с которой легко справляются CSS — расположение объектов в окне браузера. Мы не можем, используя стандартные средства HTML, накладывать текст или рисунки друг на друга. А с помощью CSS можно сделать страничку многослойной…

Короче говоря, CSS сейчас стремительно входят в моду, от которой мы отставать не желаем, поэтому запасаемся терпением и вперёд!

  • Открой файл glav.htm и в раздел <HEAD> допиши выделенные строки:
    • <HEAD>
	<TITLE>Моя домашняя страничка</TITLE>
	<STYLE type=text/css>
		H2{	text-align:center;
			color:#ff0088;
			font-style:italic;
			font-family:arial,FreeSans,sans-serif;
			letter-spacing:0.3em;
		}
		P{	text-indent:3em;
			text-align:justify;
			font-size:110%;
		}
	</STYLE>
</HEAD>

Тег <STYLE></STYLE> содержит описание стилей, его атрибут type указывает, что мы имеем дело с CSS.

Строчка вида H2{что-то там записано} задаёт описание стиля заголовков H2. В фигурных скобках задаются стилевые правила. Это очень похоже на атрибуты тегов, только вместо знака = используется :, а разделителем вместо пробела служит символ ;.

Как же мы оформили заголовок H2?

text-align:center; — выравнивание абзаца по центру (а ещё могут быть значения left, right, justify);

color:#ff0088; — цвет шрифта. В CSS цвет можно задавать и десятичными числами rgb(255,0,136), и даже в процентах rgb(100%,0%,53%);

font-style:italic; — курсивное начертание (значение normal отменяет курсив);

font-family:arial,FreeSans,sans-serif; — гарнитура шрифта — довольно опасный параметр, ведь на компьютере посетителя может не оказаться такого шрифта, и тогда он увидит какую-нибудь абракадабру. Поэтому в этом параметре обычно выводят список из нескольких шрифтов через запятую. Браузер, не найдя первого, будет искать второй, третий… Вместо или вместе с гарнитурой можно указать тип шрифта: serif — с засечками, sans-serif — без засечек, monospace — моноширинный, cursive — рукописный, fantasy — фантазийный;

letter-spacing:0.3em; — разрядка шрифта, которую можно задавать в миллиметрах (mm), сантиметрах (cm), дюймах (in), пикселях (px), но самая удобная единица em — ширина буквы M.

Для оформления тега <P> мы тоже задаём несколько параметров:

text-indent:3em; — это и есть красная строка величиной в 3 буквы M;

font-size:110%; — размер шрифта (можно задавать в mm, cm, in, px, pt, а можно и словесно: medium — базовый, large — крупнее базового, x-large — ещё крупнее, xx-large — совсем крупный, small — мельче базового, x-small — ещё мельче, xx-small — самый мелкий).

  • Мы задали стиль оформления текста в тегах <H2> и <P>, поэтому теперь за ненадобностью уберём теги и атрибуты, которыми мы оформляли заголовок:
    • <H2 align="center"> <font color="#ff0088">Здравствуйте! Меня зовут Вася!</font></H2>
<P><font size="+1">Я учусь в 9 классе 11 школы города Иркутска.
…
<LI><font size="+2"><A href="pogrom.htm">щенок <B>Погромыч</A></font></B></I>.</font>
  • Сохрани изменения в файле и посмотри его в браузере. Если всё сделано правильно, ты почти не заметишь изменений, разве что заголовок теперь записан другим шрифтом и с разрядкой (то есть буквы расположены шире, с большим, чем раньше, расстоянием между ними), да абзацы начинаются с красной строки. Кроме этого, теперь шрифт списка заметно мельче остального текста. И если вдуматься, так и должно быть, мы ведь не задали оформление тегов <OL>, <UL> и <LI>. Можно, конечно, это сделать. Но мы поступим по-другому. Представь ситуацию, в которой один список нам потребуется записать шрифтом покрупнее, а другой — помельче (именно так у нас оформлен список друзей). Поэтому теперь опишем стиль не конкретного тега, а класса:
    • добавь в раздел описания стиля <STYLE> выделенные строки:
      • <STYLE type=text/css>
	H2{	text-align:center;
…
	}
	P{	text-indent:3em;
…
	}
	.mal{	font-size:90%;}
	.sred{	font-size:110%;}
	.bol{	font-size:130%;}
</STYLE>

Со знака . (точка) начинается название класса. Мы создали три класса mal — маленький, sred — средний, bol — крупный и задали для них соответствующие размеры шрифта.

    • измени код, задающий списки (добавь выделенное полужирным и удали зачёркнутое):
      • <OL class="sred">
	<LI>информатику
	<LI>рисовать
	<LI>своих друзей:
	<UL>
		<LI>четвероногих
		<LI>пернатых
	</UL>
</OL>
<P>А друзья мои — это:
<UL>
	<LI class="mal"><I><font size="+0"><A href="klava.htm">
 		синичка <B>Клава</B></A></LI>
	<LI class="sred"><A href="dusja.htm">
 		кошка <B>Дуся</B></A></LI>
	<LI class="bol"><font size="+2"><A href="pogrom.htm">
 		щенок <B>Погромыч</A></B></I>.</LI>
</UL>

Тебе наверняка уже всё понятно: первый список <OL> мы оформили стилем класса sred, а во втором списке <UL> применили к каждому его элементу стиль соответствующего класса (mal для синички, sred для кошки и bol для щенка).

Обрати внимание, что тег, в котором записан атрибут class, необходимо закрыть.

  • И таким образом можно задавать оформление практически для любого тега. Но среди них есть один особенный — <A>, задание стиля для которого немного отличается от остальных:
    • добавь в раздел описания стилей выделенные строчки:
      • <STYLE type=text/css>
	H2{	text-align:center;
…
	}
	P{	text-indent:3em;
…
	}
	A:link{	color:#ff00ff;
			text-decoration:none;
	}
	A:hover{	color:#ffffff;
			text-decoration:underline;
			background:#ff00ff;
	}
	A:active{	color:#ff0000;}
	A:visited{	color:880000;
			text-decoration:overline;	
 	}
	.mal{	font-size:90%;}
	.sred{	font-size:110%;}
	.bol{	font-size:130%;}
</STYLE>

Гиперссылки (тег <A>) могут находиться в четырёх состояниях, для которых мы и задаём оформление:

A:link — обычная гиперссылка;

A:hover — гиперссылка, над которой находится указатель мыши;

A:active — активная (в момент щелчка) ссылка;

A:visited — посещённая ссылка.

Здесь мы встретились ещё с двумя параметрами описания стиля:

text-decoration может принимать значения underline (подчёркнутый), overline (надчёркнутый), line-through (перечёркнутый) и none (неподчёркнутый);

background — цвет фона (он тебе уже знаком).

Благодаря появившемуся новому состоянию гиперссылки hover и возможности задать для неё цвет фона, мы создали интересный эффект — при «пробегании» указателя мышки над ссылками за ним следует цветной прямоугольник, что очень похоже на меню в некоторых приложениях.

    • убери из тега <BODY> атрибуты link и vlink — они теперь не нужны;
    • посмотри страничку в браузере, и если она выглядит примерно так, значит, всё сделано правильно:


  • У тебя, наверняка, возник большущий вопрос — а зачем мы угрохали столько времени, если в результате страничка практически не изменилась? И действительно, затевать возню со стилями ради одной маленькой странички, возможно, не стоит. Но мы ведь создаём сайт и хотим, чтобы он был оформлен единообразно, не пытаясь каждый раз вспомнить, а как там мы оформляли заголовки. Поэтому теперь оформим теми же стилями другие странички нашего сайта. Как это сделать? Можно просто скопировать через буфер обмена содержимое тега <STYLE> из файла glav.htm в остальные файлы, а можно поступить иначе, что мы и сделаем:
    • в папке my_site создай текстовый файл my_style.css и скопируй в него описание стилей из файла glav.htm; (всё, что находится между тегами <STYLE> и </STYLE>, исключая сами эти теги):
      • H2{	text-align:center;
	color:#ff0088;
	font-style:italic;
…
A:visited{	color:880000;
		text-decoration: line-through;
}
.mal{	font-size:90%;}
.sred{	font-size:110%;}
.bol{	font-size:130%;}
    • в файле glav.htm вместо тега <STYLE> вставь выделенную строчку:
      • <HEAD>
	<TITLE>Моя домашняя страничка</TITLE>
	<LINK rel="stylesheet" type="text/css" href="my_style.css">
</HEAD>
    • эту же строчку добавь во все остальные файлы твоего сайта и посмотри результат — теперь все странички оформлены в едином стиле.

Тег <LINK> указывает браузеру, что в файле, указанном в атрибуте href, находится описание стилей. И всё!

Такой способ задания стилей (во внешнем файле) называется присоединяемые стили, в отличие от вложенных стилей, которыми мы воспользовались вначале, поместив описание стилей в раздел <HEAD> с помощью тега <STYLE>.

К одной страничке можно применить сразу оба способа стилевого оформления (да вдобавок ещё и третий, строчнóй, о котором речь пойдёт ниже), но при этом надо помнить, что если какой-то параметр по-разному описан в этих стилях, то главным считается строчной, затем вложенный, а уж затем присоединяемый.

За вот такое поочерёдное влияние на оформление странички и названы таблицы стилей каскадными или иерархическими.

  • Задание: задай в стилевом файле оформление для тега <BODY> (background, color, font-size). И не забудь убрать ненужные атрибуты этого тега в файлах .htm.

Так что же нам дают CSS? Прежде всего, это чёткость и единообразие страничек, достающиеся нам без особых затрат времени — достаточно один раз создать стилевую таблицу и затем она уже сама будет работать на нас. Во-вторых, применение CSS дисциплинирует web-дизайнера, ведь ему приходится заранее продумать стиль своего сайта и затем его придерживаться. В-третьих, представь, что через год, а то и сразу после создания, ты решишь что-то изменить в стиле своего сайта, например, все заголовки из розовых сделать синими. Достаточно будет всего лишь исправить стилевой файл — и все заголовки приобретут новый вид. При этом важно то, что стилевой файл (*.css) совсем необязательно должен находиться в той же папке, он может быть где угодно, просто в этом случае значением атрибута href будет его URL. В-четвёртых, мы получаем заметно больше возможностей для оформления страничек, причём познакомились мы с очень небольшой и не самой эффектной их частью. Но об этом мы сегодня говорить уже не будем…


Следующий урок