Понятие таблицы стилей. Помещение таблицы стилей на страницу. Внутренние и внешние таблицы стилей.

Каскадные таблицы стилей

Важность

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

Таблицы стилей агента пользователя

Обычные объявления в таблицах стиля пользователя

Обычные объявления в таблицах стиля автора

Важные объявления в таблицах стиля автора

Важные объявления в таблицах стиля пользователя

 

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

 

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

 

Таблица стилей автора является тем, что мы обычно называем "таблица стилей". Это таблица стилей, которую автор документа (или, более вероятно, дизайнер сайта) написал и присоединил (или включил).

 

Обычные объявления являются именно этим: обычными объявлениями. Противоположными являются важные объявления, которые являются объявлениями, за которыми следует директива !important.

 

Как можно видеть, важные объявления в таблице стилей пользователя будут перекрывать все остальное, что вполне логично. Этот пользователь с дислексией может, например, захотеть, чтобы весь текст выводился шрифтом Comic Sans MS, если он считает, что этот шрифт легче всего читать. Он мог бы тогда создать таблицу стилей пользователя, содержащую следующее правило:

* {

font-family: "Comic Sans MS"!important;

}

 

В этом случае не имеет значения, что определил дизайнер, и не имеет значение, какое семейство шрифтов задано по умолчанию в браузере, все будет выводиться шрифтом Comic Sans MS.

 

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

 

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

Специфичность является некоторой характеристикой, которую каждый автор CSS должен понимать и думать о ней. Можно представлять ее как меру того, насколько конкретным является селектор некоторого правила.

Порядок исходного кода

 

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

 

Единицы измерения в CSS.

В CSS-свойстве font-size используются различные единицы измерения размера шрифта (em, ex, px, in, cm, mm, pt, pc, %), которые могут быть разделены на две группы.

Относительные длины

em: ширина одного символа «главного» шрифта. (один em равен размеру текущего шрифта текущего элемента)

ex: высота одного символа «главного» шрифта. (один ex равен x-height шрифта (x-height составляет обычно около половины font-size))

px: пиксел, зависит от дисплея (разрешение и плотности пикселей)

Абсолютные длины

in: дюймы. Один дюйм равен 2.54 сантиметра

cm: сантиметры

mm: миллиметры

pt: «пункты» — 1 пункт в CSS равен 1/72 дюйма.

pc: пика — 1 пика равна 12 пунктам.

 

Величина «проценты» определена относительно длины или другой величины.

Цвета

Единица Описание

color_name Название цвета (например, red)

rgb(x,x,x) Значение RGB (например, rgb(255,0,0))

rgb(x%, x%, x%) Значение RGB в процентах (например, rgb(100%,0%,0%))

#rrggbb шестнадцатеричное число (например, #ff0000)

--

Перечислим множество наиболее распространенных/важных терминов, связанных с Web-дизайном и разработкой, и их определения.

абсолютная единица измерения - в CSS используются in, cm, mm, pt, pc

выравнивание - основные значения: left, right, centred, justified

 

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

 

en - базовая концепция: типографская единица измерения, определяемая как половина высоты шрифта, обычно ширина буквы n.

 

пика - базовая концепция: используемая компьютерами современная пика равна 4.233mm или 0.166",

 

пункт - базовая концепция: в каждом дюйме имеется 72 пункта, и 12 пунктов в пика.

 

относительные единицы измерения - в CSS используются em, ex, px

 

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

 

x-высота высота строчной буквы "x", которая обычно бывает одинаковой у большинства строчных букв шрифта. Указывается в CSS единицей измерения ex. Необходимо переписать, так как не совсем правильно. Реальное определение является расстоянием между средней линией и базовой линией. Это высота букв x, u, v, w и z во многих, но не всех шрифтах. Другие буквы возвышаются, спускаются ниже, или прeвосходят x-высоту, чтобы выглядеть лучше (буквы с криволинейным верхом, такие как c, o и т.д.).

 

Em, проценты, и пункты, согласно CSS

 

Традиционно, единица измерения em эквивалентна высоте прописной буквы "M" в шрифте, к которому она применяется. Однако в CSS единица измерения em в действительности эквивалентна общей высоте одной строки; другими словами высоте элемента, font-size которого задан как 14 пикселей:

1em = 100% = 14px

В типичных рабочих средах это утверждение выше можно расширить до следующего:

1em = 100% = 14px = 10.5pt

 

Форматирование шрифта с помощью CSS.

