Загрузка не удалась. Возможно, проблемы с правами доступа?

Различия

Показаны различия между двумя версиями страницы.

--- html:css [20/04/2010 11:26] – pdemenkov
+++ html:css [21/04/2010 17:12] (текущий) – dnaumov
@@ Строка 5: / Строка 5: @@
 CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.
-Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением ".css", либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа (см. Включение CSS в HTML документ).
+Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением «.css», либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа (см. Включение CSS в HTML документ).
 Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.
 Посмотрим на фрагмент XHTML-документа:
-<code>
+<code html>
 <h1>Сказка про Красную Шапочку</h1>
 <p>Жила однажды в далекой деревушке маленькая прелестная девочка. …</p>
 </code>
-Из служебной XHTML разметки мы видим только элемент заголовка h1  и абзаца p, и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:
+Из служебной XHTML разметки мы видим только элемент заголовка [[:html:tags:h|h1]]  и абзаца [[:html:tags:p|p]], и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:
-<code>
+<code css>
 /* оформляем заголовки: */
 h1 {
@@ Строка 34: / Строка 34: @@
 Для того, чтобы применить таблицу стилей  к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:
-    * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента link
+    * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента [[:html:tags:link|link]]
-    * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style
+    * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента [[:html:tags:style|style]]
     * применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style
@@ Строка 41: / Строка 41: @@
 ===== Внешние стили (external style sheets) =====
-Применяются с помощью элемента link, который должен располагаться внутри элемента head и нигде более.
+Применяются с помощью элемента link, который должен располагаться внутри элемента [[:html:tags:head|head]] и нигде более.
-<code>
+<code html>
 <link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”all” />
 </code>
@@ Строка 48: / Строка 48: @@
 Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций.
-Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link.
+Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом [[:html:tags:link|link]].
 ===== Таблицы стилей документа (document style sheets) =====
@@ Строка 54: / Строка 54: @@
 Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).
-CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:
+CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента [[:html:tags:style|style]]:
-<code>
+<code html>
 <style type=”text/css”>
 ...
@@ Строка 61: / Строка 61: @@
 </code>
-Сам тег style (в отличие от link) может находиться в любой части документа, но обычно его размещают внутри элемента head.
+Сам тег [[:html:tags:style|style]] (в отличие от [[:html:tags:link|link]]) может находиться в любой части документа, но обычно его размещают внутри элемента [[:html:tags:head|head]].
 Стили, подставляемые в строку (inline styles)
-Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):
+Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента [[:html:tags:style|style]]. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):
-<code>
+<code html>
 <p style=”color: red”>Я абзац, выделенный красным цветом, других таких на сайте нет</p>
 </code>
-Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body.
+Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента [[:html:tags:body|body]].
 Внутри атрибута style можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются.
@@ Строка 85: / Строка 85: @@
 Как это может выглядеть на практике? Вот три примера CSS-правил:
-<code>
+<code css>
 a {text-decoration: none;}
@@ Строка 107: / Строка 107: @@
 ===== HTML селекторы =====
-Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега <strong> селектором будет strong. Соответственно, для тега <code>
+Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега [[:html:tags:strong|<strong>]] селектором будет strong. Соответственно, для тега [[:html:tags:h1|<h1>]] селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:
-<h1> селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:
+<code css>
 strong {font-weight: normal; color: red;}
 h1 { font: bold 10pt verdana; }
@@ Строка 119: / Строка 120: @@
 {{:html:css:selector_class.gif|}}
-<code>
+<code css>
 .myClass { font: bold 10pt verdana; } /* меняем шрифт для всех тегов с классом myClass */
 </code>
@@ Строка 129: / Строка 130: @@
 {{:html:css:selector_id.gif|}}
-<code>
+<code css>
 #myObj { margin: 1em; } /* изменяем поля для элемента, у которого id=”myObj” */
 span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */
@@ Строка 141: / Строка 142: @@
 Впоследствии оформление для селекторов можно переопределить индивидуально:
-<code>
+<code css>
 /* все параграфы и списки делаем красными, шрифтом Tahoma */
 p, li, ul, ol {color:red; font-face: Tahoma, sans-serif;}
