Браузер проходит по списку слева направо и использует первый найденный в системе шрифт.

Цвет текста задаётся посредством свойства color. Значение цвета возможно задавать различными методами:

  • Шестнадцатеричным кодом, к примеру #FF9900.
  • Главным словом: red.
  • В RGB-формате: rgb(255, 255, 0).

Дополнительное оформление текста возможно задать посредством свойства text-decoration. Его значения:

1. underline — подчеркивание;

2. line-through — зачеркивание;

3. overline — черта сверху;

4. none — убирает перечисленные выше эффекты.

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

Посредством css возможно руководить кроме того регистром знаков: делать буквы строчными либо прописными. Делается это посредством свойства text-transform. Его значения:

1. lowercase — все строчные;

2. uppercase — все прописные;

3. capitalize — каждое слово начинается с прописной;

4. none — отменяет изменение регистра.

браузер игнорирует переносы строк и множественные пробелы в HTML-коде. Поменять это поведение возможно посредством тега .

Но, посредством CSS руководить переносами и пробелами возможно более гибко. За это отвечает свойство white-space, значения которого:

  • nowrap — отображает целый текст одной строчком без переносов;
  • pre — сохраняет переносы и пробелы как в исходном коде подобно тегу ;
  • pre-wrap — трудится как значение pre, но додаёт автоматические переносы, в случае если текст не помещается в контейнер;
  • normal — режим по умолчанию.

Выравнивание текста по горизонтали задается посредством свойства text-align. Его вы уже применяли в курсе про таблицы. Значения свойства:

1. left — выравнивание по левому краю;

2. right — по правому краю;

3. center — по центру;

4. justify — по ширине.

Выравниванием текста по вертикали возможно руководить посредством свойства vertical-align. Его воздействие прекрасно заметно в ячейках таблицы. В текстовой строчка «работа» этого свойства заметна, в случае если в ней имеется фрагменты различного размера.

У данного свойства большое количество значений, но самые довольно часто применяемые:

1. top — выравнивание по верхнему краю строчка;

2. middle — по середине;

3. bottom — по нижнему краю;

4. baseline — по базисной линии (значение по умолчанию).

Высотой строчка либо, вернее, межстрочным промежутком возможно руководить посредством свойства line-height. Значение этого свойства возможно задавать следующими методами:

1. Множителем, к примеру 1.5, 2.

2. В процентах: 150%.

3. Посредством любых вторых единиц измерения CSS: 12px, 2em.

4. Главным словом normal, которое задает непроизвольный расчет высоты строчка.

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

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

ФОН

Цвет фона возможно задать посредством CSS-свойства background-color.

Фоновое изображение возможно задать посредством CSS-свойства background-image. Делается это так:

selector {background-image: url(адрес-картины);}

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

По умолчанию фоновое изображение повторяется. Это прекрасно заметно, в то время, когда оно меньше блока. Руководить этим поведением возможно посредством CSS-свойства background-repeat. У свойства 4 значения:

  • repeat — повторять во всех направлениях. Это значение по умолчанию.
  • repeat-x — повторять лишь по горизонтали.
  • repeat-y — повторять лишь по вертикали.
  • no-repeat — не повторять.

Cвойство background-position руководит размещением фонового изображения. Значение свойства складывается из двух частей, поделённых пробелом: x y.

x задаёт размещение по горизонтали, а y по вертикали.

В качестве значения x возможно применять главные слова left, center, right, значения в процентах и в пикселях.

В качестве значения y возможно применять главные слова top, center, bottom, значения в процентах и в пикселях.

Примеры применения свойства:

background-position: 50% 50%;

background-position: right bottom;

background-position: 50px 100px;

background-position: 0 100%;

background-position: left bottom;

Таксработаютпримеры:

1. картина будет по центру;

2. правый нижний угол;

3. отступ 50px от левого края и 100px от верхнего;

4. левый нижний угол;

5. левый нижний угол.

В то время, когда фоновое изображение больше блока, то оно обрезается. Руководить тем, какую часть изображения будет видно, кроме этого возможно посредством свойства background-position.

Время от времени для этого комфортно применять относительные значения (проценты), а время от времени полные (пиксели).

Кстати, возможно применять не только хорошие, но и отрицательные значения. И комбинировать проценты и пиксели.

ОНО ВСЕ ТАК ЖЕ БУДЕТ ДВИГАТЬСЯ. УКАЗАТЬ В КАЧЕСТВЕ ИКСА 100% — ЗНАЧИТ БУДЕТ ВИДЕН ПРАВЫЙ КРАЙ ИЗОБРАЖЕНИЯ; ИГРЕК 100% — ЗНАЧИТ БУДЕТ НИЗ ИЗОБРАЖЕНИЯ. И ТД

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

Посредством свойства background-attachment возможно зафиксировать фон на месте и он не будет перемещаться при прокручивании.

Значение свойства:

  • scroll — фон прокручивается вместе с содержимым. Это значение по умолчанию.
  • fixed — фон не прокручивается, зафиксирован на одном месте.

Кроме этого задать фон возможно посредством сокращенного свойства background, в котором через пробел перечисляются его компоненты:

background: [bc] [bi] [br] [bp] [ba];/* Обозначения:[bc] — background-color[bi] — background-image[br] — background-repeat[bp] — background-position[ba] — background-attachment*/

Спрайт — это одно громадное изображение, в котором содержится большое количество мелких, как бы карта изображений. Вот живой пример (эта же картина выведена на чёрном фоне внизу мини-браузера), что мы будем применять в задании.

Спрайты употребляются, дабы снизить количество запросов на сервер. Любая маленькая картина — это отдельный запрос, а чем меньше запросов, тем лучше. Исходя из этого мелкие картины «склеивают» в одну громадную.

Части спрайта отображают в элементах с маленькими размерами. Такому элементу задают картину-спрайт в качестве фона и смещают её так, дабы была видна необходимая её часть.

В спрайты в большинстве случаев объединяют иконки и разные небольшие декоративные изображения. Кстати, имеется сервисы для генерации и быстрого создания спрайтов CSS-кода для них, к примеру, SpritePad.

Меньше типа одно громадное изображение для экономии, на котором более небольшие – это встрачающиеся у меня изображения. И при запросе, я показывать нужную часть этого громадного хоста в качестве нужного изображения

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

БЛОЧНАЯ МОДЛЬ ДОКУМЕНТА

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

1. До и по окончании блочного элемента существует перенос строчка.

2. Блочным элементам возможно задавать ширину, высоту, внутренние и внешние отступы.

3. Занимают всё дешёвое пространство по горизонтали.

К блочным элементам относятся такие теги как:

, , ,

    и без того потом.

Еще один ответственный блочный тег — это тег , что обозначает легко «блок» либо «прямоугольный контейнер». Данный тег значительно чаще употребляется для сеток.

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

1. До и по окончании строчного элемента отсутствуют переносы строчка.

2. высота и Ширина строчного элемента зависит лишь от его содержания, задать размеры посредством CSS запрещено.

3. Возможно задавать лишь горизонтальные отступы.

К строчным элементам относятся такие теги как: , , , и без того потом.

Строчные элементы предназначены для оформления текста на уровне маленьких отдельных слов и фраз. Блочные же элементы предназначены для разметки больших блоков текста (заголовки, абзацы, перечни) и создания сетки.

— — — — — — — — — — — — —

высота и Ширина элементов задаются посредством особенностей width и height соответственно.

По умолчанию блочные элементы занимают всю дешёвую ширину, которая равна ширине родительского контейнера либо окна браузера.

Высота по умолчанию блочных элементов зависит от их содержимого. В случае если задать блочному элементу ширину и высоту так, что содержимое элемента не будет в него помещаться, то оно как бы «выпадет» из него.

