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 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. Есть
два решения этой проблемы:
- Использовать элемент
<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>
). Но, по двум причинам, я не вижу в этом проблемы: 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
Атрибут 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
ЭлементНазвание атрибута | Значения | Примечания |
---|---|---|
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.