Форум АНТИЧАТ - CSS введение, самые интересные примеры

В этой статье мы разберем наиболее популярные эффекты, и основы CSS.

CSS (от английского Cascading Style Sheets) - это каскадные таблицы стилей, изобретение, которое облегчает жизнь вэбмастерам.

С помощью CSS можно применять эффекты которых нет в хтмле, например свободное позиционирование объекта, изменение цвета полосы прокрутки, изменять курсор, и делать более сложные эффекты, такие как выпадающие менюшки.

CSS может быть представлен как файл с расширением CSS, либо внутри самой страницы, в теге .

Удобно размещать CSS в отдельном файле, чтобы при необходимости изменения некоторых элементов дизайна было достаточно изменить только 1 файл, и все страницы к которым он подключён примут его описание.

Итак приступим к примерам:

body {

background-color: RED; color:yellow;

}

Обратите внимание что CSS должна находится внутри .

Всё содержимое между И - и есть описание таблицы стилей.

background-color - как не сложно догадаться, это цвет фона, а color - цвет текста

Когда мы пишем чисто:

тег(например body) { описание }

Это описание применяется ко всем тегам, имеющим имя перед фигурными скобками.

Естественно, что подобным образом можно описывать и другие теги.

Например выше приведённый пример по отношению к тегу

a {

background-color: RED; color:yellow;

}

text

Часто бывает необходимо одни ссылки сделать одним цветом, другие другим. Тогда на помощь приходят классы.

Класс позволяет описать свои характеристики, и в дальнейшем указывать объекту на его принадлежность к этому классу.

Вот простой пример с классами:

.myclass a {

background-color: RED; color:yellow;

}

text

А это обычный линк

Здесь мы создали новый класс с именем myclass, и указали ему что нужно для всех тегов использовать определённый в фигурных скобках стиль.

Как ты заметил перед именем класса нужно поставить точку, а для его вызова юзается тег всё что внутри тега div принимает описание класса.

Можно указывать описание стиля непосредственно внутри определённого тега.

Например, для того чтобы применить стиль к тегу а можно написать вот так:

textВсё что находится внутри style, который находится внутри какого либо тега будит применятся к этому объекту.

Итак основы CSS мы разобрали. Теперь я расскажу о самых часто распространённых методах используемых в CSS:

Псевдоклассы - это особая группа, позволяет обледенить несколько стилей. Наиболее интересные псевдоклассы:

hover - представляет элемент над которым в данный момент находится курсор. Похож на onMouseOver в яваскрипте, но при выходе курсора из области описание hover описание не применяется к обьекту.

С помощью псевдокласса hover можно реализовать эффект изменения, подчёркивания линка при наведении. Разбирём пример:

a { color:yellow; TEXT-DECORATION: none; }

a:hover{ color:RED; TEXT-DECORATION: underline; letter-spacing:10px; }

Линк

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

Здесь также новым для нас является свойство TEXT-DECORATION. Свойство TEXT-DECORATION определяет тип декорации текста, и может принимать следующие значения:

none - нет никакой декорации, просто текст

underline - подчёркивание

overline - линия над текстом

blink - мерцание.

Вы можете сами добавлять различные эффекты, стили. Некоторые функции я опишу здесь, более подробные учебники по CSS ты сможешь найти на моём сайте - webkill.narod.ru.

Сейчас я опишу эти функции:

text-indent:х; - С его помощью можно указать отступ перед первым символом в объекте, это удобно например если требуется в начале каждого параграфа оставлять отступ.

Пример:

p { text-indent:30px; }

В начале каждого параграфа теперь отступ!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 - слево.

Используя получиные знания напишим следующий пример:

p { position:fixed ; top:336px; left:126px; }

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

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

Если есть вопросы, можеш задать их на форуме

Автор статьи - Shawn1x