@@ Строка 155: / Строка 156: @@
 Вот, посмотрите:
-<code>
+<code css>
 /* все ссылки, находящиеся внутри списков, станут красными: */
 li a {color: red;}
@@ Строка 173: / Строка 174: @@
 {{:html:css:selectors_descendant_0.gif|}}
-В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы A) вложенные в списки (элементы LI), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).
+В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы [[:html:tags:a|A]]) вложенные в списки (элементы [[:html:tags:li|LI]]), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).
 ===== Селекторы детей =====
@@ Строка 183: / Строка 184: @@
 {{:html:css:selectors_child.gif|}}
-В приведённом примере мы находим все элементы B, вложенные непосредственно в элементы I, и выключаем для них полужирный шрифт. Все остальные элементы B в документе останутся без изменений.
+В приведённом примере мы находим все элементы [[:html:tags:b|B]], вложенные непосредственно в элементы [[:html:tags:i|I]], и выключаем для них полужирный шрифт. Все остальные элементы [[:html:tags:b|B]] в документе останутся без изменений.
 ===== Селекторы смежных элементов (Adjacent Sibling Selectors) =====
-Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки H1, следующие за параграфами P, и изменить их верхний отступ, мы напишем следующее правило CSS:
+Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки [[:html:tags:h1|H1]], следующие за параграфами [[:html:tags:p|P]], и изменить их верхний отступ, мы напишем следующее правило CSS:
 {{:html:css:selectors_adjacent.gif|}}
+<note important>
+**Важно:** будет выбран только первый (!) заголовок [[:html:tags:h1|H1]], расположенный непосредственно после [[:html:tags:p|P]]. Если между элементами [[:html:tags:p|P]] и [[:html:tags:h1|H1]] встретится любой элемент, хоть один (даже если это) – то селектор не сработает и правило не применится.
-Важно: будет выбран только первый (!) заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой элемент, хоть один (даже если это
+**Важно:** селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.
-) – то селектор не сработает и правило не применится.
+</note>
-Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.
 ====== Обзор свойств CSS ======
@@ Строка 487: / Строка 487: @@
     * border-style
     * border-color
