Тема 2.2 Основные свойства CSS3

 

Стилизация шрифтов

Семейство шрифтов

Свойство font - family устанавливает семейство шрифтов, которое будет использоваться:p { font-family:Arial:} Свойство сработает в том случае, если у пользователя на ПК имеется такой шрифт. Нередко, через запятую в качестве значения свойства перечисляются несколько шрифтов и если первый шрифт не установлен, то применяется второй и т.д. Если название шрифта состоит из одного слова, то его прописывают без кавычек, если из нескольких слов, то в кавычках. Кроме конкретных шрифтов, можно задавать общие универсальные шрифты из семейства sans- serif (без засечек – Arial, Verdana) и serif (с засечками – Times New Roman, Georgia).

Свойство font - weight задает толщину шрифта, оно может принимать 9 числовых значений: 100, 200, 300,…,900. 100 – очень тонкий, 900- очень плотный. Чаще используют ключевые слова – normal (обычный) и bold (полужирный).

Свойство font - style позволяет выделить текст курсивом, для этого используется значение italic, если курсив надо отменить, то свойство принимает значение normal.

Свойство color устанавливает цвет шрифта.  Это свойство можно использовать также для задания цвета ссылкам в документе. В CSS выделяют четыре типа ссылок:

link – ссылки на странице, которые пользователь еще не посетил;

visited – ссылки, которые пользователь посетил;

active – все активные ссылки;

hover – ссылка, над которой находится указатель мыши.

a:hover {

color: red;}

 

Подключение внешних шрифтов

Не всегда на сайтах используются встроенные шрифты. Если имеется внешний файл с нужным шрифтом, то его можно подключить с помощью директивы font - face:

@font-face {

 

font-family: 'Roboto';

src: url(http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2);

}

В первом свойстве прописывается название шрифта, а во втором – путь к шрифту. Далее шрифт можно применять при оформлении веб – страницы.

Размер шрифта устанавливается с помощью свойства font-size. Можно устанавливать значение в виде числа с единицей измерения – чаще всего используются пиксели. Также можно использовать ключевые слова:

- medium – 16px;

- small 13px;

- x-small -10px;

- xx-small – 9px;

- large – 18px;

- x - large – 24px;

- xx-large – 32 px;

Можно указать размер шрифта в процентах, относительно базового или унаследованного шрифта: font-size:150%; В данном случае высота будет составлять 150% от базового, т.е. 16px*1,5=24px. Или в единицах em - 1em=100%.

Форматирование текста

Свойство text - transform изменяет регистр текста:

- capitalize – первая буква слова заглавная;

- uppercase – все слово переводится в верхний регистр;

- lowercase - все слово переводится в нижний регистр;

- none - регистр символов не изменяется.

Свойство text – decoration позволяет добавить к тексту дополнительные эффекты:

- underline – нижнее подчеркивание;

- overline – верхнее подчеркивание;

- line - through – зачеркивание;

- none – отсутствие эффекта.

Межсимвольный интервал устанавливается с помощью атрибута letter - spacing, а интервал между словами – word - spacing.

Тени для текста создаются через свойство text - shadow. Для свойства необходимо задать четыре значения: горизонтальное смещение тени относительно текста, вертикальное смещение, степень размытия тени и цвет отбрасываемой тени:

