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

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


Вернуться   Сео форум про методы раскрутки сайтов. Как раскрутить сайт и заработать в интернете. > Свободное общение > Общение вебмастеров и оптимизаторов обо всём
Перезагрузить страницу Уроки по CSS
Регистрация Справка Пользователи Календарь

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 06.11.2008, 19:32   #1
IVASHKA
Искатель сео
 
Аватар для IVASHKA
 
Регистрация: 06.11.2008
Сообщений: 48
Вы сказали Спасибо: 2
Поблагодарили 4 раз(а) в 3 сообщениях
Репутация: 362
Уроки по 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) Вставьте в этот файл следующий код:


Цитата:
/* Задание стилей для блока в обычном состоянии */
#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) Сохраняем и смотрим, что получилось
IVASHKA вне форума   Ответить с цитированием
Старый 06.11.2008, 19:34   #2
IVASHKA
Искатель сео
 
Аватар для IVASHKA
 
Регистрация: 06.11.2008
Сообщений: 48
Вы сказали Спасибо: 2
Поблагодарили 4 раз(а) в 3 сообщениях
Репутация: 362
По умолчанию
Наш следующий урок 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 файл и, например вставим туда такой код:


Цитата:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div align="center" >
<br />
<br />
<a class="st" href="#"><img src="1.png" alt="" title="" /></a>
</div>
</body>
</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; /* Задание прозрачности поля подсказки */
filterrogidXImageTransform.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
IVASHKA вне форума   Ответить с цитированием
Старый 06.11.2008, 19:37   #3
IVASHKA
Искатель сео
 
Аватар для IVASHKA
 
Регистрация: 06.11.2008
Сообщений: 48
Вы сказали Спасибо: 2
Поблагодарили 4 раз(а) в 3 сообщениях
Репутация: 362
По умолчанию
Этот урок 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[//><!--
jsHover = function() {
var hEls = document.getElementById("menu").getElementsByTagNa me("LI");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></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 только для ссылок. Это так, благодаря следующему скрипту в нашем коде:


Цитата:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jsHover = function() {
var hEls = document.getElementById("menu").getElementsByTagNa me("LI");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></script>

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 такой код:


Цитата:
<!--[if lt IE 6]>

<style>
h1 span {
background: none;
filter: progidXImageTransform.Microsoft.AlphaImageLoader (src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

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

Ну вот, это пока все, если еще найду уроки то обязательно накидаю!!!
IVASHKA вне форума   Ответить с цитированием
Этот пользователь сказал Спасибо IVASHKA за это полезное сообщение:
neo-x (06.11.2008)
Старый 06.11.2008, 19:50   #4
Butrim
Пользователь
 
Аватар для Butrim
 
Регистрация: 23.06.2008
Сообщений: 773
Вы сказали Спасибо: 24
Поблагодарили 36 раз(а) в 34 сообщениях
Репутация: 1171
По умолчанию
Думаю, многим будет полезно!
__________________

Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий).



Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий).

Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий).



Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий).
Butrim вне форума   Ответить с цитированием
Старый 06.11.2008, 21:07   #5
Seo-man

Администратор

 
Аватар для Seo-man
 
Регистрация: 08.05.2008
Адрес: Молдова/ПМР, Тирасполь
Сообщений: 3,557
Вы сказали Спасибо: 95
Поблагодарили 137 раз(а) в 124 сообщениях
Репутация: 1596
По умолчанию
Жаль что ты выложил свои уроки н нескольких форумах.
Удали со всех кроме этого!
__________________
Недорогой хостинг! forum-seo.net/showthread.php?p=10754
Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий).
Seo-man вне форума   Ответить с цитированием
Старый 07.11.2008, 07:59   #6
Butrim
Пользователь
 
Аватар для Butrim
 
Регистрация: 23.06.2008
Сообщений: 773
Вы сказали Спасибо: 24
Поблагодарили 36 раз(а) в 34 сообщениях
Репутация: 1171
По умолчанию
Цитата:
Сообщение от Seo-man Посмотреть сообщение
Удали со всех кроме этого!
Имхо, не совсем корректно.......
__________________

Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий).



Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий).

Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий).



Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий).
Butrim вне форума   Ответить с цитированием
Старый 07.11.2008, 10:16   #7
IVASHKA
Искатель сео
 
Аватар для IVASHKA
 
Регистрация: 06.11.2008
Сообщений: 48
Вы сказали Спасибо: 2
Поблагодарили 4 раз(а) в 3 сообщениях
Репутация: 362
По умолчанию
Непонял, как это со всех форумов??? я тока тут и на 4дле.ру выкладывал и все
IVASHKA вне форума   Ответить с цитированием
Ответ

« Предыдущая тема | Следующая тема »

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения
BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход


Часовой пояс GMT +3, время: 23:19.

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

Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. Перевод: zCarot
Seo форум про методы раскрутки сайтов. Раскрутка сайта. Заработок на сайтах.