06.11.2008, 19:32 | #1 | ||||||
Искатель сео
Регистрация: 06.11.2008
Сообщений: 48
Вы сказали Спасибо: 2
Поблагодарили 4 раз(а) в 3 сообщениях
Репутация: 362
|
Уроки по CSS
И так, решил сделать топик для тех кто плохо знает CSS или вообще не знает, выложу тут пару уроков для новичков в этом деле
Начнем, в этом уроке, мы с Вами поговорим об одном из способов изменения цвета активного блока. Этот же способ отлично подойдёт для создания кнопки. Метод, который мы рассмотрм - один из самых удобных и логически понятны. Итак, приступим... 1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css. 2) Вставьте в этот файл следующий код: Цитата:
3) Чтобы увидить работу стилей, создадим в той же директории html файл и, например вставим туда такой код: Цитата:
4) Сохраняем и смотрим, что получилось. Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.0; Opera 8.хх - 9.xx -------------------------------------------------------------------------- В этом уроке, будет тема "изменения цвета активного блока". Этот же способ отлично подойдёт для создания кнопки. Метод, один из самых удобных и логически понятны. Итак, приступим... 1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css. 2) Вставьте в этот файл следующий код: Цитата:
3) Чтобы увидить работу стилей, создадим в той же директории html файл и, например вставим туда такой код: Цитата:
4) Сохраняем и смотрим, что получилось. --------------------------------------------------------------------------- Урок самому удобному способу создания рамки для изображения. 1) Опять создаем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css. 2) Вставьте в этот файл следующий код: Цитата:
3) Чтобы увидеть работу стилей, создадим опять в той же директории html файл и, например, вставим туда такой код: Цитата:
4) Сохраняем и смотрим, что получилось |
||||||
06.11.2008, 19:34 | #2 | ||||||
Искатель сео
Регистрация: 06.11.2008
Сообщений: 48
Вы сказали Спасибо: 2
Поблагодарили 4 раз(а) в 3 сообщениях
Репутация: 362
|
Наш следующий урок CSS посвящён созданию активных картинок, которые очень удобны при создании различных галлерей. Рассмотренный способ - самый простой, но не лешен недостатков, главным из которых является некорректная работа в IE 6, но со временем и модернизацией, проблема сойдёт на нет.
Итак, приступим... 1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css. 2) Вставьте в этот файл следующий код: Цитата:
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код: Цитата:
4) Сохраняем и смотрим, что получилось. --------------------------------------------------------------------------- Наш следующий урок CSS посвящён созданию всплывающих подсказок на чистом CSS. Этот метод - один из самых простых, но не самый удобный. Главный недостаток этого метода в том, что он основывается на теге span, который часто используется для других целей. Итак... 1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css. 2) Вставьте в этот файл следующий код: Цитата:
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код: Цитата:
4) Сохраняем и смотрим, что получилось. Совместимость: Internet Explorer 5.5 - 7 (полностью); Mozilla Firefox 2.xx (полностью); Oprea 7.хх - 9.xx (возможны искажения) -------------------------------------------------------------------- В этом уроке, я расскажу Вам о том, как при помощи CSS создать простую тень для блока. Этот способ, пожалуй является самым простым. Итак, приступим.... 1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css. 2) Вставьте в этот файл следующий код: Цитата:
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код: Цитата:
4) Сохраняем и смотрим, что получилось. Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx |
||||||
06.11.2008, 19:37 | #3 | |||||||||
Искатель сео
Регистрация: 06.11.2008
Сообщений: 48
Вы сказали Спасибо: 2
Поблагодарили 4 раз(а) в 3 сообщениях
Репутация: 362
|
Этот урок CSS, расскажет Вам об одном из самых простых и удобных способов создания закруглённых углов.
Итак, попробуем сделать... 1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css. 2) Вставьте в этот файл следующий код: Цитата:
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код: Цитата:
4) Сохраняем и смотрим, что получилось. Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx -------------------------------------------------------------------- В этом уроке, я расскажу Вам, как на CSS создать простое выпадающее меню. Итак, приступим... 1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css. 2) Вставьте в этот файл следующий код: Цитата:
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код: Цитата:
Заметим, что наше меню нормально работает во всех браузерах, включая IE6, который поддерживает параметр hover только для ссылок. Это так, благодаря следующему скрипту в нашем коде: Цитата:
4) Сохраняем и смотрим, что получилось. ------------------------------------------------------------------ В этом уроке я расскажду Вам о том, как при помощи CSS создать текст с фоновым градиентом. Итак, приступим... 1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css. 2) Вставьте в этот файл следующий код: Цитата:
Для создания открывающих и закрывающих кавычек нам понадобятся 1 рисунок - градиент. 3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код: Цитата:
4) Сохраняем и смотрим, что получилось. Цитата:
Добавьте между тегами head такой код: Цитата:
Вторым недостатком является то, что этот метод сильно завистит от цвета фона и текста. Это придётся каждый раз учитывать при создании. Ну вот, это пока все, если еще найду уроки то обязательно накидаю!!! |
|||||||||
Этот пользователь сказал Спасибо IVASHKA за это полезное сообщение: | neo-x (06.11.2008) |
06.11.2008, 19:50 | #4 |
Пользователь
Регистрация: 23.06.2008
Сообщений: 773
Вы сказали Спасибо: 24
Поблагодарили 36 раз(а) в 34 сообщениях
Репутация: 1171
|
Думаю, многим будет полезно!
__________________
Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий). Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий). Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий). Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий). |
06.11.2008, 21:07 | #5 |
Регистрация: 08.05.2008
Адрес: Молдова/ПМР, Тирасполь
Сообщений: 3,557
Вы сказали Спасибо: 95
Поблагодарили 137 раз(а) в 124 сообщениях
Репутация: 1596
|
Жаль что ты выложил свои уроки н нескольких форумах.
Удали со всех кроме этого!
__________________
Недорогой хостинг! forum-seo.net/showthread.php?p=10754 Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий). |
07.11.2008, 07:59 | #6 |
Пользователь
Регистрация: 23.06.2008
Сообщений: 773
Вы сказали Спасибо: 24
Поблагодарили 36 раз(а) в 34 сообщениях
Репутация: 1171
|
__________________
Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий). Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий). Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий). Для просмотра ссылок или изображений в подписях, у Вас должно быть не менее 30 сообщение(ий). Сейчас у Вас 0 сообщение(ий). |
07.11.2008, 10:16 | #7 |
Искатель сео
Регистрация: 06.11.2008
Сообщений: 48
Вы сказали Спасибо: 2
Поблагодарили 4 раз(а) в 3 сообщениях
Репутация: 362
|
Непонял, как это со всех форумов??? я тока тут и на 4дле.ру выкладывал и все
|