Что такое каскадная таблица стилей
Русская часть Интернета растет день ото дня. За последние год-два суммарный объем русскоязычных страниц увеличился более чем в два раза. Сегодня в России уже никого не удивишь словосочетанием <домашняя страничка> или английским словом
Речь здесь пойдет о <правильном> HTML для новичков, а именно - о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (http://www.w3.org/). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее - о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством <классического> HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.
Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad"ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: <Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - тексты я создаю в MS Word, презентации - в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу - MS FrontPage...> Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.
Первый раз - в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы <отсебятину> - множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален - любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.
Из этого следует, что второй раз новичок обкрадывает себя именно в части гибкости и полноты управления создаваемым содержимым страницы - визуальные редакторы не предоставляют такой свободы творчества, какую предоставит вам работа непосредственно с исходным кодом создаваемой страницы.
Ну, а теперь перейдем непосредственно к делу - к созданию красивых и небольших web-страниц с помощью каскадных таблиц стилей (в дальнейшем тексте я буду употреблять их сокращенное название - CSS). Предполагается, что вы, дорогие читатели, прочтя вступление, согласились со мной, отказались от визуальных редакторов, добыли книгу по HTML, изучили хотя бы небольшое количество основных тегов и атрибутов и горите желанием узнать, что же такое CSS и с чем его едят.
Логическое и физическое форматирование
Классический HTML версии 3.2, наиболее распространенный на данный момент в Сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги , , ) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием - просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых броузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой <неподвластности> логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.
Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML - теги
, , , безусловно, способствовали разделению документов на некоторые логические блоки. Но многие авторы страниц использовали, да и по сей день продолжают использовать эти теги не по назначению: в связи со скудостью средств для оформления страницы теги заголовков, например, использовались для выделения таких элементов на странице, которые на самом деле заголовками не являлись. CSS же предоставляют достаточное количество средств оформления, что позволяет более точно следовать правилам логического форматирования и действительно отделять структуру страницы от ее визуального представления.Назначение стилей отдельным элементам страницы
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу
. Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице - достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега
, присвоив ему соответствующее значение. Синтаксис такой:
Таким образом, все абзацы на странице отображены так, как мы захотели, причем код не засорен тегами и их атрибутами. Представляете, какая экономия размера файла, если ваша страница состоит из большого количества текста!
Обратите внимание - когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.
В приведенном примере используется встраивание стиля непосредственно в тег документа - так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях - если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML, о которых мы поговорим далее.
Назначение стилей нескольким элементам одной страницы - создание внедренной таблицы стилей
Пока речь у нас шла о задании только одного стиля для одного элемента. А теперь мы научимся создавать именно таблицы стилей.
Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня - шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в <голове> страницы (в любом месте между тегами
и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:
...
...
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.
Назначение стилей одновременно для нескольких страниц сайта
Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам одного сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным - .css).
Вот пример содержимого такого файла (например, my.css):
Body {
font-family: "Times New Roman", serif;
font-size: 12pt;
color: darkgreen;
}
h1 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: green;
font-weight: bold;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
}
Обратите внимание: теги внутри файла таблицы стилей не используются - расширение.css явно указывает броузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тегами
и следующую строку:
...
...
В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла - .css (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в <голове> страницы внутри тега-контейнера
...
Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер
...
...
Вопрос журналиста
Ответ интервьюируемого
...
В приведенном примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным, курсивного начертания, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов черного цвета. Важно не забывать прописывать параметр class различным классам абзацев непосредственно в коде html. Вы можете создавать любое количество классов для любых элементов страницы.
Селектор id
Возьмем другой случай. Предположим, вы хотите создать на странице какие-либо уникальные элементы, к которым в дальнейшем планируете обращаться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление посредством CSS. На этот случай в каскадных таблицах стилей имеется возможность присвоения уникальным элементам идентификаторов (id). Наиболее часто идентификаторы используются для элементов форм, которые в спецификации HTML 4.0 имеют полную либо ограниченную поддержку CSS (в зависимости от элемента). Вот пример назначения идентификатора и правил CSS таким элементам:
...
...
...
...
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов страницы. Это может быть полезно для обращения к элементу из программы на языке JavaScript и изменения стиля его отображения в ответ на действия пользователя, что позволяет создавать различные динамические эффекты.
Контекстные селекторы
Допустим, мы создали таблицу стилей, согласно которой все заголовки первого уровня на странице отображаются красным цветом на сером фоне, все абзацы - зеленым цветом на желтом фоне, а все выделенные посредством тега 1 слова внутри абзацев - черным цветом на серебристом фоне. Код таблицы стилей, как вы уже догадались, при этом выглядит так:
H1 {
color: red;
background-color: gray;
}
p {
color: green;
background-color: yellow;
}
em {
color: black;
background-color: silver;
}
Предположим, мы хотим также выделить какие-то слова в заголовке посредством того же тега , но нас не устраивает появление черного цвета текста на серебристом фоне в заголовке. Мы хотим выделить слова в заголовке бордовым цветом на сером фоне. Для этого существуют контекстные селекторы. Запись правила, которое мы для этого добавим в таблицу стилей, будет выглядеть так:
H1 em {
color: #CC0000;
background-color: gray;
}
А вот пример кода страницы с использованием этого контекстного селектора:
...
...
...
Это - заголовок первого уровня с выделенным
словом
А это - обычный абзац с выделенными словами
...
На сегодня это все. В следующий раз
мы поговорим о правилах форматирования блоковых элементов страницы,
о позиционировании элементов и о других интересных и полезных возможностях,
реализуемых с использованием CSS.
Наверное всем известно, что HTML
задает структуру документа, а CSS
(Cascading Style Sheets, каскадные таблицы стилей) отвечает за оформление веб-страницы, положение и вид элементов. Так сложилось, что HTML и CSS отдельно не используются. Любая веб-страница это, по сути, комбинация HTML-кода и CSS-кода. Без основных знаний этих
технологий не получится грамотно сверстать ни один документ. Многие из нас изучали эти технологии подробнее. Но лично мне до конца так и не удалось «постичь» все истины и возможности CSS. Далее я постараюсь выделить самые важные моменты, которые нужно знать о CSS.
Что такое каскадные таблицы стилей?
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Посмотрите на рисунки ниже, чтобы понять разницу:
Исходный код такого документа имеет вид:
1
2
3
4
5
6
7
8
9
10
11
12
13
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns=
>
<head
>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
<title
>
Флексагон</
title
>
<link
rel
=
"stylesheet"
href
=
"style.ess"
type
=
"text/css"
/
>
</
head
>
<body
>
<h1
>
Флексагок</
h1
>
<р>
Флексагок представляет собой бумажную фигуру, которая имеет три и более стороны. Поначалу кажется, что это невозможно, но вспомните ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги, и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. Перегибая флексагон, по очереди будем наблюдать все его поверхности.</
р>
</
body
>
</
html
>
Сам код HTML никаких изменений не претерпел и единственное добавление - это строка . Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано ниже:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body {
font-size
:
llpt;
background-color
:
#f0f0f0
;
/* Цвет фона веб-страницы */
color
:
#333
;
/* Цвет основного текста */
}
h1 {
color
:
#а52
а2
а;
/* Цвет заголовка */
font-size
:
24pt
;
/* Размер шрифта в пунктах */
font-family
:
Georgia,
Times,
serif
;
/* Семейство шрифтов */
font-weight
:
normal
;
/* Нормальное начертание текста */
}
p {
text-align
:
justify
;
/* Выравнивание по ширине */
margin-left
:
бОрх;
/* Отступ слева в пикселах */
margin-right
:
Юрх;
/* Отступ справа в пикселах */
border-left
:
lpx solid
#999
;
border
-bottom
:
lpx solid
#999
;
padding
-left
:
Юрх;
padding
-bottom
:
1Opx;
}
В файле style.css
как раз и описаны все параметры оформления таких тегов как, <body
>
,
и <p
>
Заметьте, что сами теги в коде HTML пишутся как обычно. Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объема повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
. Подобные стили применяются при использовании «чистого» HTML.
Стиль пользователя.
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.
Если возникает конфликт при изменении стиля одного и того элемента документа, то стиль пользователя имеет самый высокий приоритет, далее следует стиль автора и стиль браузера.
Как добавить стили на страницу?
Добавить CSS стили на страницу можно несколькими способами:
Связанные стили
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер
.
Подключить эти стили можно следующим образом:
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>Вообще, изучение приемов верстки веб-страниц это сложная тема, в которой порой приходится изучать кучу сопутствующих технологий и смиряться с особенностями реализации различных браузеров. Готовьтесь к трудностям.</p>
<p>По материалам книги Влада Моржевича «Верстка веб-страниц». Очень советую эту книгу подойдет как справочник и учебник.</p>
<p><b>Для чего нужны таблицы стилей?
</b></p>
<p>Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).</p>
<p>Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS:</p>
<ul><p>Проблема позиционирования (разметка страниц). Хотя для этого стали использовать таблицы (они небыли для этого предназначены изначально), они не решили всех проблем. Не возможно осуществить следующее:<br>- Нельзя задать фиксированные размеры какого-нибудь блока. Например, текстовый блок будет разъезжаться при переполнении (даже если он в таблице). <br>- Нельзя задать фиксированные координаты положения блока на странице.<br>- Нельзя наложить один блок на другой. Например, попробуйте надвинуть картинку поверх таблицы или другой картинки.</p>
<p>Вторая проблема заключалась в том, что приходилось каждый раз задавать на страницах размер и цвет шрифта, свойства ячеек таблицы и т.д. Это сильно увеличивало размеры страницы, а значит, она медленнее загружается. В случае если вам захотелось изменить цвет или размер шрифта, вам пришлось бы редактировать все страницы.</p>
<p>Третья проблема заключалась в том, что все браузеры имеют индивидуальные настройки. Например, в браузере можно увеличить шрифт, что приведет к искажению всей страницы.</p>
</ul><p>С помощью CSS эти проблемы можно решить.</p>
<p><b>Способы применения CSS
</b></p>
<p>Существует три способа применения таблиц стилей:</p>
<ul><p><b>Внутренние таблицы стилей
</b> (Inline Style Sheets) - при помощи специального атрибута помещаются прямо в HTML теги.<br>Пример HTML:</p>
<p>Пример CSS:</p>
<p>Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль.<br>При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.</p>
<p><b>Глобальные таблицы стилей
</b> (Global Style Sheets) - определяют стиль элементов во всем документе.<br>Для этого используется тег <STYLE type="text/css">. Он размещается в заголовке документа <head> . </p>
<p>Теперь эти стили можно применять в любом месте html-кода. Для этого используются следующие конструкции:</p><p><h1> Этот заголовок написан крупным красным курсивом </h1><br>Вот <font class="blue"> это </font> слово - синие.<br></body><br></html></p><p>В данном примере все элементы H1 будут написаны крупным красным курсивом, все элементы с указанным классом BLUE будут синими.</p>
<p><b>Связанные таблицы стилей
</b> (Linked Style Sheets) - могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.</p>
</ul><p>Пример внешнего файла: </p><p>Файл main.css </p>
<table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;">
1
2
3
4
</td>
<td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;">
body {
background
:
black
;
font-size
:
9pt
;
color
:
red
;
font-family
:Arial
Black}
.base
{
color
:
blue
;
font-style
:
italic
}
h1 {
color
:
white
}
#bold
{
font-weight
:
bold
}
</td>
</tr></tbody></table>
<p>Файл Index.html </p>
<p>Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им.</p>
<p><b>Почему каскадные?
</b></p>
<p>Каскадность заключается в том, что стили могут переопределяться. Приведенный ниже список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный.</p>
<p>Способы внедрения стилей на странице:</p>
<ul><p>использование отдельного стилевого файла и вставка его при помощи тега <link></p>
<p>описание стиля в заголовке документа</p>
<p>применения стиля как параметра в теге.</p>
</ul><p>Например, мы определили во внешнем стилевом файле, что текст в теге <p>Должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p>Должен быть написан шрифтом в 12 пунктов, то текст будет выведен шрифтом 12 пунктов - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.</p>
<p>Для чего это нужно? Предположим, что для всех ссылок в заголовке на нашей страничке определен следующий стиль:</p>
<p>И, следовательно, любой текст, который является гиперссылкой, автоматически становится красным и перестает быть подчеркнутым. И вот мы решили в конце странички указать ссылку на сайт автора странички, но сделать это не сильно заметно, чтобы не акцентировать на этом внимание. Сделать это нам нужно всего лишь в одном месте странички и определять для этого дополнительный класс нецелесообразно. Достаточно локально переопределить цвет ссылки:</p>
<p>Сделали мы это при помощи атрибута style, а он действует лишь в пределах того тега, в котором был определен.</p>
<p>Тег определяет некую область, к которой мы можем применить стиль.</p>
<p><b>Наследование
</b></p>
<p>Некоторые значения наследуются дочерними элементами (тегами).</p>
<p>Предположим, что имеется элемент H1, в котором расположен элемент выделения EM:</p>
<p>Если для элемента EM не задан цвет, то слово "очень" унаследует цвет родительского элемента. Таким образом, если для H1 определен синий цвет, то и элемент EM будет представлен, синим цветом.</p>
<p>Определение свойств стиля, используемого в документе по умолчанию, можно осуществить в корневом элементе дерева данного документа. Например, в языке HTML эту возможность можно реализовать с помощью элементов HTML или BODY.</p>
<p>Пример(ы):</p>
<p>Например, свойство "color" является наследуемым, поэтому все потомки элемента BODY унаследуют цвет "black": </p>
<p>и фрагмент документа: </p>
<p>Свойство "font-size" элемента H1 будет иметь вычисленное значение "12pt" (120% от 10pt, являющегося значением свойства родительского элемента). Так как вычисляемое значение свойства "font-size" является наследуемым, то элемент EM также будет иметь вычисленное значение "12pt".</p>
<p><b>Синтаксис CSS
</b></p>
<p>Все объявления CSS (официально они называются "селекторы") записываются в фигурных скобках:</p>
<p>ТЕГ:псевдокласс.класс { характеристика1: значение1; характеристика2: значение2}</p>
<p>Описание каждого класса делается при помощи конструкции, подобной этой:</p>
<table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;">
1
</td>
<td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;">
.small
{
font-size
:
9pt
;
}
</td>
</tr></tbody></table><p>Сначала указывается имя класса - оно может быть произвольным, но желательно все-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются все необходимые параметры для данного класса. Параметры отделяются друг от друга точкой с запятой. Вот еще один пример, в котором используется более длинное описание:</p>
<table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;">
1
</td>
<td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;">
.small
{
font-size
:
9pt
;
color
:
#eeeeee
;
text-align
:
center
;
}
</td>
</tr></tbody></table><p><b>Универсальный класс -
</b>может быть применен к любому тегу, имя класса начинается с точки.</p>
<p><b>Теговые классы
</b><b> -
</b>может быть применен к конкретному тегу, имя класса начинается с указания тега, после точки записывается имя класса.</p>
<table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;">
1
</td>
<td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;">
p.small
{
font-size
:
9pt
;
}
</td>
</tr></tbody></table><p>Класс, определенный таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован:</p>
<p>Мы можем определять параметры не только для одного тега, но и сразу для нескольких. Для этого в определении стиля достаточно перечислить их через запятую:</p>
<table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;">
1
</td>
<td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;">
P,
TD,
LI {
font-size
:
9pt
;
color
:
green
;
}
</td>
</tr></tbody></table><p>В случае переопределения существующих тегов, в описании стиля можно указывать не все параметры, а лишь те из них, которые мы хотим изменить. Все остальные параметры примут значения по умолчанию, которые для разных тегов различны.</p>
<p><b>Псевдоклассы
</b></p>
<p>В CSS есть такое понятие как псевдокласс. В отличие от обычного класса, действие псевдокласса распространяется не на весь текст, к которому применен данный стиль, а лишь на его часть и возможно лишь в определенном состоянии. Чтобы было понятнее, давайте разберем эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора. Эффект достаточно распространенный, и его можно наблюдать в том числе и на этом сайте. Вот фрагмент таблицы стилей, который позволяет достигать вышеописанного эффекта:</p>
<table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;">
1
2
</td>
<td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;">
a {
text-decoration
:
none
;
}
a:hover
{
text-decoration
:
underline
;
}
</td>
</tr></tbody></table><p>Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.</p>
<p>А вот и другой пример псевдокласса - определение буквицы вначале абзаца:</p>
<table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;">
1
</td>
<td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;">
p:first-letter
{
font-size
:
200%
;
font-weight
:
bold
;
}
</td>
</tr></tbody></table><p>Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.</p>
<p><b>Комментарии
</b></p><p>Как и в любом достаточно сложном языке, при создании таблицы стилей можно пользоваться комментариями.</p>
<p>Для небольших сайтов эта возможность вам вряд ли пригодится, а вот при создании сложных, многоуровневых таблиц стилей комментарии могут пригодиться. Кстати, здесь будет уместно привести золотое правило - чем понятнее названа переменная (в данном случае имя класса), тем меньше комментариев необходимо.</p>
<p><b>Некоторые параметры CSS
</b></p>
<p><b>Некоторые параметры шрифта
</b></p><p>font-weight: [ bold | normal | number] - жирность шрифта<br>font-style: - наклон шрифта<br>font-size: number - размер шрифта<br>font-family: name - гарнитура шрифта<br>color: number - цвет шрифта<br>background-color: number - цвет подложки<br>background: url - текстурная подложка</p>
<p><b>Некоторые параметры абзаца
</b></p><p>text-align: [ left | right | center | justify] - выравнивание<br>text-indent: number - отступ красной строки<br>line-height: number - интерлиньяж<br>letter-spacing: number - трекинг</p><p>padding-left: number - отступ от текста слева<br>padding-right: number - отступ от текста справа<br>padding-top: number - отступ от текста сверху<br>padding-bottom: number - отступ от текста снизу</p><p>margin-left: number - отступ от границы слева<br>margin-right: number - отступ от границы справа<br>margin-top: number - отступ от границы сверху<br>margin-bottom: number - отступ от границы снизу</p>
<p><b>Единицы измерения в CSS<br></b></p>
<p>В свойствах, которым требуется указание размеров, можно использовать несколько способов для их задания:</p>
<ul><p>относительный размер в процентах (%)</p>
<p>относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)</p>
<p>абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), средней шириной буквы "m" (em), средней шириной буквы "x" (eх)</p>
<p>абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in)</p>
<p>абсолютный в пикселях (px)</p>
</ul><p><b>Задание цвета в CSS<br></b></p>
<p>Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:</p>
<ul><p>при помощи названия цвета: yellow, red, green, grey,..</p>
<p>шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..</p>
<p>десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..</p>
</ul><p><b>Пример использования
</b><b>CSS
</b></p>
<p>Назначим для всех состояний ссылок цвета и сделаем так, чтобы ссылки во всех состояниях не имели подчеркивания, а в момент нахождения курсора над ссылкой появлялось подчеркивание.</p>
<table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;">
1
2
3
4
</td>
<td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;">
A:link
{
COLOR:
#0000CC
;
text-decoration
:
none
}
A:visited
{
COLOR:
black
;
text-decoration
:
none
}
A:active
{
COLOR:
red
;
text-decoration
:
none
}
A:hover
{
COLOR:
#6666FF
;
text-decoration
:
underline
}
</td>
</tr></tbody></table><p>Ссылка (link) - синий цвет (#0000CC);<br>- посещенная ссылка (visited) - черный цвет (black);<br>- активная ссылка (active) - красный цвет (red);<br>- ссылка, в момент нахождения курсора мыши над ней (hover) - светло-синий (#6666FF);</p><p>Используя CSS, мы может отменить или переназначить эффект для ссылок. Для этого используем свойство text-decoration, которое может иметь следующие значения: </p><p>none - без оформления <br>underline - подчеркивание <br>overline - черта сверху <br>line-through - перечеркивание <br>blink - мигание</p>
<p><b>Для чего это нужно?
</b></p>
<p>Вспомним недостатки использования таблиц:</p>
<ul><p>Излишний код. Приходится создавать много ячеек и строк, которые, в общем-то, не нужны.</p>
<p>Отсутствие возможности с точностью до пикселов расположить элемент на экране.</p>
<p>Отсутствие возможности "надвинуть" один элемент на другой.</p>
<p>Отсутствие возможности управлять отображением элементов (при переполнение, таблица просто увеличивается в размерах).</p>
</ul><p>Эти проблемы можно решить с помощью CSS и <DIV>.</p>
<p><b>Как это делается
</b></p>
<p><b>Тэг <DIV>
</b> - служит для группирования элементов в блок.</p>
<p>К сгруппированным элементам можно применить стили.</p>
<p>Посмотрим на примерах, как это делается:</p>
<p><b>Примеры. Выделение блока бордюром
</b></p>
<p>Границу можно легко разместить вокруг заголовка, списка, абзаца или их группы, поместив их в элемент div.</p>
<p>Прописываем стили для этого блока</p>
<p>Это можно использовать с разметкой следующим образом:</p>
<p><div style="border-color:#FF00FF; border-style:dotted; "></p>
<p>Содержимое этого элемента DIV будет заключено в прерывистую рамку.</p>
<p><div style="border:15px double #008000; "></p>
<p>Точное расположение объектов на странице относительно друг друга является, пожалуй, одной из самых сложных задач для веб-мастера. Написать HTML-код страницы так, чтобы все графические изображения и текстовые блоки были на своих местах не только на компьютере веб-мастера, но и у всех посетителей сайта, — настоящее искусство. Максимально крупный кегль, выставленный пользователем в своем браузере, может великолепное творение превратить в беспорядочное нагромождение теста и картинок.</p>
<p>Каскадные таблицы стилей (Cascading Style Sheets), декларируемые как средство полного контроля над HTML-разметкой, представляются в свете рассматриваемой проблемы, как хороший инструмент для организации точного расположения объектов на странице. CSS позволяют переопределить все свойства любого тега, назначаемые по умолчанию. Становится возможным выполнять выравнивание текстового блока относительно страницы и других текстовых блоков.</p>
<p>Использование CSS открывает новые специфические возможности, аналогов которым нет с стандартном HTML. Например, возможно установить межбуквенные и межстрочные расстояния для текста, точно указать положение рисунка на заднем плане без его мозаичного выкладывания по всему документу.</p>
<p>Вообще, Каскадные таблицы стилей позволяют задуматься о дизайне веб-страницы, об эстетической стороне восприятия информации пользователем, а не только об утилитарной.</p>
<p>С применением CSS растет скорость создания новой страницы. Стили, определенные один раз, могут быть использованы неограниченное число раз в любом месте документа. Важной деталью является возможность задать стили в отдельном файле в виде присвоения различных свойств тегам и создании пользовательских стилей. Переопределение стилей в таком файле вызовет автоматическое изменение стиля отображения всех объектов, для которых применялся измененный стиль.</p>
<p>Остановимся подробнее на способах применения CSS. Существует четыре способа применения стилей:</p>
<ol><li>Переопределение стиля в элементе разметки</li>
<li>Размещение описания стиля в заголовке документа с использованием тега style</li>
<li>Размещение ссылки на внешнее описание через тег link</li>
<li>Импорт стиля в документ</li>
</ol><p>доступного в CSS стиля к данному элементу разметки. При таком способе переопределения изменения коснутся только того элемента, за который отвечает данный тег и не будут отражаться на других элементах, также выводимых этим тегом в другом месте страницы. Позволяет применить нужный стиль к конкретному участку документа.</p>
<p>Переопределить стандартный элемент разметки или создать собственный с требуемыми свойствами отображения можно с помощью парного тега style, находящегося в заголовке документа перед тегом body. Также с помощью тега style создаются произвольные классы. Их использование допускает однократно задать одинаковые свойства отображения для разных тегов. Удобно, например, задавать одинаковый шрифт для текста и находящихся в нем гиперссылок. Если при этом не задан цвет и стиль подчеркивания, то эти параметры останутся для гиперссылок прежними и они останутся выделенными среди обычного текста.</p>
<p>Когда одни и те же стили используются на нескольких или всех страницах сайта, не обязательно определять их в каждом html-документе. Достаточно сохранить их в отдельном файле и ссылаться на него в каждом документе с помощью тега link, стоящего в элементе head (до тега body). Атрибут rel при этом должен иметь значение «stylesheet».</p>
<p>Возможно также произвести импорт стиля в документ. Отличие от ссылки на внешнее описание в том, что импорт стиля может быть произведен внутрь элемента style или внутрь внешнего файла с описанием стилей, задаваемого в теге link. Таким образом можно создать внешний файл для внешнего файла. Инструкция импорта стиля ставится перед всеми остальными описателями стилей, что делает возможным легко переопределить импортируемый стиль.</p>
<p>Но у любой технологии есть свои недостатки. Есть они и у технологии CSS. Точнее, больше всего недостатков видится в применении CSS. Это обусловлено неполной совместимостью CSS с различными браузерами даже последних версий и возникающего из-за этого отсутствия пропагандируемой в CSS точности отображения страницы в различных браузерах. Импорт стиля, например, поддерживается далеко не всеми браузерами. По этой причине многие веб-мастеры пока еще опасаются применения всех возможностей CSS используя только некоторые.</p>
<p>Блокировка кегля шрифта при отображении текста в браузере позволяет приобрести уверенность в точном расположении всех элементов страницы на компьютере пользователя, но лишает пользователя возможности пользователя выбрать удобный для чтения размер шрифта самостоятельно. Такой подход является, по существу, неуважением к посетителю сайта.</p>
<p>Часто про CSS говорят, что с их помощью легко менять дизайн всего сайта сразу. Для этого достаточно переопределить стили в файле стилей. Но настоящий дизайнер, решившийся на изменение дизайна сайта, никогда не остановится только на переделке отображения шрифтов.</p>
<p>Каскадные таблицы стилей — перспективная технология. Но многие веб-мастеры пока еще ограничиваются только применением CSS для изменения цвета гиперссылки при подведении к ней указателя мыши.</p>
<p>Хорошо
Плохо
</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<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>
<div class="single-popular">
<div class="single-popular-tit col-lg-12">
Популярное в рубрике:
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп"/ loading=lazy>
<div class="single-popular-item-tit">
Как объединить слои в фотошопе в один или соединить их в группу... </div>
<a href="/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Перенос контактов на новый телефон android"/ loading=lazy>
<div class="single-popular-item-tit">
Перенос контактов на новый телефон android </div>
<a href="/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Перенос контактов на новый телефон android">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе"/ loading=lazy>
<div class="single-popular-item-tit">
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note... </div>
<a href="/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Основные возможности Kaspersky Rescue Disk"/ loading=lazy>
<div class="single-popular-item-tit">
Основные возможности Kaspersky Rescue Disk </div>
<a href="/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Основные возможности Kaspersky Rescue Disk">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="sidebar col-lg-3 col-md-4 col-sm-12">
<div class="sidebar-wrp">
<div class="sidebar-wrp-title">Последние Статьи</div>
<div class="sidebar-wrp-des">
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Макбук не подключается к wifi Макбук не видит...</div>
<div class="clr"></div>
<a href="/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Как заработать на WebMoney</div>
<div class="clr"></div>
<a href="/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">"Супра", планшет: отзывы покупателей</div>
<div class="clr"></div>
<a href="/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Местонахождения судов в реальном времени</div>
<div class="clr"></div>
<a href="/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Лучшие программы для Android Запись звонков от...</div>
<div class="clr"></div>
<a href="/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Удаляем не читателей в Твиттере</div>
<div class="clr"></div>
<a href="/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Подключаем интернет на ноутбуке: все возможные...</div>
<div class="clr"></div>
<a href="/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Samsung Galaxy S IV – новый флагман...</div>
<div class="clr"></div>
<a href="/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">читать</a>
</div>
<div class="clr"></div>
</div>
</div>
<div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget">
</div>
</div>
<div id="ketena1" style="height:500px;width:260px;" align="center"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="/logo/logo.png" loading=lazy>
<div class="footer-contacts-tit">innovakon.ru<br>Мобильные телефоны и связь</div>
<div class="footer-soc">
<div class="footer-soc-wrp">
<div class="soc_w">
<a href="#" class="soc-link vk" target="_blank"></a>
<a href="#" class="soc-link fb" target="_blank"></a>
</div>
</div>
</div>
</div>
<div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12">
</div>
<div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;">
<ul>
<li><a href="">Редакция проекта</a></li>
<li><a href="">Реклама на сайте</a></li>
</ul>
<ul>
<li><a href="/feedback.html">Контакты</a></li>
<li><a href="/sitemap.xml">Карта сайта</a></li>
</ul>
</div>
</div>
</div>
<div class="copyright">© 2024 Мобильные телефоны и связь</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script>
<a id="scroll-to-top" href="#" title="Scroll to Top">Top</a>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} };
/* ]]> */
</script>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script>
<script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script>
</body>
</html>
, безусловно, способствовали разделению документов на некоторые логические блоки. Но многие авторы страниц использовали, да и по сей день продолжают использовать эти теги не по назначению: в связи со скудостью средств для оформления страницы теги заголовков, например, использовались для выделения таких элементов на странице, которые на самом деле заголовками не являлись. CSS же предоставляют достаточное количество средств оформления, что позволяет более точно следовать правилам логического форматирования и действительно отделять структуру страницы от ее визуального представления.Назначение стилей отдельным элементам страницы
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу
. Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице - достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега
, присвоив ему соответствующее значение. Синтаксис такой:
Таким образом, все абзацы на странице отображены так, как мы захотели, причем код не засорен тегами и их атрибутами. Представляете, какая экономия размера файла, если ваша страница состоит из большого количества текста!
Обратите внимание - когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.
В приведенном примере используется встраивание стиля непосредственно в тег документа - так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях - если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML, о которых мы поговорим далее.
Назначение стилей нескольким элементам одной страницы - создание внедренной таблицы стилей
Пока речь у нас шла о задании только одного стиля для одного элемента. А теперь мы научимся создавать именно таблицы стилей.
Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня - шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в <голове> страницы (в любом месте между тегами
и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:... ...
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.
Назначение стилей одновременно для нескольких страниц сайта
Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам одного сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным - .css).
Вот пример содержимого такого файла (например, my.css):
Body { font-family: "Times New Roman", serif; font-size: 12pt; color: darkgreen; } h1 { font-family: Arial, sans-serif; font-size: 16pt; color: green; font-weight: bold; } h2 { font-family: Arial, sans-serif; font-size: 14pt; color: greenyellow; font-weight: bold; font-style: italic; }
Обратите внимание: теги внутри файла таблицы стилей не используются - расширение.css явно указывает броузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тегами
и следующую строку:... ...
В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла - .css (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в <голове> страницы внутри тега-контейнера ...
Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер ...
...Вопрос журналиста
Ответ интервьюируемого
...В приведенном примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным, курсивного начертания, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов черного цвета. Важно не забывать прописывать параметр class различным классам абзацев непосредственно в коде html. Вы можете создавать любое количество классов для любых элементов страницы.
Селектор id
Возьмем другой случай. Предположим, вы хотите создать на странице какие-либо уникальные элементы, к которым в дальнейшем планируете обращаться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление посредством CSS. На этот случай в каскадных таблицах стилей имеется возможность присвоения уникальным элементам идентификаторов (id). Наиболее часто идентификаторы используются для элементов форм, которые в спецификации HTML 4.0 имеют полную либо ограниченную поддержку CSS (в зависимости от элемента). Вот пример назначения идентификатора и правил CSS таким элементам:
... ... ... ...
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов страницы. Это может быть полезно для обращения к элементу из программы на языке JavaScript и изменения стиля его отображения в ответ на действия пользователя, что позволяет создавать различные динамические эффекты.
Контекстные селекторы
Допустим, мы создали таблицу стилей, согласно которой все заголовки первого уровня на странице отображаются красным цветом на сером фоне, все абзацы - зеленым цветом на желтом фоне, а все выделенные посредством тега 1 слова внутри абзацев - черным цветом на серебристом фоне. Код таблицы стилей, как вы уже догадались, при этом выглядит так:
H1 { color: red; background-color: gray; } p { color: green; background-color: yellow; } em { color: black; background-color: silver; }
Предположим, мы хотим также выделить какие-то слова в заголовке посредством того же тега , но нас не устраивает появление черного цвета текста на серебристом фоне в заголовке. Мы хотим выделить слова в заголовке бордовым цветом на сером фоне. Для этого существуют контекстные селекторы. Запись правила, которое мы для этого добавим в таблицу стилей, будет выглядеть так:
H1 em { color: #CC0000; background-color: gray; }
А вот пример кода страницы с использованием этого контекстного селектора:
... ... ...
Это - заголовок первого уровня с выделенным словом
А это - обычный абзац с выделенными словами
...На сегодня это все. В следующий раз мы поговорим о правилах форматирования блоковых элементов страницы, о позиционировании элементов и о других интересных и полезных возможностях, реализуемых с использованием CSS.
Наверное всем известно, что HTML задает структуру документа, а CSS (Cascading Style Sheets, каскадные таблицы стилей) отвечает за оформление веб-страницы, положение и вид элементов. Так сложилось, что HTML и CSS отдельно не используются. Любая веб-страница это, по сути, комбинация HTML-кода и CSS-кода. Без основных знаний этих
технологий не получится грамотно сверстать ни один документ. Многие из нас изучали эти технологии подробнее. Но лично мне до конца так и не удалось «постичь» все истины и возможности CSS. Далее я постараюсь выделить самые важные моменты, которые нужно знать о CSS.Что такое каскадные таблицы стилей?
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Посмотрите на рисунки ниже, чтобы понять разницу:
Исходный код такого документа имеет вид:
1
2
3
4
5
6
7
8
9
10
11
12
13
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns= >
<head >
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
<title > Флексагон</ title >
<link rel = "stylesheet" href = "style.ess" type = "text/css" / >
</ head >
<body >
<h1 > Флексагок</ h1 >
<р> Флексагок представляет собой бумажную фигуру, которая имеет три и более стороны. Поначалу кажется, что это невозможно, но вспомните ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги, и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. Перегибая флексагон, по очереди будем наблюдать все его поверхности.</ р>
</ body >
</ html >Сам код HTML никаких изменений не претерпел и единственное добавление - это строка . Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано ниже:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21body {
font-size : llpt;
background-color : #f0f0f0 ; /* Цвет фона веб-страницы */
color : #333 ; /* Цвет основного текста */
}
h1 {
color : #а52 а2 а; /* Цвет заголовка */
font-size : 24pt ; /* Размер шрифта в пунктах */
font-family : Georgia, Times, serif ; /* Семейство шрифтов */
font-weight : normal ; /* Нормальное начертание текста */
}
p {
text-align : justify ; /* Выравнивание по ширине */
margin-left : бОрх; /* Отступ слева в пикселах */
margin-right : Юрх; /* Отступ справа в пикселах */
border-left : lpx solid #999 ;
border -bottom : lpx solid #999 ;
padding -left : Юрх;
padding -bottom : 1Opx;
}В файле style.css как раз и описаны все параметры оформления таких тегов как, <body > ,
и <p >
Заметьте, что сами теги в коде HTML пишутся как обычно. Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объема повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера . Подобные стили применяются при использовании «чистого» HTML.
Стиль пользователя. Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.
Если возникает конфликт при изменении стиля одного и того элемента документа, то стиль пользователя имеет самый высокий приоритет, далее следует стиль автора и стиль браузера.
Как добавить стили на страницу?
Добавить CSS стили на страницу можно несколькими способами:
Связанные стили
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер
.Подключить эти стили можно следующим образом:
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>Вообще, изучение приемов верстки веб-страниц это сложная тема, в которой порой приходится изучать кучу сопутствующих технологий и смиряться с особенностями реализации различных браузеров. Готовьтесь к трудностям.</p> <p>По материалам книги Влада Моржевича «Верстка веб-страниц». Очень советую эту книгу подойдет как справочник и учебник.</p> <p><b>Для чего нужны таблицы стилей? </b></p> <p>Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).</p> <p>Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS:</p> <ul><p>Проблема позиционирования (разметка страниц). Хотя для этого стали использовать таблицы (они небыли для этого предназначены изначально), они не решили всех проблем. Не возможно осуществить следующее:<br>- Нельзя задать фиксированные размеры какого-нибудь блока. Например, текстовый блок будет разъезжаться при переполнении (даже если он в таблице). <br>- Нельзя задать фиксированные координаты положения блока на странице.<br>- Нельзя наложить один блок на другой. Например, попробуйте надвинуть картинку поверх таблицы или другой картинки.</p> <p>Вторая проблема заключалась в том, что приходилось каждый раз задавать на страницах размер и цвет шрифта, свойства ячеек таблицы и т.д. Это сильно увеличивало размеры страницы, а значит, она медленнее загружается. В случае если вам захотелось изменить цвет или размер шрифта, вам пришлось бы редактировать все страницы.</p> <p>Третья проблема заключалась в том, что все браузеры имеют индивидуальные настройки. Например, в браузере можно увеличить шрифт, что приведет к искажению всей страницы.</p> </ul><p>С помощью CSS эти проблемы можно решить.</p> <p><b>Способы применения CSS </b></p> <p>Существует три способа применения таблиц стилей:</p> <ul><p><b>Внутренние таблицы стилей </b> (Inline Style Sheets) - при помощи специального атрибута помещаются прямо в HTML теги.<br>Пример HTML:</p> <p>Пример CSS:</p> <p>Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль.<br>При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.</p> <p><b>Глобальные таблицы стилей </b> (Global Style Sheets) - определяют стиль элементов во всем документе.<br>Для этого используется тег <STYLE type="text/css">. Он размещается в заголовке документа <head> . </p> <p>Теперь эти стили можно применять в любом месте html-кода. Для этого используются следующие конструкции:</p><p><h1> Этот заголовок написан крупным красным курсивом </h1><br>Вот <font class="blue"> это </font> слово - синие.<br></body><br></html></p><p>В данном примере все элементы H1 будут написаны крупным красным курсивом, все элементы с указанным классом BLUE будут синими.</p> <p><b>Связанные таблицы стилей </b> (Linked Style Sheets) - могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.</p> </ul><p>Пример внешнего файла: </p><p>Файл main.css </p> <table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;"> 1 2 3 4 </td> <td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;"> body { background : black ; font-size : 9pt ; color : red ; font-family :Arial Black} .base { color : blue ; font-style : italic } h1 { color : white } #bold { font-weight : bold } </td> </tr></tbody></table> <p>Файл Index.html </p> <p>Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им.</p> <p><b>Почему каскадные? </b></p> <p>Каскадность заключается в том, что стили могут переопределяться. Приведенный ниже список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный.</p> <p>Способы внедрения стилей на странице:</p> <ul><p>использование отдельного стилевого файла и вставка его при помощи тега <link></p> <p>описание стиля в заголовке документа</p> <p>применения стиля как параметра в теге.</p> </ul><p>Например, мы определили во внешнем стилевом файле, что текст в теге <p>Должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p>Должен быть написан шрифтом в 12 пунктов, то текст будет выведен шрифтом 12 пунктов - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.</p> <p>Для чего это нужно? Предположим, что для всех ссылок в заголовке на нашей страничке определен следующий стиль:</p> <p>И, следовательно, любой текст, который является гиперссылкой, автоматически становится красным и перестает быть подчеркнутым. И вот мы решили в конце странички указать ссылку на сайт автора странички, но сделать это не сильно заметно, чтобы не акцентировать на этом внимание. Сделать это нам нужно всего лишь в одном месте странички и определять для этого дополнительный класс нецелесообразно. Достаточно локально переопределить цвет ссылки:</p> <p>Сделали мы это при помощи атрибута style, а он действует лишь в пределах того тега, в котором был определен.</p> <p>Тег определяет некую область, к которой мы можем применить стиль.</p> <p><b>Наследование </b></p> <p>Некоторые значения наследуются дочерними элементами (тегами).</p> <p>Предположим, что имеется элемент H1, в котором расположен элемент выделения EM:</p> <p>Если для элемента EM не задан цвет, то слово "очень" унаследует цвет родительского элемента. Таким образом, если для H1 определен синий цвет, то и элемент EM будет представлен, синим цветом.</p> <p>Определение свойств стиля, используемого в документе по умолчанию, можно осуществить в корневом элементе дерева данного документа. Например, в языке HTML эту возможность можно реализовать с помощью элементов HTML или BODY.</p> <p>Пример(ы):</p> <p>Например, свойство "color" является наследуемым, поэтому все потомки элемента BODY унаследуют цвет "black": </p> <p>и фрагмент документа: </p> <p>Свойство "font-size" элемента H1 будет иметь вычисленное значение "12pt" (120% от 10pt, являющегося значением свойства родительского элемента). Так как вычисляемое значение свойства "font-size" является наследуемым, то элемент EM также будет иметь вычисленное значение "12pt".</p> <p><b>Синтаксис CSS </b></p> <p>Все объявления CSS (официально они называются "селекторы") записываются в фигурных скобках:</p> <p>ТЕГ:псевдокласс.класс { характеристика1: значение1; характеристика2: значение2}</p> <p>Описание каждого класса делается при помощи конструкции, подобной этой:</p> <table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;"> 1 </td> <td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;"> .small { font-size : 9pt ; } </td> </tr></tbody></table><p>Сначала указывается имя класса - оно может быть произвольным, но желательно все-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются все необходимые параметры для данного класса. Параметры отделяются друг от друга точкой с запятой. Вот еще один пример, в котором используется более длинное описание:</p> <table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;"> 1 </td> <td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;"> .small { font-size : 9pt ; color : #eeeeee ; text-align : center ; } </td> </tr></tbody></table><p><b>Универсальный класс - </b>может быть применен к любому тегу, имя класса начинается с точки.</p> <p><b>Теговые классы </b><b> - </b>может быть применен к конкретному тегу, имя класса начинается с указания тега, после точки записывается имя класса.</p> <table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;"> 1 </td> <td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;"> p.small { font-size : 9pt ; } </td> </tr></tbody></table><p>Класс, определенный таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован:</p> <p>Мы можем определять параметры не только для одного тега, но и сразу для нескольких. Для этого в определении стиля достаточно перечислить их через запятую:</p> <table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;"> 1 </td> <td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;"> P, TD, LI { font-size : 9pt ; color : green ; } </td> </tr></tbody></table><p>В случае переопределения существующих тегов, в описании стиля можно указывать не все параметры, а лишь те из них, которые мы хотим изменить. Все остальные параметры примут значения по умолчанию, которые для разных тегов различны.</p> <p><b>Псевдоклассы </b></p> <p>В CSS есть такое понятие как псевдокласс. В отличие от обычного класса, действие псевдокласса распространяется не на весь текст, к которому применен данный стиль, а лишь на его часть и возможно лишь в определенном состоянии. Чтобы было понятнее, давайте разберем эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора. Эффект достаточно распространенный, и его можно наблюдать в том числе и на этом сайте. Вот фрагмент таблицы стилей, который позволяет достигать вышеописанного эффекта:</p> <table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;"> 1 2 </td> <td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;"> a { text-decoration : none ; } a:hover { text-decoration : underline ; } </td> </tr></tbody></table><p>Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.</p> <p>А вот и другой пример псевдокласса - определение буквицы вначале абзаца:</p> <table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;"> 1 </td> <td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;"> p:first-letter { font-size : 200% ; font-weight : bold ; } </td> </tr></tbody></table><p>Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.</p> <p><b>Комментарии </b></p><p>Как и в любом достаточно сложном языке, при создании таблицы стилей можно пользоваться комментариями.</p> <p>Для небольших сайтов эта возможность вам вряд ли пригодится, а вот при создании сложных, многоуровневых таблиц стилей комментарии могут пригодиться. Кстати, здесь будет уместно привести золотое правило - чем понятнее названа переменная (в данном случае имя класса), тем меньше комментариев необходимо.</p> <p><b>Некоторые параметры CSS </b></p> <p><b>Некоторые параметры шрифта </b></p><p>font-weight: [ bold | normal | number] - жирность шрифта<br>font-style: - наклон шрифта<br>font-size: number - размер шрифта<br>font-family: name - гарнитура шрифта<br>color: number - цвет шрифта<br>background-color: number - цвет подложки<br>background: url - текстурная подложка</p> <p><b>Некоторые параметры абзаца </b></p><p>text-align: [ left | right | center | justify] - выравнивание<br>text-indent: number - отступ красной строки<br>line-height: number - интерлиньяж<br>letter-spacing: number - трекинг</p><p>padding-left: number - отступ от текста слева<br>padding-right: number - отступ от текста справа<br>padding-top: number - отступ от текста сверху<br>padding-bottom: number - отступ от текста снизу</p><p>margin-left: number - отступ от границы слева<br>margin-right: number - отступ от границы справа<br>margin-top: number - отступ от границы сверху<br>margin-bottom: number - отступ от границы снизу</p> <p><b>Единицы измерения в CSS<br></b></p> <p>В свойствах, которым требуется указание размеров, можно использовать несколько способов для их задания:</p> <ul><p>относительный размер в процентах (%)</p> <p>относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)</p> <p>абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), средней шириной буквы "m" (em), средней шириной буквы "x" (eх)</p> <p>абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in)</p> <p>абсолютный в пикселях (px)</p> </ul><p><b>Задание цвета в CSS<br></b></p> <p>Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:</p> <ul><p>при помощи названия цвета: yellow, red, green, grey,..</p> <p>шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..</p> <p>десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..</p> </ul><p><b>Пример использования </b><b>CSS </b></p> <p>Назначим для всех состояний ссылок цвета и сделаем так, чтобы ссылки во всех состояниях не имели подчеркивания, а в момент нахождения курсора над ссылкой появлялось подчеркивание.</p> <table class="css" style="border-collapse: collapse; width: 100%;"><tbody><tr class="li1"><td style="width: 1px; background: #f0f0f0; vertical-align: top; color: #676f73; border-right: 1px dotted #dddddd; font-size: 12px; text-align: right;"> 1 2 3 4 </td> <td style="margin: 0; background: none; vertical-align: top; padding: 0px 4px; font-size: 12px;"> A:link { COLOR: #0000CC ; text-decoration : none } A:visited { COLOR: black ; text-decoration : none } A:active { COLOR: red ; text-decoration : none } A:hover { COLOR: #6666FF ; text-decoration : underline } </td> </tr></tbody></table><p>Ссылка (link) - синий цвет (#0000CC);<br>- посещенная ссылка (visited) - черный цвет (black);<br>- активная ссылка (active) - красный цвет (red);<br>- ссылка, в момент нахождения курсора мыши над ней (hover) - светло-синий (#6666FF);</p><p>Используя CSS, мы может отменить или переназначить эффект для ссылок. Для этого используем свойство text-decoration, которое может иметь следующие значения: </p><p>none - без оформления <br>underline - подчеркивание <br>overline - черта сверху <br>line-through - перечеркивание <br>blink - мигание</p> <p><b>Для чего это нужно? </b></p> <p>Вспомним недостатки использования таблиц:</p> <ul><p>Излишний код. Приходится создавать много ячеек и строк, которые, в общем-то, не нужны.</p> <p>Отсутствие возможности с точностью до пикселов расположить элемент на экране.</p> <p>Отсутствие возможности "надвинуть" один элемент на другой.</p> <p>Отсутствие возможности управлять отображением элементов (при переполнение, таблица просто увеличивается в размерах).</p> </ul><p>Эти проблемы можно решить с помощью CSS и <DIV>.</p> <p><b>Как это делается </b></p> <p><b>Тэг <DIV> </b> - служит для группирования элементов в блок.</p> <p>К сгруппированным элементам можно применить стили.</p> <p>Посмотрим на примерах, как это делается:</p> <p><b>Примеры. Выделение блока бордюром </b></p> <p>Границу можно легко разместить вокруг заголовка, списка, абзаца или их группы, поместив их в элемент div.</p> <p>Прописываем стили для этого блока</p> <p>Это можно использовать с разметкой следующим образом:</p> <p><div style="border-color:#FF00FF; border-style:dotted; "></p> <p>Содержимое этого элемента DIV будет заключено в прерывистую рамку.</p> <p><div style="border:15px double #008000; "></p> <p>Точное расположение объектов на странице относительно друг друга является, пожалуй, одной из самых сложных задач для веб-мастера. Написать HTML-код страницы так, чтобы все графические изображения и текстовые блоки были на своих местах не только на компьютере веб-мастера, но и у всех посетителей сайта, — настоящее искусство. Максимально крупный кегль, выставленный пользователем в своем браузере, может великолепное творение превратить в беспорядочное нагромождение теста и картинок.</p> <p>Каскадные таблицы стилей (Cascading Style Sheets), декларируемые как средство полного контроля над HTML-разметкой, представляются в свете рассматриваемой проблемы, как хороший инструмент для организации точного расположения объектов на странице. CSS позволяют переопределить все свойства любого тега, назначаемые по умолчанию. Становится возможным выполнять выравнивание текстового блока относительно страницы и других текстовых блоков.</p> <p>Использование CSS открывает новые специфические возможности, аналогов которым нет с стандартном HTML. Например, возможно установить межбуквенные и межстрочные расстояния для текста, точно указать положение рисунка на заднем плане без его мозаичного выкладывания по всему документу.</p> <p>Вообще, Каскадные таблицы стилей позволяют задуматься о дизайне веб-страницы, об эстетической стороне восприятия информации пользователем, а не только об утилитарной.</p> <p>С применением CSS растет скорость создания новой страницы. Стили, определенные один раз, могут быть использованы неограниченное число раз в любом месте документа. Важной деталью является возможность задать стили в отдельном файле в виде присвоения различных свойств тегам и создании пользовательских стилей. Переопределение стилей в таком файле вызовет автоматическое изменение стиля отображения всех объектов, для которых применялся измененный стиль.</p> <p>Остановимся подробнее на способах применения CSS. Существует четыре способа применения стилей:</p> <ol><li>Переопределение стиля в элементе разметки</li> <li>Размещение описания стиля в заголовке документа с использованием тега style</li> <li>Размещение ссылки на внешнее описание через тег link</li> <li>Импорт стиля в документ</li> </ol><p>доступного в CSS стиля к данному элементу разметки. При таком способе переопределения изменения коснутся только того элемента, за который отвечает данный тег и не будут отражаться на других элементах, также выводимых этим тегом в другом месте страницы. Позволяет применить нужный стиль к конкретному участку документа.</p> <p>Переопределить стандартный элемент разметки или создать собственный с требуемыми свойствами отображения можно с помощью парного тега style, находящегося в заголовке документа перед тегом body. Также с помощью тега style создаются произвольные классы. Их использование допускает однократно задать одинаковые свойства отображения для разных тегов. Удобно, например, задавать одинаковый шрифт для текста и находящихся в нем гиперссылок. Если при этом не задан цвет и стиль подчеркивания, то эти параметры останутся для гиперссылок прежними и они останутся выделенными среди обычного текста.</p> <p>Когда одни и те же стили используются на нескольких или всех страницах сайта, не обязательно определять их в каждом html-документе. Достаточно сохранить их в отдельном файле и ссылаться на него в каждом документе с помощью тега link, стоящего в элементе head (до тега body). Атрибут rel при этом должен иметь значение «stylesheet».</p> <p>Возможно также произвести импорт стиля в документ. Отличие от ссылки на внешнее описание в том, что импорт стиля может быть произведен внутрь элемента style или внутрь внешнего файла с описанием стилей, задаваемого в теге link. Таким образом можно создать внешний файл для внешнего файла. Инструкция импорта стиля ставится перед всеми остальными описателями стилей, что делает возможным легко переопределить импортируемый стиль.</p> <p>Но у любой технологии есть свои недостатки. Есть они и у технологии CSS. Точнее, больше всего недостатков видится в применении CSS. Это обусловлено неполной совместимостью CSS с различными браузерами даже последних версий и возникающего из-за этого отсутствия пропагандируемой в CSS точности отображения страницы в различных браузерах. Импорт стиля, например, поддерживается далеко не всеми браузерами. По этой причине многие веб-мастеры пока еще опасаются применения всех возможностей CSS используя только некоторые.</p> <p>Блокировка кегля шрифта при отображении текста в браузере позволяет приобрести уверенность в точном расположении всех элементов страницы на компьютере пользователя, но лишает пользователя возможности пользователя выбрать удобный для чтения размер шрифта самостоятельно. Такой подход является, по существу, неуважением к посетителю сайта.</p> <p>Часто про CSS говорят, что с их помощью легко менять дизайн всего сайта сразу. Для этого достаточно переопределить стили в файле стилей. Но настоящий дизайнер, решившийся на изменение дизайна сайта, никогда не остановится только на переделке отображения шрифтов.</p> <p>Каскадные таблицы стилей — перспективная технология. Но многие веб-мастеры пока еще ограничиваются только применением CSS для изменения цвета гиперссылки при подведении к ней указателя мыши.</p> <p>Хорошо Плохо </p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <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> <div class="single-popular"> <div class="single-popular-tit col-lg-12"> Популярное в рубрике: </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп"/ loading=lazy> <div class="single-popular-item-tit"> Как объединить слои в фотошопе в один или соединить их в группу... </div> <a href="/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп">читать</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Перенос контактов на новый телефон android"/ loading=lazy> <div class="single-popular-item-tit"> Перенос контактов на новый телефон android </div> <a href="/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Перенос контактов на новый телефон android">читать</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе"/ loading=lazy> <div class="single-popular-item-tit"> Самсунг Галакси перезагружается сам по себе — Решения Galaxy note... </div> <a href="/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе">читать</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Основные возможности Kaspersky Rescue Disk"/ loading=lazy> <div class="single-popular-item-tit"> Основные возможности Kaspersky Rescue Disk </div> <a href="/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Основные возможности Kaspersky Rescue Disk">читать</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div> <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">Последние Статьи</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Макбук не подключается к wifi Макбук не видит...</div> <div class="clr"></div> <a href="/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Как заработать на WebMoney</div> <div class="clr"></div> <a href="/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">"Супра", планшет: отзывы покупателей</div> <div class="clr"></div> <a href="/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Местонахождения судов в реальном времени</div> <div class="clr"></div> <a href="/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Лучшие программы для Android Запись звонков от...</div> <div class="clr"></div> <a href="/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Удаляем не читателей в Твиттере</div> <div class="clr"></div> <a href="/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Подключаем интернет на ноутбуке: все возможные...</div> <div class="clr"></div> <a href="/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy S IV – новый флагман...</div> <div class="clr"></div> <a href="/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">читать</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy> <div class="footer-contacts-tit">innovakon.ru<br>Мобильные телефоны и связь</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">Редакция проекта</a></li> <li><a href="">Реклама на сайте</a></li> </ul> <ul> <li><a href="/feedback.html">Контакты</a></li> <li><a href="/sitemap.xml">Карта сайта</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Мобильные телефоны и связь</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="Scroll to Top">Top</a> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> </body> </html>