Поддержка каскадированных таблиц стилей (CSS) в Internet Explorer 3 и Netscape 4 стала важным шагом в развитии стандартов веб. Вместо описания содержания и внешнего вида веб-страницы в HTML вы можете использовать CSS. При этом содержание и структура страницы описывается в HTML, а инструкции по отображению страницы пишутся с использованием таблицы стилей.
Огромное преимущество стилей в том, что если вам надо изменить вид какого-либо элемента на странице, вроде цвета заголовка или полей вокруг изображений, вам не придется вносить изменения в каждую строку HTML – вы просто меняете в одном месте стиль, и вся страница, использующая таблицу стилей, изменяется в соответствии с вашими установками. Многие разработчики страниц не пользуются CSS, поскольку не все броузеры их поддерживают. (См. раздел "Поддержка броузера для CSS".) Но сейчас, когда самые распространенные броузеры поддерживают CSS, можно начинать пользоваться их преимуществами.
Одним из правил каскадированной таблицы является селектор – тэг HTML, сопровождаемый параметрами CSS в скобках, отделенный точкой с запятой.
| Пример | |
|---|---|
body {background-color:darkblue;}
|
Цвет фона темно-синий |
Стили называются каскадироваными потому, что многие из них применяются не только к указанному вами элементу, но и к под-элементам. Например, когда вы устанавливаете стиль шрифта для таблицы, ячейки и параграфы тоже приобретают этот стиль, вам не надо указывать для них стиль отдельно. (Впрочем, вы всегда можете использовать другие правила стиля для объектов внутри таблицы.)
| Пример | |
|---|---|
table {font-size:smaller;}
|
Шрифт в таблице меньше чем в остальной странице |
Некоторые характеристики, такие как поля и задний фон, не наследуются.
| Пример | |
|---|---|
table { margin:8px; }
|
Вокруг краев таблицы существует дополнительное пространство в 8 пикселей, но объекты внутри таблицы не имеют дополнительных полей |
Чтобы установить стиль для нескольких селекторов, используйте запятые.
| Пример | |
|---|---|
h1,h2,h3,h4,h5,h6 {color:white;}
|
Цвет текста всех заголовков – белый |
Вы можете устанавливать стили, применяемые в конкретном контексте – стили объектов внутри других объектов.
| Пример | |
|---|---|
table a {color:maroon;}
|
Текст гиперссылок в таблице – темно-красный |
В CSS используется несколько единиц длины, наиболее важные – это px (пиксели), pt (пункты), in (дюймы), mm (миллиметры), em (ширина заглавной "M" в данном шрифте) и ex (высота маленькой "x" в данном шрифте).
| Пример | |
|---|---|
body,td {font-size:16px;}
|
Размер шрифта для обычного текста ровно 16 пикселей в высоту |
body {margin:.5in;}
|
Страница имеет поля в пол-дюйма |
h1,h2,h3
{border:1mm solid gray;
padding:.5em;}
|
Заголовки имеют серую границу толщиной в 1 мм, и расстояние между текстом и границами в ячейке зависит от размера шрифта |
Вы можете установить правила стиля для ваших страниц, используя файл (.css) внешней таблицы стилей. Свяжите таблицу с вашим HTML, поместив тэг <LINK> в раздел <HEAD>.
| Пример | |
|---|---|
<link rel=stylesheet href="stylesht.css"type="text/css"> |
Правила стиля, содержащиеся в файле stylesht.css, применяются к этой странице |
Вы можете установить правила стиля для одной страницы, используя блок <STYLE> в файле HTML вашей страницы.
| Пример | |
|---|---|
<style>
<!--
body {background-color:gray;}
-->
</style>
|
Устанавливает правила стилей для этой страницы |
Чтобы установить стиль для одного тэга HTML, используют атрибут стиля.
| Пример | |
|---|---|
<table style= "background-color:blue;color:white;"> |
Текст белый на синем фоне только в этой таблице |
Вы можете создать выборочные классы в вашей таблице стилей и затем применять их на странице. Например, вы можете создать класс quote для квотирования. Перед классамми ставьте точку, а перед ID – значок номера (#).
| Пример | |
|---|---|
quote {
margin-left:20px;
margin-right:20px;}
|
Создает класс quote для использования в атрибуте class вашего HTML |
#bigred {
text-transform:uppercase;
color:red;}
|
Создает стиль ID с именем bigred для использования в атрибуте id вашего HTML |
Чтобы применить класс к тэгу, используйте атрибут class ; для ID используйте атрибут id.
| Пример | |
|---|---|
<p class=quote>I hate quotations; tell me what you know.</p> |
Применяет класс стилей quote к абзацу (и элементам внутри него) |
<h1 id=bigred>Warning</h1> |
Применяет ID bigred к заголовку |
Цвета указываются так же, как в HTML, используя RGB-номера: #000000 (черный), #ffffff (белый), #006600 (темно-зеленый).
| Пример | |
|---|---|
h1,h2 {color:#006600;}
|
Оба заголовка темно-зеленые |
Если вы не любите пользоваться номерами, выберите название цвета из ста с лишним названий цветов, таких как darksalmon, seagreen и papayawhip. Но 4-ая и более ранние версии броузеров распознают очень небольшое количество имен. (Полный список имен цветов см. на msdn.microsoft.com/
| Пример | |
|---|---|
h1,h2 {color:darkgreen;}
|
Оба заголовка темно-зеленые |
Указывает цвет текста и других элементов
| Пример | |
|---|---|
body,p,td {color:#000066;}
|
Весь текст на странице темно-синий |
Указывает цвет фона для любого элемента
| Пример | |
|---|---|
table {
color:white;
background-color:maroon;}
|
Таблица отображает белый текст на темно-красном фоне |
Указывает фоновый рисунок для страницы или другого блока (например, таблицы или ячейки). Использует формат url(imagefile), чтобы указать адрес или имя файла.
| Пример | |
|---|---|
body {
background-image:url(estar.jpg);
}
|
Файл estar.jpg (в той же папке, что и страница) появляется в качестве фона |
table {background-image:
url(http://chillbot.com/bot.gif);}
|
Файл |
Определяет возможность повторения фонового рисунка, если он слишком мал, чтобы занять все пространство. Установите repeat, repeat-x, repeat-y или no-repeat.
Определяет, должен ли фон прокручиваться вместе со страницей. Установите scroll или fixed.
Устанавливает расположение рисунка относительно краев окна и других объектов. Укажите left, center или right, а затем top, middle или bottom.
| Пример | |
|---|---|
table {
background-image:url(war.gif);
background-repeat:no-repeat;
background-position:center top;}
|
Таблица отображает рисунок, выровненный сверху страницы |
Устанавливает все пять предыдущих свойств. Установите свойства в следующем порядке.
| Пример | |
|---|---|
body {
background:silver url(war.gif)
no-repeat fixed center top;}
|
Фон страницы серебристо-серый, с непрокручивающимся рисунком, выровненным по верху страницы |
Устанавливает курсивный (italic), наклонный (
Может быть полужирным (bold), более жирным (bolder), светлым (lighter) или обычным (normal).
Может быть xx-small, x-small, small, medium, large, x-large, xx-large ; larger или smaller ; или точной высоты в пикселях и пунктах; или в процентах от наследуемого размера шрифта.
| Пример | |
|---|---|
body,td {font-size:14pt;}
h1 {font-size:x-large;color:blue;}
h2 {font-size:x-large;}
h3 {font-size:large;}
.footer {font-size:13px;}
|
Размер шрифта для обычного текста 14 пунктов, шрифт заголовков чуть-чуть больше, а размер шрифта в элементах класса footer-class точно 13 пикселей в высоту |
Устанавливает высоту каждой строки текста. Указывается или конкретная высота, или процент от высоты по умолчанию.
| Пример | |
|---|---|
compact {line-height:95%}
|
Строки в элементах класса compact ближе друг к другу, чем обычно |
Выберите семейство. Чтобы поддерживать системы с различными шрифтами, предусмотрите альтернативу (включая serif, sans-serif и
| Пример | |
|---|---|
body,td {font-family:Verdana,
Arial,Helvetica,sans-serif;}
|
Страница использует шрифт Verdana, если он доступен; иначе используется Arial или |
.typewriter {font-family:"Courier
New",Courier,monospace;}
|
Текст в элементе класса |
Устанавливает предыдущие пять свойств (в порядке, обозначенном ниже). Если вы устанавливаете высоту строки, это свойство должно стоять после размера шрифта, отделенное слэшем (/).
| Пример | |
|---|---|
body,td {font:12pt/14pt "Times New
Roman",Times,serif;}
|
Страница использует Times New Roman или другой шрифт с засечками размером 12 пунктов с высотой строки 14 пунктов |
h1 {font:italic bold 18pt Arial
sans-serif;}
|
H1-заголовки используют жирный курсивный шрифт Arial размером 18 пунктов или шрифт без засечек по умолчанию |
Можно установить подчеркивание (underline), линию над текстом (overline), зачеркивание (line-through) или none.
Позволяет вам регулировать расстояние между символами. Указывается положительное или отрицательное значение длины, или процент от существующей разбивки.
Можно установить center, justify, right, или left. Используется для полей, рисунков, таблиц и других объектов также как и текст.
Можно установить baseline, sub, super, top, middle, bottom, text-top, text-bottom, или auto. Используется для рисунков, таблиц и других объектов также как и текст.
Делает отступ необходимой длины в первой строке каждого параграфа.
Устанавливает peгистр. Можно установить capitalize, lowercase, none.
Cелекторы псевдо-элементов используются для специального форматирования первой буквы элемента или всей первой строки.
| Пример | |
|---|---|
p:first-letter {float:left;
font-size:32pt;line-height:28pt;
padding-right:5px;}
|
Создает буквицу (большую заглавную букву, вокруг которой размещается текст) в начале каждого параграфа |
.fancy:first-line {
font-size:larger;
letter-spacing:1pt;}
|
Первая строка каждого параграфа или заголовка, относящегося к классу fancy, имеет больший размер |
Чтобы управлять отображением гиперссылок на вашей странице, установите параметры тэга <A>, такие как color, font-weight и text-decoration.
| Пример | |
|---|---|
a { color:#993300;font-weight:bold;
text-decoration:none;}
|
Гиперссылки не подчёркнуты и отображаются полужирным, темно-красным шрифтом |
Используя селекторы a:hover, чтобы создать эффект ролловера, когда посетитель проводит мышкой по гиперссылке.
| Пример | |
|---|---|
a : link {color:darkslateblue;}
a : visited {color:steelblue;}
a : active {color:hotpink;}
a : hover {color:tomato;}
|
Гиперссылка меняет цвет, если она была использована или если посетитель проводит по ней мышью |
Исходя из блочной модели CSS, каждый элемент блока – таблицы, ячейки, параграфы и рисунки – имеют поля, заполнение и границы, которыми вы можете управлять. Функции полей работают не во всех броузерах; в Netscape 4 лучше вообще не использовать параметры полей.
Поля представляют собой пространство вокруг границ объекта. Они прозрачны, поэтому их цвет соответствует цвету заднего фона объекта. Для большинства объектов поля по умолчанию равны нулю; впрочем, текстовые элементы, такие как параграфы и заголовки, имеют по умолчанию поля сверху и снизу.
Когда элементы, имеющие поля, следуют один за другим вертикально, пространство между ними не является суммой их верхнего и нижнего полей; оно сливается в большее из двух полей. Инструментами side-by-side поля добавляются для создания большего пространства. Вы можете указать отрицательную величину поля; таким образом, вы уменьшите пространство, занимаемое полями.
Установите расстояние между объектом (или его границей) и смежным объектом или краем окна или ячейки. Используйте margin, чтобы установить сразу все четыре поля.
| Пример | |
|---|---|
body {margin:0;}
|
Страница находится в верхнем левом углу окна броузера |
.quote {
margin-left:.25in;
margin-right:.25in;}
|
Абзацы класса quote отступают на четверть дюйма от краев окна |
h1,h2,h3 {margin-bottom:6px;}
p {
margin-top:6px;
margin-bottom:6px;}
ul , ol {
margin-top:8px;
margin-bottom:18px;}
li {
margin-top:0px;
margin-bottom:4px;}
|
Страница разбита более равномерно: заголовки и абзацы ближе друг к другу, пункты списка разделены небольшими отступами |
img {float:right;margin-left:10px;}
|
Рисунки выровнены справа; текст огибает их слева, но он отделен от них как минимум десятью пикселами |
Устанавливает расстояние между абзацем или другим элементом и его границей
Может быть thin, medium, thick, или exact width. (Установка этих параметров не обеспечит границу, пока вы не установите border-style.)
Отображает границу вокруг любого solid, double, dotted,
Устанавливает цвет границы.
Устанавливает сразу все три предыдущих параметра.
| Пример | |
|---|---|
.bigframe {border:4mm ridge gold;}
|
Элементы класса bigframe имеют широкую, золотистую границу |
h1 {border:2px solid;padding:4px;}
|
Каждый заголовок заключен в рамку |
table {border:2 solid gray;}
td,th {border:1 dashed gray;}
|
Отображает тонкие границы вокруг таблицы и ячеек; удобно для тестирования таблиц |
Маркеры могут быть square, circle или decimal, lower-alpha или upper-alpha. Если нет ни того, ни другого, установите none.
Устанавливает рисунок в качестве маркера
| Пример | |
|---|---|
ul { list-style-image:
url(images/bullet.gif);}
|
Определяет положение маркера в списке: inside (в составе абзаца) или outside (выдвинутый влево от абзаца).
Устанавливает выравнивание и тип обтекания объекта (вроде атрибута align в тэге <IMG>, но не только для рисунков). Установите как left или right, чтобы выровнять объект с левыми или правыми полями и установить обтекание текста, или установите none (по умолчанию), чтобы предотвратить обтекание.
| Пример | |
|---|---|
img {float:left;margin-right:10px;}
|
Текст обтекает все рисунки с полями в 10 пикселей с правой стороны |
<div style="float:right;width:120;">
<img src="mel.jpg"width=120
height=200><br>
Caption under the picture</div>
|
Рисунок и подпись появляются напротив правого поля в то время как остальное содержимое страницы обтекается слева |
Если параграф или объект обтекает другие объекты на странице, установите параметр clear, чтобы он начинался со следующего открытого правого или левого поля (после других элементов). Установите как left, right, both или none.
Устанавливает размеры объектов, таких как рисунок или абзац. Абзац всегда использует указанный параметр width. С параметром height, когда рамка меньше абзаца, текст сжимается до указанной высоты (если вы не установили параметр overflow ).
Определяет, способен ли абзац вместить текст и нужны ли полосы прокрутки, чтобы отобразить переполнение. Параметр по умолчанию – visible, позволяющий абзацу превысить установленную высоту.
Чтобы вырезать лишний текст, установите hidden ; установите auto, чтобы отображать полосу прокрутки, если необходимо; установите scroll, чтобы всегда отображать две полосы прокрутки. Используйте параметры overflow-x и overflow-y, чтобы обеспечить разные настройки для горизонтального и вертикального переполнения и прокрутки.
| Пример | |
|---|---|
.boxnote {width:160px;height:100px;
overflow:auto;float:right;fixed-size
border:2px solid navy;padding:4px;
}
|
Параграфы класса boxnote содержатся в рамке напротив правого поля; если текст не будет помещаться, в рамке появится вертикальная полоса прокрутки |
#mustfit {width:100px;height:12px;
overflow:hidden;}
|
Элемент с ID mustfit должен быть точно 100 на 12 пикселов; не поместившийся текст вырезается |
Параметр position заставляет элемент, такой как рисунок или блок <DIV>, переместиться с места, изначально занимаемого на странице. Установите position как absolute, чтобы установить элемент на определенном расстоянии от левого и верхнего краев страницы, закрывая пространство, которое он занял бы в другом случае.
Укажите position как relative, чтобы разрешить позиционирование объекта, оставляя открытым пространство, которое он занял бы в другом случае.
Параметры для top и left могут быть положительными (для движения вниз и вправо) или отрицательными (для движения вверх и налево).
Абсолютное позиционирование обычно связано с верхним левым углом страницы, но вы также можете установить его относительно других элементов. Например, если вы устанавливате position как relative к блоку <DIV>, абсолютное размещение в этом блоке будет связано с его левым верхним углом.
Абсолютное позиционирование удобно в DHTML-программировании, где вы определяете объекты на вашей странице, а затем устанавливаете расположение, содержимое и видимость, используя JavaScript.
| Пример | |
|---|---|
<div style=
"position:absolute;top:0;left:200">
<img src=spaceship.gif>
</div>
|
Левый край рисунка отстоит на 200 пикселов от левого края окна, и рисунок касается верхнего поля |
The word <span style= "position:relative;top:-8;">higher </span>is higher than the others |
Слово higher выше, чем остальные |
Определяет, какие позиционированные объекты накладываются друг на друга.
Большее значение элемента z-index отправляет элемент на передний план, а меньшая величина располагает его позади других элементов. Отрицательное значение отодвигает элемент за непозиционированные элементы страницы.
| Пример | |
|---|---|
<div style=
"position:absolute;top:200;
left:200;z-index:2">
<img src="front.gif"></div>
<div style=
"position:absolute;top:250;
left:250;z-index:1">
<img src="back.gif"></div>
|
Рисунок front.gif частично перекрывает back.gif |
<div style=
"position:absolute;top:250;
left:250;z-index:-1">
<img src="chau.gif"></div>.
|
Рисунок появляется после содержимого страницы, на расстоянии 250 пикселов от верхнего и левого краев страницы |
Установите как none, чтобы элемент исчез со страницы, закрыв занимаемое им в другом случае пространство. Установите как block, чтобы отображать элемент как блок (по умолчанию) или inline, чтобы отображать его как часть конкретной строки (как в тэге <SPAN>).
Установите как hidden, чтобы элемент исчез со страницы, но все еще занимал место. Установите visible (по умолчанию), чтобы отобразить объект.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.