Главная
Основы языка оформления стилей документа CSS

Основы языка оформления стилей документа CSS

26 сентября 2024 187

Что такое CSS

CSS (Cascading Style Sheets) – это каскадные листы стилей, которые применяются для описания внешнего вида веб-документа, написанного при помощи языка разметки HTML.

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

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

Синтаксис СSS

RuTopia - Основы языка оформления стилей документа CSS

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

Оформление CSS

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

Комментарии в CSS

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

Способы объявления сss

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

Inline-стили

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

Стили в разделе head

Для того, чтобы подключить стили этим способом, существует HTML тег style. У него в атрибуте type указываем тип данных, в данном случае это text/css. Внутри этого тега мы уже прописываем стили, которые будут действовать для всей данной страницы.

Внешний CSS файл

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

style.css

А в нужном HTML файле этот файл подключаем.

index.html

Для подключения CSS файла используется тег link, который помещается в раздел head нужного HTML файла. И для того, чтобы правильно подключить файл стилей, у тега link нужно указать несколько атрибутов. В атрибуте rel указывается значение stylesheet, т.е. лист стилей, это нужно для того, чтобы браузер понимал, что подключается файл стилей CSS. В атрибуте href указывается путь к CSS файлу, причем так же, как и в случае с гиперссылками, этот путь может быть как относительным, так и абсолютным. Указывается атрибут type со значением text/css.

Какой способ подключения стилей выбрать?

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

Селекторы в CSS

Селекторы тегов

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

Селекторы идентификаторов (id)

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

Селекторы классов (class)

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

Селекторы атрибутов

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

В данном примере, сначала указывается стиль для всех картинок, у которых присутствует атрибут title. Для этого название атрибута указывается в квадратных скобках, сразу после названия тега. Второй пример. Стиль будет применяться для всех тегов 'input /', в значении атрибута type которого присутствует значение text, т.е. для всех обычных текстовых полей ввода.

Свойства стилей

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

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

Относительные единицы измерения

px - пиксел;
% - процент;
em – высота текущего шрифта.

Пиксели

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения. Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например, размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333...px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

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

+ Четкость и понятность
- Другие единицы могут устанавливать соотношения между различными размерами

Проценты

Проценты %, как и em – относительные единицы. Когда мы говорим «процент», то возникает вопрос – «Процент от чего?» Как правило, процент берётся от значения свойства родителя с тем же названием, но не всегда. Это очень важная особенность процентов, про которую, увы, часто забывают.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Абсолютные единицы измерения

cm - сантиметр;
mm – миллиметр;
in - дюйм;
pt - пункт;
pc - пика.

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

Способы задания цветов

Цвета в CSS можно задавать 3 различными способами. Первый способ - задавать цвета, используя названия цветов на английском языке, например: red, green, blue, black, yellow, white и т.д. Но при таком подходе есть ограничения в выборе цвета, невозможно получить различные оттенки цветов. Для того, чтобы можно было выбрать один из более, чем 16 млн. цветов, нужно использовать способ выбора цвета: либо как функциональный RGB, либо шестнадцатеричный RGB. RGB – это аббревиатура, и расшифровывается она как Red-Green-Blue, то есть Красный-Зеленый-Синий. Таким образом, любой цвет можно получить, смешав эти три цвета.

Функциональный RGB

RGB(255, 130, 0) 0 - 255

RGB(100%, 70%, 0%) 0 – 100%

В этом случае, выбирается насыщенность любого из трех цветов в диапазоне от 0 - 255, или в процентах от 0 - 100%, и используется значение RGB, где в скобках через запятую перечисляется насыщенность каждого из 3-х цветов.

Шестнадцатеричный RGB

#FA96CF; 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

#FFAA00 =' #FA0

Если использовать шестнадцатеричный RGB, то каждый цвет можно представить в виде пары значений, т.е. первый и второй символ - это красный цвет, третий и четвертый - это зеленый, пятый и шестой - синий. Каждый символ может быть представлен одним из шестнадцати знаков, от 0 до буквы F латинского алфавита. При шестнадцатиричном rgb перед кодом цвета ставится символ решетки, а дальше уже записывается сам код цвета. Если совпадают две буквы или цифры одного и того же цвета, то можно использовать сокращенную форму записи, т.е. каждый цвет будет состоять не из пары значений, а из одного значения, и в коде цвета будет 3 символа после знака решетки. При подборе цвета на первое время лучше использовать любой графический редактор, там можно выбрать любой нужный вам цвет из палитры, и редактор покажет код выбранного цвета, который можно скопировать и вставить на страницу.

