Border тег: Атрибут border | htmlbook.ru

Содержание

BORDER — Сороковой урок — Дикие уроки HTML

Главная — Уроки — Уроки HTML

Красота без границ — не красота!

А сегодня, дорогие мои ученики, мы с вами займемся разными рамочками, отступами и бордюрчиками. Потому что без этих самых рамочек и отступов все наши творения, созданные потом и кровью — тьфу! Ничего не стоят. Не верите? А вот вспомните… когда вы были в картинной галерее, видели ли вы хоть одну картину пусть самого развеличайшего художника без рамки? То-то же! Без рамки ни одну картину не повесят! Пусть ты сам Ван Гог или там Рембрандт, без рамочки тебя и на порог не пустят!

Так что оставим свои амбиции и пойдем проторенным путем вслед за Рафаэлем и Рублевым. Конечно же, в наш современный век мы не будем вырубать рамы из бронзы и золота. А зачем? Ведь у нас есть мошнейшее оружие всех времен и народов — стили CSS! Вот ими и воспользуемся.

А примером нам будет служить картина Шилова «Перед венчанием», с персонажем которой я знакома уже несколько лет.

И хочу от себя добавать, вкус у Шилова есть! :))

И я покажу вам, как можно, не вставая со стула создать любому шедевру достойную оправу. Да и не только шедевру! Мы «ошедеврим» даже свои мысли, высказанные по поводу да и без повода. И неважно, что мы там напишем — может глупость какую несусветную, но смотреться будет все очень даже красиво! И может, вслед за квадратом Малевича займем свое законное место в какой-нибудь скромной Третьяковке…

Я как всегда размечталась и, как всегда забыла о деле. Это никуда не годится! Так что вот перед вами простенькая страничка, которую мы попробуем разукрасить стилями CSS, кто во что горазд:

<HTML>
<HEAD>
<TITLE>Страничка без CSS</TITLE>
<HEAD>
<BODY>
<h3>Картина Шилова «Перед Венчанием»</h3>
<IMG src=»foto.jpg»&gt align=left;
<P>
Шилов как увидел Пчелку, так чуть и не умер от радости.
Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! И никогда бы не попал в такие знаменитые «Дикие уроки».
</P>
</BODY>
</HTML>

Как видим, слева у нас код html без всяких стилей, а справа — то, что мы увидим в окне браузера. Не впечатляет, правда? Но это ненадолго, сейчас мы с вами всему научимся. Дай нам только время!

Давайте сначала повнимательней рассмотрим что у нас написано слева. Итак, у нас имеется:

  • заглавие, заключенное между тегами h3 и /h3;
  • сама картина, заключенная в тег img src, который не требует закрывающегося тега;
  • и текст, заключенный между тегом
    P
    и /P, закрывющийся тег можно ставить, а можно и и не ставить.

Вот для кратости (а ведь она сестра таланта!), будем считать, что у нас есть три блока:

  • блок заголовка
  • блок картинки
  • блок текста

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


Border

Начнем с самого простого и легкого свойства — BORDER, которое устанавливает цвет (border-color), ширину границы (border-width) и стиль границы (border-style), как для всех четырех границ блока (элемента), так и для каждой его стороны.

Я думаю, с