В CSS сушествует два типа имен семейств шрифтов:

-обобщенное семейство (generic family) - группа семейств шрифтов с одинаковым начертанием (например "Serif" или "Monospace")

-семейство шрифтов (font family) - специфическое семейство шрифтов (например "Times New Roman" или "Arial")Обобщенное семейство

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

Семество шрифта устанавливается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов в качестве "запасных" вариантов. Если браузер не поддерживает первый шрифт, он пробует применить следующий шрифт.

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

Замечание: Если в имени семейства шрифта более одного слова, оно должно заключаться в кавычки, например семейство шрифтов "Times New Roman".

Более одного семейства шрифтов указывается через запятую:

Пример

p.serif{font-family:"Times New Roman",Times,serif;}

Стиль Шрифта

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

Это свойство имеет три значения:

normal - Обычный текст

italic - Курсивный текст

oblique - Наклонный текст (наклонный (oblique) текст очень похож на курсивный, но меньше поддерживается)

Пример

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

Размер Шрифта

Свойство font-size устанавливает размер текста.

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

Всегда используйте подходящие теги HTML, например <h1> - <h6> для заголовков и <p> для параграфов.

Значение font-size может быть абсолютным или относительным.

Абсолютный размер:

Устанавливает определенный размер шрифта

Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо из соображений удобства просмотра)

Абсолютный размер полезен, когда физический размер вывода известен

Относительный размер:

Устанавливает размер относительно окружающих элементов

Позволяет пользователю изменять размер текста в браузерах

Если вы не указываете размер шрифта, то размер шрифта по умолчанию, размер обычного текста, например в параграфах, равен 16px, т.е. 16 пикселей (16px=1em).

Установка Размера Шрифта в Пикселях

Установка размера шрифта в пикселях дает вам полный контроль на размером текста:

Пример

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

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

Установка Размера Шрифта с Помощью Em

Чтобы избежать проблем изменения размера в Internet Explorer, многие разработчики используют единицы em вместо пикселей.

Единицы размеры em рекомендуются W3C.

1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах равен 16px. Таким образом, размер по умолчанию одной единицы em равен 16px.

Размер может быть вычислен из пикселей в единицы em, используя эту формулу: пиксели/16=em

Пример

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

В примере выше, размер текста в em такой же, как и в предыдущем примере в пикселях. Однако, указывая размер в em, становится возможным подгонять размер текста во всех браузерах.

 

К сожалению, по-прежнему остается проблема с IE. При изменении размера текста, он становится больше чем должен, когда увеличиваешь его, и становится меньше, чем должен, когда уменьшаешь его.

Использование Комбинации Процентов и Em

Решение, которое работает во всех браузерах, - установить размер шрифта по умолчанию в процентах в элементе body:

Пример

body {font-size:100%;}

h1 {font-size:2.5em;}

h2 {font-size:1.875em;}

p {font-size:0.875em;}

Наш код теперь работает идеально! Он показывает одинаковый размер текста во всех браузерах, и позволяет всем браузерам изменять размер текста корректно!

Все CSS Свойства Шрифта

Font: Устанавливает все свойства шрифта в одном объявлении

font-family: Устанавливает семейство шрифта для текста

font-size: Устанавливает размер шрифта текста

font-style: Устанавливает стиль шрифта текста

font-variant: Указывает, следует или нет отображать текст в шрифте small-caps (маленькие заглавные буквы)

font-weight: Указывает вес шрифта

 

Стиль Границы

Свойство border-style указывает, какой тип границы отображать.

Никакое из свойств границы не возымеет КАКОЙ-ЛИБО эффект до тех пор, пока свойство border-style не установлено!

Значения border-style:

none: Отсутствие границы

dotted: Граница из точек

dashed: Пунктирная граница

solid: Сплошная граница

double: Двойная граница. Ширина двойной границы равна значению border-width

groove: Определяет 3D рельефную границу. Эффект зависит от значения border-color

ridge: Определяет 3D хребтообразную границу. Эффект зависит от значения border-color

inset: Определяет 3D вдавленную границу. Эффект зависит от значения border-color

outset: Определяет 3D выпуклую границу. Эффект зависит от значения border-color

 

Ширина Границы

Свойство border-width используется, чтобы установить ширину границы.

Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin (тонкая), medium (средняя), или thick (толстая).

Замечание: Свойство "border-width" не работает, если используется в одиночку. Используйте сначала свойство "border-style", чтобы установить границы.

Пример:

p.one

{

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

 

Цвет Границы

Свойство border-color используется, чтобы установить цвет границы. Цвет может быть установлен с помощью:

- названия - укажите название цвета, например "red"

- RGB - укажите RGB значение, например "rgb(255,0,0)"

-Hex - укажите шестнадцатеричное значение, например "#ff0000"

Пример:

p.one

{

border-style:solid;

border-color:red;

}

p.two

{

border-style:solid;

border-color:#98bf21;

}

 

В CSS можно указать различные границы для разных сторон:

Пример:

p

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

Свойство border-style может иметь от одного до четырех значений.

border-style:dotted solid double dashed;

верхняя граница - из точек

правая граница - сплошная

нижняя граница - двойная

левая граница - пунктирная

 

Чтобы укоротить код, можно указать все свойства границы в одном свойстве. Оно называется стенографическим (или сокращенным) свойством - "border":

 

border:5px solid red;

При использовании свойства border, порядок значений таков:

border-width

border-style

border-color

 

Отступы

Оступы создают пространство вокруг содержания (внутри границы) элемента. На отступы влияет цвет фона элемента.

Верхний (top), правый (right), нижний (bottom) и левый (left) отступы могут быть заданы независимо, используя отдельные свойства. Стенографическое свойство также может использоваться, чтобы задать все отступы одновременно.

Возможные Значения

Длина: определяет фиксированный отступ (в пикселях, пунктах, единицах em, и т.д.)

%: определяет отступ в % от элемента-контейнера

В CSS можно указать различные отступы для разных сторон:

Примерpadding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

Чтобы укоротить код, можно указать все свойства отступов в одном свойстве. Оно называется стенографическим (сокращенным) свойством - "padding":

padding:25px 50px;

 

Свойство padding может иметь от одного до четырех значений.

padding:25px 50px 75px;

верхний отступ 25px

правый и левый отступы по 50px

нижний отступ 75px

 

 

Поля

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

 

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

Возможные Значения

Auto: браузер устанавливает поля. Результат этого значения зависит от браузера

Длина: определяет фиксированное поле (в пикселях, пунктах, единицах em, и т.д.)

%: определяет поле в % от содержащего элемента

 

Можно использовать отрицательные значения, чтобы частично перекрыть содержание.

 

В CSS можно указывать различные поля для разных сторон:

Примерmargin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

 

Чтобы сократить код, можно указать все свойства полей в одном свойстве.оно называется стенографическим свойством - "margin":

margin:100px 50px;

 

Свойство margin может иметь от одного до четырех значений.

margin:25px 50px;

верхнее и нижнее поля равны по 25px

правое и левое поля равны по 50px

 

Отступы

Оступы создают пространство вокруг содержания (внутри границы) элемента. На отступы влияет цвет фона элемента.

Верхний (top), правый (right), нижний (bottom) и левый (left) отступы могут быть заданы независимо, используя отдельные свойства. Стенографическое свойство также может использоваться, чтобы задать все отступы одновременно.

Возможные Значения

Длина: определяет фиксированный отступ (в пикселях, пунктах, единицах em, и т.д.)

%: определяет отступ в % от элемента-контейнера

В CSS можно указать различные отступы для разных сторон:

Примерpadding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

Чтобы укоротить код, можно указать все свойства отступов в одном свойстве. Оно называется стенографическим (сокращенным) свойством - "padding":

padding:25px 50px;

 

Свойство padding может иметь от одного до четырех значений.

padding:25px 50px 75px;

верхний отступ 25px

правый и левый отступы по 50px

нижний отступ 75px

 

 

Поля

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

 

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

Возможные Значения

Auto: браузер устанавливает поля. Результат этого значения зависит от браузера

Длина: определяет фиксированное поле (в пикселях, пунктах, единицах em, и т.д.)

%: определяет поле в % от содержащего элемента

 

Можно использовать отрицательные значения, чтобы частично перекрыть содержание.

 

В CSS можно указывать различные поля для разных сторон:

Примерmargin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

 

Чтобы сократить код, можно указать все свойства полей в одном свойстве.оно называется стенографическим свойством - "margin":

margin:100px 50px;

 

Свойство margin может иметь от одного до четырех значений.

margin:25px 50px;

верхнее и нижнее поля равны по 25px

правое и левое поля равны по 50px

 

Графика с помощью CSS.

С CSS3 мы можем создавать анимацию, которая может заменить анимированные изображения, Flash анимацию и скрипты JavaScript во многих случаях.

Правило @keyframes используется для создания анимации. Укажите CSS стиль внутри правила @keyframes и анимация будет воспроизводиться, плавно изменяя текущий стиль на новый.

Поддержка Браузерами

Internet Explorer и Opera пока еще не поддерживают правило @keyframes и свойство animation.

Firefox требует приставки -moz-, тогда как Chrome и Safari требуют приставки -webkit-.

Пример:

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari и Chrome */

{

from {background: red;}

to {background: yellow;}

}

 

CSS3 свойство animation

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

 

Привязка анимации к селектору осуществляется указанием по крайней мере двух следующих свойств CSS3 анимации:

Указание названия анимации

Указание продолжительности анимации

Пример

 

Привязка анимации "myfirst" к элементу div, продолжительность: 5 секунд:

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s; /* Firefox */

-webkit-animation: myfirst 5s; /* Safari и Chrome */

}

