И так, решил сделать топик для тех кто плохо знает 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" />
<!--[if lt IE 7]>
<style type="text/css">
.bord span { behavior: url(iepngfix.htc);}
}
</style>
<![endif]-->
</head>
<body>
<div class="bord">
<span></span><img src="1.jpg" alt="" />
</div>
</body>
</html>
|
4) Сохраняем и смотрим, что получилось