Стили CSS

Если мы делаем одну, две, три страницы — управляться с ними не очень сложно. Когда хочется что-то изменить, например размер шрифта — можно просто открыть документ и внести в него соответствующие изменения. И эту же операцию повторить на двух-трёх других документах. Но если наш сайт разрастётся хотя бы на 10 страниц, или больше — тогда правка становится занятием долгим и нудным.
Для того, чтобы отчасти решить эту проблему, существуют стили css. Мы уже пользовались стилем, когда задавали красную строку в нашем тексте. Но в данном случае я поведу речь об отдельном документе стилей CSS, который будет задавать некоторые параметры всем страницам нашего сайта одновременно.
Допустим, для своего сайта я задала такие параметры:
— картинку фона (чтобы не прописывать её в каждом отдельном документе;
— параметры шрифта и параметры заголовков шрифта;
— цвет и параметры шрифта ссылок.
В стилях можно задать гораздо больше параметров, но я объясню саму основу, на примере тех параметров, которые задала я.

Поскольку фон прописывается в «тело сайта», в css это будет выглядеть так:

BODY
{margin:0; padding:0; background:url(‘f3.gif ‘);}

Как видите, в css используются не угловые ( < > ), а фигурные ( {} ) скобки.
Атрибут margin отвечает за величину отступа от каждого края того элемента который вы вставляете. В данном случае, величину отступа от края до вашей фоновой картинки.
Атрибут padding отвечает за расстояние полей между внутренним краем рамки вашего элемента (в данном случае, фоновой картинки) и содержимым (к примеру, текстом, таблицами и другими элементами).

Я установила переменные значения данных атрибутов равные нулю.

Атрибут background — вы уже знаете, что это фоновое изображение. Поскольку все наши страницы будут располагаться в корневой папке, адрес картинки указывается просто как f3.gif — если бы вы ставили фоновой картинкой изображение, загруженное на Радикал.ру, вам нужно бы было вставить полный адрес картинки типа:
http://s43.radikal.ru/i099/0808/2d/e71e87bc923.gif

Обратите внимание на то, что в стилях css мы ставим адрес картинки не в парных, а в одинарных кавычках: ‘f3.gif ‘

Каждый элемент отделяется от другого точкой с запятой (;), значения переменных через двоеточие (:).

Далее зададим значения для шрифтов текста. Основной шрифт, если вы помните, обозначается буквой «p». Мы можем задать значения для цвета, выравнивания и размера шрифта. Выглядеть это будет следующим образом:

P {color:#000000; text-align:justify; font-size:14pt;}
Здесь атрибут color — цвет, text-align — выравнивание (в данном случае по ширине текста), font-size — размер шрифта.

Далее мы можем задать заголовки. Заголовок обозначается буквой H:
H1 {color:#000000; text-align:center; font-style:bold; font-size:20pt;}
Шрифт чёрный, выравнивание по центру, стиль шрифта — жирный (font-style:bold), размер шрифта 20pt.
Нам может понадобиться другой вид заголовка. Обозначим его H2:
H2 {color:#000000; text-align:center; font-style:italic; font-size:20pt;}
Цвет чёрный, выравнивание по центру, стиль — курсив, размер 20pt.

Заголовков может быть несколько. Столько, сколько вам может понадобиться. У меня задано 4 заголовка:

H1 {color:#000000; text-align:center; font-style:bold; font-size:20pt;}
H2 {color:#000000; text-align:center; font-style:italic; font-size:20pt;}
H3 {color:#000000; text-align:center; font-style:italic; font-size:14pt;}
H4 {color:#000000; text-align:center; font-style:italic; font-size:12pt;}

Обращаю ваше внимание на то, что задать другой шрифт параграфа «p» можно, но нельзя обозначать шрифт параграфа цифрами (2,3,4) как мы это делали с заголовками. Чтобы задать другой стиль шрифта параграфа, нужно использовать буквенные обозначения. например:
P.nev {color:#03fc15; text-align:justify; font-size:18pt;} А в вашем документе html перед тем абзацем, в котором вы хотите сделать другой шрифт, вы вставляете: <p class=»nev»> Тэг «р» при этом необходимо закрыть, чтобы обозначить, где у этого стиля окончание: </p>

Оформление текста в таблице на странице html будет выглядеть так:

<p class=»nev»> Текст зелёного цвета, выровненный по ширине, с шрифтом 18pt. Текст зелёного цвета, выровненный по ширине, с шрифтом 18pt. Текст зелёного цвета, выровненный по ширине, с шрифтом 18pt </p>

Теперь поговорим о цвете ссылок. Ссылки обозначаются буквой «A». (Не забывайте, что все обозначения в HTML и CSS делаются латиницей, а не кириллицей).

A:link — стиль обычной непосещённой ссылки.
A:visited — стиль посещённой ссылки.
A:active — стиль активной ссылки (то есть, когда вы на неё нажали)
A:hover — стиль ссылки, когда вы навели на неё курсор мыши (поддерживается не всеми браузерами).

Остальное прописывается точно так же, как мы это делали со шрифтами и заголовками:

A:link {font-family: Arial; font-size: 13pt; COLOR: #090f1d;} Шрифт Ариал, размер 13pt, цвет…

A:visited {font-family: Arial; font-size: 13pt; COLOR: #203b6a;} Шрифт Ариал, размер 13pt, цвет…

A:active {font-family: Arial; font-style:italic; font-size: 13pt; COLOR: #0f233c;} Шрифт Ариал, стиль — курсив, размер 13pt, цвет…

A:hover {font-family: Arial; font-size: 13pt; COLOR: #a0707e;} Шрифт Ариал, размер 13pt, цвет…

Примечание: порядок расположения атрибутов внутри фигурных скобок не важен).

Теперь составим все наши стили в один документ. Выглядит это так:

BODY
{margin:0; padding:0; background:url(‘f3.gif ‘);}

P {color:#000000; text-align:justify; font-size:14pt;}
H1 {color:#000000; text-align:center; font-style:bold; font-size:20pt;}
H2 {color:#000000; text-align:center; font-style:italic; font-size:20pt;}
H3 {color:#000000; text-align:right; font-style:italic; font-size:12pt;}
H4 {color:#000000; text-align:center; font-family:Arial; font-style:italic; font-size:20pt;}

A:link {font-family: Arial; font-size: 13pt; COLOR: #090f1d;}
A:visited {font-family: Arial; font-size: 13pt; COLOR: #203b6a;} A:active {font-family: Arial;
font-style:italic; font-size: 13pt; COLOR: #0f233c;}
A:hover {font-family: Arial; font-size: 13pt; COLOR: #a0707e;}

А теперь наступает самый интересный момент: копируем всё то, что мы написали и вставляем в блокнот. Нажимает «Сохранить как», называем документ, к примеру «mystile», а расширение ставим не html, а css.

Загружаем получившийся документ в нашу корневую папку.
Но это ещё не всё. Теперь нам нужно прописать путь к этому документу стилей в каждой нашей странице. Для этого, если документ CSS в той же папке, что и документы html, нужно добавить после <head> вот такую ссылку: <LINK REL=STYLESHEET TYPE=»text/css» HREF=»mystile.css»>
Если же они в разных папках, то следует прописать полный адрес документа CSS, например: <LINK REL=STYLESHEET TYPE=»text/css» HREF=»http://dugward.ru/mystile.css»>
Далее, проставим в нашем документе заголовки, зелёный текст и ссылки, чтобы проверить, как это работает. В документе html это будет выглядеть так:
<h1>Заголовок 1 </h1>
<h2>Заголовок 2 </h2>
<h3>Заголовок 3 </h3>
<h4>Заголовок 4 </h4>
<p class=»nev»> Текст зелёного цвета, выровненный по ширине, с шрифтом 8pt </p>

Основной текст у нас так и остаётся в тегах <p class=»p1″>
Текст </p>, с той лишь разницей, что теперь если мы поменяем в документе стилей css размер шрифта «p» — он изменится на всех страницах, но останется с красной строкой, как и задано в каждом нашем документе.

Зададим так же несколько ссылок, чтобы посмотреть, как это будет выглядеть. Например поставим после текста ссылки:

<a href=»http://dugward.ru/index.html» target=»_blank»> Главная страница </a>
<a href=http://forum.dugward.ru/ target=»_blank»> Форум сайта «Созвездие Близнецов» </a>

Теперь весь код нашей страницы будет выглядеть так:

<html>
<head>
<LINK REL=STYLESHEET TYPE=»text/css» HREF=»mystile.css»>

<style type=»text/css»>
.p1
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
}
</style>
<title> Наша первая страница </title>
</head>
<body bgcolor=»#c0c0c0″ background=»f3.gif»>

<table width=»100%» cellspacing=»0″, cellpadding=»0″
border=»3″ VALIGN=top>
<td align=»left»> <img src=»logo.jpg» border=»0″>
</td>
<td WIDTH=200px>

<table width=»100%» border=»3″ cellspacing=»0″,
cellpadding=»0″ VALIGN=top>
<td>

<table width=»100%» bgcolor=#e5e5e7 border=»0″>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://dugward.ru/Sod.html»>
<img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://dugward.ru/Sod.html»>
Читать книгу </a> </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://septemberfox.ucoz.ru/publ/»>
<img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://septemberfox.ucoz.ru/publ/»>
Статьи </a>
</td>
</tr>
</table>
</td> </table>

</td>
</table>

<table width=»100%» cellspacing=»0″, cellpadding=»0″
border=»0″>
<td WIDTH=200px VALIGN=top>

<table width=»100%» cellspacing=»0″, cellpadding=»0″
border=»3″ VALIGN=top>
<td>

<table width=»100%» bgcolor=#e5e5e7 border=»0″>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://forum.dugward.ru»>
<img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://forum.dugward.ru»>
Форум </a> </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://lezione.dugward.ru»>
<img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://lezione.dugward.ru»>
Как мы делали этот сайт </a>
</td>
</tr>
</table>
</td> </table>

</td>

<td>
<table width=»100%» body bgcolor=#e5e5e7 border=»3″>
<td align=»center»>

<table width=»95%» border=»0″ VALIGN=top>
<td align=»center»>
<font face=»Arial»
font color=»#000000″ style=»font-size: 14pt»>

<h1> Заголовок 1 </h1>
<h2> Заголовок 2 </h2>
<h3> Заголовок 3 </h3>
<h4> Заголовок 4 </h4>
<p class=»nev»> Текст зелёного цвета,
выровненный по ширине, с шрифтом 8pt </p>
<p class=»p1″>
Текст, выровненный по ширине. Текст, выровненный
по ширине. Текст, выровненный по ширине. Текст,
выровненный по ширине. Текст, выровненный по
ширине. Текст, выровненный по ширине. </p>
<p class=»p1″>
Текст, выровненный по ширине. Текст, выровненный
по ширине. Текст, выровненный по ширине. Текст,
выровненный по ширине. Текст, выровненный по
ширине. Текст, выровненный по ширине.
</p>
</font>
<a href=»http://dugward.ru/index.html»
target=»_blank»> Главная страница </a>
<a href=http://forum.dugward.ru/ target=»_blank»>
Форум сайта «Созвездие Близнецов» </a>
</td> </table>
</td> </table>
</td>
<td WIDTH=200px VALIGN=top> Баннеры <br> и
реклама </td>
</table>

<table width=»100%» cellspacing=»0″ cellpadding=»0″
border=»3″>
<td align=»center»> <p class=»p1″>
Текст, выровненный по ширине. Текст, выровненный
по ширине. Текст, выровненный по ширине. Текст,
выровненный по ширине. Текст, выровненный по
ширине. Текст, выровненный по ширине. </p>
<br>
А здесь вы поставите свои баннеры, если захотите
</td>
</table>

</body>
</html>

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

Наша первая страница с заголовками и ссылками, прописанными в стилях cssТеперь, если нам понадобится сменить стиль заголовков, шрифта или ссылок, мы можем сделать это только в документе css, а на наших страницах, сколько бы их ни было, автоматически всё поменяется так, как нам надо.

Примечание: в стилях CSS всё пишется немного не так, как в HTML. Есть сходные моменты, но в основе своей язык css не такой, как html.

If we do one, two, three pages — to cope with them is not very difficult. When you want to change something, such as font size — you can just open the document and make it appropriate changes. And the same operation repeated on two or three other documents. But if our site razrastёtsya at least 10 pages or more — then edit the occupation becomes a long and tedious.

In order to partially solve this problem, there are styles css. We have used the style when asked a red line in our text. But in this case I’ll take it on a separate document styles CSS, which will set some parameters of all pages of our website simultaneously.

For example, for my site I have set the following parameters:

— Background image (not to prescribe it in every single document;

— The font and font options headers;

— The color and font settings links.

The styles you can set more options, but I will explain the very basis of the example of the parameters that I asked.

 

Since the background is prescribed in the «body site» in css it looks like this:

 

BODY

{margin: 0; padding: 0; background: url (‘f3.gif’);}

 

As you can see, are not used in css angle (<>) and curly ({}) brace.

Attribute margin is responsible for the indentation from each edge of the element you put in. In this case, the indentation from the edge to your wallpaper.

Attribute padding responsible for the distance between the inner edge of the field frame of your element (in this case, the background image) and the content (eg, text, tables, and other elements).

I set the variable values of these attributes are equal to zero.

 

Attribute background — you already know that this is the background image. Since all of our pages will be placed in the root folder, the address indicated simply as pictures f3.gif — if you set the background image uploaded on Radikal.ru you need would be to insert the full address of the image type:

http://s43.radikal.ru/i099/0808/2d/e71e87bc923.gif

 

Note that in the css styles we put the address of the image is not paired, as in single quotes: ‘f3.gif’

 

Each item is separated by a semicolon (;), the values of variables with a colon (:).

 

Next we define a value for the font of the text. The main font, if you remember, denoted by the letter «p». We can set the values for color, alignment, and font size. It will look as follows:

 

P {color: # 000000; text-align: justify; font-size: 14pt;}

There attribute color — the color, text-align — alignment (in this case, the width of the text), font-size — font size.

 

Then we can define headers. Title denoted by the letter H:

H1 {color: # 000000; text-align: center; font-style: bold; font-size: 20pt;}

Black font, centered, font style — bold (font-style: bold), font size 20pt.

We may need a different kind of title. Let him H2:

H2 {color: # 000000; text-align: center; font-style: italic; font-size: 20pt;}

Color black, centered, style — italic, size 20pt.

 

Title may be several. As much as you may need. I asked 4 title:

 

H1 {color: # 000000; text-align: center; font-style: bold; font-size: 20pt;}

H2 {color: # 000000; text-align: center; font-style: italic; font-size: 20pt;}

H3 {color: # 000000; text-align: center; font-style: italic; font-size: 14pt;}

H4 {color: # 000000; text-align: center; font-style: italic; font-size: 12pt;}

 

I draw your attention to the fact that to specify a different font section «p» is possible, but you can not designate the font section numbers (2,3,4) as we did with the titles. To specify a different font style section, use letter designations. eg:

P.nev {color: # 03fc15; text-align: justify; font-size: 18pt;} And in your document html before a paragraph in which you want to make a different font, you put: <p class = «nev»> tag «p» when it should be closed to indicate where this end style: </ p>

 

Making the text in the table on the html page will look like this:

 

<p class = «nev»> text green lined in width, with font 18pt. Text green lined in width, with font 18pt. Text green lined in width, with font 18pt </ p>

 

Now let’s talk about the color of links. Links are indicated by the letter «A». (Do not forget that all the notations in HTML and CSS made Latin rather than the Cyrillic alphabet).

 

A: link — style normal unvisited links.

A: visited — the style of visited links.

A: active — active link style (that is, when you clicked on it)

A: hover — style links, when you have put on it the mouse cursor (not supported by all browsers).

 

The rest is prescribed in the same way as we did with the fonts and headers:

 

A: link {font-family: Arial; font-size: 13pt; COLOR: # 090f1d;} font Arial, size 13pt, color …

 

A: visited {font-family: Arial; font-size: 13pt; COLOR: # 203b6a;} font Arial, size 13pt, color …

 

A: active {font-family: Arial; font-style: italic; font-size: 13pt; COLOR: # 0f233c;} Arial font, style — italic, size 13pt, color …

 

A: hover {font-family: Arial; font-size: 13pt; COLOR: # a0707e;} font Arial, size 13pt, color …

 

Note: The order of the attributes inside the braces is not important).

 

Now we form all our styles in one document. It looks like this:

 

BODY

{margin: 0; padding: 0;

 

P {color: # 000000; text-align: justify; font-size: 14pt;}

H1 {color: # 000000; text-align: center; font-style: bold; font-size: 20pt;}

H2 {color: # 000000; text-align: center; font-style: italic; font-size: 20pt;}

H3 {color: # 000000; text-align: right; font-style: italic; font-size: 12pt;}

H4 {color: # 000000; text-align: center; font-family: Arial; font-style: italic; font-size: 20pt;}

 

A: link {font-family: Arial; font-size: 13pt; COLOR: # 090f1d;}

A: visited {font-family: Arial; font-size: 13pt; COLOR: # 203b6a;} A: active {font-family: Arial;

font-style: italic; font-size: 13pt; COLOR: # 0f233c;}

A: hover {font-family: Arial; font-size: 13pt; COLOR: # a0707e;}

 

And now comes the most interesting point: copy everything that we wrote and paste it into notepad. Press «Save As», call the document, for example «mystile», and the extension set is not html, and css.

 

 

Load the resulting document in our root directory.

But that is not all. Now we need to set the path to the document sheet in each of our page. To this end, if the CSS document in the same folder as the documents html, need to be added after the <head> Now this link: <LINK REL = STYLESHEET TYPE = «text / css» HREF = «mystile.css»>

If they are in different folders, you must register the complete address of the document CSS, eg: <LINK REL = STYLESHEET TYPE = «text / css» HREF = «http://dugward.ru/mystile.css»>

Further, by putting in our document headers, green text and links to check out how it works. The html document will look like this:

<h1> Title 1 </ h1>

<h2> Heading 2 </ h2>

<h3> Title 3 </ h3>

<h4> Heading 4 </ h4>

<p class = «nev»> text green lined in width, with the type 8pt </ p>

 

The main text and we remain in the tags <p class = «p1»>

Text </ p>, the only difference is that now if we change the document styles css font size «p» — it changes on every page, but will remain with the red line, as specified in each of our document.

 

We define also a few references to see how it will look. For example put the following link text:

 

<a href=»http://dugward.ru/index.html» target=»_blank»> Home </a>

<a href=http://forum.dugward.ru/ target=»_blank»> forum site «Gemini» </a>

 

Now, all of the code of our page will look like this:

 

<html>

<head>

<LINK REL = STYLESHEET TYPE = «text / css» HREF = «mystile.css»>

 

<style type = «text / css»>

.p1

{

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

text-indent: 1.5em;

text-align: justify;

}

</ style>

<title> Our first page </ title>

</ head>

<body bgcolor = «# c0c0c0» background = «f3.gif»>

 

<table width = «100%» cellspacing = «0», cellpadding = «0»

border = «3» VALIGN = top>

<td align = «left»> <img src = «logo.jpg» border = «0»>

</ td>

<td WIDTH = 200px>

 

<table width = «100%» border = «3» cellspacing = «0»

cellpadding = «0» VALIGN = top>

<td>

 

<table width = «100%» bgcolor = # e5e5e7 border = «0»>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://dugward.ru/Sod.html»>

<img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://dugward.ru/Sod.html»>

Read the book </a> </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://septemberfox.ucoz.ru/publ/»>

<img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://septemberfox.ucoz.ru/publ/»>

Article </a>

</ td>

</ tr>

</ table>

</ td> </ table>

 

</ td>

</ table>

 

<table width = «100%» cellspacing = «0», cellpadding = «0»

border = «0»>

<td WIDTH = 200px VALIGN = top>

 

<table width = «100%» cellspacing = «0», cellpadding = «0»

border = «3» VALIGN = top>

<td>

 

<table width = «100%» bgcolor = # e5e5e7 border = «0»>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://forum.dugward.ru»>

<img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://forum.dugward.ru»>

Forum </a> </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://lezione.dugward.ru»>

<img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://lezione.dugward.ru»>

As we did this site </a>

</ td>

</ tr>

</ table>

</ td> </ table>

 

</ td>

 

<td>

<table width = «100%» body bgcolor = # e5e5e7 border = «3»>

<td align = «center»>

 

<table width = «95%» border = «0» VALIGN = top>

<td align = «center»>

<font face = «Arial»

font color = «# 000000» style = «font-size: 14pt»>

 

<h1> Title 1 </ h1>

<h2> Heading 2 </ h2>

<h3> Title 3 </ h3>

<h4> Heading 4 </ h4>

<p class = «nev»> text of green,

aligned width font with 8pt </ p>

<p class = «p1»>

Text aligned on width. Text aligned

in width. Text aligned on width. Text,

aligned width. Text aligned

width. Text aligned on width. </ p>

<p class = «p1»>

Text aligned on width. Text aligned

in width. Text aligned on width. Text,

aligned width. Text aligned

width. Text aligned on width.

</ p>

</ font>

<a href = «http://dugward.ru/index.html»

target = «_ blank»> Home </a>

<a href=http://forum.dugward.ru/ target=»_blank»>

Forum site «Gemini» </a>

</ td> </ table>

</ td> </ table>

</ td>

<td WIDTH = 200px VALIGN = top> Banners and <br>

advertising </ td>

</ table>

 

<table width = «100%» cellspacing = «0» cellpadding = «0»

border = «3»>

<td align = «center»> <p class = «p1»>

Text aligned on width. Text aligned

Text aligned on width. Text,

aligned width. Text aligned

width. Text aligned on width. </ p>

<br>

Here you put their banners, if you wish

</ td>

</ table>

 

</ body>

</ html>

 

I marked in blue inserts that needs to be done (link to the document styles, headers, links), struck-through red — that now need to remove from the document before you ship it to our website.

Text options we asked with styles.

We now all in our web page and see what happens:

 

Our first page with titles and references, writing styles cssTeper if we need to change the style of the header text or links, we can only do this in the document css, and on our website, no matter how many they may be, will automatically change everything as we need.

 

Note: CSS style written all a bit like in HTML. There are similarities, but basically the language css not like html.