Свой стиль border в css. CSS: border
HTML-таблицы используются на веб-страницах по своему прямому назначению - для отображения структурированной информации. Как говорилось еще в первом уроке учебника, таблицы уже давно не используются с целью компоновки других элементов на странице, ведь их место заняла блочная верстка.
HTML-таблица состоит из ячеек, строк и столбцов, у нее может быть заголовок, подпись, шапка, тело и футер. Через CSS ее можно стилизовать, используя в качестве селекторов как внутренние теги таблицы, так и собственные классы и идентификаторы.
Для придания таблицам красивого внешнего вида можно использовать многие CSS-свойства, с которыми вы уже хорошо знакомы: padding , border , width , height , color , display и прочие.
Давайте вспомним стандартный стиль HTML-таблицы:
Согласитесь, на данном этапе вид совсем не привлекательный. Но путем несложных манипуляций со стилями CSS можно сделать эту таблицу очень симпатичной. Ниже показан наш вариант оформления, а также приведен готовый код, который вы при желании можете дополнить либо изменить:
th { text-align: left; color: #fff; background-color: #706d97; } td { min-width: 250px; color: #696969; border-bottom: 1px solid #eee; } th, td { padding: 10px; height: 20px; } td:first-child { width: 150px; min-width: 0; } th:last-child { text-align: right; } td:last-child { width: 80px; min-width: 0; text-align: right; } tr:nth-child(odd) { background-color: #eee; }
Как видите, все свойства нам уже знакомы. К самому тегу
. /* аналог cellpadding="10" */ td { padding: 10px; } Дополнительное преимущество CSS в данном случае заключается в том, что вы можете задать разные размеры отступов по вертикали и горизонтали, тогда как через HTML-атрибут устанавливается один размер отступа для всех сторон. Атрибут cellspacingЭтот атрибут устанавливает расстояние между самими ячейками таблицы. В качестве аналога существует CSS-свойство border-spacing , при помощи которого тоже можно создать промежутки между ячейками. Кроме того, это свойство может принимать два значения одновременно (разделяются пробелом): одно для промежутков по горизонтали, второе - по вертикали. /* аналог cellspacing="10" */ table { border-spacing: 10px; } Атрибуты width и heightРазумеется, эти атрибуты можно легко заменить на CSS width и height: /* аналоги width="500" и height="500" */ table { width: 500px; height: 500px; } ЗавершениеКак вы уже знаете, в современной веб-разработке принято отделять структуру документа от его визуального оформления. Именно поэтому рекомендуется использовать CSS и не обращаться к HTML-атрибутам, которые предназначены для изменения внешнего вида. Это обеспечивает более удобную разработку, редактирование и дальнейшую поддержку стилей на сайте. Материал из Справочник Web-языковВозможные значенияsStyle Строка , которая может определять и принимать одно из следующих значений:
Свойство borderStyle не наследуется, то есть должно быть определено отдельно для каждого элемента. Значением по умолчанию является none. Одновременно может быть определено до четырех значений для данного свойства: ЗамечанияЕсли свойство borderWidth больше нуля, то чтобы оно применялось, его необходимо задать для атрибута border-style . В Internet Explorer 5.5 borderStyle применяется для строковых объектов. В ранних версиях Windows Internet Explorer строковые объекты должны были быть описаны с помощью position: absolute , чтобы использовать это свойство. Формат элемента устанавливается путем задания значений свойствам height и width . ПримерыСледующие примеры иллюстрируют применение свойства borderStyle и атрибута border-style для задания стиля границ объекта. В первом примере используется атрибут border-style для задания стиля groove границам элемента при наведении на него курсора мыши.
Во втором примере для изменения стиля границ элемента на groove применяется свойство borderStyle .
|
CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина . Оформление рамок и границ HTML-элементов с помощью CSS-свойств1. Стиль рамки border-styleПо умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
Синтаксис P {border-style: solid;} p {border-top-style: solid;} 2. Цвет рамки border-colorСвойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
Синтаксис P {border-color: #cacd58;} 3. Ширина рамки border-widthШирина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется. Синтаксис P {border-width: 2px;} 4. Задание рамки одним свойствомСвойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например: Div { width: 100px; height: 100px; border: 2px solid grey; } При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию. 5. Задание рамки для одной границы элементаВ случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы. Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right . Синтаксис P {border-top: 2px solid grey;} 6. Внешний контур outlineСвойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей. Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком. Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius . Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию. Div { width: 100px; height: 100px; outline: #cacd58 solid 2px; } 6.1. Стиль внешнего контура outline-styleВид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется. Синтаксис P {outline-style: ridge;} 6.2. Цвет внешнего контура outline-colorЦвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется. Синтаксис P { outline-style: ridge; outline-color: silver; } 6.3. Толщина внешнего контура outline-widthТолщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется. Синтаксис P { outline-style: dotted; outline-width: 5px; } ОписаниеУстанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента. Синтаксисborder-style: {1,4} | inherit ЗначенияДля управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов. Кроме перечисленных в таблице значений используются следующие ключевые слова. None Не отображает границу и ее толщина (border-width ) задается нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще. inherit Наследует значение родителя. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2. HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Результат данного примера показан на рис. 1. Рис. 1. Применение свойства border-style Объектная модельdocument.getElementById("elementID ").style.borderStyle БраузерыБраузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed . Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit . Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset . Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента. Краткая информацияОбозначения
ЗначенияДля управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселей. Кроме перечисленных в таблице значений используются следующие ключевые слова. None Не отображает границу и её толщина (border-width) задаётся нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2. ПесочницаВинни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки. div { padding: 10px; border: 5px #e4efc7; border-style: none ; } Пример
Развивая эту тему, крещендирующее хождение просветляет миксолидийский райдер. Результат данного примера показан на рис. 1. Рис. 1. Применение свойства border-style Объектная модельОбъект .style.borderStyle ПримечаниеБраузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed . Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset . СпецификацияКаждая спецификация проходит несколько стадий одобрения.
|