Замечание: Вы должны определить название (имя) и продолжительность анимации. Если продолжительность пропущена, анимация не запустится, так как значение по умолчанию равно 0.

 

Анимация - это эффект, который позволяет элементу плавно изменять один стиль на другой.

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

Укажите, когда должно произойти изменение в процентах (от общей продолжительности одного цикла), или ключевые слова "from" и "to", которые обозначают 0% и 100% соответственно.

0% - это начало анимации, 100% - это завершение (когда анимация полностью завершена).

Пример

Изменить цвет фонаи положение, когда анимация завершена на 25%, 50% и снова, когда анимация будет полностью (на 100%) завершена: @keyframes myfirst

{

0% {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

 

CSS3 Animation Properties

Ниже перечислены все свойства анимации:

@keyframes: определяет анимацию

Animation: стенографическое (сокращенное) свойство для всех свойств анимации, за исключением свойства animation-play-state

animation-name: указывает название анимации @keyframes 3

animation-duration: указывает, сколько секунд (миллисекунд) требуется для завершения одного полного цикла анимации. По умолчанию 0

animation-timing-function: описывает, как будет изменяться скорость проигрывания анимации в течение одного цикла. Default "ease"

animation-delay: указывает, когда начнется анимация (задержка анимации). По умолчанию 0

animation-iteration-count: указывает, сколько раз будет воспроизводиться анимация. По умолчанию один раз

animation-direction: указывает, будет или нет анимация проигрываться в обратном направлении (от конца к началу) на четных циклах воспроизведения. По умолчанию равно "normal"

animation-play-state: указывает, запущена анимация или на паузе. Значение по умолчанию "running"

 

Оформление таблиц с помощью CSS.

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

Чтобы указать границы таблиц в CSS, используйте свойство border.

Пример ниже указывает черную границу для элементов table, th, и td:

Пример

table,th,td

{ border:1px solid black; }

Таблица в примере выше имеет двойные границы, потому, что как элемент table, так и элементы th/td - имеют отдельные границы.

 

Свойство border-collapse устанавливает, будут ли границы таблицы свернуты в одинарную границу, или будут отображаться отдельно:

Пример

table

{ border-collapse:collapse; }

table, td, th

{ border:1pxsolidblack;}

 

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

Пример ниже устанавливает ширину таблицы в 100%, и высоту элементов th в 50px:

Пример

table

{ width:100%; }

th

{ height:50px; }

 

Текст в таблице выравнивается с помощью свойств text-align и vertical-align.

Свойство text-align указывает горизонтальное выравнивание, например, по левому краю (left), по правому краю (right), или по центру (center):

Пример

td

{text-align:right;}

 

Свойство vertical-align устанавливает вертикальное выравнивание, например, по верху (top), по низу (bottom), или по середине (middle):

Пример

td

{ height:50px;

vertical-align:bottom; }

 

Свойство Padding Таблицы

Чтобы контролировать пространство между границей и содержанием в таблице, используйте свойствоuse padding в элементах td и th:

Пример

td

{ padding:15px;}

 

Цвет Таблицы

Пример ниже указывает цвет границ, текста и фона элементов th:

Пример

table, td, th

{ border:1px solid green; }

th

{ background-color:green;

color:white; }

 

Оформление списков с помощью CSS.

CSS свойства списка позволяют вам:

-Устанавливать различные маркеры пунктов списка для упорядоченных списков

- Устанавливать различные маркеры пунктов списка для неупорядоченных списков

-Устанавливать изображение в качестве маркера пункта списка

В HTML существует два типа списков:

- неупорядоченные списки - пункты списка помечаются маркерами

- упорядоченные списки - пункты списка помечаются числами или буквами

 

С помощью CSS списки могут быть оформлены лучшим образом, и изображения могут использоваться в качестве маркеров для пунктов списка.

 

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

Пример

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

Некоторые значения свойства list-style-type для неупорядоченных списков, и некоторые - для упорядоченных.

 

Чтобы указать изображение в качестве маркера пункта списка, используйте свойство list-style-image:

Пример

ul

{ list-style-image:url('sqpurple.gif'); }

 

Если вы хотите, чтобы изображение-маркер размещался одинаково во всех браузерах, кросс-браузерное решение объяснено ниже.

 

Следующий пример отрисовывает изображение-маркер одинаково во всех браузерах:

Пример

ul{

list-style-type:none;

padding:0px;

margin:0px;

}

li{

background-image:url(sqpurple.gif);

background-repeat:no-repeat;

background-position:0px 5px;

padding-left:14px;

}

Объяснение примера:

Для ul:

-Установка list-style-type в none - чтобы удалить маркер пункта списка

-Установка свойств padding и margin в 0px (для кросс-браузерной совместимости)

Для li:

-Установка адреса URL для изображения, и значения no-repeat (чтобы изображение выводилось только один раз)

-Позиционирование изображения в желаемом месте (влево на 0px и вниз на 5px)

-Установка левого отступа для текста в списке

 

Также можно указать все свойства списка в одном - одиночном свойстве. Оно называется стенографическим (или сокращенным) свойством - list-style:

ul

{ list-style:squareurl("sqpurple.gif"); }

При использовании стенографического свойства порядок значений таков:

list-style-type

list-style-position

list-style-image

 

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

 

Все CSS Свойства Списка:

list-style: устанавливает все свойства списка в одном объявлении

list-style-image: устанавливает изображение в качестве маркера пункта списка

list-style-position: указывает, должны ли маркеры пункта списка появляться внутри или снаружи содержания

list-style-type: указывает тип маркера пункта списка

 

Плавающие элементы в CSS.

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

Элементы плавают горизонтально, это означает, что элемент может плавать только слева или справа, но не снизу или сверху.

Плавающий элемент будет помещен влево или вправо настолько, насколько это возможно.

Элементы после плавающего элемента будут обтекать вокруг него.

Элементы до плавающего элемента не будут подвержены воздействию.

Если изображение плавает справа, следующий за ним текст будет пристыкован слева от него:

Пример

img

{ float:right;}

 

Если вы располагаете несколько плавающих элементов друг за другом, они будут "плавать" друг за другом, если позволяет пространство.

Здесь мы сделали галерею изображений, используя свойство float:

Пример

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

 

Элементы после плавающего элемента будут "плавать" вокруг него. Чтобы избежать этого, используйте свойство clear.

Свойство clear указывает, какие стороны элемента запрещены к воздействию других плавающих элементов.

Добавим строку текста к галерее изображений, используя свойство clear:

Пример

.text_line

{

clear:both;

margin-bottom:2px;

}

 

Пример

<ul>

<li><a href="#home">Домой</a></li>

<li><a href="#news">Новости</a></li>

<li><a href="#contact">Контакты</a></li>

<li><a href="#about">Осайте</a></li>

</ul>

 

Теперь давайте удалим маркеры, а также поля и отступы из списка:

Пример

ul{

list-style-type:none;

margin:0;

padding:0;}

Объяснение примера:

list-style-type:none - Удаляет маркеры. Панель навигации не нуждается в списке маркеров

Установка полей и отступов в 0 используется для удаления настроек браузера по умолчанию

 

Вертикальная Панель Навигации

Чтобы построить вертикальную панель навигации, нам нужно только добавить стили к элементам <a>, в дополнение к коду выше:

Пример

a{

display:block;

width:80px;

background-color:#dddddd; }

Объяснениепримера:

display:block - Отображение ссылок в виде блоков делает всю область ссылки пригодной для клика (а не только текст), а также позволяет нам указать ширину

width:80px - Блочные элементы занимают всю ширину по умолчанию. Мы же хотим указать ширину в 80 px

Замечание: Всегда указывайте ширину для элементов <a> в вертикальной панели навигации. Если вы опустите ширину, IE6 может отобразить неожиданные результаты.

 

Пример

li

{ display:inline;}

Объяснение примера:

display:inline; - По умолчанию элементы <li> являются блочными. Здесь мы удаляем переносы строк до и после каждого пункта списка, чтобы отображать их в одной строке

Плавающие Пункты Списка

Для того чтобы ссылки имели одинаковую ширину, сделайте элементы <li> плавающими и укажите ширину для элементов <a>:

Пример

li

{ float:left; }

a{

display:block;

width:80px;

background-color:#dddddd; }

Объяснение примера:

float:left - использование свойства float, чтобы заставить блочные элементы располагаться ("плавать") друг за другом

display:block - Отображение ссылок в виде блоков делает всю область ссылки областью клика (а не только текст), и позволяет указать ширину

width:80px - Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать друг за другом. Поэтому мы указываем ширину ссылок в 80px

 

Пример

h2 {

position:absolute;

left:100px;

top:150px;}

 

Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.

Абсолютно расположенные элементы могут перекрывать другие элементы.

Свойство z-index указывает вертикальный порядок для элемента.

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

 

Элемент с большим вертикальным порядком всегда отображается впереди элемента с меньшим вертикальным порядком.

Замечание: z-index работает только для позиционированных элементов (position:absolute, position:relative или position:fixed).

Свойство z-index поддерживается всеми основными браузерами.

Замечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует объявления!DOCTYPE. IE9 поддерживает "inherit".

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

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

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

Inherit: указывает, что вертикальный порядок должен наследоваться от родительского элемента

 

Пример

h2.pos_left {

position:relative;

left:-20px; }

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

Примерh2.pos_top

{

position:relative;

top:-50px;

}

CSS3 Тень Контейнера

В CSS3, свойство box-shadow используется для добавления тени к контейнерам:

Пример

 

Добавление тени контейнера к элементу div:

div{

box-shadow: 10px 10px 5px #888888;

-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */}

 

CSS3 Граница-Изображение

Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:

Свойство border-image позволяет вам указать границу-изображение.

Пример

Использование изображения для создания границы вокруг элемента div:

div{

border-image:url(border.png) 30 30 round;

-moz-border-image:url(border.png) 30 30 round; /* Firefox */

-webkit-border-image:url(border.png) 30 30 round; /* Safari и Chrome */

-o-border-image:url(border.png) 30 30 round; /* Opera */}

Новые Свойства:

border-image: Стенографическое свойство для установки всех свойств группы border-image-* 3

border-radius: Стенографическое свойство для установки всех четырех свойств border-*-radius 3

box-shadow: Присоединяет один или более эффектов отбрасывания тени к контейнеру

 

Каскадные таблицы стилей

Понятие таблицы стилей. Помещение таблицы стилей на страницу. Внутренние и внешние таблицы стилей.

Таблицы стилей CSS

Классический, наиболее распространенный, HTML 3.2 предоставляет средства физического форматирования документов, для чего имеются специальные теги (например, теги <font>, <b>, <i>) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают автора явно прописывать эти теги и атрибуты для каждого нового абзаца, что, сильно увеличивает размер страниц.

В спецификации HTML 4.0 используется логическое форматирование, при котором структура и оформление документа четко разделены. Реализуется разделение структуры и оформления документа с помощью CSS. То же самое можно сказать и при XHTML.

Понятие стиля, таблицы стилей и CSS

Стиль, представляет собой набор параметров, определяющих внешний вид документа HTML при его отображении в окне браузера: шрифты и цвета заголовков разных уровней, шрифт и разрядка основного текста, задаваемого в тэге абзаца <p>, и т. д. Стиль задается по определенным правилам

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

CSS level 1(Cascade Style Sheets, Каскадные таблицы стилей, уровень 1) представляют собой технологию определения и присоединения стилей к документам HTML. Термин "каскадные" используется потому, что возможно использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определенным правилам выстраивает приоритетность применения этих таблиц.

Правила CSS

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

h1 {color: blue; font-size: 16pt}

 

Назначение свойства очевидно из его названия. В приведенном правиле селектором является элемент h1, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color) определен как синий (значение blue) и размер шрифта (свойство font-size) определен в 16 пунктов (значение 16pt). В одном правиле можно задать несколько определений, разделенных символом точка с запятой (;).

Связывание HTML с CSS

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

Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.

Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе.

Импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере.

Встраивание в тэги документа — позволяет изменять форматирование конкретных элементов страницы.

Встраивание CSS в HTML

CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу <body>. Если стиль задан для тега <body>, он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нет необходимости прописывать теги <font> и атрибуты color, size и т. п. для каждого абзаца на странице – достаточно задать стиль для тега <body>, и все абзацы на стран<