GVMproject.info-бесплатные программы, скрипты, шаблоны
Cascading Style Sheets (Таблицы Каскадных Стилей)

СSS (Cascading Style Sheets) переводится как Таблицы Каскадных Стилей. CSS - это язык, предназначенный для описания оформления любых HTML документов. При помощи его вебмастер может полностью контролировать  стили и расположение элементов веб страниц, что удобнее и гораздо эффективнее, чем использование стандартного набора HTML тегов. Например: Вам нужно создать красный подчеркнутый жирный текст. 

ПРИМЕР HTML: 
Какой-то текст

А если такой стиль необходимо применять много раз? Хорошо если 2, а если намного больше? Здесь нам не обойтись без СSS. Имеется три типа таблиц стилей: Связанные таблицы стилей, Глобальные таблицы стилей и  Внутренние таблицы стилей. Внутренние таблицы стилей (Inline Style Sheets)  размещаются прямо в HTML тегах с помощью специального атрибута. Глобальные (Global Style Sheets) задают стиль элементов для всего документа. Связанные (Linked Style Sheets)  хранятся во внешнем файле и могут быть применены для нескольких документов сразу. Более подробно об этом читайте ниже.

Структура и правила

Селекторы (Selectors):

Синтаксис:
селектор {свойства}

Любой элемент HTML - это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.

ПРИМЕР:

H1 {color:red; size:20pt;}

Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt, point).

Классовые селекторы (Class Selectors):

Синтаксис:
селектор.класс {свойства}

CLASS - атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.

ПРИМЕР:

H1.blue {color:blue; size:20pt;}

Все элементы H1 с атрибутом CLASS="blue" станут синими.

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

Синтаксис:
.класс {свойства}

ПРИМЕР:

.green {color:green;}

В данном случае все элементы с атрибутом CLASS="green" станут зелеными.

ID селекторы (ID Selectors):

Cинтакс:
#id {свойства}

ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения среди элементов одного класса.

Индификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, Вы создали класс blue - синий курсив. Но Вам понадобился жирный подчеркнутый текст синим курсивом. Конечно, можно создать новый класс, но зачем? Проще описать ID. Например "boldunderline". И все элементы класса blue с значением ID "boldunderline" станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.

ПРИМЕР:

 < html > 
 < head > 
 < title >  Пример CSS < /title > 
 < /head > 
 < style > 
 .blue {color:blue; font-style:italic}
 #boldunderline {text-decoration:underline; font-weight:bold}
 < /style > 
 < body > 
 < p class= " blue " >  Здравствуйте, это моя домашняя страница. < /p > 
 < p class= " blue " id= " boldunderline " > Пока еще в стадии разработки ...  < /p > 
 < p id= " boldunderline " > ... Но скоро откроется < /p > 
 < /body > 
 < /html > 

Как видно из примера, атрибут ID может быть использован без указания класса (последний параграф примера. Тогда параграф будет обладать только свойствами ID "boldunderline" (в примере - жирный, подчеркнутый текст).

Контекстуальные селекторы (Contextual Selectors):

Контекстные селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается только элеметнам в заданной последовательности в зависимости от каскадного порядка.

ПРИМЕР:

P EM {color:silver;}

В данном примере все элементы EM внутри элементов P будут иметь заданный стиль.

Придание нескольким элементам одинаковых свойств:

Скажем Вам нужно придать нескольким элементам Вашей веб страницы одинаковых свойств. В этом случае при определении селекторы перечисляются через запятую перед блоком свойств.

ПРИМЕР:

h1,h2,h3,p,strong {color:green; font-style:italic;}

Все элементы h1, h2, h3, p и strong будут зелеными.

Псевдоклассы и псевдоэлементы :

Синтаксис:
селектор:псевдокласс { свойства }
селектор.класс:псевдокласс { свойства }
селектор:псевдоэлемент { свойства }
селектор.класс:псевдоэлемент { свойства }

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

Список псевдоклассов и псевдоэлементов :

Anchor Pseudo Classes - эти псевдоклассы элемента a href="", обозначающего ссылку. Псевдоклассы этого элемента: (ссылка), active (активная ссылка), visited (посещенный ранее URL), hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в Нетскейпе).

First Line Pseudo-element - first-line. Этот псевдоэлемент может быть использован с block-level элементами (p, h1 и т.д.). Он изменяет стиль первой строки этих элементов.

First Letter Pseudo-element - first-letter. Похож на first-line, но влияет не на всю строку, а только на первый символ.

ПРИМЕР :

a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}

В данном примере все элементы Anchor (ссылки) будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.

Примечание : описания нескольких свойств для одного селектора, контекстуального селектора, класса, индивидуально именованного стиля или группы объединенных селекторов отделяются друг от друга точкой с запятой ";".

-------------------------------------------------


Страниц : 1 2 3 4 5 » #
TEXT +   TEXT -   Печать Опубликовано : 20.12.09 | Просмотров : 21707 | Ваша оценка

Введите слово для поиска :
Популярные файлы
- скрипт форума phpBB2
- Скрипт MLM пирамиды
- Nvu 1.0 визуальный редактор
- Java скрипты
- auto URL submit программа для регистрации сайта в каталогах
- PHP скрипт обменного пункта
 
Популярные статьи
- учебник вебмастеру
- Руководство по html
- Cascading Style Sheets (Таблицы Каскадных Стилей)
- Дорвеи и поисковые системы.
- Клоакинг
 
Реклама

##
##
##
 
Услуги
 
статистика
Поздравления с Новым годом

Яндекс.Метрика
 
RSS

 
В начало страницы © 2018 www.gvmproject.info CMS Danneo (некоммерческий продукт) - это бесплатная, c открытым исходным кодом система управления сайтами. Разработана на языке программирования PHP и может работать почти на любой платформе(хостинг площадке), используя в качестве базы данных MySQL. Поддерживает SEO-frendly, RSS 2.0 - каналы и Yandex-news, Google SiteMap, экспорт контента с помощью JavaScript и многое другое. А базовая комплектация позволяет построить сайт почти любой сложности и дизайна и эффективно им управлять.Распространяется в соответствии с GNU General Public 2