h1{

text-shadow: 5px 4px 3px #999;}

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

Стилизация абзацев

Свойство line - height определяет межстрочный интервал. Для его установки используют пиксели, проценты или единицы em.

Свойство text - align выравнивает текст относительно одной из сторон веб – страницы:

- left – по левой стороне;

- right – по правой стороне;

- justify – по ширине;

- center – по центру.

Свойство text - indent задает отступ первой строки абзаца. Для установки отступа применяются пиксели.

Стилизация списков

С помощью CSS можно прописывать стили для списков.

Тип маркера или нумерации списка можно изменить с помощью свойства list-style-type:

Маркеры неупорядоченных списков:

- none - нет маркера;

- disc – (значение по умолчанию), маркер в виде закрашенного кружка;

- circle - маркер в виде пустой окружности;

- square - маркер в виде квадрата.

Маркеры упорядоченных списков:

- decimal - числовая нумерация (1,2,3);

- decimal-leading-zero - числовая нумерация с нулем перед цифрой (01, 02, 03);

- lower-alpha - строчные латинские буквы (a, b, c, d, e);

- upper-alpha - заглавные латинские буквы (A, B, C, D, E);

- lower-roman - римские цифры в нижнем регистре (i, ii, iii, iv);

- upper-roman - римские цифры в верхнем регистре (I, II, III, IV, V).

Для того, чтобы отображать в качестве маркера изображение, используется свойство list-style-image. Значение по умолчанию у данного свойства – none.

ul{
list-style-image: url(‘phone.png);}

 

Свойство list - style - position (значение по умолчанию – outside) позволяет указать расположение маркера относительно находящегося в теге li текста. При значении outside маркер выносится за границы текста. Значение inside позволяет расположить маркер внутри текстовой области.

Стилизация таблиц

Внешний вид таблиц можно значительно улучшить с помощью CSS.

 

Для настройки оформления границ в таблице используется свойство border. В следующем примере элементам table, th и td задается черная сплошная граница шириной в 1px.

table, th, td {
border: 1px solid black;}

Высота и ширина таблицы задаются с помощью свойств width и height. В примере ниже ширина таблица равна 100%, а высота элемента th — 50px:

table {
width:100%;}
th{
height:50px;}

 

Текст в таблице выравнивается с помощью свойств text-align (выравнивание по горизонтали) и vertical-align (выравнивание по вертикали). Свойство text-align выравнивает текст по центру, по левому/правому краю или по ширине. Свойство vertical-align выравнивает текст по верхнему/нижнему краю или по центру (top, bottom и middle).

Для управления отступами от границ ячеек до их содержимого используется свойство padding. Его можно использовать для элементов td и th.

Тема 2.3 Оформление HTML – документа средствами CSS

Блочная модель

Любой элемент веб - страницы включает в себя следующие составляющие:

- margin (поля) – пустое место за пределами тега, которое отделяет один тег от другого;

- border – граница определенного цвета, которая обрамляет тег;

- padding (отступы) – пустое пространство внутри тега, которое отделяет содержимое тега от границы;

 

 

Свойство padding (значение по умолчанию = 0) позволяет задать отступы от границы тега до начала его содержимого. Это свойство универсальное. С его помощью можно задать отступ сразу для всех границ тега. В тоже время существуют подобные свойства, позволяющие задать отступ только для одной из сторон:

- padding - left – левой границы тега;

- padding - right – правой границы тега;

- padding - top – верхней границы тега;

- padding - bottom – нижней границы тега;

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

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

div {

padding: 7px 3px 23px 11px;}

 

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

Свойство margin (значение по умолчанию = 0) задает внешний отступ до границы тега, т.е. позволяет отделить тег от других тегов на странице. Как и свойство padding, свойство margin является универсальным свойством, в котором через пробел задаются отступы сразу для четырех сторон тега (по часовой стрелке).

Свойство border – задает границу между внешними и внутренними отступами. Для свойства могут быть указаны значения через пробел толщина границы, ее тип и цвет. Например: border: 1px solid #fff;

Свойство border является универсальным. Оно заменяет сразу три отдельных свойства: border-width, border-style, border-color.

border - width – позволяет задать толщину сразу для всех сторон границы либо отдельно для каждой из сторон:

- если указываете одно значение – свойство (толщина) применяется для всех сторон;

- если указывается два значения через пробел – устанавливается толщина верхней и нижней границы равное первому значению, левой и правой границы – второе значение;

- если указывается через пробел четыре значения – то для разных сторон (по часовой стрелке).

border - style – позволяет задать стиль отображения всей границы тега либо конкретно для каждой из сторон. В качестве значений могут выступать следующие ключевые слова:

- none - скрыть границу;

- solid – сплошная линия;

- dotted – граница из точек;

- dashed – пунктирная линия;

- double – двойная параллельная линия;

- groove – трехмерный эффект линии;

- insert – граница вдавливается внутрь;

- outset – граница выступает наружу;

- ridge - трехмерный эффект линии;

border - color – задает цвет границы. При необходимости можно задать для каждой стороны свой цвет границы.

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

Если явным образом не указываются значения свойств margin, padding и berder, то браузер применяет предустановленные значения.

Свойство border - radius – позволяет округлить границу. Свойство принимает значение радиуса в пикселях или единицах em. Если значение одно, то все углы округляются одинаково. Можно для каждого угла задать вой радиус округления.

Размеры элементов

Размеры элементов задаются с помощью свойств width (ширина) и height (высота). Значение по умолчанию у этих свойств auto, т.е. браузер сам определяет ширину и высоту элемента. Можно явно задать разметы элемента с помощью единиц измерения пиксели или em, а также в процентах. Пиксели определяют точные размеры, единица измерения em зависит от высоты шрифта в элементе. Процентные значения для свойств вычисляются на основании элемента – контейнера.

Фон элементов

Свойство CSS background используется для форматирования фона элементов html. Фактически это свойство состоит из следующего набора свойств CSS:

background-color - определяет цвет фона элемента, background-color: #ccc; Ряд настроек цвета позволяет установить значение для альфа- компоненты, которая отвечает за прозрачность. В CSS за прозрачность элемента отвечает свойство opacity, в качестве значения оно принимает значение от 0 (полностью прозрачный) до 1 (не прозрачный):

div{

width: 100px;

height: 100px;

background-color: red;

opacity: 0.4;}

  background-image - используется для определения изображения, которое будет использоваться в качестве фона: background-image:url('paper.gif'); По умолчанию, фоновое изображение повторяется по горизонтали и вертикали.

background-repeat – устанавливает режим повторения фонового изображения по всей поверхности элемента. Принимает следующие значения:

- repeat - x – повторение по горизонтали;

- repeat - y – повторение по вертикали;

- repeat – повторение по обеим сторонам (значение по умолчанию);

- space – изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов;

- round – изображение должным образом масштабируется для заполнения всего пространства;

- no - repeat – изображение не повторяется.

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

- contain – масштабирует изображение по наибольшей стороне, сохраняя аспектное соотношение;

- cover - масштабирует изображение по наименьшей стороне, сохраняя аспектное соотношение;

- auto – изображение отображается в полный размер, значение по умолчанию.

Если нужно масштабировать изображение таким образом, чтобы оно оптимально было вписано в фон, то для обеих настроек можно установить значение 100%: background-size: 100% 100%;

background – position – указывает позицию фонового изображения. Свойство может принимать отступы от верхнего левого угла элемента в единицах измерения (пикселях) в следующем формате: background-position: отступ_по_оси_Х отступ_по_оси_Y; Либо одно из следующих значений:

- top – выравнивание по верхнему краю элемента;

- left – выравнивание по левому краю элемента;

- right – выравнивание по правому краю элемента;

- bottom – выравнивание по нижнему краю элемента;

- center – расположение по центру элемента.

background - attachment – устанавливает стиль прикрепления фонового изображения к элементу. Свойство принимает следующие значения:

- fixed –фон элемента фиксирован вне зависимости от прокрутки внутри элемента;

- local – по мере прокрутки внутри элемента фон изменяется;

- scroll – фон фиксирован и не меняется при прокрутке, но в отличии от fixed несколько элементов могут использовать свой фон.

background - clip – определяет область, которая вырезается из изображения и используется в качестве фона. Принимает значения:

- border - box – изображение обрезается по границам элемента;

- padding - box –из изображения исключается та часть, которая находится под границами элемента;

- content - box – изображение обрезается по содержимому с учетом внутренних отступов.

background - origin – устанавливает начальную позицию фонового изображения. Может принимать следующие значения:

- border - box –фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border;

- padding - box –фон устанавливается с учетом внутренних отступов;

- content - box – фон устанавливается по содержимому элемента.

В свойстве background можно скомпоновать все ранее рассмотренные свойства или некоторые их них: background:#ссс url (' img _ tree. png ') no - repeat right top;

Создание тени у элемента

Свойство box - shadow позволяет создать у элемента тень. Свойство может принимать сразу несколько значений:

hoffset – горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, при отрицательном – влево;

voffset - вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, при отрицательном – вверх;

blur – необязательное значение, определяет радиус размытия. Чем выше значение, тем больше размыты края тени;

spread – необязательное значение, определяет направление тени. Положительное значение – тень направляется от элемента, отрицательное – внутрь элемента;

color – необязательное значение, устанавливает цвет тени.

Значения свойства перечисляются через пробел.

Обтекание элементов

Как правило, все блоки и элементы в браузере отображаются в том порядке, в каком они определены в коде html. В CSS имеется специальное свойство float, которое позволяет установить обтекание элементов. Свойство принимает следующие значения:

left – элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента;

right – элемент перемещается вправо;

none – обтекание отсутствует.

При применении свойства float для стилизуемых элементов, кроме img, рекомендуется установить свойство width.

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

Для запрета обтекания элементов применяется свойство clear, которое указывает браузеру, что к стилизуемому элементу не должно применяться обтекание. Свойство принимает следующие значения:

left – стилизуемый элемент может обтекать плавающий элемент справа;

right - стилизуемый элемент может обтекать плавающий элемент слева;

both – стилизуемый элемент смещается вниз относительно плавающих элементов;

none – стилизуемый элемент ведет себя стандартным образом.

Градиент

Градиент – это плавный переход от одного цвета к другому. В CSS3 имеется ряд градиентов, которые можно использовать для создания фона элемента.

Градиент не представляют какого-то специального свойства, они лишь создают значение, которое присваивается свойству background - image. Для создания градиента нужно указать его начало и несколько цветов:

background-image: linear-gradient(left, black, white);

Для установки начала градиента можно использовать следующие значения: left (слева-направо), right (справа-налево), top (сверху-вниз), bottom (снизу-вверх).

Количество цветов может быть более двух.

Для установки радиального градиента, когда распределение цветов происходит от центра наружу по круговой схеме, используется функция radial - gradient(). В скобках указываются цвета, начиная с середины.

Центр радиального градиента можно сместить, указав его позицию:

background-image: radial-gradient(25% 30%, circle, white, black);