Как задать цвет рамки в html
Хотя линии между ячейками позволяют четко отделить одни данные от других, ту же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок при этом допустимо задать другого цвета, как показано на рис. 1.
Для изменения цвета фона таблицы используем свойство background , добавляя его к селектору TABLE . Для красоты внизу таблицы рисуем линию с помощью свойства border-bottom (пример 1).
Пример 1. Создание таблицы без рамки
2004 | 2005 | 2006 | |
---|---|---|---|
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
Поскольку содержимое тега
Первый метод заключается в использовании тега
2004 | 2005 | 2006 | |
---|---|---|---|
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
Атрибут align тега
Выравнивание содержимого колонок с помощью тега
Второй метод универсальный, работает во всех браузерах и основан на добавлении отдельного класса для определенных ячеек.
Создаем стилевой класс, например, с именем jewel и применяем его к ячейкам левой колонки (пример 3).
Пример 3. Выравнивание с помощью стилей
2004 | 2005 | 2006 | |
---|---|---|---|
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
В данном примере изменяется цвет фона и способ выравнивания для всех ячеек, где установлен атрибут class="jewel" . Результат примера показан на рис. 2.
Рамки (блочные параметры)
Значения этих свойств используются для установки характеристик области вокруг элемента.
Это может быть применено к символам, изображениям и т.д.
Параметры | Значение | Описание |
border-top-color border-right-color border-left-color border-bottom-color border-color |
цвет (нет цвета по умолчанию) |
Определяют цвет четырех сторон рамок. Если вместо цвета подставить URL-адрес изображения, оно будет повторяться, образуя рамку. |
border-top-style border-right-style border-left-style border-bottom-style border-style |
none (по умолчанию) solid double groove ridge inset outset |
Определяют стиль четырех сторон рамок. |
border-top border-right border-left border-bottom border |
ширина_рамки, стиль_рамки, цвет (по умолчанию: |
Определяют свойства четырех сторон рамок. Работают так же, как свойства отступов (см.ниже), за исключением того, что рамка видна. ширина_рамки
может быть значением medium, thin или thick или задана в единицах измерения. Аргумент color используется для определения цвета заполнения фона элемента, пока он загружается, а также позади прозрачных частей элемента. Если передать вместо него адрес изображения, то рисунок будет повторяться, заполняя контур рамки. |
border-top-width border-right-width border-left-width border-bottom-width border-width |
thin medium (по умолчанию) thick длина |
Определяют ширину рамки вокруг элемента. Каждая сторона может быть задана соответствующим параметром. Можно заменить установку четырех индивидуальных свойств установкой одного свойства border-width так же, как и для свойств отступа margin . |
ciip | rect (/top/right/bottom/left/) auto (по умолчанию) |
Определяет, какая часть элемента видна. Все, что находится за пределами области, указанной этим параметром, увидеть нельзя. |
display | "", none "" (по умолчанию) |
Этот параметр указывает, будет ли отображен элемент. |
float | none (по умолчанию) left right |
Определяет обтекание элемента другими элементами слева или справа вместо помещения их под ними. Поддерживается тегами ,
...
|
height | auto (по умолчанию) длина |
Устанавливают высоту элемента и измеряют ее, если это необходимо. Значение возвращаются в виде строки, включающей единицы измерения (px, % и т.д.). Для получения числового значения используется свойство posHeight. |
left | auto (по умолчанию) длина проценты |
Задают горизонтальную координату элемента, позволяя корректно устанавливать и передвигать элементы. Значение возвращается как строка, включающая единицы измерения (px, % и т.д.). Для получения значения в виде числа используется свойство posLeft. |
Пример 1:
Эта строка подчеркнутая пунктиром.
Пример 2:
Разные типы рамок.
1. none - Нет границы {border:none;} |
2. solid - Есть граница {border: 1px solid;} |
Пример 4: Рамка с круглыми углами.
. в налоговых декларациях;
. справках 2-НДФЛ;
Во всех перечисленных документа указывается 11-ти значный код ОКТМО взамен ранее используемых кодов ОКАТО.
#org
Position:relative;
Background-color: #e8e3d4;
|
Начиная с 1 января 2014 года новые коды ОКТМО, указываются в: . в налоговых декларациях; . справках 2-НДФЛ; . платежных поручениях (поле 105); . квитанция на оплату налогов, сборов, пошлин формы ПД-4 налог. Во всех перечисленных документа указывается 11тизначный код ОКТМО взамен ранее используемых кодов ОКАТО.
|
|
Вложенные таблицы
Узкая черная рамка (5px) Параметры таблицы:
|
Ширина и высота блочных элементов
Свойства CSS width
и height
- устанавливают ширину и высоту блочных элементов.
Ширина и высота элемента может быть задана следующими способами:
- auto - Размеры элемента определяется его содержанием. (по умолчанию)
- % - Размеры элемента задаётся в процентах от высоты/ширины элемента родителя.
- px - Размеры элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.
Управление содержанием элемента
Что делать с содержанием элемента, если оно превышает его размер?
Если элементу присвоены точные значения высоты и ширины (height, width ) а его содержание, например длинный текст, не вмещается в указанных пределах, то по умолчанию такой элемент растягивается до нужных размеров, что не всегда на руку веб-мастеру. На помощь приходит атрибут overflow , который указывает браузеру, что делать с элементом в таких случаях.
Свойство overflow может иметь следующие значения:
- visible - Элемент растягивается до необходимых размеров. (по умолчанию)
- hidden - Содержание элемента "обрезается" видна лишь та его часть что помещается в элементе.
- scroll - Добавляются полосы прокрутки (всегда! даже если содержание помещается в пределах элемента).
- auto - Полосы прокрутки добавляются при необходимости.
CSS
CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки и т.д. ..............
Результат
CSS
CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Способы подключения CSS к документуПравила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS - это обычный текстовый файл. В файле.css не содержится ничего, кроме перечня правил CSS и комментариев к ним.) То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:
- Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега , располагающегося в этом документе между тегами и .
(Тег будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
.....
- Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами и ) сразу после тега
- Когда таблица стилей описана в самом документе, она может располагаться в нём между тегами (которые, в свою очередь, располагаются в этом документе между тегами и ). Все правила этой таблицы действуют на протяжении всего документа;
.....
- Когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
Купи слона
Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает параметр border тега
Чебурашка | Крокодил Гена | Шапокляк |
Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.
Рис. 1. Рамка, полученная с помощью параметра border
Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом border , применяя его к ячейкам таблицы (тегу
0 | X | X |
0 | 0 | X |
X | X | 0 |
Разница между границами таблицы при добавлении параметра border-collapse , а также без него представлена на рис. 2.
a
б
Рис. 2. Вид таблицы при использовании атрибута border-collapase
На рис. 2а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление параметра border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 2б).
Для разработки однотипных линий внутри таблицы можно пойти и другим путем. Следует добавляем для селектора
0 | X | X |
0 | 0 | X |
X | X | 0 |
У этого способа возможны вариации, например, для селектора
или
В данном примере цвет фона web-страницы вводится через свойство background , добавленное к селектору BODY . Хотя белый цвет установлен по умолчанию, его иногда желательно задавать, чтобы пользователь не указал свой цвет фона через настройки браузера. Такой же цвет должен быть и у линий таблицы, в этом случае они явно не выдаются и лишь делят ячейки между собой. Результат примера 4 показан ниже. Рис. 3. Вид границ, совпадающих с цветом фона
|
При помощи таблиц можно добится очень интересных визуальных эффектов при создании тонких рамок, почти одинаково интерпретируемых всеми броузерами. Рассмотрим для этого несколько примеров. Рамка 1 В этом примере используются вложенные таблицы, то есть одна таблица в другой. В строке 1 мы открываем первую таблицу и наполняем её темным цветом, в данном случае чёрным (# 00 00 00). Один из параметров наружной таблицы - cellspacing или cellpadding - должен быть равен 0, а другой 1. В строке 4 мы открываем новую таблицу с белым фоном (# FF FF FF). Важным параметром вложенной таблицы является её ширина - width="100%" . Таблицы следует закрывать в обратном порядке - сначала вложенную, затем наружную. Вышеописанный вариант можно применить с целью создания рамки для всей страницы, но следует учесть, что для страниц с большим колличеством информации он не пригоден, так как браузер, прежде чем показать содержание таблицы, должен прочесть её до конца. Таким образом посетитель несколько секунд будет видеть просто пустой экран. Рамка 2 В этом примере мы обходимся одной таблицей. Для создания рамки здесь используется специально для этого предназначенный параметр border , которому присваивается значение 1. Одновременно параметр cellspacing приравнивается к 0, иначе рамка будет выглядеть так:
Этот вариант проще первого, но, к сожалению, несовсем одинаково интерпретируется Internet Explorer"ом и Netscape"ом. Рамка 3
Если два предыдущих варианта выводят
на экран в разных броузерах рамки,
хоть и минимально, но разной толщины,
то третий пример интерпретируется распространёнными
броузерами Internet Explorer 4.x/5.x/6, Netscape 4.x/6.x и
Opera 6.x одинаково, что касается толщины
рамки. Считаю уместным упомянуть, что
больше всего проблем доставляет веб-дизайнеру
Netscape 4.x.
Все клетки, кроме 5ой, закрашиваются чёрным цветом, пятая - белым. Фон самой таблицы в данном случае не важен. Затем к клеткам 1-3 и 7-9 добавлятся параметр height="1". Соответственно клетки 1, 3, 4, 6, 7, 9 делаются шириной в один пиксел (width="1" ). Средние клетки 2, 5, 8 делаются максимально широкими (width="100%" ). Фокус заключается в том, что в клетки, которые должны быть узкими или тонкими, или теми и другими, добавляется так называемый "модифицированный квадрат Малевича" - прозрачный gif-файл размером 1х1, иначе желаемый эффект достигнут не будет. Для создания тонкой рамки вокруг таблицы с одной ячейкрй этот вариант является, несомненно, слишком сложным и обьёмным, несмотря на его совместимость со многими браузерами. Он применяется, в основном, для разметки страницы тонкими линиями. Для создания рамок можно также использовать таблицы стилей, но об этом в одном из следующих workshop"ов.
Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте Цветная граница рамки таблицы. Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы). |
Текст |
Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.
Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково.
Напоследок, приведу весь код, который мы создали.
|
Хорошо Плохо
В этой статье я расскажу об особенностях html, которые должен знать каждый. Я расскажу как обойти ошибки на которые я сам натыкался. Нередко возникают вопросы у…