Добро пожаловать, Гость! Регистрация RSS
Пятница, 29.11.2024

Советы и секреты CSS

Даже верстальщики с довольно таки большим опытом долго не могут привыкнуть к тому, что только с помощью CSS можно сделать практически что угодно — от разметки колонок до кнопок и всплывающих окон. Технология Cascading Style Sheets позволяет указывать практически любые элементы дизайна - от размера шрифтов до цвета отдельных блоков. Но не все знаю, что CSS могут сделать намного больше.

Техника оформления текста с помощью Css.

 

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


Теперь, когда поддержка языка CSS реализована гораздо лучше, и, благодаря этому, можно воспользоваться множеством ценных возможностей языка, Web-дизайнеры переходят от использования языка HTML, как средства стилизации и создания макетов страниц, к настоящему дизайну с применением языка CSS.CSS (каскадные таблицы стилей) приобрели популярность в конце 1996 года. Не смотря на относительно долгое существование этой технологии, ее практическое применение для Web-дизайна ограничивалось управлением шрифтами и цветом, по крайней мере, до недавнего времени.

Почему это так важно? Причин тому - множество:
  • Раздельное хранение представления и документа позволяет стилизовать этот документ для различных устройств, включая, монитор принтер, проектор и даже портативные устройства.
  • Раздельное хранение представления и документа означает уменьшение размера документа, что, в свою очередь, ускоряет загрузку и отображение страницы, доставляя удовольствие посетителям.
  • Язык CSS позволяет управлять как одним документом, так и миллионами документов. Для внесения изменения потребуется модифицировать необходимый стиль в одном CSS-файле, и это изменение автоматически отразится на всех связанных документах. В языке HTML это сделать невозможно.
  • CSS-документы кэшируются. Это означает, что они загружаются в память браузера только один раз. При перемещении по сайту браузеру никогда не приходится заново интерпретировать стили. В результате мы получаем более плавные переходы от страницы к странице и более быструю загрузку страниц, что всегда является конечной целью.
  • Отделив представление от структуры и содержимого, легко добиться доступности документа. Документы, в которых не используются сложные таблицы и большое количество элементов языка HTML, отвечающих за представление, по сути являются более доступными, чем те документы, у которых перечисленные свойства присутствуют.
Каскадные таблицы стилей (CSS) стали невероятно популярными в последние годы, прежде всего, благодаря широко распространенной поддержке браузерами большинства их директив.
Очевидно, что язык CSS предоставляет множество возможностей.

Люди часто интересуются, почему стили называются каскадными? Каскад - это иерархия применения - красивое название для системы применения правил. Если внимательно посмотреть на ниже перечисленные типы таблиц стилей, то станут очевидными различные способы применения стиля к одному и тому же документу.

Каскад определяет способ применения правил, в случае с типами таблиц стилей:
  • Пользовательский стиль переопределяет все остальные стили;
  • Встроенный стиль превосходит внедренный, связанный и импортированный стили;
  • Внедренный стиль имеет преимущественное значение перед встроенным стилем;
  • Связанные и импортированные стили рассматриваются, как равные по значимости, и применяются везде, где не были применены другие типы таблиц стилей.
Существует шесть типов таблиц стилей:
  • Стиль браузера - это стандартная таблица стилей, используемая браузером. Если никакие правила стиля не объявлены, применяются эти стандартные стили.
  • Стиль пользователя - пользователь может написать свою таблицу стилей и переопределить любые стили, созданные вами, изменив настройки браузера. Такой подход используется редко, но может оказаться полезным для людей с ограниченными возможностями, например с плохим зрением. В данном случае пользователь создаст стили с высококонтрастными шрифтами больших размеров, которые переопределят ваши стили.
  • Встроенный стиль - стиль, который определяется непосредственно в элементе и применяется с использованием атрибута style. Такой подход полезен для стилей, единовременно применяемых к одному элементу, однако он не считается идеальным.
  • Внедренный стиль - этот стиль управляет представлением одного документа и размещается внутри элемента style HTML-документа.
  • Связанный стиль - это таблица стилей, которая связана с HTML-документом при помощи элемента link, размещенного в разделе документа head. Любой документ, связанный с данным типом таблицы стилей, получает все стили, определенные в ней, в чем и заключается преимущество управления языка CSS.
  • Импортированный стиль - этот тип похож на связанные стили, однако позволяет импортировать стили в связанную таблицу стилей или непосредственно в документ. Он полезен для реализации обходных путей и для управления множеством документов.
Многие создатели сайтов на собственном опыте убедились, что технологии CSS предоставляют широкие возможности для оформления внешнего вида сайтов и позволяют оптимизировать процесс разработки.

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

Существуют три способа применения стилей в документе HTML.

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

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

2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование дескриптора <STYLE> в пределах раздела <HEAD> страницы позволяет детально описать атрибуты, применяемые ко всей странице стиля.

<html>

 <head>

 <style>

 <! --

 p{color: red}

 -->

 </style>

 </head>

 <body>

 <p>текст красного цвета</p>

 </body>

 </html>

3. Связанные (link) стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением .css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах.

<html>

 <head>

 <link rel="stylesheet" href="style.css" type="text/css" >

 </head>

 <body>

 <p>текст красного цвета</p>

 </body>

 </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}

 <h2 class="mybule">у этого заголовка синий фон</h2>

Селекторы также можно определять с помощью атрибута 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 - определяет содержимое после элемента.
FreeAvalanche.ru - Лавина Бесплатного Трафика на Ваш сайт!

Как Быстро Раскрутить Сайт?
Система Быстрого Нагона Трафика!

Регистрируйтесь в Новой системе Продвижения, которая порождает ГАРАНТИРОВАННЫЕ
Посещения Вашего сайта.

Смотрите ниже

Нажмите и Пользуйтесь
Системой Бесплатно
Яндекс.Метрика