Свойства стилей CSS.

Ширина и высота: width и height

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

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента - контейнера, где находится тег 'img'. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и соотношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Фон элемента - background

background-color - задает цвет фона, который можно задавать любым из трех способов задания цветов.
background-image используется для того, чтобы в качестве фона можно было установит изображение. Для этого необходимо в значении свойства указать путь к изображению в скобках url.
background-position - указывает где будет располагаться фоновое изображение. Может иметь значения: top, bottom, left, right. background-repeat определяет, нужно ли повторять фоновое изображение. repeat-x - изображение повторяется по горизонтали, repeat-y - по вертикали, no-repeat - изображение не повторяется. По умолчанию у этого свойства установлено значение repeat, что означает, что изображение будет повторяться по горизонтали и по вертикали.
background-attachment - определяет, будет ли изображение прокручиваться вместе с содержимым элемента. По умолчанию, оно установлено как scroll, что означает, что изображение будет прокручиваться, а при значении fixed, изображение будет оставаться неподвижным.

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

border – рамка вокруг элемента

border тоже подразделяется на различные свойства.
border-color - цвет рамки.
border-style - стиль рамки, которая может быть разных значений, такие как: dotted, dashed, solid, double, groove, ridge, inset, outset. border-width задает толщину рамки, причем ее можно задать для каждой из 4 сторон отдельно:
(1px 2px) - 1px: верхняя и нижняя, 2px: левая и правая
(1px 2px 3px) - 1px: верхняя, 2px: левая и правая, 3 нижняя
(1px 2px 3px 4px) - 1px: верхняя, 2px: правая, 3px: нижняя, 4px: левая

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

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

Цвет текста - color

Цвет текста также можно задавать любым из 3 способов.

Шрифт - font

serif - шрифты с засечками;
sans-serif - рубленные шрифты, без засечек;
cursive - курсивные шрифты;
fantasy - декоративные шрифты;
monospace - моноширинные шрифты.

font-family - устанавливает шрифт текста.

Существуют 5 основных семейств шрифтов. У каждого семейства существуют несколько видов шрифтов. Какие шрифты относятся к какому семейству, можно узнать из справочников. Можно через запятую указывать несколько шрифтов. Первым будет использоваться шрифт "Times New Roman", если по каким-либо причинам данный шрифт не установлен на компьютер, то будет отображаться следующий шрифт. Если название шрифта состоит из нескольких слов, то его заключают в кавычки.

font-style – стиль шрифта. По умолчанию установлен шрифт в значении normal, italic - это курсивное начертание, которое имитирует рукописный текст, а oblique - наклонное начертание, которое получается путем наклона знаков вправо.
font-variant имеет только 2 значения, по умолчанию установлено значение normal и small-caps, которое у строчных букв имитирует заглавные буквы, только уменьшенного размера.
font-weight задает насыщенность шрифта. Можно указывать значения предопределенными словами, например, bold - полужирный, bolder - жирный, lighter - светлый. Ещё есть возможность указывать насыщенность цифрами от 100 до 900.
font-size определяет размер шрифта. Можно указывать в любых единицах измерения или предопределенными словами. Указывать стиль шрифта можно при помощи сокращенной записи. В данном случае важен порядок следования значений.

Оформление списков - list-style

Свойство list-style определяет стиль маркера у списков.

list-style-type - тип маркера, который может быть разных видов, в примере приведены только некоторые из них. Остальные виды маркеров можно найти в справочнике.
list-style-position определяет то, где располагается маркер, по умолчанию у него значение outside. В этом случае маркеры будут располагаться за пределами текстового блока. При значении inside, наоборот, внутри текстовых блоков.
list-style-image позволяет вместо маркера установить изображение, для этого нужно указать к нему путь в скобках url.

Для определения стиля маркеров также существует сокращенная запись.

И еще некоторые полезные свойства.

text-align - выравнивание содержимого блока по горизонтали. Принимает 4 значения: left, right, center и justify (выравнивание происходит по ширине, т.е. одновременно по левому и по правому краю).
text-decoration применяется для следующего оформления текста:line-through - перечеркивает текст, overline - задает линию над текстом, underline - задает линию под текстом (подчеркивает текст), none (по умолчанию) - отменяет все эффекты.
text-transform используется для изменения регистра символов. При значении capitalize каждое слово в предложении будет начинаться с заглавной буквы, при значении lowercase все символы будут строчными, а при значении uppercase все символы будут заглавными.

