Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Правила записи стилевых правил.

⇐ ПредыдущаяСтр 2 из 5Следующая ⇒

Порядок применение CSS-правил к объектам.

Любой HTML-элемент (блок, список ссылка, картинка и т.д.) имеет свойства, соответствующие каждому визуальному атрибуту. Если какие-то свойства элемента не определены - тогда они могут быть унаследованы от родительского элемента или принимают значение по умолчанию.

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

Порядок в каскаде стилей.

Объявление одного и того же свойства может появляться в нескольких таблицах стилей, а может появиться несколько раз внутри одной таблицы стилей. Потому порядок применения правил к элементу очень важен. Этот порядок и называется "каскадом".

В соответствии со спецификацией CSS2 свойства применяются от "низкого к высокому":

Стили браузера

Пользовательские стили

Авторские стили

Авторские стили, использующие свойство!important

Пользовательские стили, использующие свойство!important

В этом списке высоким считается пятый пункт, а низким - первый. То есть стили браузера являются наименее важными, а пользовательские важнее авторских только в том случае, если их объявление было со свойством!important (отмечено как важное).

Свойства с одинаковым порядком применяются в зависимостри от их появления в коде - последние имеют больший вес (то есть находятся "ниже").

Свойства, прописанные в HTML-тегах переводятся в соответствующие CSS-объявления. Они рассматриваются как Авторские стили с низким приоритетом.

Специфичность применения правил определена стандартом CSS2 таким образом, что за каждый элемент начисляется различный вес:

ставим 1, если объявление из аттрибута "style" внутри тега. В противном случае - 0(=a)

считаем количество идентификаторов (ID) в селекторе (=b)

считаем количество классов и псевдо-классов в селекторе (=c)

считаем количество тегов и псевдоэлементов (=d)

Объединение всех четырех полученных чисел abcd и дает нам специфичность применения, или говоря иначе - вес применяемого правила.

Стоит отметить, что встроенные стили (прописываемые через атрибут тега "style") имеют наибольший вес и всегда перекрывают иные стили. Но добавление свойства!important в связанных или глобальных стилях перекрывает даже встроенные стили.

Подключение CSS к веб-странице

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

Внешние стили

Внешние стили CSS (их еще называют связанными) подразумевают запись параметров каскадных таблиц в отдельном текстовом документе с расширением "css". Стилевой документ помещают в корне сайта, либо в отдельной папке, которая тоже находится(как правило) в корневой директории. Но, ничего не мешает, если очень нужно, создать свой файл стилей для любой отдельной веб-страницы, главное правильно присоединить такой файл к html-странице.

Стилевой файл связывают с html-страницей при помощи тега LINK, который располагают в контейнере HEAD. Вот пример двух способов подключения файла style.css к веб-документу:

<html>

<head>

<title>подключение внешних стилей</title>

</head>

<body>

</body>

</html>

В первой строке адрес файла style.css указан относительно корня сайта, или если оба файла находятся в одной директории. Во втором случае - используется абсолютный адрес стилевого файла.

Параметры rel и type всегда одинаковы, меняется лишь значения атрибута href, т. е. адреса файла. Абсолютный адрес дает возможность подключать файлы стилей с любого стороннего интернет-сайта.

Встроенные(глобальные) стилевые таблицы

Этот способ взаимодействия html и CSS подразумевает, что таблица стилей внедряется втег HEAD заголовока html-странички при помощи тегов <style> и </style>, с параметром type, который показывает, что идет подключение именно таблиц стилей CSS, ведь существуют и другие. Пример записи кода глобальных стилей:

<!DOCTYPE html>

<html>

<head>

<title>Глобальныестили</title>

H3 {

font-size: 130%;

font-family: Verdana, sans-serif;

color: #4DB849;

}

</style>

</head>

<body>

<h3>Пирменение глобальных стилей</h3>

</body>

</html>

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

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

Внутренние таблицы стилей

Внутренней называют таблицу стилей, которая задана непосредственно внутри самого элемента HTML, также при помощи атрибута style, а в роли его значений подставляют стилевые правила. Возьмем пример прошлого кода(только изменяемое содержимое тега DODY, все остальное не изменится), и дополним его внутренними стилями для тега SPAN:

<body>

<h3><span style="font-size: 140%; color: #E86F0E">Применение</span> глобальных стилей</h3>

</body>

Применение различных способов подключения стилей ставит перед веб-мастером вопрос их приоритета.

