мета-данные страницы
Загрузка не удалась. Возможно, проблемы с правами доступа?
Различия
Показаны различия между двумя версиями страницы.
Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версияСледующая версияСледующая версия справа и слева | ||
html:css [20/04/2010 11:33] – pdemenkov | html:css [20/04/2010 11:58] – pdemenkov | ||
---|---|---|---|
Строка 5: | Строка 5: | ||
CSS-код – это список инструкций для браузера, | CSS-код – это список инструкций для браузера, | ||
- | Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением | + | Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением |
Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа. | Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа. | ||
Строка 15: | Строка 15: | ||
</ | </ | ||
- | Из служебной XHTML разметки мы видим только элемент заголовка h1 и абзаца p, и ни слова об оформлении — шрифтах, | + | Из служебной XHTML разметки мы видим только элемент заголовка |
<code css> | <code css> | ||
Строка 34: | Строка 34: | ||
Для того, чтобы применить таблицу стилей | Для того, чтобы применить таблицу стилей | ||
- | * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента link | + | * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента |
- | * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style | + | * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента |
* применить inline-стиль, | * применить inline-стиль, | ||
Строка 41: | Строка 41: | ||
===== Внешние стили (external style sheets) ===== | ===== Внешние стили (external style sheets) ===== | ||
- | Применяются с помощью элемента link, который должен располагаться внутри элемента head и нигде более. | + | Применяются с помощью элемента link, который должен располагаться внутри элемента |
<code html> | <code html> | ||
<link rel=”stylesheet” type=”text/ | <link rel=”stylesheet” type=”text/ | ||
Строка 48: | Строка 48: | ||
Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, | Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, | ||
- | Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link. | + | Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом |
===== Таблицы стилей документа (document style sheets) ===== | ===== Таблицы стилей документа (document style sheets) ===== | ||
Строка 54: | Строка 54: | ||
Называются так потому, | Называются так потому, | ||
- | CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style: | + | CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента |
<code html> | <code html> | ||
<style type=”text/ | <style type=”text/ | ||
Строка 61: | Строка 61: | ||
</ | </ | ||
- | Сам тег style (в отличие от link) может находиться в любой части документа, | + | Сам тег |
Стили, подставляемые в строку (inline styles) | Стили, подставляемые в строку (inline styles) | ||
- | Иногда нужно назначить стиль отдельному элементу на странице, | + | Иногда нужно назначить стиль отдельному элементу на странице, |
<code html> | <code html> | ||
<p style=”color: | <p style=”color: | ||
</ | </ | ||
- | Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body. | + | Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента |
Внутри атрибута style можно написать несколько CSS объявлений, | Внутри атрибута style можно написать несколько CSS объявлений, | ||
Строка 107: | Строка 107: | ||
===== HTML селекторы ===== | ===== HTML селекторы ===== | ||
- | Это простейший случай – в качестве селектора мы используем имя того html-элемента, | + | Это простейший случай – в качестве селектора мы используем имя того html-элемента, |
<code css> | <code css> | ||
Строка 174: | Строка 174: | ||
{{: | {{: | ||
- | В приведённом примере мы вроде бы создали список селекторов, | + | В приведённом примере мы вроде бы создали список селекторов, |
===== Селекторы детей ===== | ===== Селекторы детей ===== | ||
Строка 184: | Строка 184: | ||
{{: | {{: | ||
- | В приведённом примере мы находим все элементы B, вложенные непосредственно в элементы I, и выключаем для них полужирный шрифт. Все остальные элементы B в документе останутся без изменений. | + | В приведённом примере мы находим все элементы |
===== Селекторы смежных элементов (Adjacent Sibling Selectors) ===== | ===== Селекторы смежных элементов (Adjacent Sibling Selectors) ===== | ||
- | Иногда нам надо выбрать элемент, | + | Иногда нам надо выбрать элемент, |
{{: | {{: | ||
+ | <note important> | ||
+ | **Важно: | ||
- | Важно: | + | **Важно:** селекторы смежных элементов появились в CSS v2 и поддерживаются, |
- | ) – то селектор не сработает и правило не применится. | + | </ |
- | + | ||
- | Важно: | + | |
====== Обзор свойств CSS ====== | ====== Обзор свойств CSS ====== | ||
Строка 491: | Строка 490: | ||
====== Задание размеров (длина, | ====== Задание размеров (длина, | ||
- | Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак | + | Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак |
Сразу после числа необходимо указать единицу измерения. | Сразу после числа необходимо указать единицу измерения. | ||
Строка 555: | Строка 554: | ||
===== Блочные (block) элементы ===== | ===== Блочные (block) элементы ===== | ||
- | Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, | + | Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, |
| | ||
+ | |||
===== Inline- (" | ===== Inline- (" | ||
Строка 584: | Строка 584: | ||
CSS предлагает нам четыре удобных способа указать цвет. | CSS предлагает нам четыре удобных способа указать цвет. | ||
- | * По имени. Используются англоязычные названия цветов, | + | * По имени. Используются англоязычные названия цветов, |
- | * В шестнадцатиричном RGB (например, | + | * В шестнадцатиричном RGB (например, |
* В десятичном формате RGB (например, | * В десятичном формате RGB (например, | ||
* В формате RGB с указанием величин в процентах, | * В формате RGB с указанием величин в процентах, | ||
Строка 601: | Строка 601: | ||
В этом примере все способы задания цвета равнозначны и приведут к одному и тому же результату - цвет параграфов станет ярко-зеленым. | В этом примере все способы задания цвета равнозначны и приведут к одному и тому же результату - цвет параграфов станет ярко-зеленым. | ||
+ | ====== Именованные цвета ====== | ||
+ | |||
+ | Это базовые цвета, используемые в CSS. В старые добрые времена они использовались дизайнерами для создания страниц поисковых систем, | ||
+ | |||
+ | < | ||
+ | <table cellspacing=1 cellpadding=5 border=0 width=" | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | Для старых 256-цветных видеокарт рекомендуется использовать так называемые безопасные цвета. Сейчас это не очень актуально, | ||
====== Безопасные (browser-safe) цвета в CSS ====== | ====== Безопасные (browser-safe) цвета в CSS ====== | ||
Строка 1573: | Строка 1618: | ||
</ | </ | ||
+ | Подготовлен по материалам [[http:// |