Вложенность

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

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

В этом примере можно увидеть параграф с классом main. В параграф вложена ссылка. Этой ссылке задаем определенный стиль. Обратимся к этой ссылке при помощи контекстного селектора. Для этого в качестве селектора сначала указывается тег параграфа с классом main, затем ставится пробел и следующим указывается тег strong, после этого обращаемся к тегу нужной нам ссылки. Таким образом, заданный стиль будет применяться ТОЛЬКО к первой ссылке в параграфе с классом main.

Теперь из контекстного селектора убираем тег strong. В этом случае обе ссылки из параграфа с классом main приобретут заданный стиль, т.е. станут красного цвета с размером шрифта в 18 px. Запись данного контекстного селектора означает, что нужно применить стиль ко всем тегам ссылки, которые находятся внутри параграфов с классом main.

Дочерние селекторы

При помощи дочерних селекторов можно выбрать только те теги, которые являются прямыми потомками определенного элемента. В этом примере в первом параграфе ссылка является дочерним элементом для этого параграфа, т.к. вложена только в параграф. А во втором параграфе ссылка для параграфа не будет являться дочерним элементом, т.к. она вложена в тег i, и, соответственно, будет являться дочерним элементом для тега i. А тег i для этой ссылки будет родительским элементом. В разделе CSS кода после обращения к селектору параграфа р с классом main ставится знак больше, а затем тег а, это означает, что необходимо обратиться к дочернему тегу ссылки параграфа с классом main. В этом примере такому запросу соответствует ссылка в первом параграфе, и ТОЛЬКО данной ссылке будет применен заданный стиль.

Соседние селекторы

Для демонстрации работы соседних селекторов изменим предыдущий пример. Ссылка 2 теперь будет не вложена в тег i, а находиться рядом, т.е. будет являться для тега i соседним элементом. Для того, чтобы обратиться к этой ссылке и задать ей определенный стиль, в разделе CSS кода после тега i надо поставить знак плюс, а затем указать тег ссылки. В этом случает ТОЛЬКО ссылка 2 приобретет заданный стиль.

Наследование

Наследование - это перенос стилей от элемента к вложенным в него тегам.

В данном примере в тег 'p' вложены теги два тега 'b', в один из которых также вложен тег 'i'. В этом случае весь текст в этом параграфе будет заданного стиля. То есть, все теги, вложенные в параграф, унаследовали заданный стиль. Но не все свойства CSS наследуются.

Если добавить в этот пример еще и ссылку, то эта ссылка унаследует только свойство font-size, но свойство color не унаследует. Узнать, наследуется ли определенное свойство CSS или нет, можно узнать только из справочников. В данном примере, чтобы применить к ссылке свойство color также как у всех остальных элементов, можно для этой ссылки задать значение inherit для свойства color. inherit означает, что элементу необходимо наследовать данное свойство от родителя.

Группировка свойств

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

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

Приоритеты стилей в css

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

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

Приоритеты источников стилей

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

Приоритеты стилей автора

Рассмотрим приоритеты стилей автора проекта. Самым важным свойством является то, у которого после значения свойства установлена директива !important.

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

Вторым по приоритетности является стиль, объявленный в атрибуте style любого тега.

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

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

Селекторы тегов и псевдоэлементы - по 1 баллу (0, 0, 0, 1);
Селекторы атрибутов, классы и псевдоклассы - по 10 баллов (0, 0, 1, 0);
Идентификаторы - по 100 баллов (0, 1, 0, 0);
Атрибут style – 1000 баллов (1, 0, 0, 0).

Пример начисления баллов за специфичность:

p { } - 1 балл (селектор тегов );
p:first-letter { } - 2 балла (1 - селектор тегов и 1 - псевдоэлемент);
input[type=“submit"] { } - 11 баллов (по 1 селектору тегов и атрибутов);
div.head .new { } - 21 балл (2 класса и 1 селектор тегов);
#header a:hover { } - 111 баллов (идентификатор, селектор тегов и псевдокласс).

Следующие по приоритетности стили указанны в порядке убывания:

Стили, заданные в разделе 'head';
Стили, подключаемы из внешних файлах;
Наследуемые стили от предков.

Псевдоклассы и псевдоэлементы

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

Псевдоклассы

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

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

После селектора ставится двоеточие, и сразу после него без пробела, указывается название псевдокласса.

Псевдоклассы, определяющие состояние элементов

a:link - ссылается на непосещенную ссылку.
a:visited - ссылается на уже посещенную ссылку.
a:hover - ссылается на любой элемент, по которому проводят курсором мыши.
a:focus - ссылается на любой элемент, над которым находится курсор мыши.
a:active - ссылается на элемент, который был активизирован пользователем.
:valid - выберет поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу.
:invalid - выберет поля формы, содержимое которых не соответствует указанному типу.
:enabled - выберет все доступные (активные) поля форм.
:disabled - выберет заблокированные поля форм, т.е. находящиеся в неактивном состоянии.
:in-range - выберет поля формы, значения которых находятся в заданном диапазоне.
:out-of-range - выберет поля формы, значения которых не входят в установленный диапазон.
:lang() - выбирает абзацы на указанном языке. :not(селектор) - выберет элементы, которые не содержат указанный селектор, например, класс, идентификатор или селектор элемента :not([type="submit"]).
:target - выбирает элемент с символом #, на который ссылаются в документе.
:checked - выбирает выделенные (выбранные пользователем) элементы.

Псевдоклассы, структурные

:nth-child(odd) - выбирает нечетные дочерние элементы.
:nth-child(even) - выбирает четные дочерние элементы.
:nth-child(3n) - выбирает каждый третий элемент среди дочерних.
:nth-child(3n+2) - выбирает каждый третий элемент, начиная со второго дочернего элемента (+2).
:nth-child(n+2) - выбирает все элементы, начиная со второго.
:nth-child(3) - выбирает третий дочерний элемент.
:nth-last-child() - в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с :nth-child(), но начиная с последнего, в обратную сторону.
:first-child - позволяет оформить только самый первый дочерний элемент тега.
:last-child - позволяет форматировать последний дочерний элемент тега.
:only-child - выбирает элемент, являющийся единственным дочерним элементом.
:empty - выбирает элементы, у которых нет дочерних элементов. :root - выбирает элемент, являющийся корневым в документе (элемент html).

Псевдоклассы по типу дочернего элемента

:nth-of-type() - выбирает элементы по аналогии с :nth-child(), при этом берет во внимание только тип элемента.

:first-of-type - позволяет выбрать первый дочерний элемент.

:last-of-type - выбирает последний тег конкретного типа.

:nth-last-of-type() - выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца.

:only-of-type - выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

Пример использования псевдоклассов:

Для того, чтобы понять, как работает данный псевдокласс, рассмотрим простой пример. Задаём элементу списка 'li' псевдокласс first-child, и у него прописываем определенный стиль. Как видно, маркированный список, состоит из трех элементов. Заданный стиль будет применен ТОЛЬКО к первому элементу данного списка. Это происходит потому, что первый элемент списка 'li' будет именно первым дочерним у тега 'ul'.

Комбинирование псевдоклассов

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

Псевдоэлементы

Псевдоэлементы - практически то же самое, что и псевдоклассы, только они позволяют ввести несуществующие элементы в веб-документ, и придать им определенные стили. Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов. современные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно. С помощью свойства content, можно изменить внешний вид части элемента.

В CSS существует 4 псевдоэлемента:

:first-letter - выбирает первую букву каждого абзаца, применяется только к блочным элементам.
:first-line - выбирает первую строку текста элемента, применяется только к блочным элементам.
:before - вставляет генерируемое содержимое перед элементом.
:after - добавляет генерируемое содержимое после элемента.

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

После элемента списка li появится текст new красного цвета.

Для чего нужны таблицы в HTML

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

Структура таблицы в html

Любая таблица в html помещается в контейнер 'table', после чего в контейнер строки 'tr' помещаются уже столбцы таблицы, которые помещаются в тег 'td'. В данном примере таблица будет состоять из 3-х столбцов и одной строки, т.е. в таблице будет 3 ячейки. Для того, чтобы добавить еще одну строку в данную таблицу, нужно вложить в контейнер 'table' еще один контейнер строки 'tr', и в него поместить то же количество столбцов 'td', т.е. 3 столбца.

Создание ячеек таблицы

Элемент 'td' создает ячейки таблицы с данными, добавляя их в строку таблицы. Парные теги 'td'...'/td', расположенные между тегами соответствующей строки, определяют количество ячеек в пределах одной строки. Количество пар ячеек таблицы должно быть равным количеству пар ячеек заголовка.

Элемент 'th' создает заголовок - специальную ячейку, текст в которой выделяется полужирным шрифтом. Количество ячеек заголовка определяется количеством пар тегов 'th'...'/th'.

Теги группирования строк html таблицы

Для создания более сложных таблиц можно использовать теги:

● 'caption'...'/caption' - обрамление заголовка таблицы (текст, размещенный между этими тегами, выравнивается по центру). В исходном коде тег 'caption' ставится сразу после тега 'table';
● 'thead'...'/thead' - обрамление шапки таблицы (в одной таблице допускается не более одного тега 'thead');
● 'tbody'...'/tbody' - группирует строки таблицы в один табличный блок (таких блоков в таблице может быть несколько);
● 'tfoot'...'/tfoot' - обрамление футера, т.е. нижней, завершающей части таблицы (в одной таблице допускается не более одного тега 'tfoot'). В исходном коде тег 'tfoot' ставится до тега 'tbody'.

Группировка строк и столбцов таблицы

Элемент 'colgroup' создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для форматирования, позволяя применить стили к столбцам, вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов 'table' и 'caption'. Элемент 'col' формирует неструктурные группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т.е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента 'colgroup'. С помощью атрибута 'style' можно изменить основной цвет фона ячеек. Для элемента 'col' доступен атрибут span, задающий количество столбцов для объединения.

Объединение ячеек таблицы

Для того, чтобы в полной мере начать использовать таблицы в html, необходимо научиться объединять ячейки. Для этого у тега 'td' или 'th' существуют атрибуты colspan и rowspan.

● colspan - объединяет ячейки по горизонтали
● rowspan - объединяет ячейки по вертикали

В данном примере, при помощи атрибута rowspan в первом столбце объединяются 2 строки. При помощи атрибута colspan в первой строке объединяются уже два столбца.

Посмотрим, как это выглядит в html.

В первой строке данной таблицы будет всего два столбца, в первом столбце первая строка объединяется со второй строкой, поэтому у первой ячейки указываем атрибут rowspan со значением 2, что означает, что нужно объединить две ячейки. В этой же строке, во втором и третьем столбце объединяем две ячейки по горизонтали при помощи атрибута colspan, также со значением 2. Далее во второй строке нужно учесть, что не надо указывать для неё первый столбец, т.к. он уже объединен с первой строкой. Поэтому во второй строке указываются два столбца, начиная со второго. В третьей строке присутствуют все три столбца по порядку.

Вложенные таблицы

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

Стилевое оформление таблиц

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

Границу таблице можно задавать аналогично любому другому элементу, это мы рассматривали на прошлом занятии. Единственное, если задать свойство border только тегу 'table', то граница будет задана только внешним границам таблицы. Это происходит потому, что свойство border не наследуется. Чтобы задать границы для ячеек, нужно задать их тегу 'td'. Здесь уже можно задавать границы ячейкам любого стиля.

Ширину и высоту таблицы задаем при помощи свойств CSS width и height.

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

Ширину таблицы и её столбцов можно задать с помощью свойства width. Если для таблицы задана ширина table {width: 100%;}, то она будет равна ширине блока-контейнера, а ширина столбцов установится в соответствии с шириной содержимого ячеек. Чаще всего ширину таблицы и столбцов задают в px или %

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

Для задания отступов элементу, в CSS существуют свойства padding и border-spacing.

● border-spacing – внешние отступы
● padding – внутренние отступы

Внешние отступы (border-spacing) можно задать либо всем 4 сторонам, либо отдельно. В этом случае первое значение будет действовать для левой и правой сторон, а второе - для верхней и нижней. Внутренние отступы (padding) можно задавать и для каждой границы отдельно.

(1px 2px) - 1px: верхняя и нижняя, 2px: левая и правая
(1px 2px 3px) - 1px: верхняя, 2px: левая и правая, 3 нижняя
(1px 2px 3px 4px) - 1px: верхняя, 2px: правая, 3px: нижняя, 4px: левая

Для выравнивания по горизонтали внутри ячейки существует устаревший атрибут align, который заменяется на свойство CSS text-align.

Для вертикального выравнивания внутри ячейки у тега 'td' существует устаревший атрибут valign. Для его замены в CSS существует свойство vertical-align.

Это свойство в отношении ячеек таблицы может принимать четыре значения:

top - выравнивание по верхнему краю;
bottom - выравнивание по нижнему краю;
baseline - базовая линия ячейки выравнивается по базовой линии первой текстовой строки;
middle – выравнивание по середине (по умолчанию).

Есть ещё одно полезное свойство для оформления таблиц. Если для всех ячеек задать атрибут cellspacing=”0”, или CSS свойство border-spacing=”0”, то границы соседних ячеек будут двойными. Для того, чтобы убрать двойные границы, в CSS существует свойство border-collapse.

Свойство border-collapse может принимать два значения. По умолчанию установлено separate, при котором рамка двойная, а при значении collapse рамка становится одинарной.

Основные теги для верстки

При вёрстке сайта с помощью слоёв самым часто используемым html-тегом является 'div', который как раз и формирует слой на веб-странице. Он является блочным тегом. Второй тег, который используется при верстке, это строчный тег 'span'. Сами по себе эти теги ничего на экране не отображают, и оформляются они стилями css.

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

Блочные элементы могут содержать внутри себя элементы любого типа. Нельзя размещать блочные элементы внутри строчных, за исключением элемента 'img'. Для блочных элементов можно задавать margin и padding. Свойства width и height устанавливают ширину и высоту области содержимого элемента. Фактическая ширина элемента складывается из ширины полей (внутренних отступов), границ и внешних отступов. Строчные элементы не создают блоки, они отображаются на одной строке с содержимым рядом стоящих тегов.

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

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

Давайте вспомним, какие основные элементы html относятся к блочным, а какие к строчным.

Блочные элементы

'h1'...'/h1'
'h2'...'/h2'
'h3'...'/h3'
'h4'...'/h4'
'h5'...'/h5'
'h6'...'/h6'
'li'...'/li'
'legend'...'/legend'
'nav'...'/nav'
'ol'...'/ol'
'article'...'/article'
'aside'...'/aside'
'body'...'/body'
'blockquote'...'/blockquote'
'div'...'/div'
'fieldset'...'/fieldset'
'footer'...'/footer'
'form'...'/form'
'header'...'/header'
'output'...'/output'
'p'...'/p'
'pre'...'/pre'
'section'...'/section'
'ul'...'/ul'

Строчные элементы

'a href=”#”'...'/a'
'i'...'/i'
'b'...'/b'
'em'...'/em'
'strong'...'/strong'
'font'...'/font'
'img'
'input'

В этом списке тег картинки 'img' является замещаемым строчным элементом, т.е. при помощи замещаемых элементов указывается, что в данном месте должен быть какой-то сторонний объект, в данном случае - картинка. Замещаемому элементу можно задать и ширину и высоту, но все равно замещаемый элемент будет являться строчным.

Свойство display

При помощи css можно изменить тип элемента, т.е. блочный тег можно сделать строчным, а строчный - блочным. Для этого существует css свойство - display. Вернёмся к предыдущему примеру и для элементов 'div' задать значение свойства display: inline;, а для 'span' - значение display: block;

В этом случае получается, что элементы поменялись местами, 'div' стал строчным элементом, и ему теперь невозможно задать ни ширину, ни высоту, а 'span' стал блочным, и ему теперь можно задать и ширину и высоту.

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

none (скрыть);
block (блочный);
inline (строчный);
inline-block (строчно-блочный);
table-cell (ячейка таблицы);
flex (гибкий).

Блочный элемент (display: block;) создает разрыв строки перед тегом и после него. Он образует прямоугольную область, по ширине занимающую всю ширину веб-страницы или блока-родителя, если для него не задано значение width.

Свойства width и height устанавливают ширину и высоту области содержимого элемента. Фактическая ширина элемента складывается из ширины полей (внутренних отступов), границ и внешних отступов.

Строчные элементы (display: inline;) не создают блоки, они отображаются на одной строке с содержимым рядом стоящих тегов. Строчные элементы являются потомками блочных элементов. Они игнорируют верхние и нижние margin и padding, но если для элемента задан фон, он будет распространяться на верхний и нижний padding, заходя на соседние строки текста.

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

Существует ещё одна группа элементов, которые браузер обрабатывает как строчно-блочные (display: inline-block;). Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display. Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

Для блока возможно задать значение ячейки таблицы (table-cell). Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали. CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV, это допустимо. При этом он ведёт себя как ячейка TD, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align.

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

Если обычный layout основывается на направлениях потоков блочных и inline-элементов, то flex-layout основывается на «направлениях flex-потока». Ознакомьтесь с этой схемой из спецификации, разъясняющей основную идею flex-layout-ов.

В основном элементы будут распределяться либо вдоль главной оси (от main-start до main-end), либо вдоль поперечной оси (от cross-start до cross-end).

main-axis - главная ось, вдоль которой располагаются flex-элементы. Обратите внимание, она необязательно должна быть горизонтальной, всё зависит от свойства justify-content (см. ниже).
main-start | main-end - flex-элементы размещаются в контейнере от позиции main-start до позиции main-end.
main size - ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, либо высотой элемента.
cross axis - поперечная ось, перпендикулярная к главной. Её направление зависит от направления главной оси.
cross-start | cross-end - flex-строки, заполняются элементами и размещаются в контейнере от позиции cross-start и до позиции cross-end.
cross size - ширина или высота flex-элемента в зависимости от выбранной размерности равняется этой величине. Это свойство совпадает с width или height элемента в зависимости от выбранной размерности.

Элементы в контейнере поддаются выравниванию при помощи свойства justify-content вдоль главной оси. Это свойство принимает целых пять разных вариантов значений.

flex-start (default): гибкие элементы выравниваются по началу главной оси;
flex-end: элементы выравниваются по концу главной оси;
center: элементы выравниваются по центру главной оси;
space-between: элементы занимают всю доступную ширину в контейнере, крайние элементы вплотную прижимаются к краям контейнера, а свободное пространство равномерно распределяется между элементами;
space-around: гибкие элементы выравниваются таким образом, что свободное пространство равномерно распределяется между элементами. Но стоит отметить, что пространство межу краем контейнера и крайними элементами будет в два раза меньше, чем пространство между элементами в середине ряда.

Мы также имеем возможность выравнивания элементов по cross оси. Применив свойство align-items, которое принимает также пять разных значений, можно добиться интересного поведения. Это свойство позволяет выравнивать элементы в строке относительно друг друга.

flex-start: все элементы прижимаются к началу строки;
flex-end: элементы прижимаются к концу строки;
center: элементы выравниваются по центру строки;
baseline: элементы выравниваются по базовой линии текста;
stretch (default): элементы растягиваются, заполняя полностью строку;
Еще одно похожее свойство на предыдущее это align-content. Только оно отвечает за выравнивание целых строк относительно гибкого контейнера. Оно не будет давать эффекта. если гибкие элементы занимают одну строку.

Свойство принимает шесть разных значений.

flex-start: все линии прижимаются к началу cross-оси;
flex-end: все линии прижимаются к концу cross-оси;
center: Flex-элементы выравниваются по центру flex-контейнера.
space-between: линии распределяются от верхнего края до нижнего, оставляя свободное пространство между строками, крайние же строки прижимаются к краям контейнера;
space-around: линии равномерно распределяются по контейнеру;
stretch (default): линии растягиваются, занимая все доступное пространство.

Одно из основных свойств является flex-basis. С помощью этого свойства мы можем указывать базовую ширину гибкого элемента. По умолчанию имеет значение auto. Это свойство тесно связано с flex-grow и flex-shrink, о которых будет рассказано чуть позже. Принимает значение ширины в px, %, em и остальных единицах. По сути, это не строго ширина гибкого элемента, это своего рода отправная точка, относительно которой происходит растягивание или усадка элемента. В режиме auto элемент получает базовую ширину относительно контента внутри него.

Схлопывания

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

Слияние выполняется только для блочных элементов в нормальном потоке документа. Внешние вертикальные отступы строчных, плавающих и абсолютно позиционированных элементов не сливаются. Чтобы получить желаемый промежуток, можно задать, например, для верхнего элемента padding-bottom, а для нижнего элемента - margin-top.

Существуют исключения для схлопывания:

с блоками, которым присвоено float;
с основными элементами (html, body);
для блоков, которым присвоено свойство и значение position:absolute;
для строчных элементов.

Формирование блочной модели

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

Если внимательно ознакомиться с данной схемой, то можно сделать вывод, что ширина блока складывается из следующих свойств:

Соответственно, высота из следующих:

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

Внешний отступ (margin) добавляет отступы за границами элемента, создавая тем самым промежутки между элементами. Они всегда остаются прозрачными, и через них виден фон родительского элемента. Значения padding и margin задаются в следующем порядке: верхнее, правое, нижнее и левое.

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

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

Обтекаемые элементы

Обтекаемые элементы или как их ещё называют «плавающие», используются для реализации обтекания текстом изображений, создания врезок, и даже создания много-столбцовых компоновок.

Также обтекаемые элементы активно используются при верстке веб-страниц, и при помощи их возможно заменить табличную верстку на верстку слоями. Для того, чтобы задать обтекание, в CSS существует только одно свойство float, которое может принимать всего два значения - это left и right.

В следующем примере картинке, т.е. тегу 'img /', заданно свойство float: left;

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

Далее рассмотрим следующий пример. Создадим два элемента 'div' и один заголовок первого уровня 'h1'

У обоих элементов 'div' задано свойство float: left;, т.е. они должны занимать левое положение и позволять обтекать себя справа. Посмотрим на работу этого примера в браузере.

Разберемся, что же произошло. Элементы 'div' находятся на одной линии по горизонтали, что и ожидаемо, т.к. у них задано свойство float: left;. Первый 'div' занял положение слева, позволил обтекать себя справа. Второй 'div', соответственно, в свою очередь также позволил обтекать себя справа. Заголовок первого уровня находится справа второго элемента 'div', но его рамка обрамляет также оба элемента 'div'. Это происходит потому, что у свойства float есть особенность: элементы, которым заданно это свойство, начинают притягивать к себе все близлежащие элементы и заставляют их тоже участвовать в обтекании. Но с этим можно бороться.

Рассмотрим две ситуации.

1. Заголовок не должен участвовать в обтекании и должен находиться под элементами 'div'.

В этом случае необходимо применить запрет на обтекание. Для этого в css существует свойство clear. Оно может принимать три значения - это left, отменяющее обтекание с левого края, right - с правого края, и значение both - которое отменяет обтекание с обеих сторон. Добавим свойство clear со значением both для заголовка первого уровня.

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

2. Заголовок остается на том же месте, где он сейчас находится, но рамка должна обрамлять только сам заголовок.

Для решения этой задачи, поможет css свойство overflow. Оно определяет, как будет вести себя блочный элемент в случае его переполнения, и при значении hidden отображает только содержимое этого элемента.

Если запустить этот пример в браузере, то заголовок остаётся на том же месте, и рамка теперь обрамляет только элемент 'h1'.

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

Идея, лежащая в основе позиционирования, довольно проста. Позиционирование позволяет точно определить, где появятся блоки относительно другого элемента или относительно окна браузера. По умолчанию все элементы располагаются последовательно один за другим в том порядке, в котором они определены в html-документе ({position: static}). Свойство не наследуется.

Блочный элемент (p, div, h1 и др.) занимает 100% ширины родительского элемента (по умолчанию - body). Поэтому блочные элементы отображаются один под другим в соответствии с разметкой страницы.

Строчный элемент (em, strong, span и др.) занимает ширину, которая соответствует ширине содержимого внутри него. Поэтому строчные элементы отображаются рядом друг с другом.

Свойство position вместе со значениями top, right, bottom и left отображает элемент с нарушением обычного порядка, смещая его на заданное расстояние. При позиционировании элементов можно использовать как положительные, так и отрицательные значения. Таким образом, существуют 4 вида позиционирования.

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

При абсолютном позиционировании элемент не существует в потоке документа, и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью»

Для режима характерны следующие особенности:

Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.
Слой не меняет своё исходное положение, если у него нет свойств right, left, top и bottom.
Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.
Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top, только слой уйдёт за верхний край.
Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top, только речь пойдёт о вертикальной полосе прокрутки.
Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width, и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top, bottom и height.
Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.

Относительное позиционирование

relative (относительное позиционирование) - элемент будет смещаться относительно его определенного в настоящее время положения, и при этом его место будет оставаться не заполненным. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное - сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз, отрицательное - сдвиг вверх.

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

Для относительного позиционирования характерны следующие особенности:

Этот тип позиционирования не применим к элементам таблицы вроде ячеек, строк, колонок и др.;
При смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами.

Фиксированное положение

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но, в отличие от него, привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.

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

Значение по умолчанию

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

Свойства left, top, right, bottom если определены, игнорируются.

Совмещенное значение position:relative + position:absolute

Назначив родительскому блоку относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы относительно его границ. Если у элемента есть позиционированный предок, то position: absolute работает относительно него, а не относительно документа. Нужно пользоваться таким позиционированием с осторожностью, т.к. оно может перекрыть текст. Этим оно отличается от float.

Z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.

Кроме числовых значений применяется auto - порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.

Дополнительные материалы