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

Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
html:css [20/04/2010 11:32] – pdemenkovhtml:css [21/04/2010 17:12] (текущий) – dnaumov
Строка 5: Строка 5:
 CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое. CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.
  
-Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением ".css", либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа (см. Включение CSS в HTML документ).+Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением «.css», либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа (см. Включение CSS в HTML документ).
  
 Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа. Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.
Строка 15: Строка 15:
 </code> </code>
  
-Из служебной XHTML разметки мы видим только элемент заголовка h1  и абзаца p, и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:+Из служебной XHTML разметки мы видим только элемент заголовка [[:html:tags:h|h1]]  и абзаца [[:html:tags:p|p]], и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:
  
 <code css> <code css>
Строка 34: Строка 34:
 Для того, чтобы применить таблицу стилей  к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их: Для того, чтобы применить таблицу стилей  к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:
  
-    * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента link +    * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента [[:html:tags:link|link]] 
-    * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style+    * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента [[:html:tags:style|style]]
     * применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style     * применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style
  
Строка 41: Строка 41:
  
 ===== Внешние стили (external style sheets) ===== ===== Внешние стили (external style sheets) =====
-Применяются с помощью элемента link, который должен располагаться внутри элемента head и нигде более.+Применяются с помощью элемента link, который должен располагаться внутри элемента [[:html:tags:head|head]] и нигде более.
 <code html> <code html>
 <link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”all” /> <link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”all” />
Строка 48: Строка 48:
 Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций. Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций.
  
-Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link.+Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом [[:html:tags:link|link]].
  
 ===== Таблицы стилей документа (document style sheets) ===== ===== Таблицы стилей документа (document style sheets) =====
Строка 54: Строка 54:
 Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль). Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).
  
-CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:+CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента [[:html:tags:style|style]]:
 <code html> <code html>
 <style type=”text/css”> <style type=”text/css”>
Строка 61: Строка 61:
 </code> </code>
  
-Сам тег style (в отличие от link) может находиться в любой части документа, но обычно его размещают внутри элемента head.+Сам тег [[:html:tags:style|style]] (в отличие от [[:html:tags:link|link]]) может находиться в любой части документа, но обычно его размещают внутри элемента [[:html:tags:head|head]].
 Стили, подставляемые в строку (inline styles) Стили, подставляемые в строку (inline styles)
  
-Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):+Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента [[:html:tags:style|style]]. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):
 <code html> <code html>
 <p style=”color: red”>Я абзац, выделенный красным цветом, других таких на сайте нет</p> <p style=”color: red”>Я абзац, выделенный красным цветом, других таких на сайте нет</p>
 </code> </code>
  
-Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body.+Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента [[:html:tags:body|body]].
  
 Внутри атрибута style можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются. Внутри атрибута style можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются.
Строка 107: Строка 107:
 ===== HTML селекторы ===== ===== HTML селекторы =====
  
-Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега <strong> селектором будет strong. Соответственно, для тега <h1> селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:+Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега [[:html:tags:strong|<strong>]] селектором будет strong. Соответственно, для тега [[:html:tags:h1|<h1>]] селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:
  
 <code css> <code css>
Строка 174: Строка 174:
 {{:html:css:selectors_descendant_0.gif|}} {{:html:css:selectors_descendant_0.gif|}}
  
-В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы A) вложенные в списки (элементы LI), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).+В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы [[:html:tags:a|A]]) вложенные в списки (элементы [[:html:tags:li|LI]]), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).
  
 ===== Селекторы детей ===== ===== Селекторы детей =====
Строка 184: Строка 184:
 {{:html:css:selectors_child.gif|}} {{:html:css:selectors_child.gif|}}
  
-В приведённом примере мы находим все элементы B, вложенные непосредственно в элементы I, и выключаем для них полужирный шрифт. Все остальные элементы B в документе останутся без изменений.+В приведённом примере мы находим все элементы [[:html:tags:b|B]], вложенные непосредственно в элементы [[:html:tags:i|I]], и выключаем для них полужирный шрифт. Все остальные элементы [[:html:tags:b|B]] в документе останутся без изменений.
  
 ===== Селекторы смежных элементов (Adjacent Sibling Selectors) ===== ===== Селекторы смежных элементов (Adjacent Sibling Selectors) =====
  
  
-Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки H1, следующие за параграфами P, и изменить их верхний отступ, мы напишем следующее правило CSS:+Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки [[:html:tags:h1|H1]], следующие за параграфами [[:html:tags:p|P]], и изменить их верхний отступ, мы напишем следующее правило CSS:
  
 {{:html:css:selectors_adjacent.gif|}} {{: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 ====== ====== Обзор свойств CSS ======
Строка 488: Строка 487:
     * border-style     * border-style
     * border-color     * border-color
 +
 +====== Задание размеров (длина, ширина) в CSS ======
 +
 +Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак «.» (точка).
 +
 +Сразу после числа необходимо указать единицу измерения.
 +
 +Существует множество единиц измерения.
 +
 +em
 +    Ширина буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.
 +ex
 +    Высота буквы x в настоящем шрифте. Применяется аналогично em.
 +px
 +    Размер в пикселах.
 +in
 +    Размер в дюймах. Один дюйм = 2.54 сантиметра.
 +cm
 +    Размер в сантиметрах.
 +mm
 +    Размер в миллиметрах.
 +pt
 +    Размер в пунктах. Один пункт = 1/72 дюйма (в CSS 2.1).
 +pc
 +    Размер в пиках. (12 пунктов).
 +
 +Примеры
 +<code css>
 +body {margin: 1in}
 +table {padding: 1.5cm}
 +p {text-indent: -2pt}
 +img.logo {height: 12px}
 +p {text-indent: 3em}
 +blockquote {padding-bottom: 2ex}
 +table {border-width: 7.5pc}
 +</code>
 +
 +
 +====== Блочная модель (Box Model) ======
 +
 +Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.
 +
 +Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model ("блочная" или "коробочная" модель).
 +
 +Предположим, мы имеем на входе:
 +
 +<code html>
 +<span>Какой-то контент</span>
 +</code>
 +
 +{{:html:css:box-model_explained.png|}}
 +
 +В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны.
 +
 +Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.
 +
 +Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:
 +
 +    * Собственно, содержимое элемента (контент)
 +    * Бордюр (рамка, англ. "border")
 +    * Пространство между содержимым элемента и бордюром (англ. "padding").
 +    * Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. "margin").
 +
 +Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные").
 +
 +===== Блочные (block) элементы =====
 +
 +Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, [[html:tags:h1|h1]] является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
 +    
 +
 +===== Inline- ("инлайн"-) элементы =====
 +
 +Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.
 +
 +Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.
 +
 +С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.
 +
 +
  
 ====== Приоритет в каскаде стилей (!important) ====== ====== Приоритет в каскаде стилей (!important) ======
Строка 506: Строка 584:
 CSS предлагает нам четыре удобных способа указать цвет. CSS предлагает нам четыре удобных способа указать цвет.
  
-    * По имени. Используются англоязычные названия цветов, например blue или red (см. Именованные цвета). +    * По имени. Используются англоязычные названия цветов, например blue или red (см. [[html:css#imenovannye_cveta|Именованные цвета]]). 
-    * В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. Безопасные (browser-safe) цвета в CSS).+    * В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. [[html:css#bezopasnye_browser-safe_cveta_v_css|Безопасные (browser-safe) цвета в CSS]]).
     * В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.     * В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.
     * В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.     * В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.
Строка 523: Строка 601:
 В этом примере все способы задания цвета равнозначны и приведут к одному и тому же результату - цвет параграфов станет ярко-зеленым. В этом примере все способы задания цвета равнозначны и приведут к одному и тому же результату - цвет параграфов станет ярко-зеленым.
  
 +====== Именованные цвета ======
 +
 +Это базовые цвета, используемые в 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 ====== ====== Безопасные (browser-safe) цвета в CSS ======
Строка 1495: Строка 1618:
 </html> </html>
  
-====== Задание размеров (длина, ширина) в CSS ====== +Подготовлено по материалам [[http://css.manual.ru|http://css.manual.ru]]
- +
-Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак "." (точка). +
- +
-Сразу после числа необходимо указать единицу измерения. +
- +
-Существует множество единиц измерения. +
- +
-em +
-    Ширина буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m. +
-ex +
-    Высота буквы x в настоящем шрифте. Применяется аналогично em. +
-px +
-    Размер в пикселах. +
-in +
-    Размер в дюймах. Один дюйм = 2.54 сантиметра. +
-cm +
-    Размер в сантиметрах. +
-mm +
-    Размер в миллиметрах. +
-pt +
-    Размер в пунктах. Один пункт = 1/72 дюйма (в CSS 2.1). +
-pc +
-    Размер в пиках. (12 пунктов). +
- +
-Примеры +
-<code css> +
-body {margin: 1in} +
-table {padding: 1.5cm} +
-p {text-indent: -2pt} +
-img.logo {height: 12px} +
-p {text-indent: 3em} +
-blockquote {padding-bottom: 2ex} +
-table {border-width: 7.5pc} +
-</code> +
- +
- +
-====== Блочная модель (Box Model) ====== +
- +
-Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ. +
- +
-Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model ("блочная" или "коробочная" модель). +
- +
-Предположим, мы имеем на входе: +
- +
-<code html> +
-<span>Какой-то контент</span> +
-</code> +
- +
-{{:html:css:box-model_explained.png|}} +
- +
-В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны. +
- +
-Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока. +
- +
-Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это: +
- +
-    * Собственно, содержимое элемента (контент) +
-    * Бордюр (рамка, англ. "border") +
-    * Пространство между содержимым элемента и бордюром (англ. "padding"). +
-    * Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. "margin"). +
- +
-Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные"). +
- +
-===== Блочные (block) элементы ===== +
- +
-Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже. +
-     +
-===== Inline- ("инлайн"-) элементы ===== +
- +
-Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон. +
- +
-Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием. +
- +
-С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое. +
- +