border-color у вас не будет никаких сложностей, можете писать и просто названием цвета (border-color:blue), и через решеточку (border-color:#039) и даже в цветовой гамме RJB (border-color:rgb(51,51,255))

Теперь разберемся со стилями рамок. И лучше — сразу на примерах!

dashed — прерывистая линия
<p> вокруг блока текста — прерывистая линия</p>

вокруг блока текста — прерывистая линия

dotted — пунктирная линия
<p>вокруг блока текста — пунктирная линия&lt/p>

вокруг блока текста — пунктирная линия

double — двойная линия
<p&/gt; вокруг блока текста — двойная линия</p>

вокруг блока текста — двойная линия

groove — углубленная трехмерная рамка
<p>вокруг блока текста — углубленная трехмерная рамка</p>

вокруг блока текста — углубленная трехмерная рамка

inset — углубленная рамка
<p>вокруг блока текста — углубленная рамка</p>

вокруг блока текста — углубленная рамка

outset — выпуклая рамка
<p>вокруг блока текста — выпуклая рамка</p>

вокруг блока текста — выпуклая рамка

ridge — выпуклая трехмерная рамка
<p>вокруг блока текста — выпуклая трехмерная рамка</p>

вокруг блока текста — выпуклая трехмерная рамка

solid — сплошная линия рамки
<p>вокруг блока текста — сплошная линия рамки</p>

вокруг блока текста — сплошная линия рамки

none — рамка отсутствует
<p>вокруг блока текста — рамка отсутствует</p>

вокруг блока текста — рамка отсутствует

Следующее свойство — это border-width. Позволяет определить толщину рамки. Думаю, тут тоже все понятно. Толщина может задаться как словами: thin, medium, thick, что соответствует 2 px, 4 px и 6 px, так и числовым значением с размерными единицами.

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

  • border-top
  • border-right
  • border-bottom
  • border-left

Приведем примерчик:

Мы задали в свойствах — верхняя граница толщиной 4 px, утопленная рамка красного цвета; правая сторона — толщиной 8 px, выдавленная рамка желтого цвета; а левая — толщиной 6 px, голубая рамка сплошной линией. Нижняя же — толщиной 4 px, пунктирная и зеленая.

И вот результат:

Мы задали в свойствах — верхняя граница толщиной 4 px, утопленная рамка красного цвета; правая сторона — толщиной 8 px, выдавленная рамка желтого цвета; а левая — толщиной 6 px, голубая рамка сплошной линией. Нижняя же — толщиной 4 px, пунктирная и зеленая.

В общем, ничего тут сложного нет, давайте же скорее приступим к нашей страничке, которая просто заждалась наших рамочек! Надеюсь, вам все тут станет ясно. Я даже объяснять не буду! Просто приведу код:

BORDER

Шилов как увидел Пчелку, так чуть и не умер от радости. Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! И никогда бы не попал в такие знаменитые «Дикие уроки».

Ну и вот результат:

Да… рамка для картины получилась хоть куда! А вот тексты не радуют. Ни в верху, ни слева… Но это можно исправить на следующем уроке, где мы займемся разными отступами!


К списку всех уроков

(В. Ахметзянова, 2005 г)

WTF, HTML и CSS? | Frontender Magazine

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

Содержание

  1. Объявление doctype
  2. Расчет размеров контейнера
  3. Единицы Rem и мобильный Safari
  4. Обтекаемые элементы идут первыми
  5. Обтекаемые элементы и клирфикс
  6. Обтекаемые элементы и вычисление высоты родителя
  7. Все обтекаемые элементы — блочные
  8. Смежные вертикальные отступы схлопываются
  9. Стилизация строк таблицы
  10. Firefox и кнопки с помощью тега <input>
  11. Внутреннее выделение у кнопок в Firefox
  12. Всегда устанавливайте type тега <button>
  13. Лимит на количество селекторов в Internet Explorer
  14. Объяснение того, как работает позиционирование
  15. Ширина элемента и его позиционирование
  16. Фиксированное позиционирование и свойство transform

Объявление doctype

Всегда нужно прописывать doctype.

Я рекомендую простой doctype HTML5:

<!DOCTYPE html>

Его отсутствие может вызвать проблемы с таблицами, инпутами и т.д., если страница будет отображаться в режиме совместимости (quirks mode).

Расчет размеров контейнера

Элементы, для которых установлен width на самом деле шире, если у них есть padding и/или border-width. Чтобы этого избежать, используйте массово распространенный на сегодняшний день сброс box-sizing: border-box;.

Единицы Rem и мобильный Safari

В то время как мобильный Safari поддерживает использование rem в любом css-свойстве, при использовании rem в медиа-запросах происходит конфуз и он начинает бесконечно менять размеры текста.

На данный момент вместо rem стоит использовать em.

html { font-size: 16px; } /* Вызывает баг с изменением размеров Mobile Safari */ @media (min-width: 40rem) { html { font-size: 20px; } } /* В Mobile Safari все отлично работает */ @media (min-width: 40em) { html { font-size: 20px; } }

Нужна помощь Если у вас есть ссылка на баг-репорт в Apple или WebKit, я с удовольствием его добавлю. Сам я не уверен куда слать баг-репорт, так как этот баг воспроизводится только на мобильном Safari.

Обтекаемые элементы идут первыми

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

<div>
  <div>Float</div>
  <div>
    <!-- ... -->
  </div>
</div>

Обтекаемые элементы и клирфикс

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

Для клирфикса, вызываемого отдельным классом можно использовать микро клирфикс.

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
. clearfix:after {
    clear: both;
}    

В качестве альтернативы можно задать родителю overflow, со значениями auto или hidden.

.parent {
    overflow: auto; /* clearfix */
}
.other-parent {
    overflow: hidden; /* clearfix */
}

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

Подсказка Сделайте себе и своим сотрудникам одолжение, добавляя комментарии вроде /* clearfix */, когда клирите обтекаемые элементы, так как свойства могут использоваться там и по совершенно другим причинам.

Обтекаемые элементы и вычисление высоты родителя

Высота родительского элемента, для всех дочерних элементов которого установлен float будет равна 0. Чтобы высота соответствовала реальной следует использовать clearfix.

Все обтекаемые элементы — блочные

Элементы с установленным float автоматически получают display: block;. Поэтому не имеет смысла устанавливать и то и другое, так как float все равно перезапишет установленное вами значение display.

.element {
  float: left;
  display: block; /* Не обязательно */
}

Забавный факт Много лет назад мы должны были устанавливать display: inline; для того, чтобы избежать бага с двойными отступами в IE6. Однако, эти дни давно в прошлом.

Смежные вертикальные отступы схлопываются

Верхний и нижний margin соседних элементов (когда один идет сразу за другим) могут и будут схлопываться, но это не касается элементов с float или тех, которые позиционированы абсолютно. Подробнее об этом вы можете прочесть в этой статье в MDN или разделе о схлопывании margin в спецификации CSS2.

Смежные горизонтальные margin никогда не схлопываются.

Стилизация строк таблицы

Для строк таблицы, тегов <tr>, нельзя задать border, если не задан border-collapse: collapse; на родительском элементе <table>. Более того, если у дочерних тегов <td> или <th> установлено то же значение border-width, что и для <tr>, то к <tr> border не применится. Можете убедиться в этом на примере.

Firefox и кнопки с помощью тега

<input>

По загадочным причинам Firefox применяет к тегу input с типами submit и button line-height, которое не удастся перезаписать с помощью CSS. Есть два решения этой проблемы:

  1. Использовать элемент <button>
  2. Не использовать в кнопках line-height

Если вы предпочли первый вариант (и я бы рекомендовал именно его, так как тег <button> просто отличный), вот что нужно знать:

<!-- Плохая идея -->
<input type="submit" value="Сохранить изменения">
<input type="button" value="Отменить">
 
<!-- Отлично работает везде -->
<button type="submit">Сохранить изменения</button>
<button type="button">Отменить</button>

Если вы захотите выбрать второй, просто не устанавливайте line-height и используйте для вертикального выравнивания текста кнопки только padding. Откройте пример в Firefox, чтобы увидеть, в чем проблема и как с ней справится.

Хорошие новости Похоже в 30-й версии Firefox ошибку исправят. Но это хорошая новость для нас в будущем, а пока не забывайте исправлять этот баг в CSS.

Внутреннее выделение у кнопок в Firefox

Firefox добавляет внутреннее выделение в кнопках (и в <input>, и в <button>) для :focus. Вероятно, это делается для повышения доступности, но расположение весьма странное. Чтобы избавиться от этого безобразия можно использовать следующий CSS:

input::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

Можете увидеть как это работает в том же примере, что и в предыдущем разделе.

Подсказка Добавляйте какое-то состояние для buttons, links, и inputs, находящимся в фокусе. Обеспечение очевидности и доступности интерфейсов это первостепенная задача, важная как для продвинутых пользователей, которые быстро пробегают контент глазами, так и для пользователей с плохим зрением.

Всегда устанавливайте

type тега <button>

Значение по умолчанию атрибута type — submit, что значит, что любая кнопка в форме может её отправить. Следует использовать type="button" для любых кнопок, которые этого делать не должны и явно определять type="submit" для остальных.

<button type="submit">Сохранить изменения</button>
<button type="button">Отменить</button>

Для действий, которые требуют использования тега <button> не находящегося в форме используйте type="button".

<button type="button">x</button>

Забавный факт: IE7 явно не корректно поддерживает атрибут value тега <button>. Вместо того, чтобы прочесть значение атрибута, он получает его из innerHTML (содержимое между открывающим и закрывающим тегом <button>). Но, по двум причинам, я не вижу в этом проблемы: IE7 уже почти не используется и это достаточно странная ситуация, когда одновременно заданы и значение атрибута value и контент внутри <button>.

Лимит на количество селекторов в Internet Explorer

Internet Explorer 9 и ниже обладает ограничением на 4,096 селекторов в таблице стилей. Кроме того существует лимит в 31 таблицу стилей и <style></style> подключенных на одной странице. Все таблицы сверх этого лимита просто игнорируются браузером. Или разбивайте ваш CSS или начинайте рефакторить. Я бы предложил последнее.

В качестве полезного дополнения, вот описание того, как браузеры считают селекторы:

/* Один селектор */
.element { }
 
/* Ещё два селектора */
.element,
.other-element { }
 
/* Ещё три селектора */
input[type="text"],
.form-control,
.form-group > input { }

Объяснение того, как работает позиционирование

Элементы с position: fixed; позиционируются относительно вьюпорта браузера. Элементы с position: absolute; позиционируются относительно ближайшего родителя со значением position, отличным от static (например, relative, absolute, или fixed)

Ширина элемента и его позиционирование

Не стоит задавать width: 100%; для элементов с position: [absolute|fixed];, left, и right. Использование width: 100%; работает так же как совместное использование left: 0; и right: 0;. Стоит использовать либо то, либо другое, но не все вместе.

Фиксированное позиционирование и свойство

transform

Браузеры игнорируют position: fixed; если у родителя элемента установлено свойство transform. Использование трансформаций создает новый контейнер, в результате чего элемент принудительно оказывается в блоке с position: relative; и элемент с фиксированным позиционированием начинает вести себя как элемент с position: absolute;.

Посмотрите пример и прочтите пост Эрика Мэйера (Eric Meyer) на эту тему.

html — тег Hr в IE — удалить границу

спросил

Изменено 3 года, 6 месяцев назад

Просмотрено 12 тысяч раз

В других браузерах, кроме IE7 и ниже, hr отображает границу вокруг тега hr, чего я не хочу.

 
 

Я пробовал это решение, но вокруг него по-прежнему появляется рамка.

Выглядит так:

Как от него избавиться?

  • HTML
  • CSS
  • Internet Explorer

2

См. http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm

Кажется, что нет хорошего решения этой проблемы, только с помощью хака (используя окружающий div).

1

Чтобы избежать этих проблем, вместо этого можно использовать теги DIV. Чтобы сделать его доступным, поместите HR внутри вот так:

 

затем примените к нему стили:

 .ruler { border-top: 1px сплошной черный; }
.ruler час { дисплей: нет; }
 

Это скроет HR и сделает DIV «горизонтальной линейкой».

Различные браузеры используют разные модели элемента ‘hr’. Вот почему я использую это:

 часов {
 высота: 1 пиксель;
 цвет: #ccc;
 цвет фона: #ccc;
 граница: 0;
}
 

Работает во всех основных браузерах. Есть только одна проблема: IE7 и поля…

0

Использовать только

 граница:0px
 

как

 граница: нет
 

не является допустимым правилом.

http://www.w3schools.com/cssref/pr_border-style.asp

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как HTML-код Img Border уступил место CSS: Простое руководство »

In Deprecated, HTML Attributes

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Атрибут
Теги HTML Руководство по добавлению изображений в ваши веб-документы
Что делает Как HTML-код Img Border уступил место CSS: простой учебник ?
Ранее использовался для определения границы элемента изображения. Он устарел и больше не должен использоваться.

Содержание

  • 1 Старый способ добавления границы к изображению
  • 2 Правильный способ добавления рамки к изображению
    • 2.1 Стили границ
    • 2.2 Смешивайте и подбирайте стили границ
    • 2.3 Сокращение границ
    • 2.4 Размещение границ и блочная модель
  • 3 Значения атрибута границы
  • 4 Все атрибуты элемента img 9 Старый способ добавления границы

    4
4 к изображению

Атрибут border ранее использовался для добавления границы к элементу .

   

Этот способ добавления границы устарел в HTML5.

Правильный способ добавить рамку к изображению

Правильный способ добавить рамку к изображению (или чему-либо еще) — использовать CSS. Спецификация CSS предоставляет три разных свойства границ: border-width , border-style и border-color .

 .border { border-width: 25px; цвет границы: красный; стиль границы: сплошной; } 
  

#border-1 .border { border-width: 25px; цвет границы: красный; стиль границы: сплошной; }

Стили границ

Существует несколько вариантов стиля границы .

 .small { максимальная ширина: 300 пикселей; поля: 0 15px 15px 0; } .border {граница-ширина: 15px; цвет границы: красный; } .dotted { стиль границы: пунктирный; } .dashed { стиль границы: пунктир; } . solid { стиль границы: сплошной; } .double { стиль границы: двойной; } .groove { стиль границы: канавка; } .ridge { стиль границы: хребет; } .inset { стиль границы: вставка; } .outset { стиль границы: начало; } 
         

#border-2 .small { max-width : 300 пикселей; поля: 0 15px 15px 0; } #border-2 .border {граница-ширина: 15px; цвет границы: красный; } #border-2 .dotted { border-style: dotted; } #border-2 .dashed { стиль границы: пунктир; } #border-2 .solid { стиль границы: сплошной; } #border-2 .double { стиль границы: двойной; } #border-2 .groove { стиль границы: канавка; } #border-2 . ridge { стиль границы: хребет; } #border-2 .inset { стиль границы: вставка; } #border-2 .outset { стиль границы: начало; }

Смешивайте и подбирайте стили границ

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

 .border { border-width: 15px; цвет границы: красный; } .mixed { стиль границы: сплошной пунктирный пунктирный двойной; } 
  

#border-3 .border { border-width: 15px; цвет границы: красный; } #border-3 .mixed { стиль границы: сплошной пунктирный пунктирный двойной; }

Сокращение границы

Если вы не делаете ничего особенного или странного, вы можете объединить три разных правила границы в одно граница свойство`.

 .border {граница: 15px сплошной красный цвет; } 
  

#border-4 .border { border: 15px сплошной красный; }

Размещение границ и блочная модель

Границы появляются внутри полей, указанных для элемента, но вне отступов.

 #green-box { background-color: green; маржа: 0; заполнение: 0; } #border-padding-margin{ margin: 20px; граница: 20 пикселей, сплошной красный цвет; отступ: 20 пикселей; цвет фона: желтый; } 
 

#border-box-demo #green-box { background-color: green; маржа: 0; заполнение: 0; } #border-box-demo #border-padding-margin{ margin: 20px; граница: 20 пикселей, сплошной красный цвет; отступ: 20 пикселей; цвет фона: желтый; }

Значения границы

Атрибут
Имя значения Примечания
пикселей Заданная ширина границы в пикселях.

Все атрибуты

IMG Элемент 9Элементы управления 0215
Название атрибута Значения Примечания
HEIGHT
HEIGHT
HEIGHT
HEIGHT
.
srcset список источников Определяет несколько размеров одного и того же изображения, позволяя браузеру выбирать соответствующий источник изображения.
выровнять вправо
left
Ранее использовался для указания выравнивания и размещения изображения относительно окружающего текста. Он устарел и не должен использоваться.
alt текст Определяет альтернативный текст, который может быть представлен вместо изображения.
граница пикселей Ранее использовалась для определения границы элемента изображения. Он устарел и больше не должен использоваться.
Переключаемые элементы управления медиаплеером при использовании в сочетании с атрибутом dynsrc. Оба атрибута теперь устарели.
dynsrc
hspace Ранее использовался для добавления горизонтального пространства с обеих сторон изображения. Сейчас это устарело.
ismap Идентифицирует изображение как карту изображения на стороне сервера. При нажатии на содержащую якорную ссылку координаты мыши будут включены в запрос.
longdesc Определяет URL-адрес, по которому можно найти дополнительную информацию об изображении. Он был выписан из спецификации HTML5, но его статус не так ясен, как другие устаревшие функции.
Цикл Ранее использовался для указания количества раз, которое должно воспроизводиться видео, при использовании в сочетании с атрибутом dynsource. Оба атрибута устарели.
низкий уровень Указана версия изображения меньшего размера или более низкого качества.
имя Идентифицировал изображение или предоставил дополнительную информацию о нем. Устарело в HTML 4.0 в пользу других атрибутов.
naturalsizeflag Этот атрибут ничего не делает. Когда-то он использовался проприетарной программной системой.
nosave Предназначался для предотвращения загрузки изображений пользователями. Никогда не был частью спецификации HTML и широко не применялся.
запуск открытие файла
наведение курсора мыши
подавление Используется ныне несуществующим браузером Netscape для подавления отображения изображения до завершения загрузки изображения.
usemap Указывает карту изображения на стороне клиента, которая будет использоваться с изображением.
ширина Указывает внутреннюю ширину изображения в пикселях CSS.
источник Указывает URL-адрес отображаемого изображения.

Адам Вуд

Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.

Поиск на HTML.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *