CSS введение, самые интересные примеры
Пользователи, просматривающие топик: none
|
Зашли как: Guest
|
Имя  |
| Сообщение |
<< Старые топики Новые топики >> |
|
|
CSS введение, самые интересные примеры - 2007-10-11 08:19:54
|
|
|
Webkill
Сообщений: 606
Оценки: 0
Присоединился: 2007-05-06 06:59:04.066666
|
Я вот подумал, и решил попробовать себя в качестве писателя…
Одну из статей выкладываю тут, хотелось бы научится писать красиво, чтобы это всем нравилось, и всем было понятно. Буду рад пообщатся с другими авторами, почитать ваши рекоминдации и советы, поправки…
Статья про CSS:
quote:
В этой статье мы разберем наиболее популярные эффекты, и основы CSS.
CSS (от английского Cascading Style Sheets) - это каскадные таблицы стилей, изобретение, которое облегчает жизнь вэбмастерам.
С помощью CSS можно применять эффекты которых нет в хтмле, например свободное позиционирование объекта, изменение цвета полосы прокрутки, изменять курсор, и делать более сложные эффекты, такие как выпадающие менюшки.
CSS может быть представлен как файл с расширением CSS, либо внутри самой страницы, в теге <style>.
Удобно размещать CSS в отдельном файле, чтобы при необходимости изменения некоторых элементов дизайна было достаточно изменить только 1 файл, и все страницы к которым он подключён примут его описание.
Итак приступим к примерам:
<style>
body {
background-color: RED; color:yellow;
}
</style>
Обратите внимание что CSS должна находится внутри <head>.
Всё содержимое между <style> И </style> - и есть описание таблицы стилей.
background-color - как не сложно догадаться, это цвет фона, а color - цвет текста
Когда мы пишем чисто:
тег(например body) { описание }
Это описание применяется ко всем тегам, имеющим имя перед фигурными скобками.
Естественно, что подобным образом можно описывать и другие теги.
Например выше приведённый пример по отношению к тегу <a>
<style>
a {
background-color: RED; color:yellow;
}
</style>
<a href="#">text</a>
Часто бывает необходимо одни ссылки сделать одним цветом, другие другим. Тогда на помощь приходят классы.
Класс позволяет описать свои характеристики, и в дальнейшем указывать объекту на его принадлежность к этому классу.
Вот простой пример с классами:
<style>
.myclass a {
background-color: RED; color:yellow;
}
</style>
<div class="myclass">
<a href="#">text</a>
</div>
<a href="#">А это обычный линк</a>
Здесь мы создали новый класс с именем myclass, и указали ему что нужно для всех тегов <a> использовать определённый в фигурных скобках стиль.
Как ты заметил перед именем класса нужно поставить точку, а для его вызова юзается тег <div class="имя класса"></div> всё что внутри тега div принимает описание класса.
Можно указывать описание стиля непосредственно внутри определённого тега.
Например, для того чтобы применить стиль к тегу а можно написать вот так:
<a style="background-color: RED; color:yellow;" href="#">text</a>
Всё что находится внутри style, который находится внутри какого либо тега будит применятся к этому объекту.
Итак основы CSS мы разобрали. Теперь я расскажу о самых часто распространённых методах используемых в CSS:
Псевдоклассы - это особая группа, позволяет обледенить несколько стилей. Наиболее интересные псевдоклассы:
hover - представляет элемент над которым в данный момент находится курсор. Похож на onMouseOver в яваскрипте, но при выходе курсора из области описание hover описание не применяется к обьекту.
С помощью псевдокласса hover можно реализовать эффект изменения, подчёркивания линка при наведении. Разбирём пример:
<style>
a { color:yellow; TEXT-DECORATION: none; }
a:hover{ color:RED; TEXT-DECORATION: underline; letter-spacing:10px; }
</style>
<a href="#">Линк</a>
Здесь мы использовали псевдокласс hover для того, чтобы указать различия в стиле при наведении курсора на линк, и при нахождении курсора вне области ссылки.
Здесь также новым для нас является свойство TEXT-DECORATION. Свойство TEXT-DECORATION определяет тип декорации текста, и может принимать следующие значения:
none - нет никакой декорации, просто текст
underline - подчёркивание
overline - линия над текстом
blink - мерцание.
Вы можете сами добавлять различные эффекты, стили. Некоторые функции я опишу здесь, более подробные учебники по CSS ты сможешь найти на моём сайте - webkill.narod.ru.
Сейчас я опишу эти функции:
text-indent:х; - С его помощью можно указать отступ перед первым символом в объекте, это удобно например если требуется в начале каждого параграфа оставлять отступ.
Пример:
<style>
p { text-indent:30px; }
</style>
<p>В начале каждого параграфа теперь отступ!</p>
letter-spacing - определяет интервал между символами текста
word-spacing - отступ между словами (длина пробела)
font-size - размер шрифта
background-image - определяет фоновый рисунок
background-attachment - определяет будит ли фоновое изображение прокручивается вместе со всем контентом.
Возможные значения:
scroll - фоновое изображение прокручивается вместе с контентом по умолчанию
fixed - Фоновое изображение фиксировано, и не прокручивается с прокруткой окна
Теперь давайте разберем функции управления стилем полосы прокрутки.
Все эти функции в качестве аргумента принимают цвет, который устанавливается для элемента, на который указывает функция.
scrollbar-3dlight-color - Устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки.
scrollbar-arrow-color - Устанавливает цвет стрелок на кнопке со стрелками.
scrollbar-base-color - Устанавливает цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color.
scrollbar-darkshadow-color - Устанавливает цвет тени для ползунка и кнопок со стрелками.
scrollbar-face-color - Устанавливает цвет ползунка и кнопок со стрелками.
scrollbar-track-color-устанавливает цвет дорожки, по которой бегает ползунок.
И на последок рассмотрим функции свободного позиционирования объектов.
Все свободно позиционируемые объекты отображаются поверх обычных объектов.
Для того чтобы определить метод позиционирования объекта, в его свойствах нужно прописать position, со следующими возможными значениями:
static - обычное (стандартное, по умолчанию) расположение объекта.
relative - нестандартное положение в любом месте страницы
fixed - объект фиксируется в окне браузера, пр прокрутке не меняет своего положения.
Для того чтобы определить место положения объекта в странице, его следует описать при помощи двух свойств:
top - определяет, сколько следует отступить с верху, а
left - слево.
Используя получиные знания напишим следующий пример:
<style>
p { position:fixed ; top:336px; left:126px; }
</style>
<p> Этот текст будит распологаться поверх содержимого страницы, и при прокрутки странице останется на своём месте</p>
В этой статье мы разобрали основной синтаксис, в дальнейшим я продолжу писать статьи про CSS, JavaScript, и другие технологии. Все статьи выкладываются на моём сайте.
Если есть вопросы, можеш задать их на форуме
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-11 13:48:28.166666
|
|
|
girlwap
Сообщений: 181
Оценки: 0
Присоединился: 2007-08-28 17:57:48.130000
|
Очень хорошая и содержательная статья для начинающих пиши дальше.
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-11 18:55:32.760000
|
|
|
Lex_Voodoo
Сообщений: 7328
Оценки: 0
Присоединился: 2004-12-07 13:55:12
|
Ха, я тоже в своё время писал про CSS, но FAQ опубликовал, а CSS так и не выложил…
Вот :)
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-11 22:37:30.313333
|
|
|
AdReNaL1Ne
Сообщений: 8027
Оценки: 350
Присоединился: 2005-09-11 06:38:05
|
В общем, первая ссылка в гугле по запросу "css" выдала тоже самое, ничего нового. А вот у Лекса хотя бы стиль свой…
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-15 19:53:08.560000
|
|
|
Webkill
Сообщений: 606
Оценки: 0
Присоединился: 2007-05-06 06:59:04.066666
|
quote:
Очень хорошая и содержательная статья для начинающих пиши дальше. Спс, стораюсь…
quote:
FAQ опубликовал Отличный фак, помню как год назад зашол, почитал, взял много нового. Новичкам очень полезно!
quote:
В общем, первая ссылка в гугле по запросу "css" выдала тоже самое, ничего нового. Впринципе, даже то что пишит журнал хакер уже есть в сети. Но журнал преподносит инфу в более интересном, разжованном виде.
quote:
А вот у Лекса хотя бы стиль свой… Я и хочу писать красиво, понятно и со стилем :)
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-15 21:02:14.903333
|
|
|
AdReNaL1Ne
Сообщений: 8027
Оценки: 350
Присоединился: 2005-09-11 06:38:05
|
quote:
Я и хочу писать красиво, понятно и со стилем :)
…а получается тупой копипаст :)
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 05:33:00.916666
|
|
|
Webkill
Сообщений: 606
Оценки: 0
Присоединился: 2007-05-06 06:59:04.066666
|
quote:
…а получается тупой копипаст :) Лучше бы дали советы что именно и как измеить, это вобще одна из мих первых статей, думаю не у всех сразу получалось…
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 12:33:17.996666
|
|
|
0v3r10rd
Сообщений: 211
Оценки: 0
Присоединился: 2007-06-28 18:47:52.503333
|
ммммм попробй напиши своими словами,как бы ты это сам написал?==> В этой статье мы разберем наиболее популярные эффекты, и основы CSS.
CSS (от английского Cascading Style Sheets) - это каскадные таблицы стилей, изобретение, которое облегчает жизнь вэбмастерам.
С помощью CSS можно применять эффекты которых нет в хтмле, например свободное позиционирование объекта, изменение цвета полосы прокрутки, изменять курсор, и делать более сложные эффекты, такие как выпадающие менюшки.
CSS может быть представлен как файл с расширением CSS, либо внутри самой страницы, в теге <style>.
Удобно размещать CSS в отдельном файле, чтобы при необходимости изменения некоторых элементов дизайна было достаточно изменить только 1 файл, и все страницы к которым он подключён примут его описание.
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 13:18:19.890000
|
|
|
svyazizt
Сообщений: 591
Оценки: 0
Присоединился: 2007-02-26 13:28:47.116666
|
херня какая то, ни какой последователности, нет ни его что должно быть в нормальной статье)) Webkill - убейся аб стену!!!
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 13:20:10.393333
|
|
|
svyazizt
Сообщений: 591
Оценки: 0
Присоединился: 2007-02-26 13:28:47.116666
|
если уж ты хочешь писать, то я тебе могу дать совет, полученный на личном опыте
1. Меньше лирики
2. Больше информации
3. Информация должна быть полезной
4. Краткость - сестра таланта
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 13:24:38.370000
|
|
|
0v3r10rd
Сообщений: 211
Оценки: 0
Присоединился: 2007-06-28 18:47:52.503333
|
грубо)) но правда:)
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 13:32:43.516666
|
|
|
svyazizt
Сообщений: 591
Оценки: 0
Присоединился: 2007-02-26 13:28:47.116666
|
0v3r10rd +1
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 13:40:38.200000
|
|
|
Webkill
Сообщений: 606
Оценки: 0
Присоединился: 2007-05-06 06:59:04.066666
|
quote:
ммммм попробй напиши своими словами,как бы ты это сам написал? Всмысле своими словами?
Это итак написано мною. Помоему нормально, и периписывать не нужно.
quote:
нет ни его что должно быть в нормальной статье)) Почему?
Информация, краткость, полезность всё есть!)
quote:
Webkill - убейся аб стену!!! Я уже давно труп.
quote:
1. Меньше лирики
2. Больше информации
3. Информация должна быть полезной
4. Краткость - сестра таланта Ничего нового!
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 13:52:30.493333
|
|
|
svyazizt
Сообщений: 591
Оценки: 0
Присоединился: 2007-02-26 13:28:47.116666
|
ye e; tckb lkz nt,z dct 'nj yt jnrhsnbt? nj njulf xt f[byt. nj njfre. gbitim&
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 13:53:42.886666
|
|
|
svyazizt
Сообщений: 591
Оценки: 0
Присоединился: 2007-02-26 13:28:47.116666
|
бля,
ну если для тебя это не отктытие то тогда почему такую ахинею пишешь?
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 15:56:50.216666
|
|
|
Webkill
Сообщений: 606
Оценки: 0
Присоединился: 2007-05-06 06:59:04.066666
|
quote:
бля, Cудя по всему ты не умееш редактировать свои сообщения. Зачем так флудить:
quote:
ye e; tckb lkz nt,z dct 'nj yt jnrhsnbt? nj njulf xt f[byt. nj njfre. gbitim& 2 svyazizt
Ты тупой флудер!
quote:
ну если для тебя это не отктытие то тогда почему такую ахинею пишешь? Не нравится не читай.
Увожай других, и помагай младшим вместо того чтобы пытатся отбить у них желание писать.
quote:
полученный на личном опыте И где же плоды твоего личного опыта?
quote:
грубо)) но правда Тебя спросить забыли=)
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 16:15:48.533333
|
|
|
svyazizt
Сообщений: 591
Оценки: 0
Присоединился: 2007-02-26 13:28:47.116666
|
quote:
seregin
Модератор
именa тех, у кого есть особые права и т.п. типа за заслуги перед отечеством форумом
и так намбер раз у нас
svyazizt получил возможность постить 2 раза подряд. =)
так что мне поХ!!!, а мои плоды опыта это что я работаю веб программистом в 21 Научно Исследовательском Институте. И получаю отличную зарплату
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 16:35:57.183333
|
|
|
0v3r10rd
Сообщений: 211
Оценки: 0
Присоединился: 2007-06-28 18:47:52.503333
|
[blockquote]quote:
грубо)) но правда[/blockquote]Тебя спросить забыли=)
правдо…[sm=dp.gif]
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-16 17:04:42.480000
|
|
|
Webkill
Сообщений: 606
Оценки: 0
Присоединился: 2007-05-06 06:59:04.066666
|
quote:
svyazizt получил возможность постить 2 раза подряд. =) Зачем это вобще надо?
Темболее такая ошибка, ты вместо того чтобы отредактировать предыдущий создаёш новый!
И интересно узнать какие такие заслуги?
А ну да=) Ты занялвторое место на форуме после серёгина в номинации флудер года! Особых ответов на какие либо вопросы я у тебя не заметил, тусиш восновном в трёпе, и с ламасами всякую фигню обсуждаеш)
quote:
а мои плоды опыта это что я работаю веб программистом в 21 Научно Исследовательском Институте. Судя по твоим знаниям яваскрипта, и умеию юзать поиск это очень не заметно)
quote:
И получаю отличную зарплату Ламасам всегда визёт. У нас училка по инфе не знает что такое компилятор! И юзает нет на халяву.
quote:
полученный на личном опыте У тя есть опыт по написанию статей?
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-18 12:43:47.180000
|
|
|
0v3r10rd
Сообщений: 211
Оценки: 0
Присоединился: 2007-06-28 18:47:52.503333
|
судя по то что товарищ svyazizt написал что имеет подобный опыт) значит исходя из данной ситуация т да)) [sm=peace.gif]
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-18 12:45:59.216666
|
|
|
0v3r10rd
Сообщений: 211
Оценки: 0
Присоединился: 2007-06-28 18:47:52.503333
|
ужос написал то с ошибками ))) мне стыдно)))[sm=ah.gif]
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-18 13:21:23.863333
|
|
|
Sun_trop
Сообщений: 16
Оценки: 0
Присоединился: 2007-09-30 12:30:08.306666
|
*взял попкорн*
Драться когда будете?
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-18 13:25:24.526666
|
|
|
0v3r10rd
Сообщений: 211
Оценки: 0
Присоединился: 2007-06-28 18:47:52.503333
|
здесь небудет никакого рукоприкладства))) тут идёт делема по поводу статьи о стиле написания…))
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-18 13:29:50.750000
|
|
|
Sun_trop
Сообщений: 16
Оценки: 0
Присоединился: 2007-09-30 12:30:08.306666
|
А я сразу и не понял)
Лично мне Webkill твоя статья понравилась. Если не копипаст то норм.
1. Меньше лирики
2. Больше информации
3. Информация должна быть полезной
4. Краткость - сестра таланта
Помоему все выполняется более менее
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-18 14:03:03.196666
|
|
|
Webkill
Сообщений: 606
Оценки: 0
Присоединился: 2007-05-06 06:59:04.066666
|
quote:
судя по то что товарищ svyazizt написал что имеет подобный опыт) значит исходя из данной ситуация т да)) Тут дофига ламиров. Пишут одно, знают другое. Например каждому понятно что нужен опыт по написанию статей (даже 0v3r10rd'у)
А вот свзязист на это пишит:
quote:
а мои плоды опыта это что я работаю веб программистом в 21 Научно Исследовательском Институте. И получаю отличную зарплату Логично не правда ли? Вот я и переспрашиваю)
Само собой что опыт должен быть по статьям а svyazizt на это отписывает флуд не относящийся к теме.
quote:
ужос написал то с ошибками ))) мне стыдно))) Прощаем, таким как ты простительно)
quote:
*взял попкорн*
Драться когда будете? Входные билеты по 5 WMZ, концерт через неделю, по окончании недели культуры :))
quote:
тут идёт делема по поводу статьи о стиле написания…)) Точнее флуд.
quote:
здесь небудет никакого рукоприкладства))) Надо к те в гости пингонутся)
quote:
А я сразу и не понял)
Лично мне Webkill твоя статья понравилась. Если не копипаст то норм.
1. Меньше лирики
2. Больше информации
3. Информация должна быть полезной
4. Краткость - сестра таланта
Помоему все выполняется более менее 10х 2. Темболее учитывая что это одна из самых первых статей.
|
|
|
|
|
RE: CSS введение, самые интересные примеры - 2007-10-18 15:49:37.990000
|
|
|
0v3r10rd
Сообщений: 211
Оценки: 0
Присоединился: 2007-06-28 18:47:52.503333
|
Webkill о великий))) прости за мою дерзость в отписание в этом топике…
[blockquote]quote:
здесь небудет никакого рукоприкладства)))[/blockquote]Надо к те в гости пингонутся)
угрожаеш?))[sm=spiteful.gif]
|
|
|
|
|
|