Строчные элементы не реагируют на задание высоты и ширины в CSS.

Свойство padding задает внутренние отступы элемента — отступы от внешней границы элемента до его содержания. Эти отступы еще время от времени именуют полями.

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

Существует пара способов записи свойства padding.

padding: 10px;padding: 5px 10px;padding: 5px 10px 15px;padding: 5px 10px 15px 20px;

1. Однообразные отступы со всех сторон.

2. Отступы сверху и снизу 5px, справа и слева 10px.

3. Отступ сверху 5px, слева и справа 10px, снизу 15px.

4. Различные отступы со всех сторон, в порядке верхний, правый, нижний, левый.

Кроме этого возможно задавать отступы для различных сторон посредством особенностей padding-left, padding-right, padding-top, padding-bottom.

Свойство margin задает внешние отступы элемента — отступы от внешней границы элемента до границ родительского элемента либо до соседних элементов.

(А это расстояние, которую блок будет держать довольно другого контента на странице. Т.е. ближе чем на это расстояние ни один элемент к этому блоку на странице не приблизится)

Методы записи свойства margin подобны свойству padding.

margin: 10px;margin: 5px 10px;margin: 5px 10px 15px;margin: 5px 10px 15px 20px;

1. Однообразные отступы со всех сторон.

2. Сверху и снизу 5px, справа и слева 10px.

3. Сверху 5px, слева и справа 10px, снизу 15px.

4. Верхний, правый, нижний, левый отступы соответственно.

Возможно задавать отступы для различных сторон посредством особенностей margin-left, margin-right, margin-top, margin-bottom.

Рамка задаётся посредством свойства border, которое складывается из трёх компонентов:

1. ширина рамки;

2. стиль рамки;

3. цвет.

К примеру:

selector{

border: 5px solidred;

}

Это правило задаёт красную целую рамку толщиной 5px.

Задавать рамку возможно одним свойством border, а возможно и посредством отдельных особенностей border-width, border-style, border-color. К примеру:

selector{

border-width: 5px;

border-style: solid;

border-color: red;

}

Это правило задаёт такую же рамку, как и в примере выше.

Пара самых распространенных стилей рамок:

  • solid — целая;
  • dashed — пунктирная;
  • dotted — точками.

Рамку возможно задавать и строчным, и блочным элементам.

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

CSS-свойство width задаёт не неспециализированную ширину блока, а лишь ширину содержания. Неспециализированная ширина блока после этого складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа.

Первый вариант. Вариант по умолчанию, в то время, когда ширина не задается, соответствует значению width:auto;. В этом случае блок занимает всю ширину родительского блока. В случае если у блока имеется внутренние отступы либо рамки, то его ширина содержания машинально значительно уменьшается, а неспециализированная ширина остается равной ширине родителя.

Второй вариант. В то время, когда ширина блока задана очевидно, к примеру, width:100%;. В этом случае ширина содержания блока равна ширине родительского блока. В случае если блоку добавить рамки и внутренние отступы, то его неспециализированная ширина делается больше ширины родителя.

«Схлопывание» внешних отступов

Вертикальный отступ между двумя соседними элементами равен большому отступу между ними. В случае если отступ одного элемента равен 20px, а второго 40px, то отступ между ними будет 40px.

Данный эффект именуется эффектом «схлопывания» внешних отступов либо «схлопывания» маргинов.

Горизонтальные отступы между элементами . К примеру, горизонтальный отступ между двумя элементами с отступами 30px будет равен 60px.

«Выпадание» внешних отступов

«Выпадание» — это еще один эффект, который связан с вертикальными внешними отступами. В случае если в родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента покажется отступ сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.

В случае если у родительского элемента также был задан внешний отступ, то выберется большой отступ между собственным и «выпавшим» .

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

Внешние и внутренние отступы постоянно складываются.

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

Классификации шрифтов, характеристики, строение, начертания, особенности


Также читать:

Понравилась статья? Поделиться с друзьями: