1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
"http://www.w3.org/1999/xhtml"
>
Стили</
title
><br>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style/mysite. ess"
/
><br>
<link
rel
=
"stylesheet"
type
=
"text/css"
<br>href
=
<span>"http://www.htmlbook.ru/main.ess"
</span> /
><br>
</
head
><br>
<body
><br>
<h1
>Заголовок</
h1
><br>
<р>Текст</
р><br>
</
body
><br>
</
html
></p>
</td>
</tr></tbody></table><p>А файл стилей будет выглядеть вот так:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br></p>
</td><td><p>H1 {
<br>color
:
#000080
;
<br>font-size
:
2em
;
<br>font-family
:
Arial,
Verdana,
sans-serif
;
<br>text-align
:
center
;
<span>/* Выравнивание по центру */
</span><br>}
<br>
P {
<br>padding
-left
:
20px
;
<br>}
</p>
</td>
</tr></tbody></table><p>Как видно из кода выше, на html-страницу добавляется запись, сообщающая браузеру откуда нужно получать стили. Сам стилевой файл содержит только описание стилей. Такое разделение html и css кода облегчает разработку и сопровождение сайтов. Такому стилю верстки рекомендуется придерживаться.</p>
<h3>Глобальные стили</h3>
<p>При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на странице с помощью контейнера <b><style>
</b>.Описанные в заголовке страницы стили можно использовать во всем документе (поэтому они и получили название «глобальные»). Хочется отметить, что такой подход к верстке страниц приводит к большим трудностям в сопровождении и применяется очень редко. Для примера неудачного использования такого подхода можно привести сервис ведения блогов Blogger.com . Созданные на нем блоги для оформления страниц используют как раз глобальные стили.</p>
<p>Вот пример использования глобальных стилей:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br></p>
</td><td><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
</span><br><span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</span><br><<span>html
xmlns=
<span>"http://www.w3.org/1999/xhtml"
</span>>
</span><br><<span>head
>
</span><br><<span>meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
</span><br><<span>title
>
</span>Глобальные стили<<span>/
title
>
</span><br><<span>style
type
=
"text/css"
>
</span><br>
H1 {<br>
font-size: 1.2 em;<br>
font-family: Verdana, Arial, Helvetica, sans-serif;<br>
color: #333366;<br><<span>/
style
>
</span><br><<span>/
head
>
</span><br><<span>body
>
</span><br><hl>
Hello, world!<<span>/
hl>
</span><br><<span>/
body
>
</span><br><<span>/
html
>
</p>
</td>
</tr></tbody></table><h3>Внутренние стили</h3>
<p>Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут <b>style
</b>, а его значением выступает набор стилевых правил. Например:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers">
</td><td><p><p style=
<span>"font-size: 120%; font-family: monospace;<br>
color: сd66сс"
</span>>
Пример текста</р>
</p>
</td>
</tr></tbody></table><p>Внутренние стили рекомендуется применять на сайте <b>ограниченно
</b> или <b>вообще отказаться
</b> от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.</p>
<h3>Импорт CSS</h3>
<p>В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды <b>@import
</b>.</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</span><br><<span>html
xmlns=
<span>"http://www.w3.org/1999/xhtml"
</span>>
</span><p><<span>head
>
</span><br><<span>meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
</span><br><<span>title
>
</span>Импорт<<span>/
title
>
</span><br><<span>style
type
=
"text/css"
>
</span><br>
@import url("style/mysite.ess");<br>
H2 {<br>
font-size: 1.2 em;<br>
font-family: Arial, Helvetica, sans-serif;<br>
color: green;<br><<span>/
style
>
{
</span><br>font-family
:
Arial,
Verdana,
Helvetica,
sans-serif
;
<br>font-size
:
90%
;
<br>background
:
white
;
<br>color
:
black
;
<br>}
</p>
</td>
</tr></tbody></table><h3>Не забывайте об иерархии!</h3>
<p>При комбинированном применении различных стилей нужно помнить об их иерархии. <b>Первым всегда применяется внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль.
</b> Таким образом, определения одних стилей можете перекрывать другие, будьте внимательны.</p>
<h2>Что дальше?</h2>
<p>Выше уже упоминались структурные единицы <b>CSS
</b> — селекторы. Но о синтаксисе CSS нужно писать отдельную статью, поэтому я и решил вынести этот материал в отдельный пост.</p>
<p>Теперь что касается стандартов: сейчас официально принят и поддерживается стандарт CSS 2.1, а в разработке находится CSS 3, который внесет огромное количество новшеств. О некоторых из них можно почитать в статье Будущее CSS разметки</p>
<p>Вообще, изучение приемов верстки веб-страниц это сложная тема, в которой порой приходится изучать кучу сопутствующих технологий и смиряться с особенностями реализации <a href="/rtsp-potok-s-ip-kamery-trebovaniya-kak-proverit-vozmozhnost-translyacii-rtsp-potoka.html">различных браузеров</a>. Готовьтесь к трудностям.</p>
<p>По материалам книги Влада Моржевича «Верстка веб-страниц». Очень советую эту книгу подойдет как справочник и учебник.</p>
<p><b>CSS (Cascading Style Sheets), или каскадные таблицы стилей
</b>, используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на <a href="/izuchenie-osnov-yazyka-html-primer-s-rezultatom-html-osnovy-dlya.html">языках HTML</a> и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.</p>
<p>Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.</p>
<p>Объявление стиля состоит из двух частей: элемента веб-страницы — <b>селектора
</b>, и команды форматирования — <b>блока объявления
</b>. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.</p>
<br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2014/12/css_osnovy.png' align="left" width="100%" loading=lazy> Рис. 1. Структура объявления CSS-стиля
<h2>Виды каскадных таблиц стилей и их специфика</h2>
<i>
</i><h3>1. Виды таблиц стилей</h3>
<h4>1.1. Внешняя таблица стилей</h4>
<p><b>Внешняя таблица стилей
</b> представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега <link> , расположенного внутри раздела <head></head> . Такие стили работают для всех страниц сайта.</p>
<p>К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов <link> , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).</p><p>
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/assets.css" media="all">
</head>
</p><p>Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .</p>
<h4>1.2. Внутренние стили</h4>
<p><b>Внутренние стили
</b> встраиваются в раздел <head></head> HTML-документа и определяются внутри тега <style></style> . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).</p><p>
<head>
<style>
h1,
h2 {
color: red;
font-family: "Times New Roman", Georgia, Serif;
line-height: 1.3em;
}
</style>
</head>
<body>
...
</body>
</p><h4>1.3. Встроенные стили</h4>
<p>Когда мы пишем <b>встроенные стили
</b>, мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:</p><p>
<p style="font-weight: bold; color: red;">Обратите внимание на этот текст.</p>
</p><p>Такие стили действуют только на тот элемент, для которого они заданы.</p>
<h4>1.4. Правило @import</h4>
<p><b>Правило @import
</b> позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:</p><p>
<style>
@import url(mobile.css);
p {
font-size: 0.9em;
color: grey;
}
</style>
</p><p>Правило @import также используется для подключения веб-шрифтов:</p><p>
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
</p><h3>2. Виды селекторов</h3>
<p><b>Селекторы
</b> представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.</p>
<h4>2.1. Универсальный селектор</h4>
<p>Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .</p>
<h4>2.2. Селектор элемента</h4>
<p>Селекторы элементов позволяют форматировать все элементы <a href="/kak-v-turbo-paskale-oboznachayutsya-celye-velichiny-turbo-pascal-tipy-dannyh.html">данного типа</a> на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .</p>
<h4>2.3. Селектор класса</h4>
<p>Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на <a href="/yandeks-glavnaya-stranica-5-kak-yandeks-sdelat-startovoi-stranicei-v.html">разных страницах</a> сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег <h1> и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.</p><p>
<h1 class="headline">Инструкция пользования <a href="/iz-chego-sostoit-kompyuter-ustroistvo-sovremennogo-personalnogo-kompyutera-i-ego-osnovnye-sostavlyayu.html">персональным компьютером</a></h1>
.headline {
text-transform: uppercase;
color: lightblue;
}
</p><h4>2.4. Селектор идентификатора</h4>
<p>Селектор идентификатора позволяет форматировать <b>один
</b> конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.</p><p>
<div id="sidebar"></div>
#sidebar {
width: 300px;
float: left;
}
</p><h4>2.5. Селектор потомка</h4>
<p>Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .</p>
<p>Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:</p>
<p>p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;</p>
<p>p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента
<p>First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .</p>
<h4>2.6. Дочерний селектор</h4>
<p>Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.<br>
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .</p>
<h4>2.7. Сестринский селектор</h4>
<p>Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня.</p>
<p>h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом <h1> , не затрагивая остальные абзацы;</p>
<p>h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.</p>
<h4>2.8. Селектор атрибута</h4>
<p>Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:</p>
<p>[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;</p>
<p>селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;</p>
<p>селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с <a href="/kak-poschitat-v-eksel-kolichestvo-konkretnyh-znachenii-podschet.html">конкретным значением</a>, img — все картинки, название которых содержит слово flower ;</p>
<p>селектор[атрибут~="значение"] — элементы частично содержащие <a href="/chto-znachit-oshibka-pri-poluchenii-dannyh-znacheniya-i-resheniya-oshibok-v-play.html">данное значение</a>, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;</p>
<p>селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;</p>
<p>селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;</p>
<p>селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;</p>
<p>селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .</p>
<h4>2.9. Селектор псевдокласса</h4>
<p>Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:</p>
<p>:hover — любой элемент, по которому проводят курсором мыши;</p>
<p>:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;</p>
<p>:active — элемент, который был активизирован пользователем;</p>
<p>:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;</p>
<p>:invalid — поля формы, содержимое которых не соответствует указанному типу данных;</p>
<p>:enabled — все активные поля форм;</p>
<p>:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;</p>
<p>:in-range — поля формы, значения которых находятся в заданном диапазоне;</p>
<p>:out-of-range — поля формы, значения которых не входят в установленный диапазон;</p>
<p>:lang() — элементы с текстом на указанном языке;</p>
<p>:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;</p>
<p>:target — элемент с символом # , на который ссылаются в документе;</p>
<p>:checked — выделенные (выбранные пользователем) элементы формы.</p>
<h4>2.10. Селектор структурных псевдоклассов</h4>
<p>Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:</p>
<p>:nth-child(odd) — нечётные дочерние элементы;</p>
<p>:nth-child(even) — чётные дочерние элементы;</p>
<p>:nth-child(3n) — каждый третий элемент среди дочерних;</p>
<p>:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;</p>
<p>:nth-child(n+2) — выбирает все элементы, начиная со второго;</p>
<p>:nth-child(3) — выбирает третий дочерний элемент;</p>
<p>:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;</p>
<p>:first-child — позволяет оформить только самый первый дочерний элемент тега;</p>
<p>:last-child — позволяет форматировать последний дочерний элемент тега;</p>
<p>:only-child — выбирает элемент, являющийся единственным дочерним элементом;</p>
<p>:empty — выбирает элементы, у которых нет дочерних элементов;</p>
<p>:root — выбирает элемент, являющийся корневым в документе — элемент html .</p>
<h4>2.11. Селектор структурных псевдоклассов типа</h4>
<p>Указывают на конкретный тип дочернего тега:</p>
<p>:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;</p>
<p>:first-of-type — выбирает первый дочерний элемент данного типа;</p>
<p>:last-of-type — выбирает последний элемент данного типа;</p>
<p>:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;</p>
<p>:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.</p>
<h4>2.12. Селектор псевдоэлемента</h4>
<p>Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:</p>
<p>:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;</p>
<p>:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;</p>
<p>:before — вставляет генерируемое содержимое перед элементом;</p>
<p>:after — добавляет генерируемое содержимое после элемента.</p>
<h3>3. Комбинация селекторов</h3>
<p>Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:</p>
<p>img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .</p>
<h3>4. Группировка селекторов</h3>
<p>Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:</p><p>H1,
h2,
p,
span {
color: tomato;
background: white;
}
</p><h3>5. Наследование и каскад</h3>
<p>Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как <a href="/chto-takoe-kesh-pochemu-i-kak-nuzhno-chistit-raznye-ego-vidy-kak.html">разные виды</a> таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.</p>
<h4>5.1. Наследование</h4>
<p><b>Наследование
</b> является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.</p>
<p>Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .</p>
<h5>Принудительное наследование</h5>
<p>С помощью <a href="/ispolzovanie-klyuchevyh-slov-fraz-dlya-poiska-informacii-kombinacii-usloviya.html">ключевого слова</a> inherit можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию.</p>
<h5>Как задаются и работают CSS-стили</h5>
<p>1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);</p>
<p>2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;</p>
<p>3) К одному элементу могут применяться стили из <a href="/effektivnye-metody-i-priemy-raboty-s-informaciei-rabota-s.html">разных источников</a>. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть <a href="/how-to-delete-if-the-right-mouse-button-does-not-work-when-you-rightclick-on-a-folder-or-file-the-computer-hangs-indefinitely.html">правой кнопкой</a> мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.</p>
<br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/01/nasledovanie-stiley.png' align="left" width="100%" loading=lazy> Рис. 2. Режим разработчика в <a href="/pri-otkrytii-doc-v-hrome-postoyannaya-perezagruzka-google-chrome.html">браузере Google</a> Chrome
<p>4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.</p><p>
<div id="wrap" class="box clear"></div>
div {border: 1px solid #eee;}
#wrap {width: 500px;}
.box {float: left;}
.clear {clear: both;}
</p><h4>5.2. Каскад</h4>
<p><b>Каскадирование
</b> — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.</p>
<h5>Правило!important</h5>
<p>Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.</p>
<h5>Специфичность</h5>
<p>Для каждого правила браузер вычисляет <b>специфичность селектора
</b>, и если у элемента имеются конфликтующие объявления свойств, во внимание принимается правило, имеющее наибольшую специфичность. Значение специфичности состоит из четырех частей: 0, 0, 0, 0 . Специфичность селектора определяется следующим образом:</p>
<p>для
id добавляется 0, 1, 0, 0 ;<br>для
class добавляется 0, 0, 1, 0 ;<br>для
каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;<br>для
встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;<br>универсальный
селектор не имеет специфичности.</p><p>H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/
em {color: silver;} /*специфичность 0, 0, 0, 1*/
h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/
div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/
.sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/
#sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/
li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
</p><p>В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.</p>
<h5>Порядок подключённых таблиц</h5>
<p>Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в <a href="/otlichie-5-ot-5s-tablica-kak-vizualno-otlichit-raznye-modeli-aifonov.html">разных таблицах</a> будут встречаться <a href="/kak-ispolzovat-cvetovye-kody-dlya-cvetov-cvet-v-stilyah-mozhno.html">разные значения</a> свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.</p>
<p>Можно объединить несколько связанных свойств CSS
в одно свойство, чтобы сэкономить время и свои усилия.</p> <h3>Сравнение индивидуальных и сокращенных значений</h3><p>Рассмотрим следующее правило для полей (сокращения для заполнения и границы работают таким же образом):</p><p>div.foo {
margin-top: 1em;
margin-right: 1.5em;
margin-bottom: 2em;
margin-left: 2.5em;
}</p><p>Это правило можно записать короче:</p><p>div.foo {
margin: 1em 1.5em 2em 2.5em;
}</p> <h3>Задание менее четырех значений для сокращенного свойства</h3><p>Сокращенное значение
может иметь менее четырех значений, согласно приведенному ниже списку. Результаты упорядочены по числу предоставленных значений:</p> <h3>Справочник сокращений</h3><table border="0" class="xml_table" cellpadding="2" cellspacing="1"><tr><td bgcolor="#eaeaea" valign="top">Граничные сокращения для различных свойств
</td>
<td bgcolor="#eaeaea" valign="top">
<p>Необходимо упомянуть еще, что можно даже задать значения свойств границ (border
) только для одной границы элемента следующим образом:</p>
<p>border-left-width: 2px;
border-left-style: solid;
border-left-color: black;</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Сокращения для некоторых свойств полей (margin
), заполнения (padding
) и
границы (border
)
</td>
<td bgcolor="#eaeaea" valign="top">Все это действует таким же образом как было показано выше в разделе "Выбор между одиночным свойством и сокращенным значением".
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Сокращения для шрифта
</td>
<td bgcolor="#eaeaea" valign="top">С помощью одной строки сокращения можно определить размер шрифта, толщину, стиль, семейство и высоту строки. Например, рассмотрим следующий код:
<p>font-size: 1.5em;
line-height: 200%;
font-weight: bold;
font-style: italic;
font-family: Georgia, "Times New Roman", serif</p>
Можно определить все это с помощью следующей строки:
<p>font: 1.5em/200% bold italic Georgia,"Times New Roman",serif;</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Сокращение для фона
</td>
<td bgcolor="#eaeaea" valign="top">С помощью одной строки CSS можно определить цвет фона, фоновое изображение, повторение изображения и позицию изображения. Возьмем следующий код:
<p>background-color: #000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;</p>
Это можно представить с помощью следующего сокращения:
<p>background:#000 url(image.gif) no-repeat top left;</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Сокращения для списков
</td>
<td bgcolor="#eaeaea" valign="top">В данном случае аналогичная история со <span>свойствами списков
</span> позволяет задать на одной строке значения свойств для типа маркера списка, позиции и изображения. Возьмем следующий код:
<p>list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif) ;</p>
Это эквивалентно следующему:
<p>list-style: circle inside url(bullet.gif);</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">
</td>
<td bgcolor="#eaeaea" valign="top">
</td>
</tr></table><h3>Применение CSS к HTML</h3><p>Существует три способа применения CSS
к документу HTML
:</p><ul><li>строковые;</li>
<li>вложенные;</li>
<li>внешние таблицы стилей.</li>
</ul><h3>Строковые стили</h3><p>Можно применить таблицу стилей к элементу, используя атрибут
style
следующим образом:</p><p>Внутри этого атрибута перечисляются все свойства CSS
и их значения.</p><p>Преимущество строковых стилей состоит в том, что браузер
будет вынужден использовать эти настройки. Все другие стили, определенные в других таблицах стилей, или даже вложенные в <span>заголовок документа
</span>, будут переопределены этими стилями.</p><p>Серьезна проблема у строковых стилей состоит в том, что они делают обслуживание стилей значительно труднее. <a href="/krasivye-hlebnye-kroshki-sozdanie-ploskih-hlebnyh-kroshek-s-ispolzovaniem.html">Использование CSS</a>
предназначено для разделения представления документа и его структуры, но строковые стили делают именно обратное - рассеивают правила представления по документу.</p><p>Кроме проблем с обслуживанием, вы не получите никаких преимуществ самой в существенной части CSS
: каскадировании.</p> <h3>Вложенные стили</h3><p>Вложенные таблицы стилей помещаются в заголовке документа внутри элемента style
, как в следующем примере страницы:</p><p><style type="text/css" media="screen">
p {
color:white;
background:blue;
padding:5px;
}
</style></p><p>Преимущество вложенных таблиц стилей состоит в том, что не нужно добавлять атрибут
style
в каждый параграф
- можно оформить их все с помощью одного единственного определения. Это означает также, что если потребуется изменить <a href="/obzor-smartfona-samsung-galaxy-note9-pochti-bezuprechnyi-vneshnii-vid-i-udobstvo-ispolzovaniya-inter.html">внешний вид</a> всех параграфов, это можно будет сделать в одном единственном месте, однако все это, тем не менее, ограничено одним документом.</p> <h3>Внешние таблицы стилей</h3><p>Внешние таблицы стилей означают размещение
всех определений CSS
в отдельном файле, сохраняя его с расширением файла CSS
, и затем применение его к документам HTML
, используя элемент <i>link
</i> в заголовке документа. Например:</p><p><link rel="stylesheet" href="styles.css"
type="text/css" media="screen"></p><p>Внешние таблицы стилей позволяют хранить все определения оформления в одном единственном файле. Это означает, что можно вносить изменения на всем сайте, изменяя только один файл
. <a href="/soni-iksperiya-s-2304-sony-c2305---obzor-modeli-otzyvy-pokupatelei-i.html">Веб- браузер</a>
при этом может загрузить его один раз и затем кешировать для всех других документов, которые на него ссылаются, что уменьшает объем загружаемой информации.</p> <h3>Импорт таблиц стилей</h3><p>Существует и другой способ импорта внешних таблиц стилей в <a href="/kuda-vstavlyat-etot-kod-v-wordpress-obshchaya-struktura-failov-temy-kak.html">файлы HTML</a>
- оператор @import
. Он вставляется во вложенную таблицу стилей, таким же образом, как показанный выше вложенный код CSS
. Синтаксис
выглядит следующим образом:</p><p><style type="text/css" media="screen">
@import url("styles.css");
другие операторы импорта или стили CSS.
</style></p><p>Двумя фундаментальными концепциями CSS
являются <i>наследование
</i> и <i>каскадирование
</i>. <b>Наследование
</b> связано с тем, как элемент в <a href="/shirokie-menyu-na-vsyu-stranicu-kak-sdelat-na-css-rezinovoe-adaptivnoe-menyu.html">разметке HTML</a>
наследует свойства своих элементов предков (в которых он содержится) и передает их своим потомкам, в то время как <b>каскадирование
</b> имеет дело с объявлениями CSS
, которые применяются к документу, и как конфликтующие правила переопределяют друг друга.</p> <h3>Наследование</h3><p><b>Наследование
</b> в CSS
является механизмом, с помощью которого определенные свойства передаются от элемента предка его элементам потомкам.</p><p>Используя наследование
можно, например, определить свойства шрифта для элементов html
или body
, и они будут унаследованы всеми другими элементами. Можно определить цвета фона и переднего плана для определенного контейнерного элемента, и цвет переднего плана будет автоматически унаследован элементами потомками в этом контейнере.</p><p>Каждый элемент в <a href="/rules-html-obshchie-pravila-detskie-z2-pravila-postroeniya-html-dokumentov.html">документе HTML</a>
будет наследовать все наследуемые свойства своего предка, за исключением <a href="/the-root-element-is-xml-xml-is-a-free-extensible-markup-language.html">корневого элемента</a> (html
), который не имеет предка.</p> <h3>Каскадирование</h3><p><b>Каскадирование
</b> - это механизм, который управляет конечным результатом, в случае когда несколько конфликтующих объявлений CSS
применяются к одному элементу. Имеется три основные концепции, которые управляют порядком, в котором применяются объявления CSS
:</p><ul><li>Важность</li>
<li>Специфичность</li>
<li>Порядок <a href="/kak-posmotret-skrytye-foto-v-kontakte-cherez-ishodnyi-kod.html">исходного кода</a></li>
</ul><p><i>Важность
</i> является наиболее значимой. Если два объявления имеют одинаковую важность, специфичность правил определяет, какое из них будет применяться. Если правила имеют одинаковую специфичность, то порядок исходного кода управляет результатом.</p> <h3>Важность</h3><p><b>Важность
</b> объявления CSS
зависит от того, где оно определено. Конфликтующие объявления будут применяться в следующем порядке, более поздние будут переопределять предыдущие:</p><ul><li>Таблицы стилей агента пользователя</li>
<li>Обычные объявления в таблицах стиля пользователя</li>
<li>Обычные объявления в таблицах стиля автора</li>
<li>Важные объявления в таблицах стиля автора</li>
<li>Важные объявления в таблицах стиля пользователя</li>
</ul><p><i> Таблица стилей агента пользователя
</i> является встроенной таблицей стилей браузера. Каждый браузер
имеет свои используемые по умолчанию правила, определяющие, как выводить различные <a href="/css-fiksirovannyi-razmer-pri-lyuboi-shirine-bordyura-bonus.html">элементы HTML</a>
, если никакой стиль не определен пользователем или дизайнером страницы. Например, непосещенные ссылки будут обычно выводиться синим цветом и подчеркнутыми.</p><p><i> Таблица стилей пользователя
</i> является таблицей стилей, которую определил пользователь
. Не все браузеры поддерживают таблицы стилей пользователя, но они могут быть очень полезны, особенно для пользователей с некоторыми типами функциональных недостатков. Например, человек с дислексией может иметь таблицу стилей, которая определяет определенные шрифты и цвета, которые облегчают чтение.</p><p><i> Таблица стилей автора
</i> является тем, что обычно и называется " таблица стилей
". Это таблица стилей
, которую автор
документа (или, более вероятно, дизайнер сайта) написал и присоединил (или включил).</p><p>Для того чтобы превратить обычное объявление в важное за ним необходимо разместить директиву !important
. Как можно видеть, важные объявления в таблице стилей пользователя будут перекрывать все остальное, что вполне логично.</p><p>Используемое по умолчанию в браузере представление
будет применяться только в том случае, если эти объявления не переопределены какими-либо правилами таблицы стилей пользователя или таблицы стилей автора, так как таблица стилей
агента пользователя имеет наименьший приоритет.</p> <h3>Специфичность</h3><p><b>Специфичность
</b> опеределяют как меру того, насколько конкретным является селектор некоторого правила. Селектор с низкой специфичностью может соответствовать многим элементам (такой как *, который соответствует каждому элементу в документе), в то время как селектор с высокой специфичностью может соответствовать только одному элементу на страницу (такой как #nav
, который соответствует только элементу с id
совпадающим с nav
).</p><p>Специфичность селектора можно легко вычислить. Если два или больше объявлений конфликтуют за данный элемент, и все объявления имеют одинаковую важность, то приоритет в правиле будет иметь объявление с наиболее специфичным селектором.</p><p>Специфичность имеет четыре компоненты, которые можно обозначить как a
, b
, c
и d
. Компонента a
является наиболее разграничивающим, d
- наименее.</p><ul><li>Компонента a
определяется очень просто: это 1
для объявления атрибута style
, иначе это 0
.</li>
<li>Компонента b
<i>
</i>является числом селекторов id
<i>
</i>в селекторе (тех, которые начинаются <i>с
</i>#).</li>
<li>Компонента c
<i>
</i>является числом <span>селекторов атрибутов
</span>, включая селекторы классов - и псевдо-классов.</li>
<li>Компонента d
является числом типов элементов и псевдо-элементов в селекторе.</li>
</ul><p>После небольшого подсчета можно получить строку из этих четырех компонентов, определяющую специфичность для любого правила. Объявления CSS
в атрибуте style
не имеют селектора, поэтому их специфичность всегда будет 1,0,0,0
.</p><p>В таблице приведены некоторые примеры.</p><table border="0" class="xml_table" cellpadding="2" cellspacing="1"><tr><th bgcolor="#d8d8d8"><b>Селектор
</b>
</th>
<th bgcolor="#d8d8d8">a
</th>
<th bgcolor="#d8d8d8">b
</th>
<th bgcolor="#d8d8d8">c
</th>
<th bgcolor="#d8d8d8">d
</th>
<th bgcolor="#d8d8d8"><b>Специфичность
</b>
</th>
</tr><tr><td bgcolor="#eaeaea" valign="top">h1
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">1
</td>
<td bgcolor="#eaeaea" valign="top">0,0,0,1
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">.foo
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">1
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0,0,1,0
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">#bar
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">1
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0,1,0,0
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top"><span>html>head+body ul#nav *.home a:link
</span>
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">1
</td>
<td bgcolor="#eaeaea" valign="top">2
</td>
<td bgcolor="#eaeaea" valign="top">5
</td>
<td bgcolor="#eaeaea" valign="top">0,1,2,5
</td>
</tr></table><p>Стоит отметить, что соединяющие символы (такие как >
, +
и</p>
<td width="620">
<br><a href="t_st.htm#%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9%20%D0%BA%20%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%83">Применение Таблицы Стилей к документу</a> <br><br><a href="t_st.htm#%D0%92%D1%81%D1%82%D1%80%D0%B0%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9%20%D0%B2%20%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82">Встраивание Таблиц Стилей в документ</a> <br><a href="t_st.htm#%D0%97%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D1%82%D0%B8%D0%BB%D1%8F%20%D0%B4%D0%BB%D1%8F%20%D0%BE%D1%82%D0%B4%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE%20%D1%84%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%20%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0">Задание стиля для отдельного фрагмента документа</a> <br><a href="t_st.htm#%D0%98%D0%BC%D0%BF%D0%BE%D1%80%D1%82%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9">Импорт Таблицы Стилей</a> <br><br><a href="t_st.htm#%D0%A3%D0%BA%D0%B0%D0%B7%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BD%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%B8%D1%85%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%20%D0%BE%D0%B4%D0%BD%D0%BE%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%BE">Указание нескольких свойств одновременно</a> <br><a href="t_st.htm#%D0%93%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BE%D0%B2">Группирование селекторов</a> <br><a href="t_st.htm#%D0%9A%D0%BE%D0%BC%D0%BC%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9">Комментирование Таблицы Стилей</a> <br><a href="t_st.htm#%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9">Свойства стилей</a> <br><a href="t_st.htm#%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20background">Свойства background</a> <br><a href="t_st.htm#%D0%9E%D0%B1%D1%80%D0%B0%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2">Обрамление элементов</a> <br><a href="t_st.htm#%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%BE%D0%B2">Свойства списков</a> <br><a href="t_st.htm#%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0">Свойства текста</a> <br><a href="t_st.htm#%D0%93%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%20%D0%B4%D0%BB%D1%8F%20%D1%83%D0%BF%D1%80%D0%BE%D1%89%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F%20%D1%81%D1%82%D0%B8%D0%BB%D1%8F">Группирование свойств для упрощения определения стиля</a> <br><a href="t_st.htm#%D0%9D%D0%B0%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2">Наследование свойств</a> <br><a href="t_st.htm#%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BD%D1%8B%D1%85%20%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BE%D0%B2">Применение контекстных селекторов</a> <br><a href="t_st.htm#%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9%20HTML%20%D0%BD%D0%B0%D0%B7%D1%8B%D0%B2%D0%B0%D1%8E%D1%82%D1%81%D1%8F%20%D0%BA%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D0%BC%D0%B8">Почему Таблицы Стилей называются каскадными</a> <br><br><p>Таблицы стилей предусмотрены рекомендациями W3C и являются стандартным
инструментом форматирования Web - страниц,
использующим подходы, характерные для
настольных издательских систем. Программа Microsoft
Internet Explorer 3.0 стала первым браузером,
поддерживающим таблицы стилей. Браузер Netscape
Navigator поддерживает таблицы стилей, начиная с
версии 4.0В2 (Beta 2), доступной с февраля 1997 года.</p>
<p>Подробные сведения о рекомендациях W3C можно
получить по адресу: h<span>ttp://www.w3.org/pub/WWW/TR/WD-cssl.html
</span> . <span>В стандарте W3C используется термин
"каскадные таблицы стилей уровня 1" ("cascading
style sheets level 1, CSSI").
</p>
<span>
<p>Для начала необходимо пояснить, что
имеется в виду под названием “таблиц стилей”.
Большинство современных текстовых редакторов
позволяют пользователю определять стиль,
который будет использоваться для форматирования
документа. В частности, можно выбрать стиль
абзаца с одинарным межстрочным интервалом,
шрифтом Courier и левым полем в один дюйм. Этот стиль
форматирования может быть в дальнейшем применен
к любому числу абзацев этого и других документов.
Таблицы стилей НТ</p>
</span>M<span>L действуют
точно таким же образом. Ниже приведен краткий
список основных функций:
</span>
<span>
<ul><p>Изменение расстояний между строками,
словами и отдельными символами.</p>
<p>Установка левого, правого, верхнего и
нижнего полей элемента (блока текста контейнера
HTML).</p>
<p>Установка отступа элемента.</p>
<p>Изменение размера, стиля и других
атрибутов шрифта элемента.</p>
<p>Установка рамки вокруг элемента.</p>
<p>Включение <a href="/slaider-fonovyh-izobrazhenii-jquery-interesnyi-slaider-na-jquery.html">фонового изображения</a> и
фонового цвета в элемент.</p>
</ul></span>
<p>Большим преимуществом таблиц стилей HTML
является возможность отделить операцию
форматирования от содержания документа. Сначала
определяется, как должен выглядеть текст в том
или ином месте страницы, а затем вводите сам
текст. Если вы позднее решите, например, заменить
цвет шрифта заголовков на синий, для этого будет
достаточно поменять только стиль этих
заголовков. Делать изменения в тексте нет
необходимости<i>.
</i></p>
<p>Существует четыре метода применения
таблицы стилей к документу:</p>
<ul><p>Связывание (Linking) - можно связать HTML -
документ с таблицей стилей, хранящейся в
отдельном файле.</p>
<p>Встраивание (Embedding) - можно встроить
таблицу стилей в HTML - документ с помощью
контейнера <STYLE>
.</p>
<p>Задание стиля для отдельного фрагмента
документа (Inline) - можно определять элементы стиля
"на лету", т. е. указывать их в <a href="/kakoi-teg-dobavlyaet-izobrazhenie-v-html-dokument-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche-video.html">тэгах HTML</a>,
например, в тэге абзаца <span></li>
<li><p>Импорт (Import) - можно использовать
зарезервированное слов @import для импортирования
таблицы стилей в HTML - документ.</p>
</ul><p>Как было указано выше, существует
возможность создания таблиц стилей в виде
<a href="/proverka-lechenie-kompyutera-na-virusy-kak-proverit-na-virusy-kompyuter-ili.html">отдельного файла</a> для применения его ко всем
страницам cайта. Этот метод упрощает создание
сайта.</p>
<p>Хранить таблицу стилей следует в
текстовом файле с расширением.css. Его можно
создать при помощи любого текстового редактора.
Для связывания таблицы стилей с документом HTML
необходимо использовать тэг <LINK>
<span> следующим образом:
</p>
<p><LINK
<span>REL=STYLESHEET HREF="http://www.myserver.com/mysheet.css"
TYPE="text/css">
</p>
<p>В атрибуте HREF
<span>указывается URL - адрес таблицы
стилей.
</p>
<p>Таблицу стилей необязательно хранить в
виде отдельного файла. Ее можно встроить
непосредственно в документ, однако в этом случае
она будет действовать только внутри файла этого
документа. Для распространения действия таблицы
на другие документы ее необходимо скопировать в
каждый из них.</p>
<p>Для включения таблицы стилей в документ
необходимо воспользоваться контейнером <STYLE>
<span>. Он
размещается между тэгами
</span><HTML>
и <span><BODY>
:
</p>
<p><HTML><br>
<HEAD> </HEAD><br>
<STYLE TYPE="text/css"><br>
STYLE definitions go here<br>
</STYLE> <br>
<BODY> </BODY> <br>
<HTML>
</p>
<p>Тэг <STYLE>
<span> имеет единственный атрибут TYPE
, определяющий тип MIME (Multipurpose Internet
Mail Extension, стандарт <a href="/elektronnaya-pochta-vhod-na-moyu-stranicu-moya-pochta-rabota-s-pismami-i.html">электронной почты</a> Internet). Для
того, чтобы браузеры, не поддерживающие таблицы
стилей, могли игнорировать тэг <STYLE>
,
его необходимо определить как "text/css"
.
</p>
<p>Можно определять стиль, что называется,
"на лету", оперативно внося требуемые
изменения. Например, если сначала определен
стиль документа с заголовком одного цвета, а
потом необходимо выделить цветом какой-то
элемент заголовка, можно это сделать внутри тэга
заголовка, не изменяя общий стиль документа.</p>
<p>Такой метод действует внутри тэга, где
определен или переопределен стиль при помощи
атрибута STYLE
он поддерживается
всеми подчиненными тэгами тэга <BODY>
<span>. Для оперативного определения стиля
необходимо добавить к нужному тэгу атрибут STYLE
и присвоить ему строковое
значение, указывающее новый стиль:
</p>
<p><H1
STYLE="color:
blu
е">
</p>
<p>Если оперативное указание стиля в
строке вступает в конфликт с другими методами
определения, оно всегда "берет верх".
Например, если при помощи связанного с
документом файла стиля цвет заголовка H1
<span> определен как
синий, а в самом тэге заголовка цвет изменен на
красный, браузер выведет этот заголовок шрифтом
красного цвета.
</p>
<p>Используя атрибут STYLE
c
тэгом <span><DIV>
,
можно определять стиль части документа,
расположенной в контейнере <DIV>
.
Это работает благодаря принципу
"наследования", о чем будет рассказано ниже.
Например, если необходимо установить цвет шрифта
для целого блока тэгов синим, можно расположить
эти тэги внутри контейнера
</span> <span><DIV>
и определить цвет шрифта
текста следующим образом:
</p>
<p><DIV STYLE="color: bluе">
<H1>This is a heading</H1><br>
<P>This is a paragraph. It will look blue in the user"s browser</P>
</DIV>
</p>
<p>Для изменения стиля нескольких слов или
даже символов можно использовать атрибут STYLE
совместно с тэгом <span>,
например:</p>
<p>This is a <SPAN STYLE="color:
blue">simple</SPAN> block of text
</p>
<p>Для того чтобы импортировать таблицу
стилей в HTML - документ, надо поместить в него
зарезервированное слово @import. Импортированный
файл должен размещаться в контейнере <STYLE>
.
Эта операция весьма похожа на встраивание
таблицы стилей, например:</p>
<p><STYLE TYPE="text/css"><br>
@import url(http://www.myserver.com/style.css) ;<br>
</STYLE>
</p>
<p>Как было указано ранее, таблицы стилей
хранятся в <a href="/rabota-s-failami-zapis-v-fail-vvod-dannyh-iz-faila-i-vyvod-v.html">текстовых файлах</a>, удобных для
редактирования. Их нетрудно создавать вручную,
однако существуют специальные редакторы таблиц
стилей, например, популярная программа Мicrosoft FrontPage.
</p>
<p>Таблицы стилей позволяют определять
стиль для одного или нескольких тэгов. Например,
можно создать таблицу стилей, определяющую стили
для тэгов <H1>
, <H2>
,
<P>И
<EM>
<span>. Каждое
определение называется <i>правилом
</i>
</span>(rul<span>е). Правило содержит <i>селектор
</i>
(тэг HTML), за которым следует <i>декларация
</i>
(определение стиля). Селектор является связующим
звеном между определением и тэгом. Ниже приведен
пример правила, указывающего стиль для каждого
из тэгов заголовка <H1>
:
</p>
<p>H1 (color: blue}
</p>
<p>Декларация заключается в фигурные
скобки. Каждая декларация имеет две части:
название свойства и присваиваемое ему значение,
разделенные двоеточием. В HTML включены десятки
свойств (font-size, font-style, color, margin-right и т. д.), о которых
будет рассказано ниже. Каждое свойство может
принимать несколько значений, одно из которых
приписывается ему по умолчанию.</p>
<p>В предыдущем примере было указано лишь
одно свойство color. Однако ничто не мешает
определить целый ряд свойств в одном тэге,
отделив их друг от друга точкой с запятой:</p>
<p>HI {color: blue; font-size: 12pt; text-line: center}
</p>
<p>В этом примере программа просмотра
выведет каждый заголовок первого уровня синим
шрифтом размером 12 пунктов и выровняет их по
центру окна. Для всех прочих свойств будут
использоваться значения по умолчанию (например,
свойству font-style будет присвоено значение normal).</p>
<p>Если необходимо определить один и тот же
стиль для нескольких тэгов, можно перечислить их
в отдельном списке:</p>
<p>Р (font-size: 12pt}<br>
UL {font-size: 12pt}<br>
LI {font-size: 12pt}
</p>
<p>HTML позволяет сделать то же самое и в
более компактном виде - в одной строке:</p>
<p>Р, UL, LI (font-size: 12pt}
</p>
<p>Запятая здесь является обязательным
элементом. Если она опущена, смысл правила
изменится (см. раздел " " ниже в этой главе).</p>
<p>По мере усложнения таблицы стилей,
скорее всего, понадобится включить в нее
дополнительные сведения о назначении того или
иного правила. Комментарии располагаются между
символами /* и */ и игнорируются программами
просмотра, например:</p>
<p>BODY {margin-left: lin} /* Отступ на 1
дюйм */<br>
H1 {margin-left: -lin} /* Сдвиг влево на 1 дюйм */ <br>
Н2 (margin-left: -lin} /* Сдвиг влево на 1 дюйм */
</p>
<p>HTML позволяет определить широкий спектр
свойств таблиц стилей. Имена свойств состоят из
одного, а чаще - из двух или трех слов, разделенных
дефисом. В сложных названиях первое слово обычно
представляет категорию и одновременно является
сокращенным вариантом (shorthand) имени свойства (см.
раздел " ").</p>
<p>В таблице приведен обзор свойств таблиц
стилей HTML.. В колонке "Категория" показано,
может ли то или иное свойство объединяться в
группу с другими свойствами. В третьей колонке
приведены сведения о том, наследуется или нет
свойство подчиненными тэгами (о наследовании
свойств см. раздел " ").</p>
<table border="1" cellspacing="1" bordercolor="#000000" cellpadding="3" width="469" height="1000"><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"><span><p><b> Наследование
</b></p>
</span>
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"></td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"></td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"><span>
<p>Таблицы стилей HTML позволяют украшать
фон элемента страницы цветом или изображением.
Необходимо заметить, что здесь и далее речь
пойдет об использовании свойств не для всей
страницы, а для отдельного элемента. Например,
если определяется фон для тэга <UL>
,
то это фон будет только у тэгов <UL>
всей страницы:</p>
<p>U
<span>L
{background-image: URL(http://www.myserver.com/images/watermark.gif)}
</p>
<i>
</i>
<p>Рекомендации W3C дают возможность
определять рамки, поля и свободное пространство
для элементов страницы. Можно, например,
заключить заголовок в рамку или изменить поля в
тэге абзаца <Р>
так, чтобы
организовать отступ для всех абзацев текста. Для
этих целей можно использовать следующие группы
свойств:</p>
<ul><li><i>
</i><p>border - используются для
определения рамки, расположенной слева, справа,
сверху и снизу от элемента. Можно устанавливать
ширину, цвет и стиль рамки.</p></li>
<li><i>
</i><p>margin - используются для
определения полей, расположенных слева, справа,
сверху и снизу от элемента. Можно также
устанавливать ширину полей.</p></li>
<li><i>
</i><p>padding - применяются для того,
чтобы указать свободное пространство между
рамкой и содержимым элемента.</p></li>
</ul><i>
</i>
<span><i>
</i>
<p>Эти свойства применяются для указания
способов вывода списков. С их помощью можно
изменить позицию маркера (свойство list-style-position),
стиль или изображение маркера (свойства list-style-type
и list-style-image).</p>
<p>Свойства списков наследуются, т. е. если
определено свойство в тэге <UL>
,
оно будет действительно для всех тэгов <LI>
<span> контейнера UL
.
</p>
<i>
</i>
<p>Свойства дают вам <a href="/obzor-programmy-dlya-vedeniya-domashnego-byudzheta-luchshie-besplatnye-mobilnye.html">полный контроль</a> того,
как программа просмотра выводит текст. С их
помощью можно управлять цветом, размером,
шрифтом, межстрочным интервалом и т, д. Ниже будут
подробно описаны все свойства текста.</p>
<i>
</i>
<span><b><i>
</i>
</b>
<span><i>
</i>
<p>Многие из описанных выше свойств могут
группироваться друг с другом. Так, вместо правила</p>
<p>H1 (font-weight: bold; font-style: normal;
font-size: 12pt; font-family: serif)
</p>
<p>можно записать более краткую
формулировку:</p>
<p>H1 (font: bold normal 12pt serif}
</p>
<p>Таблицы стилей HTML позволяют
группировать свойства border, background, font, list, margin и
padding. Рассмотрим каждую из групп в отдельности.</p>
<p><i><u>Группа свойств border
</u>
</i></p>
<p>Группировать свойства border можно пятью
различными способами. Можно определить свойства
для <a href="/kak-ochistit-istoriyu-soobshchenii-v-skype-kak-udalit-otdelnye-soobshcheniya.html">отдельной стороны</a> рамки, используя</p>
</span>b<span>order-top, border-right, border-bottom И border-left, либо
определить всю рамку сразу при помощи border.
<p>С каждым из этих свойств можно указать
ширину, стиль и цвет рамки, например:</p>
</span>
<p>b
order-top:
thin dotted black
</p>
<p><i><u>Группа свойств background
</u>
</i></p>
<p>В группе свойств background можно указать
значения для color, image, repeat, attachment и position, например:</p>
<p>background: white
URL(http://www.myserver.com/image/bg.gif) repeat-x fixed top left
</p>
<p><i><u>Группа свойств font
</u>
</i></p>
<p>Группе font можно дать значения weight, style, size
и family, например:</p>
<p>font: bold normal 12pt times, serif
</p>
<p><i><u>Группа свойств list
</u>
</i></p>
<p>Свойства группируются при помощи
свойства list-style. Возможно указание изображения
для маркера, типа и позиции маркера, например:</p>
<p>list-style: square
URL(http://www.myserver.com/images/marker.gif) inside
</p>
<p><i><u>Группа свойств margin
</u>
</i></p>
<p>Группе margin можно определить ширину для
каждого из полей top, right, bottom и left, например:</p>
<p>margin: .5in 1in .5in 1in
</p>
<p>Если будет указано только одно значение,
программа просмотра сделает ширину других полей
такой же. Если не указать одно или два значения,
поля с неуказанным значением будут такой же
ширины, как противоположные поля. Например, если
опустить последнее значение (left), ширина левых
полей будет равна ширине правых полей, т. е. 1
дюйму.</p>
<p><i><u>Группа свойств padding
</u>
</i></p>
<p>В Группе padding можно указать значения для
top, right, bottom и left, например:</p>
<p>padding: .25in .25in .25in .25in
</p>
<p>Если будет указано только одно значение,
программа просмотра назначит отсутствующим
значениям такую же величину. Если не указать одно
или два значения, свободные пространства с
неуказанными значениями будут такой же ширины,
как и им противоположные. Например, если опустить
последнее значение (left), свободное пространство
между левой стороной рамки и содержимым элемента
будет таким же, как и пространство с правой
стороны.</p>
<p>В HTML подчиненные тэги наследуют
некоторые свойства родительских тэгов. Например,
все тэги контейнера <BODY>
(<
P
>
и <span><UL>
) будут обладать некоторыми
свойствами тэга <BODY>
. Точно так
же тэг <LI>
наследует свойства
тэга <UL>
. Рассмотрим следующий
код:
</p>
<p><STYLE TYPE="text/css"> <br>
Р (color: blue) <br>
</STYLE> <br>
<BODY><br>
<P>Hello. This is a paragraph of text. <EM>This is
emphasized</EM><P>
</BODY>
</p>
<span>
<p>Таблица стилей этого документа
устанавливает цвет в тэге</p>
</span><
P
>
<span> синим, однако,
цвет для тэга
</span><EM>
<span> явно не определен (по умолчанию -
это черный цвет). Здесь не о чем беспокоиться, так
как этот тэг находится в родительском контейнере <P>И наследует таким образом
синий цвет.
<p>Иногда возникает необходимость
определения двух (и более) стилей для одного тэга.
Например, может понадобиться указание двух
стилей для тэга <LI>
: один для
случая, когда он подчинен тэгу</p>
</span><UL>
<span>, и второй, когда он подчинен тэгу <UL>
. Это возможно сделать с
помощью контекстных селекторов.
<p>Контекстный селектор определяет точную
последовательность тэгов, для которых будет
применен тот или иной стиль. Другими словами,
можно указать, что какой-то стиль должен
применяться, например, в тэге <LI>
только в том случае, если этот тэг является
подчиненным тэгу <OL>
:</p>
<p>OL LI (list-style-type: decimal}
</p>
<p>Для того же тэга <LI>
можно определить другой стиль, действительный
только в случае подчиненности тэгу <UL>
:</p>
<p>UL LI {list-style-type: square}
</p>
<p>Необходимо заметить, что список
селекторов не разделен запятыми. В противном
случае всем тэгам списка будет приписан один и
тот же стиль.</p>
<p>В рекомендациях W3C таблицы стилей
называются "каскадными таблицами стилей<i>"
</i>
потому, что для верстки Web - страницы можно
применять не одну, а сразу несколько таблиц. При
этом программа просмотра сама определяет
последовательность использования таблиц и
разрешает конфликты между ними по принципу
каскадирования. Например, таблица стилей для
страницы может быть определена не только ее
автором, но и читателем, и тогда правила
каскадирования решают, какая из таблиц стилей
будет иметь силу.</p>
<p>Kак это работает? Каждому правилу
браузер приписывает весовой коэффициент. При
интерпретации каждого тэга программа
просматривает все правила этого тэга и сортирует
их по величине весового коэффициента. Выигрывает
самое "весомое" правило.</p>
<p>Существуют следующие общие принципы
разрешения конфликтов между таблицами стилей:</p>
<ul>
<p>Старшинство типов таблиц стилей в
документе (по убыванию): текущее задание стиля
(inline), встраивание (embedding), связывание (linking).</p>
</ul><p>Также можно изменить весовой
коэффициент правила при помощи служебного слова
important. В следующем примере значение red свойства</p>
</span>col<span>or и значение sans-serif свойства font-family
помечены этим служебным словом, и поэтому
программа просмотра не должна их переопределять.
Однако если вступают в конфликт два таких
правила, противоречие решается согласно
принципам, изложенным выше.
<p>H1 (color: red ! important font-weight: bold
font-family: sans-serif ! important}
</p>
<p>Классом называется определение
нескольких стилей одного элемента, каждый из
которых может использоваться в нужном месте
страницы. Например, можно определить три
вариации стиля заголовка H1
.
Определение вариаций похоже на указание стиля,
только к названию тэга добавляется произвольное
имя класса, отделенное точкой:</p>
<p>H1 blue (color: blue} H1 .red (color: red} H1 .black
(color: black}
</p>
<p>Теперь, включая в документ тэг <H1>
, можно указать в нем
конкретный стиль при помощи атрибута CLASS
:</p>
<p><H1 CLASS=red>Red Heading</H1>
</p>
</span></td></tr></table></td>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
<div class='yarpp-related'>
<h3>Похожие материалы:</h3>
<ol>
<li><a href="/tri-samyh-populyarnyh-veb-serverov-pyat-luchshih-otkrytyh.html" rel="bookmark" title="Пять лучших открытых веб-серверов">Пять лучших открытых веб-серверов </a></li>
<li><a href="/kak-nadezhno-skryt-papku-ili-fail-ot-postoronnih-glaz-wise-folder-hider.html" rel="bookmark" title="Wise Folder Hider — бесплатная программа для скрытия папок и файлов на компьютере Программа для скрытия и шифрования папок">Wise Folder Hider — бесплатная программа для скрытия папок и файлов на компьютере Программа для скрытия и шифрования папок </a></li>
<li><a href="/obzor-form-pilot-office---programmy-dlya-zapolneniya-bumazhnyh-form-obzor-programm.html" rel="bookmark" title="Обзор программ Дизайн электронных курсов">Обзор программ Дизайн электронных курсов </a></li>
<li><a href="/izobrazhenie-v-formate-bmp-konvertiruem-bmp-v-jpg-bezopasnost-prezhde-vsego.html" rel="bookmark" title="Изображение в формате bmp">Изображение в формате bmp </a></li>
</ol>
</div>
</div>
</article>
<nav class="nav-single">
<h3 class="assistive-text">Навигация по записям</h3>
<span class="nav-previous"><a href="/fl-studio-ne-vidit-midi-klaviaturu-chto-pozvolyayut-delat-dannye.html" rel="prev"><span class="meta-nav">Что позволяют делать данные устройства</span> А теперь, что бы превратиться в...</a>
</span>
<!-- /next_post -->
<span class="nav-next"><a href="/fiksirovannaya-telefonnaya-svyaz-kakie-luchshie-sotovye-operatory-rossii.html" rel="next">Какие лучшие сотовые операторы России? <span class="meta-nav">→</span></a>
</span>
<!-- /next_post -->
</nav>
<div id="disqus_thread">
</div>
</div>
</div>
<div id="secondary" class="widget-area" role="complementary">
<aside id="text-10" class="widget widget_text">
<div class="textwidget">
</div>
</aside>
<aside id="text-3" class="widget widget_text">
<div class="textwidget">
<div class="ya-site-form ya-site-form_inited_no" onclick="return { 'action':'/searchresult','arrow':false,'bg':'transparent','fontsize':12,'fg':'#000000','language':'uk','logo':'rb','publicname':'bazava.ru','suggest':true,'target':'_blank','tld':'ua','type':3,'usebigdictionary':true,'searchid':1,'input_fg':'#000000','input_bg':'#ffffff','input_fontStyle':'normal','input_fontWeight':'normal','input_placeholder':null,'input_placeholderColor':'#000000','input_borderColor':'#7f9db9'} ">
<form action="/" method="get" target="_blank"><input type="hidden" name="searchid" value="2265218" /><input type="hidden" name="l10n" value="uk" /><input type="hidden" name="reqenc" value="" /><input type="search" name="text" value="" /><input type="submit" value="Знайти" /></form>
</div>
<style type="text/css">
.ya-page_js_yes .ya-site-form_inited_no {
display: none;
}
</style>
<script type="text/javascript">
(function(w, d, c) {
var s = d.createElement('script'),
h = d.getElementsByTagName('script')[0],
e = d.documentElement;
if ((' ' + e.className + ' ').indexOf(' ya-page_js_yes ') === -1) {
e.className += ' ya-page_js_yes';
}
s.type = 'text/javascript';
s.async = true;
s.charset = 'utf-8';
s.src = (d.location.protocol === 'https:' ? 'https:' : 'http:') + '//site.yandex.net/v2.0/js/all.js';
h.parentNode.insertBefore(s, h);
(w[c] || (w[c] = [])).push(function() {
Ya.Site.Form.init()
})
})(window, document, 'yandex_site_callbacks');
</script>
</div>
</aside>
<aside id="categories-2" class="widget widget_categories">
<h3 class="widget-title">Рубрики</h3>
<ul>
<li class="cat-item cat-item-4"><a href="/category/internet/">Интернет</a>
</li>
<li class="cat-item cat-item-4"><a href="/category/programs/">Программы</a>
</li>
<li class="cat-item cat-item-4"><a href="/category/windows/">Windows</a>
</li>
<li class="cat-item cat-item-4"><a href="/category/devices/">Устройства</a>
</li>
<li class="cat-item cat-item-4"><a href="/category/android/">Android</a>
</li>
<li class="cat-item cat-item-4"><a href="/category/computer/">Компьютер</a>
</li>
<li class="cat-item cat-item-4"><a href="/category/apple/">Apple</a>
</li>
</ul>
</aside>
<aside id="recent-posts-2" class="widget widget_recent_entries">
<h3 class="widget-title">Свежие записи</h3>
<ul>
<li>
<a href="/zakryvaem-ssylki-ot-indeksacii-v-kommentariyah-wordpress-pri-pomoshchi-koda-kak-zakryt.html">Как закрыть ссылки от индексации в комментариях Закрыть от индексации 8 статья</a>
</li>
<li>
<a href="/semanticheskoe-yadro-yandeks-direkt-semanticheskoe-yadro-dlya-kontekstnoi.html">Семантическое ядро для контекстной рекламы Семантическое ядро яндекс директ</a>
</li>
<li>
<a href="/shema-bloka-pitaniya-dlya-usilitelya-dvoinoe-mono-dvoinoe-mono-iz-italii.html">Схема блока питания для усилителя двойное моно</a>
</li>
<li>
<a href="/archos-diamond-s---tehnicheskie-harakteristiki-archos-diamond-alpha-smartfon-s.html">Archos Diamond Alpha — смартфон, с которым стоит разобраться Аппаратная платформа и ПО</a>
</li>
<li>
<a href="/tehnologii-upravleniya-ustroistvami-vzglyadom-i-zhestami-windows-upravlenie.html">Windows: управление системой с помощью жестов!</a>
</li>
<li>
<a href="/proshivka-miui-na-lenovo-p780-cherez-twrp-rekaveri-root-custom-recovery-pereproshivka---lenovo.html">Root, Custom Recovery, Перепрошивка - Lenovo P780 (SLR, ColorOS) Инсталляция Android, обновление, восстановление</a>
</li>
<li>
<a href="/proshivka-samsung-galaxy-s3-gt-i9300-proshivka-smartfona-samsung-gt-i9300-galaxy-s-iii.html">Прошивка смартфона Samsung GT-I9300 Galaxy S III Прошивка на i9300i через флешку</a>
</li>
<li>
<a href="/kak-nastroit-sputnikovuyu-tarelku-nastroika-sputnikovyh.html">Настройка спутниковых каналов на телевизоре Samsung</a>
</li>
<li>
<a href="/kak-podklyuchit-telefon-k-vneshnemu-ekranu-kak-peredat-izobrazhenie.html">Как передать изображение с "андроида" на монитор</a>
</li>
<li>
<a href="/obrazec-zapolneniya-blanka-nalozhennogo-platezha-kak-otpravit.html">Как отправить посылку наложенным платежом — порядок отправки получения и оплаты</a>
</li>
</ul>
</aside>
<aside id="text-7" class="widget widget_text">
<div class="textwidget">
</div>
</aside>
</div>
</div>
<footer id="colophon" role="contentinfo">
<div class="site-info">
<a href="/" title="Портал о домашнем оборудовании">Портал о домашнем оборудовании</a>
</div>
</footer>
</div>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = { "visibility_show":"show","visibility_hide":"hide","width":"Auto"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/wpfront-scroll-top/js/wpfront-scroll-top.min.js?ver=1.6'></script>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script>
<script type='text/javascript' src='https://bazava.ru/wp-content/themes/twentytwelve/js/navigation.js?ver=20140711'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "sidebar-1", "margin_top" : 10, "margin_bottom" : 0, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-7'] } ;
</script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.9.1'></script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.9.1'></script>
<div id="wpfront-scroll-top-container"><img src="https://bazava.ru/wp-content/plugins/wpfront-scroll-top/images/icons/1.png" alt="" / loading=lazy></div>
<script type="text/javascript">function wpfront_scroll_top_init() { if(typeof wpfront_scroll_top == "function" && typeof jQuery !== "undefined") { wpfront_scroll_top({ "scroll_offset":100,"button_width":0,"button_height":0,"button_opacity":0.8,"button_fade_duration":200,"scroll_duration":400,"location":1,"marginX":20,"marginY":20,"hide_iframe":false,"auto_hide":false,"auto_hide_after":2} );} else { setTimeout(wpfront_scroll_top_init, 100);} }wpfront_scroll_top_init();</script>
</body>
</html>
|
