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

- - Уроки по CSS (http://forum-seo.net/showthread.php?t=1141)

Уроки по CSS

И так, решил сделать топик для тех кто плохо знает 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) Вставьте в этот файл следующий код:

Цитата:

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) Сохраняем и смотрим, что получилось

Наш следующий урок CSS посвящён созданию активных картинок, которые очень удобны при создании различных галлерей. Рассмотренный способ - самый простой, но не лешен недостатков, главным из которых является некорректная работа в IE 6, но со временем и модернизацией, проблема сойдёт на нет.
Итак, приступим...

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

Цитата:

/* Задание стилей для миниатюры */
a.st img {
width:100px; /* Задание ширины миниатюры */
height:75px; /* Задание высоты миниатюры */
border:3px solid #c8c8c8; /* Задание декоративной границы */
}

/* Задание стилей для полного изображения */
a.st:hover img {
position:relative; /* Задание позиции увеличенного изображения */
top:-30px; /* Задание отклонения увеличенного изображения вверх */
width:200px; /* Задание ширины увеличенного изображения */
height:150px; /* Задание высоты увеличенного изображения */
}

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

Цитата:

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

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

Наш следующий урок CSS посвящён созданию всплывающих подсказок на чистом CSS. Этот метод - один из самых простых, но не самый удобный.
Главный недостаток этого метода в том, что он основывается на теге span, который часто используется для других целей.
Итак...

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

Цитата:

.tooltip {
margin: 50px;
}

.tooltip a {
text-decoration:none;
color:#333;
}

.tooltip a:hover {
position:relative; /* Установка позиции для отступов */
}

.tooltip a span {
display:none; /* Запрет показа подсказки без наведения */
}

.tooltip a:hover span{
font-size:8pt; /* Задание размера шрифта подсказки */
display:block; /* Задание показа подсказки */
position:absolute; /* Задание положения подсказки */
top:-15px; /* Задание отступов */
left:50px;
background:#65b5ff; /* Задание цвета фона подсказки */
border:1px solid #002649; /* Задание границы поля подсказки */
color:#fff; /* Задание цвета шрифта подсказки */
width:110px; /* Задание ширины поля подсказки */
padding:5px;
opacity: 0.8; /* Задание прозрачности поля подсказки */
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=80);
}

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

Цитата:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="tooltip">
<a href="#">текст ссылки<span>пояснение к ссылке</span></a>
</div>
</body>
</html>

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

Совместимость: Internet Explorer 5.5 - 7 (полностью); Mozilla Firefox 2.xx (полностью); Oprea 7.хх - 9.xx (возможны искажения)

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

В этом уроке, я расскажу Вам о том, как при помощи CSS создать простую тень для блока. Этот способ, пожалуй является самым простым.
Итак, приступим....

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

Цитата:

/* Задание стилей для слоя тени */
.shadow {
background:#bbb; /* Задание цвета тени */
border:1px solid #ddd; /* Задание стиля и цвета границ тени */
width:200px; /* Задание ширины всего блока */
}

/* Задание стилей для слоя блока */
.block {
background:#fff; /* Задание цвета фона для блока */
border:1px solid #6b6b6b; /* Задание стиля и цвета границ блока */
position:relative; /* Задание позиции блока текста относительно тени */
padding:5px; /* Задание отступа */
top:-3px; /* Отступ сверху (для тени) */
left:-3px; /* Отступ слева (для тени) */
}

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

Цитата:

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

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

Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx

Этот урок CSS, расскажет Вам об одном из самых простых и удобных способов создания закруглённых углов.
Итак, попробуем сделать...

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

Цитата:

.b1, .b2, .b3, .b4 {
display:block; /* Задание отображения границ и углов */
overflow:hidden; /* Задание отображения границ и углов */
}

.b1, .b2, .b3 {
height:1px; /* Задание высоты границ и углов */
}

.b2, .b3, .b4 {
background:#ffedbe; /* Задание цвета фона в пределах закругления */
border-left:1px solid #00346e; /* Задание стилей левых углов */
border-right:1px solid #00346e; /* Задание стилей правых углов */
}

