| Пример 1 | В этом курсе вы научитесь задавать вид ваших страниц в одном центральном CSS-файле. Пример-1 и Пример-2 используют тот же исходный HTML текст, но применяют разные стилевые таблицы при форматировании.
Стилевая таблица определяется гипертекстовой ссылкой. Атрибут href дает адрес стилевого файла, атрибут типа должен иметь значение "text/css", а атрибут rel - значение "stylesheet".
|
|---|
| Пример 2 | В этом примере тот же стилевой файл используется для форматирования различных HTML текстов. |
|---|
| Пример 3 | Стилевые CSS-таблицы представляют собой простые текстовые файлы, содержащие одно или несколько правил. Каждое правило начинается с селектора (имени форматируемого элемента), за которым следуют фигурные скобки "{}". Фигурные скобки содержат индивидуальные свойства форматирования, разделяемые точкой с запятой ";". Свойства и их значения разделяются двоеточием ":". Легко видеть, что многие свойства и их значения не требуют разъяснения. |
|---|
| Пример 4 | Мы начнем с наиболее часто встречающейся задачи - спецификации цвета. Она позволит нам сформулировать несколько важных понятий. Цвет текста определяется свойством "color", а цвет фона - свойством "background-color". Если для данного элемента свойство не определено, то его значение обычно наследуется от элементов, внутри которых данный элемент находится. Если и эти элементы не определяют свойство, то используется стандартное свойство браузера (по умолчанию). |
|---|
| Пример 5 | Если несколько элементов имеют одинаковое свойство, то оно может быть описано в одном месте. В этом случае определению в фигурных скобках предшествует список селекторов (имен элементов), разделенных запятыми. |
|---|
| Пример 6 |
Если список селекторов не разделен запятыми, то он имеет совсем другой смысл и определяет контекстуальные селекторы. Он определяет свойства элементов, содержащихся в последнем упомянутом селекторе, если этот селектор находится внутри элементов, определенных в предыдущих селекторах.
|
|---|
| Пример 7 |
До сих пор наши стилевые файлы содержали только одно определение для каждого элемента. Однако, это не является правилом, число определений не ограничено. Точки с запятой ";", которые мы ставили между отдельными свойствами в предыдущих примерах, являются всего лишь сокращениями полного списка.
|
|---|
| Пример 8 |
В предыдущем примере каждое определение для одного и того же элемента определяло различное свойство. Если свойство определяется несколько раз, то применяется последнее определение.
|
|---|
| Пример 11 |
До сих пор для определения цвета мы пользовались названиями. Имеется 16 стандартных цветов: aqua (голубовато-зеленый), black (черный), blue (голубой), fuchsia (красно-синий), серый (gray), зеленый (green), lime (желто-зеленый), maroon (бордовый), navy (синий), olive (оливковый), purple (фиолетовый), red (красный), silver (серебристый), teal (синевато-зеленый), white (белый), и yellow (желтый) (названные цвета можно увидеть в CSS 1 Reference). Имеется несколько других нотаций для обозначения цвета, с которыми можно ознакомиться CSS 1 Reference более подробно. В нашем примере aqua определяется в соответствии с этими нотациями.
|
|---|
| Пример 9 |
Иногда приходится различать элементы с одинаковыми именами. В этом случае удобно воспользоваться атрибутом "класс". В стилевом файле после имени требуемого элемента ставится точка ".", за которой следует атрибут класса.
|
|---|
| Пример 10 |
Если после имени элемента не стоит имя класса, то все соответствующие элементы уже определены. Элементы с добавленным атрибутом класса имеют более высокую степень предпочтения, чем элементы без атрибута.
|
|---|
| Пример 12 | CSS 1 содержит ряд свойств, определяющих вид индивидуальных букв. Их размер определяется свойством "font-size" (размер шрифта). Размер можно задавать абсолютно с помощью ключевого слова, выбираемого из следующего списка: [xx-small | x-small | small | medium | large | x-large | xx-large ] (Case 1), относительно с помощью ключевых слов [larger | smaller ] (Case 2), или используя (Case 3 и Case 4) единицы (сравнение индивидуальных единиц можно найти в CSS 1 справочник
|
|---|
| Пример 13 |
Свойства "font-style" [normal | italic | oblique], "font-variant" [normal | small-caps], и "font-weight" [normal | bold | bolder | lighter | 100 | 200 | 300| ... | 900] определяют форму и жирность букв. Больший номер "font-weight" означает большую жирность, "bold" (жирный) соответствует величине "700", "normal" (нормальный) - величине "400".
Case 1 сравнивает различные стили, Case 2 сравнивает жмрность.
|
|---|
| Пример 14 |
Текст можно подчеркнуть или прямую линию можно провести над текстом или через текст. Эти эффекты достигаются с помощью свойства "text-decoration" (украшение текста).
|
|---|
| Пример 15 |
Выравнивание текста определяется свойством выравнивания, имеющим значения left (выравнивается левый край абзаца), right (правый край) и justify (оба края).
|
|---|
| Пример 16 |
Имеется много свойств, используемых для установки границы элементов.
|
|---|
| Пример 17 |
Данное руководство содержит лишь краткое введение по использованию стилевых файлов. CSS 1 имеет много возможностей, а CSS 2 преумножает их еще более. В качестве следующего шага в освоении CSS мы рекомендуем тщательно изучить наш полный CSS 1 справочник со многими дополнительными примерами и свойствами, не упомянутыми в данном вводном материале.
|
|---|