|
Некоторые материалы были позаимствованы с моих любимых сайтов: ][akep.ru ][ackzona.ru |
|
|
В этой статье мы разберем наиболее популярные эффекты, и основы 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, и другие технологии. Все статьи выкладываются на моём сайте. Если есть вопросы, можеш задать их на форуме Автор статьи - Царько Михаил, aka WebKill. |
|
Автор сайта - Царько Михаил |