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

Различия

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

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

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
html:css [20/04/2010 11:45] – 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 разметки мы видим только элемент заголовка [[:html:tags:h1|h1]]  и абзаца [[:html:tags:p|p]], и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:+Из служебной XHTML разметки мы видим только элемент заголовка [[:html:tags:h|h1]]  и абзаца [[:html:tags:p|p]], и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:
  
 <code css> <code css>
Строка 107: Строка 107:
 ===== HTML селекторы ===== ===== HTML селекторы =====
  
-Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега <strong> селектором будет strong. Соответственно, для тега [[:html:tags:h1|<h1>]] селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:+Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега [[:html:tags:strong|<strong>]] селектором будет strong. Соответственно, для тега [[:html:tags:h1|<h1>]] селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:
  
 <code css> <code css>
Строка 193: Строка 193:
 {{:html:css:selectors_adjacent.gif|}} {{:html:css:selectors_adjacent.gif|}}
 <note important> <note important>
-Важно: будет выбран только первый (!) заголовок [[:html:tags:h1|H1]], расположенный непосредственно после [[:html:tags:p|P]]. Если между элементами [[:html:tags:p|P]] и [[:html:tags:h1|H1]] встретится любой элемент, хоть один (даже если это) – то селектор не сработает и правило не применится.+**Важно:** будет выбран только первый (!) заголовок [[:html:tags:h1|H1]], расположенный непосредственно после [[:html:tags:p|P]]. Если между элементами [[:html:tags:p|P]] и [[:html:tags:h1|H1]] встретится любой элемент, хоть один (даже если это) – то селектор не сработает и правило не применится.
  
-Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.+**Важно:** селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.
 </note> </note>
  
Строка 490: Строка 490:
 ====== Задание размеров (длина, ширина) в CSS ====== ====== Задание размеров (длина, ширина) в CSS ======
  
-Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак "." (точка).+Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак «.» (точка).
  
 Сразу после числа необходимо указать единицу измерения. Сразу после числа необходимо указать единицу измерения.
Строка 554: Строка 554:
 ===== Блочные (block) элементы ===== ===== Блочные (block) элементы =====
  
-Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже.+Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, [[html:tags:h1|h1]] является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
          
 +
 ===== Inline- ("инлайн"-) элементы ===== ===== Inline- ("инлайн"-) элементы =====
  
Строка 583: Строка 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.
Строка 600: Строка 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 ======
Строка 1572: Строка 1618:
 </html> </html>
  
 +Подготовлено по материалам [[http://css.manual.ru|http://css.manual.ru]]