22.Свойства форматирования шрифтов и абзацев с помощью css.

font-family

• serif

• sans-serif

• monospace

• cursive

• fantasy

font-family: “Arial Cyr”, Helvetica, sans-serif;

или

font-family: times, “Times new roman”, serif;

ПАРАМЕТРЫ

font-style

• normal

• italic

• oblique (наклонный)

(Пример) p {font-style: italic; }

font-variant

• normal

• small-caps (капители, т.е. прописными буквами пишут и маленькие и большие)

font-weight

• 100, …, 900

• lighter(100), normal (400),bold (700), bolder (900)

ПРИМЕР p {font-variant: small-caps; font-weight: bold}

Сокращенная запись

• p {font: oblique 12pt "Helvetica Nue", serif;} *** если в краткой записи задается шрифт, то обязательно должен быть задан и размер шрифта.

23.Cпособы задания цвета на основе css.

Задание цвета

• названием (red, green …)

• номером (#FA56AC,…)

• сокращенный номер (#F0F,…) аналог #FF00FF (т.е. для безопасной палитры цветов)

• RGB-номером rgb(255,0,255)

• RGB-в процентах rgb(100%,0,100%)

• Пример

color:rgb(50%,0,100%)

24.Селекторы CSS.

Селекторы

Тег, к которому относятся свойства P {color: red} H1, H2, H3 {align: center}

Контекстные селекторы

• UL LI {color: blue} свойство применяется к LI, если LI вложен в тег UL

  • UL LI {color:red}

  • OL LI {color:green}

• OL > LI {color: blue} дочерние свойство применяется к LI, если LI непосредственно вложено в тег OL

25.Блоковая модель в css.

Знание блоковой модели CSS позволяет нам верстать сайты без использования HTML-таблиц. В языке HTML можно создавать различные блоки:заголовки, абзацы, таблицы и пр. Мы уже знаем, что каждый элемент HTML отображается в виде структурного или строчного блока. Однако в HTML нет возможности позиционировать (точно размещать) созданные блоки на странице. Все они располагаются друг за другом в той последовательности, в которой указаны в коде страницы. Пожалуй, единственным исключением являются рисунки, для которых в элементе IMG можно указать выравнивание по правому или левому краю, например: <IMG src="picture.gif" align="right"<

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

В CSS имеется обширный инструментарий, позволяющий не только создавать блоки на основе любых элементов HTML, но и точно позиционировать их на экране. При этом таблицами пользоваться не нужно, код страницы становится более логичным, понятным и легко читаемым. Естественно, что и размер кода при использованииCSS в большинстве случаев становится меньше.

Таким образом, формирование страницы при помощи средств CSS сводится к следующему:

• создается блок и задаются его параметры;

• вновь созданный блок размещается (позиционируется) на странице.

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

Контейнер есть у любого блока - им является элемент блокового уровня, непосредственный предок данного элемента в дереве элементов документа. Для некоторых элементов контейнером служит непосредственно окно браузера.

Контентная часть блока может быть окружена отступами, рамками и полями. Для них могут быть установлены некоторые значения или они могут быть нулевыми. Блок имеет некоторую фиксированную ширину (width) и высоту (height). Общая ширина контейнера блока складывается из собственно ширины блока, ширины левых и правых полей, толщины левой и правой границ, а также левого и правого отступов.

Все параметры полей, границ и отступов можно задать при помощи соответствующих свойств. Подробно мы их уже рассматривали ранее. Ширина контентной части блока задается при помощи свойства width, высота - при помощи свойства height. Как вы помните, поля, границы и отступы по умолчанию имеют нулевое значение, поэтому изначально ширина блока совпадает с шириной контейнера.

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