BORDER — Сороковой урок — Дикие уроки HTML
Главная — Уроки — Уроки HTML
Красота без границ — не красота!
А сегодня, дорогие мои ученики, мы с вами займемся разными рамочками, отступами и бордюрчиками. Потому что без этих самых рамочек и отступов все наши творения, созданные потом и кровью — тьфу! Ничего не стоят. Не верите? А вот вспомните… когда вы были в картинной галерее, видели ли вы хоть одну картину пусть самого развеличайшего художника без рамки? То-то же! Без рамки ни одну картину не повесят! Пусть ты сам Ван Гог или там Рембрандт, без рамочки тебя и на порог не пустят!
Так что оставим свои амбиции и пойдем проторенным путем вслед за Рафаэлем и Рублевым. Конечно же, в наш современный век мы не будем вырубать рамы из бронзы и золота. А зачем? Ведь у нас есть мошнейшее оружие всех времен и народов — стили CSS! Вот ими и воспользуемся.
А примером нам будет служить картина Шилова «Перед венчанием», с персонажем которой я знакома уже несколько лет.
И я покажу вам, как можно, не вставая со стула создать любому шедевру достойную оправу. Да и не только шедевру! Мы «ошедеврим» даже свои мысли, высказанные по поводу да и без повода. И неважно, что мы там напишем — может глупость какую несусветную, но смотреться будет все очень даже красиво! И может, вслед за квадратом Малевича займем свое законное место в какой-нибудь скромной Третьяковке…
Я как всегда размечталась и, как всегда забыла о деле. Это никуда не годится! Так что вот перед вами простенькая страничка, которую мы попробуем разукрасить стилями CSS, кто во что горазд:
| <HTML> <HEAD> <TITLE>Страничка без CSS</TITLE> <HEAD> <BODY> <h3>Картина Шилова «Перед Венчанием»</h3> <IMG src=»foto.jpg»> align=left; <P> Шилов как увидел Пчелку, так чуть и не умер от радости.  Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! И никогда бы не попал в такие знаменитые «Дикие уроки». </P> </BODY> </HTML> |
Как видим, слева у нас код html без всяких стилей, а справа — то, что мы увидим в окне браузера. Не впечатляет, правда? Но это ненадолго, сейчас мы с вами всему научимся. Дай нам только время!
Давайте сначала повнимательней рассмотрим что у нас написано слева. Итак, у нас имеется:
- заглавие, заключенное между тегами h3 и /h3;
- сама картина, заключенная в тег img src, который не требует закрывающегося тега;
- и текст, заключенный между тегом
Вот для кратости (а ведь она сестра таланта!), будем считать, что у нас есть три блока:
- блок заголовка
- блок картинки
- блок текста
И дальше будем с этими блоками работать.
Самое приятное, что любой блок можно считать за самостоятельную единицу и облагораживать его, не обращая внимания что это такое — картинка, текст, цитата или еще что-нибудь…
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>вокруг блока текста — пунктирная линия</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 могут заставить вас чертыхнуться.
Это список затруднений, ошибок и дилемм, которые в них присутствуют и стабильно
портят нам настроение.
Содержание
- Объявление doctype
- Расчет размеров контейнера
- Единицы Rem и мобильный Safari
- Обтекаемые элементы идут первыми
- Обтекаемые элементы и клирфикс
- Обтекаемые элементы и вычисление высоты родителя
- Все обтекаемые элементы — блочные
- Смежные вертикальные отступы схлопываются
- Стилизация строк таблицы
- Firefox и кнопки с помощью тега
<input> - Внутреннее выделение у кнопок в Firefox
- Всегда устанавливайте
typeтега<button> - Лимит на количество селекторов в Internet Explorer
- Объяснение того, как работает позиционирование
- Ширина элемента и его позиционирование
- Фиксированное позиционирование и свойство
transform
Объявление doctype
Всегда нужно прописывать doctype.
<!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.
Сам я не уверен куда слать баг-репорт, так как
этот баг воспроизводится только на мобильном Safari.Обтекаемые элементы идут первыми
Элементы, к которым применен float, всегда должны отображаться в документе первыми. Элементы надо обернуть в какой-то блок, иначе может возникнуть эффект лесенки, когда контент показывают сбоку от обтекаемого элемента, а не под ним.
<div>
<div>Float</div>
<div>
<!-- ... -->
</div>
</div>
Обтекаемые элементы и клирфикс
Если вы применили к элементу float, то, вероятно, вы захотите его заклирить.
Любой контент, который идет после такого элемента будет его обтекать, если
к элементу не применен клирфикс. Для создания клирфикса можно использовать
техники, приведенные ниже.
Для клирфикса, вызываемого отдельным классом можно использовать микро клирфикс.
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
. clearfix:after {
clear: both;
}
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. Есть
два решения этой проблемы:
- Использовать элемент
<button> - Не использовать в кнопках
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>).valueи контент внутри<button>.
Но,
по двум причинам, я не вижу в этом проблемы: IE7 уже почти не используется и
это достаточно странная ситуация, когда одновременно заданы и значение атрибута Лимит на количество селекторов в 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
Атрибут 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 { стиль границы: начало; } 
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 Элемент| Название атрибута | Значения | Примечания |
|---|---|---|
| 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.