Главная страница | Контакты | Случайная страница Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Определение

Давайте посмотрим определение этого свойства. Согласно W3C:

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

Свойство float может принимать четыре значения: left, right, inherit и none. Каждое из значений вполне отражает свою суть. Например, если установить элементу float: left, то он займёт крайнее левое положение своего родителя. Аналогично будет для float: right. Элемент займёт крайнее правое положение своего предка. Значение inherit говорит элементу, что нужно применить значение предка. Значение none - значение по-умолчанию, указывает элементу, что он не будет плавать.

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

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

• обтекание картинок текстом;
• создание врезок;
• горизонтальные меню;
• колонки.

Обтекание происходит с помощью стилевого свойства float со значением left или right. По умолчанию обтекание для элементов не устанавливается, но если это по каким-либо причинам необходимо указать явно, следует использовать значение none. На рис. 3.32 показан результат применения разных значений на изображение рядом с текстом.

15.Псевдоклассы. Оформление ссылок в CSS. Каскадность. Определение приоритета.

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

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

Селектор: Псевдокласс {свойство: значение; свойство: значение;...}

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

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

Следует знать, что при работе с псевдоклассами, можно применять селектор по элементу,селектор по классу и контекстный селектор. То есть задавать стилевое оформление, используя псевдоклассы, можно при помощи тега <style> (глобальные стили), который как известно располагается в голове документа. Либо работать с внешним файлом со стилями (связанные или внешние стили).

Параметр style не используется для применения псевдоклассов (внутренние стили ).

Ссылки и псевдоклассы active, link, visited и hover

Псевдоклассы, работающие с ссылками, применяются к тегу <a>.

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

- active – псевдокласс определяет стиль для активных ссылок. Ссылка является активной в момент нажатия на нее.

- link – псевдокласс определяет стиль для ссылок, которые еще не посещались.

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

- hover – псевдокласс определяет стиль, который применяется к ссылке в момент наведения на нее курсора.

Для оформления ссылок можно использовать любые свойства css (например, color, font-family, background-color). Отличаются ссылки от простого текста тем, что у них есть различные состояния и можно задавать стили отдельно для каждого состояния.

a:link – обычная не посещённая ссылка
a:visited – ссылка, по которой уже был осуществлён переход
a:hover – ссылка при наведённой на неё мыши
a:active – ссылка в момент нажатия

Что такое приоритетность в CSS?

У одного и того же элемента может быть несколько родителей. Если рассмотреть наш случай то в некоторых элементах так и есть.
Например элемент li. У него есть родитель ul и их общий родитель тег body.
В результате может сложиться такая ситуация что тег body передает к примеру цвет и для ul тоже. Давайте для примера, пропишем правило, которое будет передавать цвет для всех элементов внутри этого тега.

16.Создание таблицы и её стилизация. Как выровнять содержимое ячеек по середине, по правому и левому краю? Как раскрасить ячейки в разные цвета? Как объединять ячейки?

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

Код таблицы:

< table border="1" width="200px">

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

</ table >

Такое оформление подходит не всегда. Допустим, нам необходима таблица с зелеными границами ячеек. Попробуем указать стиль border для таблицы и ее ячеек:

< style >

#ourtable, #ourtable td {border: 1px solid #070}

</ style >

< table border="1" width="200px" id="ourtable">

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

</ table >

в результате таблица примет следующий вид:

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

< style >

#ourtable, #ourtable td {border: 1px solid #070}

</ style >

< table border="1" width="200px" id="ourtable" cellspacing="0">

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

</ table >

то зазоры между ячейками пропадут:

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

< style >

#ourtable {border-collapse: collapse}

#ourtable, #ourtable td {border: 1px solid #070}

</ style >

< table border="1" width="200px" id="ourtable">

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

</ table >

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

< style >

#ourtable {border-collapse: collapse; background: #cfc}

#ourtable, #ourtable td {border: 1px solid #070}