-====== Приоритет в каскаде стилей (!important) ======
-Объявление !important переводится на русский как !важно.
-Если к паре свойство - значение приписать объявление !important, тогда это значение CSS-свойства получит максимальный приоритет в каскаде стилей. Проще говоря, это объявление сработает для элемента независимо от наличия других правил CSS для этого же элемента.
-!important добавляется вот так:
-{{:html:css:important.gif|}}
-Внимание! Очень распространённая ошибка – располагать !important после точки с запятой. Браузер игнорирует такие записи.
-====== Задание цвета в CSS ======
-CSS предлагает нам четыре удобных способа указать цвет.
-    * По имени. Используются англоязычные названия цветов, например blue или red (см. Именованные цвета).
-    * В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. Безопасные (browser-safe) цвета в CSS).
-    * В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.
-    * В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.
-Пример
-<code>
-/* Несколько способов сделать параграфы зелеными: */
-p {color: lime}
-p {color: rgb(0,255,0)}
-p {color: #0f0}
-p {color: #00ff00}
-p {color: rgb(0%, 100%, 0%)}
-</code>
-В этом примере все способы задания цвета равнозначны и приведут к одному и тому же результату - цвет параграфов станет ярко-зеленым.
 ====== Задание размеров (длина, ширина) в CSS ======
-Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак "." (точка).
+Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак «.» (точка).
 Сразу после числа необходимо указать единицу измерения.
@@ Строка 549: / Строка 514: @@
 Примеры
-<code>
+<code css>
 body {margin: 1in}
 table {padding: 1.5cm}
@@ Строка 568: / Строка 533: @@
 Предположим, мы имеем на входе:
-<code>
+<code html>
 <span>Какой-то контент</span>
 </code>
@@ Строка 589: / Строка 554: @@
 ===== Блочные (block) элементы =====
-Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
+Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, [[html:tags:h1|h1]] является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
 ===== Inline- ("инлайн"-) элементы =====
@@ Строка 598: / Строка 564: @@
 С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.
+====== Приоритет в каскаде стилей (!important) ======
+Объявление !important переводится на русский как !важно.
+Если к паре свойство - значение приписать объявление !important, тогда это значение CSS-свойства получит максимальный приоритет в каскаде стилей. Проще говоря, это объявление сработает для элемента независимо от наличия других правил CSS для этого же элемента.
+!important добавляется вот так:
+{{:html:css:important.gif|}}
+Внимание! Очень распространённая ошибка – располагать !important после точки с запятой. Браузер игнорирует такие записи.
+====== Задание цвета в CSS ======
+CSS предлагает нам четыре удобных способа указать цвет.
+    * По имени. Используются англоязычные названия цветов, например blue или red (см. [[html:css#imenovannye_cveta|Именованные цвета]]).
+    * В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. [[html:css#bezopasnye_browser-safe_cveta_v_css|Безопасные (browser-safe) цвета в CSS]]).
+    * В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.
+    * В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.
+Пример
+<code css>
+/* Несколько способов сделать параграфы зелеными: */
+p {color: lime}
+p {color: rgb(0,255,0)}
+p {color: #0f0}
+p {color: #00ff00}
+p {color: rgb(0%, 100%, 0%)}
+</code>
+В этом примере все способы задания цвета равнозначны и приведут к одному и тому же результату - цвет параграфов станет ярко-зеленым.
+====== Именованные цвета ======
+Это базовые цвета, используемые в CSS. В старые добрые времена они использовались дизайнерами для создания страниц поисковых систем, а также в дизайне сайтов с огромной аудиторией, то есть там, где нужна максимальная совместимость. Все они прекрасно отображаются даже в 256-цветном режиме работы видеокарты. Несомненно, для оригинального цветового дизайна обычных сайтов их маловато.
+<html>
+<table cellspacing=1 cellpadding=5 border=0 width="100%">
+<tr>
+<td style="background-color:black">&nbsp;</td><TD>Black</td>
+<td style="background-color:Navy">&nbsp;</td><TD>Navy</td>
+</tr>
+<tr>
+<td style="background-color:Gray">&nbsp;</td><TD>Gray</td>
+<td style="background-color:Blue">&nbsp;</td><TD>Blue</td>
+</tr>
+<tr>
+<td style="background-color:Silver">&nbsp;</td><TD>Silver</td>
+<td style="background-color:Aqua">&nbsp;</td><TD>Aqua</td>
+</tr>
+<tr>
+<td style="background-color:White">&nbsp;</td><TD>White</td>
+<td style="background-color:Green">&nbsp;</td><TD>Green</td>
+</tr>
+<tr>
+<td style="background-color:Red">&nbsp;</td><TD>Red</td>
+<td style="background-color:Lime">&nbsp;</td><TD>Lime</td>
+</tr>
+<tr>
+<td style="background-color:Fuchsia">&nbsp;</td><TD>Fuchsia</td>
+<td style="background-color:Teal">&nbsp;</td><TD>Teal</td>
+</tr>
+<tr>
+<td style="background-color:Maroon">&nbsp;</td><TD>Maroon</td>
+<td style="background-color:Yellow">&nbsp;</td><TD>Yellow</td>
+</tr>
+<tr>
+<td style="background-color:Purple">&nbsp;</td><TD>Purple</td>
+<td style="background-color:Olive">&nbsp;</td><TD>Olive</td>
+</tr>
+</table>
+</html>
+Для старых 256-цветных видеокарт рекомендуется использовать так называемые безопасные цвета. Сейчас это не очень актуально, поэтому вы можете определить в RGB-формате любой из более чем 16 млн. оттенков.
 ====== Безопасные (browser-safe) цвета в CSS ======
@@ Строка 1569: / Строка 1617: @@
 </table>
 </html>
+Подготовлено по материалам [[http://css.manual.ru|http://css.manual.ru]]

Инструменты

меню и быстрый поиск

быстрый поиск

статус сайта

«хлебные крошки»

Инструменты страницы

мета-данные страницы

Различия