Общение вебмастеров и оптимизаторов обо всём Сео форум про методы раскрутки сайтов. Как раскрутить сайт и заработать в интернете.

IVASHKA · 06.11.2008, 19:32

И так, решил сделать топик для тех кто плохо знает CSS или вообще не знает, выложу тут пару уроков для новичков в этом деле

Начнем, в этом уроке, мы с Вами поговорим об одном из способов изменения цвета активного блока. Этот же способ отлично подойдёт для создания кнопки.
Метод, который мы рассмотрм - один из самых удобных и логически понятны. Итак, приступим...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код:

Цитата:

/* Задание стилей для блока в обычном состоянии */
#block a {
background:#c7e1ff;
padding:50px 0;
width:190px;
display:block;
text-decoration:none;
color:#333;
text-align:center;
border:1px solid #024591;
}

/* Задание стилей для блока при наведении на него мыши */
#block a:hover {
background:#77b7ff;
}

3) Чтобы увидить работу стилей, создадим в той же директории html файл и, например вставим туда такой код:

Цитата:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="block">
<a href="#">Содержание блока</a>
</div>
</body>
</html>

4) Сохраняем и смотрим, что получилось.

Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.0; Opera 8.хх - 9.xx

--------------------------------------------------------------------------

В этом уроке, будет тема "изменения цвета активного блока". Этот же способ отлично подойдёт для создания кнопки.
Метод, один из самых удобных и логически понятны. Итак, приступим...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код:

Цитата:

/* Задание стилей для блока в обычном состоянии */
#block a {
background:#c7e1ff;
padding:50px 0;
width:190px;
display:block;
text-decoration:none;
color:#333;
text-align:center;
border:1px solid #024591;
}

/* Задание стилей для блока при наведении на него мыши */
#block a:hover {
background:#77b7ff;
}

3) Чтобы увидить работу стилей, создадим в той же директории html файл и, например вставим туда такой код:

Цитата:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="block">
<a href="#">Содержание блока</a>
</div>
</body>
</html>

4) Сохраняем и смотрим, что получилось.

---------------------------------------------------------------------------

Урок самому удобному способу создания рамки для изображения.

1) Опять создаем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код:

Цитата:

/* Задание стилей для всей изображения */
.bord {
margin: 50px;
position: relative; /* Важно! */
}

/* Задание стилей для рамки */
.bord span {
width: 200px; /* Задание размеров рамки */
height: 150px;
display: block;
position: absolute; /* Важно! */
top: -9px; /* Задание отклонения рамки */
left: -12px;
background: url(2.png) no-repeat; /* Задание отображения рамки, как фона */
}

3) Чтобы увидеть работу стилей, создадим опять в той же директории html файл и, например, вставим туда такой код:

Цитата:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>
<div class="bord">
<span></span><img src="1.jpg" alt="" />
</div>
</body>
</html>

4) Сохраняем и смотрим, что получилось