Новости: Требуются модераторы!
Админы: ~Vky$nyashk@~ и SteaM
!!!Рекламщикам!!! ник: Реклама пароль: 123456
Добро пожаловать на форум ~Teen Life~!
Форум для молодежи!

~Teen life~

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ~Teen life~ » Web-дизайн » CSS


CSS

Сообщений 1 страница 10 из 10

1

CSS - Справочник, глава 1

Таблицы стилей были введены и используются для облегчения оформления и сопровождения документов HTML.

Таблицы стилей позволяют отделить содержание WEB документов от их оформления. Таблицы стилей поддерживаются большинством используемых в настоящее время браузеров. Полная поддержка CSS реализована в IE 4.0 и Netscape Navigator 4.0. Однако эта реализация несколько отличается в деталях. Другие браузеры будут отображать страницы, созданные с использованием CSS, возможно, без использования оформления указанного в таблицах стилей.

Для тех, кто достаточно поработал с текстовыми процессорами, такими как WinWord, таблицы стилей покажутся знакомыми. Действительно, сначала определяется стиль, а затем он применяется для форматирования текста простой ссылкой на этот стиль.

Например:
Определим стиль
P { color : #FF0000 }

теперь в документе весь текст, определенный как параграф (т.е. находится между <p> и </p>), будет отображаться указанным (красным) цветом.

Существует несколько различных способов применения стилей к документу:
Использование тега <link> для присоединения внешней, сохраненной в отдельном файле таблицы стилей.
Использование тега <style> внутри тега <head> для определения стилей для данного документа.
Применение механизма @import.
Использование атрибута Style внутри других тегов, для определения локальных (внедренных), применяемых к конкретному тексту стилей.

Последний из перечисленных способов, однако, применять не рекомендуется. Поскольку в этом случае снова происходит смешивание данных и оформления этих данных. А как уже было сказано, CSS вводились как раз для того, чтобы разделить данные и оформление.

Существует несколько десятков свойств CSS которые можно применять к различным (или всем) элементам.

0

2

CSS - Справочник, глава 2

Файл таблиц стилей - это просто текстовый файл с расширением .css. Такой файл может быть подключен к любому количеству документов HTML. Эти документы даже могут располагаться на другом сервере.

При изменении параметров (значений свойств) в файле таблиц стилей, изменется внешний вид всех документов HTML, к которым подключен данный файл стилей.

Все легче понять на примере. Так может выглядеть файл таблиц стилей (syntax_101.css):

H1 {
font-size : 32px;
color : red;
}

div.italic {
font-style : italic
}

.strong {
font-size : +1;
font-weight : bold;
}

Здесь определены 3 стиля: H1, div.italic, .strong. Определение стиля начинается с имени (H1 или div.italic - в первом случае определяется оформление для всех тегов <H1>, во втором для класса). Далее в фигурных скобках перечисляются пары имя свойста : значение. Название свойства от значения свойства отделяются ":". Пары разделяются между собой ";". Одной из особенностью CSS является то, что можно указывать не все возможные пары значений. Если что-то не указать, то значение будет наследоваться или использоваться значение по умолчанию.

Если определен стиль H1, то ко всем заголовкам <H1> будет применяться указанное в определении стиля форматирование.

Теперь можно создать HTML документ (или несколько документов), в котором сослаться на syntax_101.css.

<html>
   <head>
      <title>Новый</title>
      <link rel="stylesheet"
type="text/css" href="syntax_101.css">
   </head>

   <body>
      <h1>Заголовок первого уровня (H1)</h1>
      <div>Это обычный текст      <div class="italic">Фрагмент наклонного текста</div>
      <p class="strong">Какой-то он жирный слишком</p>
   </body>
</html>

Cтиль .strong может применяться к любым элементам (тегам), достаточно в параметрах этого тега указать class="strong"

Можно присвоить одно свойство нескольким тегам, например установить зеленый цвет для всех заголовков:
H1, H2, H3 {color : green;}

Очень важная особенность CSS - возможнность создания контекстных стилей. Т.е. форматирование элемента может зависеть от его положения в документе. Например, стиль определенный как:

H3 I {color : red;}
будет действовать только на тот текст, выделенный тегами <I>, который расположен внутри заголовка третьего уровня. Это не будет действовать на другие заголовки или выделенный курсивом текст в другом месте документа.

0

3

CSS - Справочник, глава 3

Существует три основные категории единиц для цифровых значений: относительные, абсолютные и процентные.

К относительным единицам относятся: em, en, ex, px. На самом деле первые связаны между собой и поэтому, используются только pt и px.

px указывают значения в пикселах и именно ими пользуются чаще всего.

Абсолютные единицы: in, cm, mm, pt, pc (дюймы, сантиметры, миллиметры, пункты и пики соответственно).

Проценты. Значения многих свойств шрифтов могут задаваться в процентах к текущему размеру:
P { line-height: 120% }.

Единицы определения цветов. Цвета можно определять несколькими способами, вот они:

EM { color : red; }
EM { color : #FF0000; }
EM { color : #F00; }
EM { color : rgb(255, 0, 0); }
EM { color : rgb(100%, 0%, 0%); }
Все эти способы в данном случае определяют красный цвет. Чтобы не возникало лишних проблем лучше всего всегда пользоваться вторым, т.е. определением цветов в 16-тиричной записи.

0

4

CSS - Справочник, глава 4

Существует три основные категории единиц для цифровых значений: относительные, абсолютные и процентные.

К относительным единицам относятся: em, en, ex, px. На самом деле первые связаны между собой и поэтому, используются только pt и px.

px указывают значения в пикселах и именно ими пользуются чаще всего.

Абсолютные единицы: in, cm, mm, pt, pc (дюймы, сантиметры, миллиметры, пункты и пики соответственно).

Проценты. Значения многих свойств шрифтов могут задаваться в процентах к текущему размеру:
P { line-height: 120% }.

Единицы определения цветов. Цвета можно определять несколькими способами, вот они:

EM { color : red; }
EM { color : #FF0000; }
EM { color : #F00; }
EM { color : rgb(255, 0, 0); }
EM { color : rgb(100%, 0%, 0%); }
Все эти способы в данном случае определяют красный цвет. Чтобы не возникало лишних проблем лучше всего всегда пользоваться вторым, т.е. определением цветов в 16-тиричной записи.

0

5

CSS - Справочник, глава 5

Эти свойства задают различные особенности отображения текста.

word-spacing значения normal | <length>
значение по умолчанию normal
поддерживается всеми элементами
наследование да

Интервал между словами в элементе.
IE 4.0 не поддерживает это свойство

letter-spacing значения normal | <length>
значение по умолчанию normal
поддерживается всеми элементами
наследование да

Устанавливает межсимвольный интервал.

text-decoration значения none | [underline || overline || line-through || blink]
значение по умолчанию none
поддерживается всеми элементами
наследование нет

Способ "украшения" текста. (подчеркивание снизу или сверху, зачеркнутый текст, мигающий текст).

vertical-align значения baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
значение по умолчанию baseline
поддерживается
наследование нет

Определяет позицию по-вертикили встроенного элемента относительного родительского.

text-transform значения capitalize | uppercase | lowercase | none
значение по умолчанию none
поддерживается всеми элементами
наследование да

Устанавливает регистр, в котором должен быть представлен текст в элементе.

text-align значения left | right | center | justify
значение по умолчанию определяется браузером
поддерживается элементами блоков
наследование да

Горизонтальное выравнивание текста в элементе.

text-indent значения <length> | <percentage>
значение по умолчанию 0
поддерживается элементами блоков
наследование да

Отступ текста в первой строке (абзац).

line-height значения normal | <number> | <length> | <percentage>
значение по умолчанию normal
поддерживается всеми элементами
наследование да

Межстрочный интервал.

0

6

CSS - Справочник, глава 6

color
значения                                             <color>
значение по умолчанию                                 устанавливается браузером
поддерживается                                 всеми элементами
наследование                                              да

Это свойство усанавливает цвет текста элемента. Цвет может задаваться разными способами.

background-color
значения                                            <color> | transparent
значение по умолчанию                          transparent
поддерживается                                 всеми элементами
наследование                                             нет

Это свойство устанавливает цвет фона элемента.

background-image
значения                                              <url> | none
значение по умолчанию                                   нет
поддерживается                                   всеми элементами
наследование                                               нет

Свойство указывает фоновое изображение. Когда используется фоновое изображение желательно использовать также и фоновый цвет близкий к среднему тону фонового изображения.

background-repeat
значения                                             repeat | repeat-x | repeat-y | no-repeat
значение по умолчанию                                 repeat
поддерживается                                 всеми элементами
наследование                                             нет

Если определено фоновое изображение, то это свойство определяет будет ли это изображение повторяться, и если да то в каком направлении. Значение repeat означает, что изображение будет повторяться как по горизонтали, так и по вертикали.

background-attachment
значения                                            scroll | fixed
значение по умолчанию                         scroll
поддерживается                                всеми элементами
наследование                                            нет

Это свойство определяет будет ли фоновое изображение прокручивать вместе с содержимым страницы или будет оставаться на месте.

background-position
значения                                           [<percentage> | <length>]{1,2} | [top | center | bottom] ||
                                                                  [left | center | right]
значение по умолчанию                    top, left
поддерживается                               элеметами блоков
наследование                                            нет

Устанавливается позиция фонового изображения относительно элемента.

background
значения                                             <background-color> || <background-image> ||
                                                                    <background-repeat> || <background-attachment> ||
                                                                    <background-position>
значение по умолчанию                                  не определено
поддерживается                                 всеми элементами
наследование                                             нет

0

7

CSS - справочник > Глава 7

margin-left, margin-right, margin-top, margin-bottom, margin
значения                               [<length> | <percentage> | auto]
значение по умолчанию                    0
поддерживается                   всеми элементами
наследование                                 нет

Эти свойства указывают поля вокруг объекта. Последнее свойство margin позволяет указывать значения сразу для всех сторон, при этом они перечисляются в следующем порядке: верхняя, правая, нижняя, левая границы. Если вы зададите 1 значение, оно будет применяться ко всем сторонам. Значения можно указывать как в абсолютных величинах, так и в процентах.

padding-top, padding-right, padding-bottom, padding-left, padding
значения                          [<length> | <percentage> | auto]
значение по умолчанию            0
поддерживается             всеми элементами
наследование                         нет

Эти свойства указывают сколько пространства будет оставаться между границей элемента и содержанием, например текстом, элемента. Значения можно задавать как по отдельности для каждого направления, так и все вместе в свойстве padding. Значение этого свойства не может быть отрицательным.

border-top-width, border-right-width, border-bottom-width, border-left-width, border-width
значения                                thin | medium | thick | <length>
значение по умолчанию                    medium
поддерживается                    всеми элементами
наследование                                  нет

Как должно быть понятно из названий свойств, они предназначены для указания толщины границы элемента. Общие правила те же, что и в предыдущих случаях. Т.е. если вам не лень, напишите все по отдельности.

border-top-color, border-right-color, border-bottom-color, border-left-color, border-color
значения         border-top-color, border-right-color, border-bottom-color, border-left-color, border-color
значение по умолчанию
поддерживается всеми элементами
наследование         нет

Эти свойства служат для задания цвета границы. Естественно, если вы установите нулевую толщину границы, то какой цвет не устанавливай, ничего не изменится.

border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
значения                  none | dotted | dashed | solid | double | groove | ridge | inset | outset
значение по умолчанию    ?
поддерживается       всеми элементами
наследование                нет

Эти свойства устанавливают стиль границы. К сожалению, в реализациях как правило они не различаются, т.е. реально поддерживаются только solid и double. Хотя вы можете поэкспериментировать. Кстати, если вы здесь ничего не укажите, то никакой границы не будет, даже если для нее установлена ненулевая толщина.

float значения                                left | right | none
значение по умолчанию              none
поддерживается                  всеми элементами
наследование                                      нет

Определяет обтекание элемента слева или справа вместо помещения под ним.

clear значения                    none | left | right | both
значение по умолчанию                  none
поддерживается             всеми элементами
наследование                              нет

0

8

CSS - Справочник, глава 8

Свойства классификации используются для определения, к какому классу принадлежит элемент - блочный, встроенный или список. Элементы списков имеют характерный формат - формат списка. Встроенные элементы не имеют особых характеристик расположения.

display
значения                    block | inline | list-item | none
значение по умолчанию block
поддерживается всеми элементами
наследование              нет

Определяет отображение элемента (будет ли показан элемент).

white-space
значения normal | pre | nowrap
значение по умолчанию         normal
поддерживается элементы блоков
наследование            да

Определяет представление пробелов в элементе.

list-style-type
значения disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
значение по умолчанию         disc
поддерживается элементы, у которых свойство display имеет значение list-item
наследование да

Определет тип маркера, используемый в списке (список ненумерованный).

list-style-image
значения                   <url> | none
значение по умолчанию нет
поддерживается элементы, у которых свойство display имеет значение list-item
наследование                 да

Позволяет указать изображение, которое будет использоваться в качестве маркера списка.

list-style-position
значения        inside | outside
значение по умолчанию          outside
поддерживается элементы, у которых свойство display имеет значение list-item
наследование           да

Отображение текста внутри списка - внутри или вне маркера элемента списка (если текст элемента списка занимает больше одной строки).

list-style
значения <keyword> || <position> || <url>
значение по умолчанию
поддерживается элементы, у которых свойство display имеет значение list-item
наследование           да

Позволяет указать все в одном свойстве: стиль списка, URL изображения и позиция маркера списка.

0

9

CSS - Справочник, глава 9

clipзначения rect(<top> <right> <bottom> <left>), auto
значение по умолчанию auto
поддерживается элементами, у которых свойство 'position' установлено 'absolut'
наследование нет

Определяет какая часть элемента видна. Все, что находится за пределами области, указанной данным элементом, увидеть нельзя.

width, height значения <length> | <percentage> | auto
значение по умолчанию auto
поддерживается элементами блоков
наследование нет

left, top значения <length> | <percentage> | auto
значение по умолчанию auto
поддерживается элементами, у котрых свойство 'position' установлено как 'absolute' или 'relative'
наследование нет

Устанавливают горизонтальную и вертикальную координаты элемента. Это свойства позволяют манипулировать расположением елементов на странице.

overflow значения none, clip, scroll
значение по умолчанию none
поддерживается элементами, у которых свойство 'position' установлено как 'absolut'
наследование нет

Это свойство управляет тем, что произойдет, если содержимое элемента выйдет за его границы: clip - обрежет выступающие части элемента, scroll - создаст полосы прокрутки, для просмотра.

position значения absolute | relative | static
значение по умолчанию static
поддерживается всеми элементами
наследование нет

Устанавливае каким образом определяется положение элемента в плоскости экрана.

visibility значения inherit | visible | hidden
значение по умолчанию inherit
поддерживается всеми элементами
наследование да, если значение inherit

Устанавливает видимый или невидимый элемент. Невидимые элементы при этом занимают свое место на странице и влияют на расположение других.

z-index значения число | auto
значение по умолчанию auto
поддерживается всеми элементами
наследование нет

Указывает в каком порядке элементы будут переекрывать друг друга. Элементы с большим значением этого свойства оказываются "ближе". Элементы с положительными занчениями оказываются поверх обычного текста, а с отрицательными позади от него.

0

10

CSS - Справочник, глава 10

cursor значения auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help
значение по умолчанию auto
поддерживается всеми элементами
наследование да

Определяет стиль курсора мыши.

Таблица ниже показывает как это работает.
default        crosshair   wait          hand    move
e-resize       ne-resize   nw-resiz     n-resize    se-resize
sw-resize      s-resize   w-resize       text      help

0


Вы здесь » ~Teen life~ » Web-дизайн » CSS