Тут в силу вступает принцип каскадирования, который и разрешает все конфликты: в нашем примере внутренние таблицы имеет более высокий приоритет, поэтому первое слово заголовока и изменилось. По этому принципу получается, что первым будет применяется внутренний стиль, потом глобальный стиль и уже в последнюю очередь внешние стили.

Форматирование шрифта с помощью CSS.

В CSS сушествует два типа имен семейств шрифтов:

-обобщенное семейство (generic family) - группа семейств шрифтов с одинаковым начертанием (например "Serif" или "Monospace")

-семейство шрифтов (font family) - специфическое семейство шрифтов (например "Times New Roman" или "Arial")Обобщенное семейство

Семейство Шрифтов

Семество шрифта устанавливается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов в качестве "запасных" вариантов. Если браузер не поддерживает первый шрифт, он пробует применить следующий шрифт.

Начинайте со шрифта, который вы хотите использовать, и заканчивайте обобщенным семейством, чтобы позволить браузеру выбрать схожий шрифт из обобщенного семейства, если ни один из указанных шрифтов не доступен.

Замечание: Если в имени семейства шрифта более одного слова, оно должно заключаться в кавычки, например семейство шрифтов "Times New Roman".

Более одного семейства шрифтов указывается через запятую:

Пример

p.serif{font-family:"Times New Roman",Times,serif;}

Стиль Шрифта

Свойство font-style в основном используется, чтобы указать курсивный текст.

Это свойство имеет три значения:

normal - Обычный текст

italic - Курсивный текст

oblique - Наклонный текст (наклонный (oblique) текст очень похож на курсивный, но меньше поддерживается)

Пример

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

Размер Шрифта

Свойство font-size устанавливает размер текста.

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

Всегда используйте подходящие теги HTML, например <h1> - <h6> для заголовков и <p> для параграфов.

Значение font-size может быть абсолютным или относительным.

Абсолютный размер:

Устанавливает определенный размер шрифта

Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо из соображений удобства просмотра)

Абсолютный размер полезен, когда физический размер вывода известен

Относительный размер:

Устанавливает размер относительно окружающих элементов

Позволяет пользователю изменять размер текста в браузерах

Если вы не указываете размер шрифта, то размер шрифта по умолчанию, размер обычного текста, например в параграфах, равен 16px, т.е. 16 пикселей (16px=1em).

Установка Размера Шрифта в Пикселях

Установка размера шрифта в пикселях дает вам полный контроль на размером текста:

Пример

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

Размер текста может быть изменен во всех браузерах, используя инструмент увеличения (zoom) (однако, это изменяет размер страницы в целом, а не только текста).

Установка Размера Шрифта с Помощью Em

Чтобы избежать проблем изменения размера в Internet Explorer, многие разработчики используют единицы em вместо пикселей.

Единицы размеры em рекомендуются W3C.

1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах равен 16px. Таким образом, размер по умолчанию одной единицы em равен 16px.

Размер может быть вычислен из пикселей в единицы em, используя эту формулу: пиксели/16=em

Пример

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

В примере выше, размер текста в em такой же, как и в предыдущем примере в пикселях. Однако, указывая размер в em, становится возможным подгонять размер текста во всех браузерах.

К сожалению, по-прежнему остается проблема с IE. При изменении размера текста, он становится больше чем должен, когда увеличиваешь его, и становится меньше, чем должен, когда уменьшаешь его.

Использование Комбинации Процентов и Em

Решение, которое работает во всех браузерах, - установить размер шрифта по умолчанию в процентах в элементе body:

Пример

body {font-size:100%;}

h1 {font-size:2.5em;}

h2 {font-size:1.875em;}

p {font-size:0.875em;}

Наш код теперь работает идеально! Он показывает одинаковый размер текста во всех браузерах, и позволяет всем браузерам изменять размер текста корректно!

Все CSS Свойства Шрифта

Font: Устанавливает все свойства шрифта в одном объявлении

font-family: Устанавливает семейство шрифта для текста

font-size: Устанавливает размер шрифта текста

font-style: Устанавливает стиль шрифта текста

font-variant: Указывает, следует или нет отображать текст в шрифте small-caps (маленькие заглавные буквы)

font-weight: Указывает вес шрифта

⇐ Предыдущая 123 4 5 Следующая ⇒

Читайте также:

Техника нижней прямой подачи мяча

Комплекс физических упражнений для развития мышц плечевого пояса

Стандарт Порядок надевания противочумного костюма

Общеразвивающие упражнения без предметов

Последнее изменение этой страницы: 2016-08-26; просмотров: 157; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.19.31.73 (0.02 с.)