#ourtable tr.odd {background: #beb}

</ style >

< table border="1" width="60%" id="ourtable">

< tr class="odd">< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

< tr class="odd">< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

< tr class="odd">< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

< tr >< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td >< td >&nbsp;</ td ></ tr >

</ table >

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

< style >

* {font-family: tahoma; font-size: 12px}

#ourtable {border-collapse: collapse; background: #cfc}

#ourtable, #ourtable td {border: 1px solid #070}

#ourtable td {padding: 2px 5px}

#ourtable tr.odd {background: #beb}

</ style >

< table border="1" width="60%" id="ourtable">

< tr class="odd">< td >1:1</ td >< td >1:2</ td >< td >1:3</ td >< td >1:4</ td ></ tr >

< tr >< td >2:1</ td >< td >2:2</ td >< td >2:3</ td >< td >2:4</ td ></ tr >

< tr class="odd">< td >3:1</ td >< td >3:2</ td >< td >3:3</ td >< td >3:4</ td ></ tr >

< tr >< td >4:1</ td >< td >4:2</ td >< td >4:3</ td >< td >4:4</ td ></ tr >

< tr class="odd">< td >5:1</ td >< td >5:2</ td >< td >5:3</ td >< td >5:4</ td ></ tr >

< tr >< td >6:1</ td >< td >6:2</ td >< td >6:3</ td >< td >6:4</ td ></ tr >

</ table >

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

< style >

* {font-family: tahoma; font-size: 12px}

#ourtable {border-collapse: collapse; background: #cfc}

#ourtable, #ourtable td {border: 1px solid #070}

#ourtable td {padding: 2px 5px}

#ourtable tr.odd {background: #beb}

#ourtable tr.top td {background: #070; color: white; text-align: center}

</ style >

< table border="1" width="60%" id="ourtable">

< tr class="top">< td >Столбец 1</ td >< td >Столбец 2</ td >< td >Столбец 3</ td >< td >Столбец 4</ td ></ tr >

< tr class="odd">< td >1:1</ td >< td >1:2</ td >< td >1:3</ td >< td >1:4</ td ></ tr >

< tr >< td >2:1</ td >< td >2:2</ td >< td >2:3</ td >< td >2:4</ td ></ tr >

< tr class="odd">< td >3:1</ td >< td >3:2</ td >< td >3:3</ td >< td >3:4</ td ></ tr >

< tr >< td >4:1</ td >< td >4:2</ td >< td >4:3</ td >< td >4:4</ td ></ tr >

< tr class="odd">< td >5:1</ td >< td >5:2</ td >< td >5:3</ td >< td >5:4</ td ></ tr >

< tr >< td >6:1</ td >< td >6:2</ td >< td >6:3</ td >< td >6:4</ td ></ tr >

</ table >

Цвет фона у ячеек

Назначить нужный цвет фона у ячеек и всей таблицы можно при помощи атрибута bgcolor или стиля background-color CSS.

<table cellpadding="5" cellspacing="8" bgcolor="silver" >

<tr>

<td bgcolor="red" > Ячейка 1 </td>

<td bgcolor="green" > Ячейка 2 </td>

</tr>

<tr bgcolor="blue" >

<td> Ячейка 3 </td>

<td bgcolor="yellow" > Ячейка 4 </td>

</tr>

</table>

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

Вместо атрибута bgcolor можно с тем же результатом использовать стиль CSS background-color:

<table cellpadding="5" cellspacing="8" style="background-color: silver;" >

<tr>

<td style="background-color: red;" > Ячейка 1 </td>

<td style="background-color: green;" > Ячейка 2 </td>

</tr>

<tr style="background-color: blue;" >

<td> Ячейка 3 </td>

<td style="background-color: yellow;" > Ячейка 4 </td>

</tr>

</table>

Этот пример правильно отрабатывается движком MediaWiki и ЖЖ, и выглядит так:

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