.b1 {
margin:0 5px; /* Задание отступов */
background:#00346e; /* Задание цвета верхней и нижней границ */
}

.b2 {
margin:0 3px; /* Задание отступов */
border-width:0 2px; /* Задание ширины границы */
}

.b3 {
margin:0 2px; /* Задание отступов */
}

.b4 {
height:2px; /* Задание высоты границ и углов */
margin:0 1px; /* Задание отступов */
}

.content {
background:#ffedbe; /* Задание общего фона */
border:0 solid #00346e; /* Задание стилей границ */
border-width:0 1px; /* Задание ширины границ */
}

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

Цитата:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<span class="b1"></span><span class="b2"></span><span class="b3"></span><span class="b4"></span>
<div class="content">
Содержание блока
</div>
<span class="b4"></span><span class="b3"></span><span class="b2"></span><span class="b1"></span>
</body>
</html>

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

Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx

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

В этом уроке, я расскажу Вам, как на CSS создать простое выпадающее меню.
Итак, приступим...

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

Цитата:

#menu,
#menu ul {
border: 1px solid #b4b4b4;
background: #003a63;
float: left;
width: 300px;
}

#menu li {
float: left;
position: relative;
background: #003a63;
}

#menu a {
color: #fff;
text-decoration: none;
display: block;
width: 125px;
padding: 3px 10px;
}

#menu a:hover {
color: #000;
background-color: #9ad5ff;
}

#menu li:hover,
#menu li.jshover {
background-color: #9ad5ff;
}

#menu li ul {
display: none;
position: absolute;
padding: 5px 2px;
width: 140px;
}

#menu li li a {
width: 118px;
}

#menu li:hover ul,
#menu li.jshover ul {
background-color: #003a63;
display: block;
}

#menu li:hover li ul,
#menu li.jshover li ul {
display: none;
width: 140px;
}

#menu li:hover li:hover ul,
#menu li.jshover li.jshover ul {
display: block;
}

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

Цитата:

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

<script type="text/javascript">
<![CDATA[//><!]]></script>
</head>
<body>
<ul id="menu">
<li><a href="/">Главная</a></li>
<li><a href="/">Меню</a>
<ul>
<li><a href="/">Пункт 1</a></li>
<li><a href="/">Пункт 2</a></li>
<li><a href="/">Пункт 3</a></li>
</ul>
</li>
</ul>
</body>

Заметим, что наше меню нормально работает во всех браузерах, включая IE6, который поддерживает параметр hover только для ссылок. Это так, благодаря следующему скрипту в нашем коде:

Цитата:

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

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

В этом уроке я расскажду Вам о том, как при помощи CSS создать текст с фоновым градиентом.
Итак, приступим...

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

Цитата:

h1 {
font: bold 330%/100%;
font-size: 30px;
position: relative;
}

h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 30px;
}

Для создания открывающих и закрывающих кавычек нам понадобятся 1 рисунок - градиент.
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

Цитата:

<html>
<head>
<link href="style.css" rel="stylesheet" type=text/css>
</head>
<body>
<h1><span></span>ГРАДИЕНТНЫЙ ТЕКСТ</h1>
</body>
</html>

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

Цитата:

Пояснения к коду:
width: 100%; - Задание ширины поля
position: absolute;
position: relative; - задание положение градиентного блока и текста.

В этом методе создания градиентного текста есть ряд недостатков. Главным по моему мнению является тот - что это не работает в IE6. Поправим:
Добавьте между тегами head такой код:

Цитата:

Вторым недостатком является то, что этот метод сильно завистит от цвета фона и текста. Это придётся каждый раз учитывать при создании.

Ну вот, это пока все, если еще найду уроки то обязательно накидаю!!!

Думаю, многим будет полезно!

Жаль что ты выложил свои уроки н нескольких форумах.
Удали со всех кроме этого!

Цитата:

Сообщение от Seo-man (Сообщение 5084)

Удали со всех кроме этого!

Имхо, не совсем корректно.......

Непонял, как это со всех форумов??? я тока тут и на 4дле.ру выкладывал и все