Псевдоэлементы и псевдоклассы
Поможем в ✍️ написании учебной работы
Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

К псевдоэлементам относят:

first-letter - задает стиль первой букве слова.

first-line - задает стиль первой строке абзаца.

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

a:link - задает стиль обычной ссылки.

a:active - задает стиль активной ссылки.

a:visited - задает стиль посещенной ссылки.

a:hover - задает стиль ссылки, на которую наведен курсор.

Color и background

Задать цвет текста для элемента можно тремя способами:

body { color:green; } h1 { color:#FF0000; } h2 { color:rgb(255,0,0); }

background – на самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку, и абзацу, и любому другому элементу. Рассмотрим группу свойств background:

background-color - задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения указать значение inherit.

background-image - задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к файлу указывается относительно таблицы стилей.

background-repeat - задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта: repeat - повторять изображение по горизонтали и вертикали, repeat-x - повторять изображение только по горизонтали, repeat-y - повторять изображение только по вертикали, no-repeat - не повторять изображение.

background-attachment - указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения: scroll - фон прокручивается вместе с текстом. Это значение используется по умолчанию, fixed - фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно остается неподвижным.

background-position - задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов.

body { background-image: url(picture.gif); background-repeat: no-repeat; background-color:#243CED; background-position:50px 50px; color: yellow; }

body { background: url(picture.gif) no-repeat #33CCFF center top; color: yellow; }

Шрифты

Для задания параметров шрифтов в CSS используется свойство font.

font - family задает гарнитуру шрифта. Все шрифты можно условно разделить на несколько групп: Serif - шрифты с засечками, например, TimesNewRoman, Sans - serif - шрифты рубленные, без засечек, например, Arial, Monospace - моноширинныешрифты, например, CourierNew, Cursive - курсивныешрифты, например, CalistoMT, Fantasy - декоративныешрифты, например, Torhok.

f ont-variant задает вариант написания букв из двух возможных: normal (обычный) и small-caps (малые прописные буквы).

f ont-weight задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому, унаследованному от предка) и lighter (менее жирный по отношению к базовому, унаследованному от предка).

f ont-size задает размер шрифта. Задавать размер в css можно тремя способами: с помощью ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large), с помощью относительных единиц (% и em), с помощью единиц измерения длины (пикселы, пункты, сантиметры и миллиметры).

p { font-family: Verdana, sans-serif; font-size: 12px; font-weight: bold; font-variant: small-caps; font-style: italic; }

p { font: italic 12px Verdana, sans-serif; }

Текст

t ext-decoration отвечает за оформление текста. Может принимать следующие значения: none - у текста нет оформления, underline - текст подчеркивается, overline - текст надчеркивается линией, расположенной над текстом, line-through - текст отображается зачеркнутым, blink - текст становится мигающим (не работает в IE).

t ext-align отвечает за горизонтальное выравнивание текста. Может принимать следующие значения: left - выравнивание по левому краю, center - выравнивание по центру, right - выравнивание по правому краю, justify - выравнивание по ширине.

t ext-indent отвечает за отступы в абзацах. Отступы задаются в единицах измерения и %, могут быть как положительными (красная строка), так и отрицательными (висячая строка).

t ext-transform отвечает за видоизменение текста, точнее за смену регистра. Используются следующие значения: capitalize - меняет первую букву каждого слова на заглавную, uppercase - меняет все буквы на заглавные, lowercase - меняет все буквы на строчные, none - изменений не происходит.

В CSS есть несколько свойств, регулирующих расстояния между словами, буквами в словах и строками: word-spacing - задает интервал между словами, letter-spacing - задает интервал между буквами, line-height - задает интервал между строками.

body { background: #0033CC; color: #FFFFFF; font: 12px Verdana, sans-serif; }

h1 { font-size: 1.6em; color: #FFCC00; letter-spacing: 5px; text-align: center; }

h2 { font-size: 1.3em; color: #FFCC00; text-decoration: underline; text-align: center; }

p:first-letter { color: #FFCC00; }

p { text-indent: 1.5em; word-spacing: 10px; font-style: italic; }

Блоки

В HTML все элементы можно разделить на два типа: блочные и строчные.

Блочные элементы визуально создают самостоятельную структурную единицу - блок. К ним можно отнести, например, элементы H1-H6, P, DIV. Такие элементы отделяются от других абзацными отступами.

Строчные элементы выводятся линейной строкой. К ним можно отнести, например, элементы I, B, U, S и другие. В CSS модель документа представляется блоком. Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Причем, есть блоки, структурно отделенные от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.

У блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого. Затем идет граница блока (border), которая может быть как видимой, так и невидимой. Также блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента. Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.

Рисунок 9 –Блок.

Свойства – border

d iv является контейнером для остальных. Элемент div отделяется от остальных элементов абзацными отступами, содержимое тегов div располагается с абзацным отступом, т.е. одно под другим. Элемент span, в отличии от div, создает строчный блок.

Границы в css можно задавать отдельно для каждой стороны: border-top - верхняя граница, border-right - правая граница, border-bottom - нижняя граница, border-left - левая граница.

Каждый сегмент границы может иметь свои характеристики: цвет, толщину и тип линии. Для этого к свойству границы через дефис необходимо дописать ключевые слова: color (для цвета), width (для толщины) и style (для типа линии). Например, border-top-color определяет цвет верхней границы, а border-left-style - тип линии для левой границы. Если все четыре границы будут иметь одинаковые значения, то следует воспользоваться сокращенной записью: border-color - цвет всех границ, border-width - толщина всех границ, border-style - стиль всех границ.

Значениями свойства color могут быть именные цвета (red, blue и т.д.), шестнадцатеричные коды цветов (типа #FFCCFF) и десятичные коды в модели RGB (типа rgb(255, 0, 0)).

Значениями свойства width могут быть ключевые слова: thin (тонкая граница), medium (средняя граница) и thick (толстая граница). А также любая единица измерения.

Значениями свойства style могут быть следующие ключевые слова: none - граница отсутствует, dotted - граница состоит из точек, dashed - граница в виде пунктирной линии, solid - граница отображается сплошной линией, double - граница отображается двойной сплошной линией, groove - граница отображается вдавленной объемной линией, ridge - граница отображается выпуклой объемной линией, inset - граница отображается так, что весь блок выглядит вдавленным, outset - граница отображается так, что весь блок выглядит выпуклым.

#first { border-bottom-color: red; border-top-style: solid; border-left-width: 2px; }

#second { border: 1px solid red; }

Свойства – margin , padding

Поля задают свободное пространство вокруг элемента. Как и границы, поля в css можно определять отдельно для верхней, правой, нижней и левой сторон. Для этого используются свойства: margin - top - ширина верхнего поля, margin - right - ширина правого поля, margin - bottom - ширина нижнего поля, margin - left - ширина левого поля.

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

Отступы позволяют отделить содержимое блока от границы. Параметры отступов в css можно задать для каждой стороны отдельно, используя следующие свойства: padding-top - ширина верхнего отступа, padding-right - ширина правого отступа, padding-bottom - ширина нижнего отступа, padding-left - ширина левого отступа.

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

#third { border: 1px solid red; margin: 10px; padding: 10px 5px; }

Позиционирование блоков

В HTML для позиционирования элементов на странице используются таблицы. У таблиц есть как преимущества (легкость использования, одинаковое отображение браузерами), так и недостатки (объемный, нечитабельный код, нелогичность верстки и т.д.).

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

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

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

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

static - блок позиционируется в нормальном потоке. Это значение по умолчанию.

relative - относительное позиционирование (относительно нормального потока).

absolute - абсолютное позиционирование.

fixed - фиксированное позиционирование (фиксируется относительно области просмотра).

Абсолютное позиционирование

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

left– указывает, на сколько надо сместить блок относительно левого края окна.

right– указывает, на сколько надо сместить блок относительно правого края окна.

top– указывает, на сколько надо сместить блок относительно верхнего края окна.

bottom– указывает, на сколько надо сместить блок относительно нижнего края окна.

Для блока content укажем свойство position:absolute и зададим смещение: от левого края окна на 200 пикселов, а от верхнего края окна на 100 пикселов.

#content {

background: oldlace;

width: 500px;

height: 300px;

position: absolute;

left: 200px;

top:100px;

}

Дата: 2019-02-19, просмотров: 291.