Типы рамок css. Цвет внешнего контура outline-color. Свойство border-radius. Округление углов границы
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-атрибутам, которые предназначены для изменения внешнего вида. Это обеспечивает более удобную разработку, редактирование и дальнейшую поддержку стилей на сайте. Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п. 1. Синтаксис CSS borderborder : border-width border-style border-color | inherit ;
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет". 2. Примеры с различными границами рамок CSS border2.1. Пример. Разные стили оформления границы рамки border-style
border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge border-style: inset border-style: outset Четыре разных рамки 2.2. Пример. Изменения цвета рамки при наведении курсора мышиЭтот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).
Вот как это выглядит на странице: 2.3. Пример. Как сделать прозрачную рамку borderРамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0) Вот как это выглядит на странице: 3. Толщина границы: свойство border-widthЗадает толщину линии. Ранее мы задавали ее в едином описании border. Синтаксис CSS border-width border-width : thin | medium | thick | значение ;
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
Вот как это выглядит на странице: border-width: thin border-width: medium border-width: thick Разная толщина у границ 4. Как сделать рамку border только с одного края (границы)У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border. Также есть свойства
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми /* Описание двух одинаковых стилей: */ 4.1. Пример. Красивая рамка для выделения цитат
Вот как это выглядит на странице: Пример рамки для цитаты Примечание
5. Как сделать несколько границ border у элемента htmlИногда требуется сделать несколько границ. Приведем пример 5.1. Первый вариант с несколькими границамиВот как это выглядит на странице: Есть второй способ через наложение теней. 5.2. Наложение теней для создания нескольких границВот как это выглядит на странице: 6. Скругление углов у границ (border-radius)Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например 7. Вдавленная линия CSSВдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту. Вот как это выглядит на странице: Для обращения к border из JavaScript нужно писать следующую конструкцию: document.getElementById("elementID").style.border ="VALUE " Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента. Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
Блок div с рамкой 3px красного цвета.
Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).
Блок div с разными границами.
В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет. Подумайте, как при помощи CSS можно создать такую фигуру: Значения границы - толщину, стиль и цвет - можно задать отдельно используя специальные свойства.
Рассмотрим каждое из значений по отдельности. Свойство border-style. Стиль границы.Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
Примеры того, как они выглядят. граница отсутствует (none) сплошная граница (solid) двойная граница (double) граница из ряда точек (dotted) пунктирная граница (dashed) граница "бороздка" (groove) граница "гребень" (ridge) вдавленная граница (inset) выдавленная граница (outset) Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат. Блок div с рамкой чёрного цвета и стиля ridge. Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден. При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая. Одно значение (solid) - стиль границы установлен для всех сторон блока. Два значения (solid double) - первое значение установило стиль для верхней и нижней сторон, второе для боковой. Три значения (solid double dotted) - первое значение для верхней стороны, второе для боковых, стретье для нижней. Четыре значения (solid double dotted dashed) - каждое значение для одной стороны по часовой стрелке начиная с верхней. Свойство border-width. Толщина границы.Для установки толщины границы элемента используется свойство border-width . Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах. Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая. Код примера:
Одно значение (2px) - толщина границы установлен для всех сторон блока.
Два значения (1px 5px) - первое значение установило толщину для верхней и нижней сторон, второе для боковой.
Три значения (1px 3px 5px) - первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (1px 3px 5px 7px) - каждое значение для одной стороны по часовой стрелке начиная с верхней.
Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:
Толщина границы: thin. Толщина границы: medium. Толщина границы: thick. Свойство border-color. Цвет границы.Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS ", а именно:
Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам. Одно значение (red). Два значения (red black). Три значения (red black yellow). Четыре значения (red black yellow blue). Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру: Вот код, который рисует такую фигуру, только побольше размером:
Установка значений для сторон отдельноВыше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных. Параметры верхней границы (border-top ).
Параметры правой границы (border-right ).
Параметры нижней границы (border-bottom ).
Параметры левой границы (border-left ).
Пример использования этих свойств:
В этом примере блоку div сначала заданы границы толщиной 3px и стилем solid для всех сторон. Затем:
Свойство border-radius. Округление углов границы.Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий). Значениями могут быть любые числа, используемые в CSS. Свойство border-radius: 15px. Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом: Свойство border-radius: 15px. Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все: Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0; Свойство border-radius: 15px. Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления. Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения. Немного практикиРисуем лимон средствами CSS. Вот код такого блока: Margin: 0 auto; /* Размещаем блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; Мы уже рисовали фигуру: Теперь оставим от неё треугольник: Код треугольника такой: Margin: 0 auto; /* Размещаем блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red; 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; } В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать. Атрибут cellspacingАтрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
|