Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Разрешение конфликтов между границами ⇐ ПредыдущаяСтр 5 из 5
В модели с пересекающимися границами границы с каждого края ячейки могут задаваться свойствами различных элементов, располагающихся у края (ячейки, строки, группы строк, столбцов, группы столбцов и самой таблицы), и эти границы могут различаться по ширине, стилю и цвету. В этом случае для каждого края используется стиль границы, " приковывающий взгляд", за исключением того, что граница не отображается, если используется стиль стиля 'hidden'. Какой тип границы " выиграет" в случае конфликта, определяется следующими правилами:
Пример(ы): В следующем примере показано применение этих правил иерархии. В результате использования таблицы стилей: TABLE { border-collapse: collapse; border: 5px solid yellow; } *#col1 { border: 3px solid black; } TD { border: 1px solid red; padding: 1em; } TD.solid-blue { border: 5px dashed blue; } TD.solid-green { border: 5px solid green; }к коду HTML: < P> < TABLE> < COL id=" col1" > < COL id=" col2" > < COL id=" col3" > < TR id=" row1" > < TD> 1 < TD> 2 < TD> 3< /TR> < TR id=" row2" > < TD> 4 < TD class=" solid-blue" > 5 < TD class=" solid-green" > 6< /TR> < TR id=" row3" > < TD> 7 < TD> 8 < TD> 9< /TR> < TR id=" row4" > < TD> 10 < TD> 11 < TD> 12< /TR> < TR id=" row5" > < TD> 13 < TD> 14 < TD> 15< /TR> < /TABLE>будет представлена примерно следующая таблица: [D] Пример таблицы с пересекающимися границами. Пример(ы): В следующем примере представлена таблица с горизонтальными линиями, разделяющими строки. Для верхней границы таблицы указано значение 'hidden', что обеспечивает отсутствие верхней границы первой строки. В результате будет использоваться атрибут " rules" HTML 4.0 (rules=" rows" ). TABLE[rules=rows] TR { border-top: solid }TABLE[rules=rows] { border-collapse: collapse; border-top: hidden }[D] Таблица с горизонтальными линиями, разделяющими строки. В данном случае такой же результат можно получить, не указывая значения 'hidden' для границы всей ТАБЛИЦЫ, а только для первой строки. Можно использовать любой способ. TR: first-child { border-top: none }TR { border-top: solid }Пример(ы): Вот еще один пример пересекающихся границ: [D] Таблица с двумя отсутствующими внутренними границами. HTML source: < TABLE style=" border-collapse: collapse; border: solid; " > < TR> < TD style=" border-right: hidden; border-bottom: hidden" > foo< /TD> < TD style=" border: solid" > bar< /TD> < /TR> < TR> < TD style=" border: none" > foo< /TD> < TD style=" border: solid" > bar< /TD> < /TR> < /TABLE>Стили границ Смысл некоторых значений свойства 'border-style' применительно к таблице и к другим элементам различен. В приведенном ниже списке такие значения помечены звездочкой. None Граница отсутствует. *hidden Аналогично значению 'none', но в модели с пересекающимися границами имеет приоритет над любыми другими границами (см. раздел о конфликтах между границами). Dotted Граница представляется рядом точек. Dashed Граница представляется рядом коротких линейных сегментов. Solid Граница представляется единым сегментом линии. Double Граница представляется двумя сплошными линиями. Сумма толщины двух линий и расстояния между ними равно значению 'border-width'. Groove Граница выглядит вдавленной. Ridge В противоположность 'groove', граница выглядит выпуклой. *inset В модели с отдельными границами весь выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение 'groove'. *outset В модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение 'ridge'. |
Последнее изменение этой страницы: 2017-03-14; Просмотров: 305; Нарушение авторского права страницы