Загружается... Ждите...
Ulti Clocks content

Презентация нашей студии

Click on the slide!

Дизайны сайтов

Сайт для серверов Lineage II Online, Разработан под Хроники игры Epilogue

More...
Click on the slide!

Lineage II

Сайт для игры Lineage II Хронки EPILOGUE

More...
Click on the slide!

Дизайны сайтов

Сайт для серверов TERA Online

More...
Click on the slide!

Сайт Lineage II

Дизайн сайта разработан для сервера Lineage II

More...
Click on the slide!

Дизайны сайтов

Сайт для серверов Lineage II Online, Разработан под Хроники игры Interlude Battle-Club

More...
Click on the slide!

Дизайны сайтов

Сайт разработан для игрового сервера Lineage II

More...
Click on the slide!

Дизайны сайтов

Дизайн разработанный для игрового сервера Mu Online RPG

More...
Frontpage Slideshow (version 2.0.0) - Copyright © 2006-2008 by JoomlaWorks

Все анонсы на сайте


Russian English Estonian French German Italian Latvian Lithuanian Ukrainian


Меню нашего сайта

Последние новости IPB


Only the best new both in...
Автор: JoimiTeemomix

Раздел: Просмотр демо форумов
I Earned 150 bucks/day di...
Автор: sopsphagjam

Раздел: Просмотр демо форумов
Only the best new both in...
Автор: WHENGEAKE

Раздел: Просмотр демо форумов

Тех. Поддержка Online



SiteHeart

Баннеры сайта

Поделиться

Проверить Аттестат

Посетители сайта

mod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_counter
mod_vvisit_counterСегодня30
mod_vvisit_counterВчера123
mod_vvisit_counterНа этой неделе153
mod_vvisit_counterНа прошлой неделе814
mod_vvisit_counterВ этом месяце736
mod_vvisit_counterВ прошлом месяце3578
mod_vvisit_counterВсего136539

Ваш IP: 188.40.240.229
Дата: Фев.07 - 2012
CSS - Cascading Style Sheets
Индекс материала
CSS - Cascading Style Sheets
Страница 2 продолжение...
Страница 3 продолжение...
Все страницы

CSS при отображении страницы может быть взята из различных источников:
Авторские стили (информация стилей, предоставляемая автором страницы) в виде:
Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.
Встроенных стилей — блоков CSS внутри самого HTML-документа.
Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.
Пользовательские стили
Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.
Стиль браузера
Стандартный стиль, используемый браузером по умолчанию для представления элементов.

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

Схематически это можно показать так:

селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется «каскадом», в котором для свойств рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

Приоритеты рассчитываются таким образом (от большего к меньшему):
свойство задано при помощи !important?
стиль прописан напрямую в теге?
количество идентификаторов (#id) в селекторе (чем больше, тем больше приоритет);
количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе;
количество имён тегов в селекторе;

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

Пример таблицы стилей:

p {
font-family: "Garamond", serif;
}
h2 {
font-size: 110 %;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
}

Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.

В первых двух правилах HTML-элементам p (абзацу) и h2 (заголовку второго уровня) назначаются стили. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например:
<p>Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>

Четвёртое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.

Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

CSS-вёрстка

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

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

Недостатки:
Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.
Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

CSS Framework

CSS Framework, (также Web design framework) - это заранее подготовленная css-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т.д.). Так же как и библиотеки скриптовых языков программирования, CSS-фреймвёрки, обычно имеющие вид внешнего .css-файла, "подключаются" к проекту (добавляются в заголовок веб-страницы), позволяя не искушенному в тонкостях вёрстки программисту или дизайнеру правильно создать xhtml-макет.



 

S5 Box



Сейчас на сайте

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