Стили стандарта css2

имя_стиля: значение;

1.Стили шрифта

Цвет текста:

color: константа-название (red, green)

#код цвета (#FF0000 (RGB))

макрос RGB (rgb(255,0,0))

font: bold italic 12px/16px(высота строки) Arial; (только в таком порядке!)

font-size: 8pt(в пунктах)

12px(в пикселях (высота строки, в которую вписан текст))

0.8em(отклонения от размера по умолчанию)

font-family: Arial, Verdana, Tahoma (первый присутствующий на компе)

font-weight: normal, bold

font-style: normal, italic

пункт – условная единица размера, обусловленная восприятием человеком объекта.

em – коэффициент увеличения, который показывает насколько шрифт будет отличатся от принятого по умолчанию.

высота строки line-height

2.Стили текста

Межбуквенный интервал: letter-spacing: 2px;

Красная строка: text-indent: 20px;

text-decoration: none, underline, line-throngh

Выравнивение: text-align: left, right, center, justify(по ширине)

3.Фон

background-color: #FFF;

background-image: url(../img/1.gif);(..- на уровень выше)

В css путь рассматривается от положения самого css файла

background-position: left top

0px 0px

0% 0%

background-repeat: no-repeating, repeat-x, repeat-y, repeat

background-attachment: fixed, normal

background: #FFF url() repeat 100%;

4.Отступы и позиционирование

padding – внутренний отступ до содержимого контейнера

от верха по часовой стрелке. если указать только часть переметров, то недостающие берутся противоположные по аналогии px, %

padding-left

padding -right

padding -top

padding -bottom

margin – внешний отступ

Границы

border: толщина стиль цвет;

solid, dotted, deshed

border-width

border-style

border-color

border-left

border-right

border-top

border-bottom

30.01.14

ПР2 №2 К-1 Д-3

Требования:

1.Верстка div с плавающим позиционированием

2.HTML и все остальное должны вписаться в 100KB

3.Все стили через внешнюю таблицу стилей

4.Внешний вид без картинок и с картинками должен повторять цветовую гамму и информационное наполнение.

5.допустимо слегка различное представление шрифтов из за спецэффектов шрифта в фш.

6.если текстом не возможно сделать программно, можно вставить картинкой.

7.логотип должен быть отдельной кликабельной картинкой

8.центральная контентная часть должна мочь содержать любое количество текста без ущерба дизайну.

03.02.14

Габариты объекта

width

height px % em

Позиционирование

css позволяет позицинировать объект на странице 4мя способами:

пример кода:

position:

static – способ вывода по умолчанию, когда объекты на странице располагаются в порядке их следования в коде.

relative – способ позиционирования, когда объекты выводятся так же, как в static режиме, но их можно сдвинуть относительно своей позиции по умолчанию. При этом место место под вывод контейнера остается таким, каким зарезервировано под вывод контейнера как в static.

absolute – объект, спозиционированный абсолютно, выводится из общего слоя, и под него не резервируется место, как в статическом режиме. Для таких обектов как правило нужно задать координаты размещения с помощью свойств:

left

top

right

bottom

задается позиция одного из углов парой значений.

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

fixed – как в absolute, только координаты считаются относительно окна просмотра.

В случае относительного, абсолютного или фиксированного позиционирования может возникнуть ситуация, когда два объекта накладываются друг на друга. Тогда нужно определить какой объект будет ближе. css z-index. Значение свойства – целое число, определяющее порядок слоя по z-оси. 0 – слой по умолчанию. Чем больше значение, тем ближе слой к вам.