Папиллярные узоры пальцев рук - маркер спортивных способностей: дерматоглифические признаки формируются на 3-5 месяце беременности, не изменяются в течение жизни...
Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...
Топ:
Устройство и оснащение процедурного кабинета: Решающая роль в обеспечении правильного лечения пациентов отводится процедурной медсестре...
Выпускная квалификационная работа: Основная часть ВКР, как правило, состоит из двух-трех глав, каждая из которых, в свою очередь...
Процедура выполнения команд. Рабочий цикл процессора: Функционирование процессора в основном состоит из повторяющихся рабочих циклов, каждый из которых соответствует...
Интересное:
Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...
Распространение рака на другие отдаленные от желудка органы: Характерных симптомов рака желудка не существует. Выраженные симптомы появляются, когда опухоль...
Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...
Дисциплины:
 2021-01-31 |
 153 |
из
5.00
|
Заказать работу |
|
|
|
|
Приоритеты CSS-инструкций определяются по нескольким критериям. Этими критериями являются последовательность подключения CSS-файла в HTML-документе, последовательность определения стилей внутри CSS, критерий веса селектора, наличие инструкции!important и другие. Подробно алгоритм вычисления приоритетов описан в спецификации W3C: http://www.w3.org/TR/CSS21/cascade.html.
На практике все эти сложности знать ни к чему, достаточно понимать основополагающие идеи установки приоритетов для CSS-стилей.
HTML-атрибуты, отвечающие за стиль отображения, например align, valign, bgcolor и пр., имеют самый низкий приоритет. Самый высокий приоритет имеют инлайновые записи стиля внутри атрибута style. Между ними – стили CSS, встроенные в документ с помощью элемента style и внешних CSS-файлов. В соответствии с правилами оформления HTML-документов (см. 6.2) крайние случаи приоритетов встречаются редко, соответственно, основное поле действия веб-разработчика – CSS файлы, или точнее, в общем случае один CSS-файл.
Касательно приоритетов в пределах одного CSS-файла нужно знать следующее:
Наследование и переопределение свойств несложно понять, рассмотрев следующий пример:
Наследование и переопределение свойств
div {
color: #000;
background: #0f0;
}
div.particular {
color: #fff;
}
В примере, первое определение стиля для всех элементов div, говорит о том, что все они имеют черный цвет текста и зеленый цвет фона. Следующая запись определяет стиль для элементов div с классом «particular», к которым также применяется и первая запись. В данном случае, элементы div с классом «particular» будут иметь зеленый цвет фона, так как свойство background будет унаследовано от определения стиля для всех div элементов, а свойство color, т.е. цвет текста, будет переопределено на белый.
|
|
Если эти два определения стиля поменять местами, т.е. сперва записать определение для элемента div с классом «particular», а затем общее определение для div, то общий результат не изменится потому, что в силу вступает вес селектора – «div.particular» более специализированный, чем просто «div», поэтому имеет больший вес.
Последующее определение стиля равновесных селекторов имеет больший приоритет. Следующий пример продемонстрирует приоритетность последней записи стиля.
Последняя запись приоритетнее предыдущей
div {
color: #000;
}
div {
color: #fff;
}
В данном случае цвет текста div элементов документа будет белый, а не черный, потому, что определение белого цвета стоит ниже, чем определение черного.
Что касается инструкции!important, то ее наличие делает CSS-свойство высокоприоритетным, независимо от позиции и веса селектора.
Использование инструкции!important
div {
color: #000!important;
}
div {
color: #fff;
}
В этом случае цвет текста для элементов div будет черным. Инструкция!important записывается через пробел, после значения CSS-свойства. Инструкцию!important следует использовать в случаях особой необходимости, при решении конфликтов приоритета CSS-свойств.
Основные способы персонализации стилей для браузеров
Запись фильтра:
<css filter> tag{…}
Например:
* html div{…}
IE 6 и ниже
* html или *html
Только IE 7
*:first-child+html или *+html
IE 7 и все современные браузеры
html>body {}
Все современные браузеры, кроме IE 7
html>/**/body {}
Opera 9 и выше
*:first-child+html или html:first-child
Safari и FireFox (CSS3)
body:last-child {}
Замечание: под современными браузерами понимаются Firefox 2.0 и выше, Opera 9.0 и выше, Safari 2.0.2 и выше.
IE 6 к их числу не относится.
Также существует постоянно обновляемая таблица CSS-фильтров: http://thomas.tanreisoftware.com/css_filters/huzzah.html
|
|
Практическая верстка
6.1Основые тэги, используемые при верстке HTML-документов:
Основые тэги, используемые при верстке HTML-документов
<!DOCTYPE html PUBLIC "..."><!-- указание типа стандарта -->
<html><!-- начало документа -->
<head><!-- заголовок документа -->
<title><!-- заголовок страницы --></title>
<meta content=""/><!-- meta информация -->
<style type="text/css"><!-- стилевая разметка, внутренний CSS --></style>
<link type="text/css" href="#"/><!-- подключение внешнего файла (CSS) -->
<script type=""><!-- скрипт --></script>
</head><!-- конец заголовка документа -->
<body><!-- начало тела -->
<h1><!-- Заголовок первого уровня --></h1>
<h2><!-- Заголовок второго уровня --></h2>
<h3><!-- Заголовок третьего уровня --></h3>
<h4><!-- Заголовок четвертого уровня --></h4>
<h5><!-- Заголовок пятого уровня --></h5>
<h6><!-- Заголовок шестого уровня --></h6>
<pre><!-- предварительно форматированный блок --></pre>
<p><!-- абзац -->
<a><!-- ссылка --></a>
<strong><!-- полужирный --></strong>
<em><!-- наклонный --></em>
<big><!-- большой текст --></big>
<small><!-- маленький текст --></small>
<sub><!-- нижний индекс --></sub>
<sup><!-- верхний индекс --></sup>
<cite><!-- цитата --></cite>
<span><!-- текстовый блок --></span>
<br/><!-- принудительный перенос строки -->
</p><!-- конец абзаца -->
<div><!-- блок (блочного типа) -->
<object><!-- вставка объекта, как правило работающего через plugin -->
<embed><!-- то же самое, но для некторых браузеров --></embed>
</object><!-- конец объекта -->
<img alt="" src="#"/><!-- изображение -->
</div><!-- конец блока (блочного типа) -->
<ul><!-- ненумерованный список -->
<li><!-- элемент списка --></li>
</ul><!-- конец ненумерованного списока -->
<ol><!-- нумерованный список -->
<li><!-- элемент списка --></li>
</ol><!-- конец нумерованного списока -->
<dl><!-- список определений -->
<dt><!-- определение --></dt>
<dd><!-- содержание --></dd>
</dl><!-- конец списока определений -->
<table><!-- таблица -->
<tr><!-- строка таблицы -->
<th><!-- ячейка заголовка таблицы --></th>
</tr><!-- конец строки таблицы -->
|
|
<tr><!-- строка таблицы -->
<td><!-- ячейка таблицы --></td>
</tr><!-- конец строки таблицы -->
</table><!-- конец таблицы -->
<form action=""><!-- форма -->
<div><!-- блок (блочного типа) -->
<fieldset><!-- блок полей ввода -->
<legend><!-- заголовок блока полей ввода --></legend>
<label><!-- ярлык поля ввода --></label>
<input/><!-- поле ввода -->
<textarea><!-- многострочное поле ввида --></textarea>
<select><!-- плеввода типа "выпадающий список" -->
<option><!-- элемент выпадающего списка --></option>
</select>
</fieldset><!-- конец блока полей ввода-->
</div><!-- конец блока (блочного типа) -->
</form><!-- конец форма -->
</body><!-- конец тела -->
</html><!-- конец документа -->
6.2Общие правила и рекомендации при написании HTML/XHTML кода
С чего начинается документ
Итак, с чего же начинается HTML-документ? Конечно же с описания его типа при помощи DOCTYPE! (см. 2). В первую очередь вы должны полностью осознавать какой именно тип документа вы собрались воплотить в жизнь. Впрочем, независимо от того, какой это будет документ, произвольный HTML или XHTML 1.0 Strict, вам в любом случае необходимо придерживаться общих правил форматирования (см. 4) и советам, изложенным здесь и в последующих разделах.
При помощи конструкции DOCTYPE браузер определяет с каким типом документа он имеет дело. Ниже приведены конструкции DOCTYPE для основных видов документов.
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Следует отметить, что в Интернет встречается много документов с неполной записью DOCTYPE – когда не указан URL на DTD, либо не указан вовсе. В случае отсутствия DOCTYPE в документе, браузер настраивается на тип документа по умолчанию, который, как вы сами понимаете, может отличаться от ожидаемого. Подобные неточности являются причиной многих ошибок и трудностей при работе с такими документами. Самая известная особенность связанная с указанием типа документа – это модель отображения блочных элементов, характерная для браузеров Internet Explorer (см 6.2.2). Во избежание возможных ошибок и неприятностей всегда указывайте полную запись DOCTYPE.
|
|
|
Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...
Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!