Нонче тут

Сейчас 77 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

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

Проверка тиц

ВКонтакте

Cascading Style Sheets(CSS) - каскадные таблицы стилей. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания.
Особо важно правильно использовать синтакисис в CSS, вот о нём и поговорим вначале нашей экскурсии! Cascading Style Sheets(CSS) - каскадные таблицы стилей. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания.
Особо важно правильно использовать синтакисис в CSS, вот о нём и поговорим вначале нашей экскурсии!
Существуют три способа применения стилей в документе HTML.
1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта.

<__p style="color: red"_> текст красного цвета

2. Embed, обеспечивающее контроль над страницей HTML. Использование дескриптора

<_body>
<_p>текст красного цвета
<_/body>
<_/html>
3. Link стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением .css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах.

style.css должен содержать:

p{color: red}
Селекторы Это элементы дескрипторов, задаваемые в начале определения листов стилей; эти элементы сообщают браузеру, где применить стиль. Стоящее после селектора определение стиля заключается в фигурные скобки. Вот пример, в котором селектором является BODY:

body { color: blue}
Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми:

h1, p, h2{font-size: 12px}
Вместо селекторов можно использовать маску * . В данном примере стиль с определенным кеглем шрифта применяется ко всем находящемся на странице дескрипторам:

* { font-size: 14pt}
Другим символом маски является знак > . Таким образом, браузеру дается указание искать дочерние селекторы в пределах определенного родительского. В данном примере стиль применяется только к элементам LI спискам OL:

ol > li {list-style-type: decimal}

Используя селекторы классов, можно к одному и тому же дескриптору применять разные стили. После общего селектора следуют точка и имя класса, и стиль применяется тому дескриптору, чей атрибут CLASS соответствует этому имени. В следующем примере стиль применяется ко всем дескрипторам H2, у которых атрибут CLASS равен "myBlue":

h2.mybule {background-color: bule}

у этого заголовка синий фон

Селекторы также можно определять с помощью атрибута id, используя для этого символ # . В следующем примере стиль соответствует любому дескриптору, у которого значение атрибута id является "ducie"

#ducie {border-color: yellow}

Селектор A[att] соответствует любому элементу А, у которого задан определенный атрибут, не зависимо от его значения (не работает в IE).

table[border]{ border:1px solid red;}

Селектор A[att=”val”] соответствует любому элементу А, определенный атрибут которого имеет заданное значение (не работает в IE).

input[type=”submit”] {background-color :red;}

Селектор А[lang|=”val”] соответствует любому элементу А, который имеет заданное значение в качестве одного из значений атрибута lang (не работает в IE).

P[lang|=”en”]{text-align:left;}

Псевдоклассы.
Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для дескриптора P псевдокласс :first-letter, в котором устанавливаете различные стили:

p:first-letter { float: right; font-size: 2em; color: red;}

В CSS2 (гарантий адекватного отображения всеми браузерами нет! )определяются следующие псевдоклассы:
:first-child -первый дочерний элемент другого элемента;
:link - еще не посещенные ссылки;
:visited - посещенные ссылки;
:hover - элемент, над которым в настоящее время находится курсор;
:active - активный в данный момент элемент ;
:focus - элемент, имеющий фокус ввода;
:lang - этот псевдокласс определяет текущий язык;
:first-line - первая формированая строка абзаца;
:first-letter - первая буква абзаца;
:before - определяет содержимое перед элементом;
:after - определяет содержимое после элемента.

Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.