Глава 5. Границы элемента

Глава 5. Границы элемента

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Глава 5. Границы элемента

Глава 5. Границы элемента

www.homa.xp3.biz 

В этой главе мы поговорим о том, как сделать с помощью CSS рамку-бордюр вокруг того или иного элемента. В HTML эта задача лежала на плечах атрибута border, однако его можно было применить далеко не к каждому тегу (элементу), да и не всегда он мог решить ту или иную дизайнерскую задумку.

В CSS эту задачу берёт на себя одноимённое базовое свойство border и значительно расширяет круг возможностей при работе со стилем границы любого(!) элемента выводимого на экран.

Стиль границы

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

Свойство border-style может присваивать элементу 1 из ниже перечисленных стилей границы.

  • none - граница отсутствует (по умолчанию);
  • dotted - граница из ряда точек;
  • dashed - пунктирная граница;
  • solid - сплошная граница;
  • double - двойная граница;
  • groove - граница "бороздка";
  • ridge - граница "гребень";
  • inset - вдавленная граница;
  • outset - выдавленная граница.

    Пример:

    <title>Стиль границы</title>

    <style>p{background:#f5f}</style>

    <p style=border-style:none>граница отсутствует

    <p style=border-style:dotted>граница из ряда точек

    <p style=border-style:dashed>пунктирная граница

    <p style=border-style:solid>сплошная граница

    <p style=border-style:double>двойная граница

    <p style=border-style:groove>граница "бороздка"

    <p style=border-style:ridge>граница "гребень"

    <p style=border-style:inset>вдавленная граница

    <p style=border-style:outset>выдавленная граница

    смотреть пример

    Стиль бордюра может быть задан как для всех сторон элемента одновременно, так и для каждой его стороны отдельно в зависимости от того, сколько значений присвоено свойству border-style. Таковых значений может быть от 1 до 4 по числу сторон элемента.

    В каждом из 4 случаев действуют свои "правила" по присуждению стиля рамки той или иной стороне элемента, которые приведены в таблице ниже:
    Число значенийРезультат
    1

    Пример:div{border-style:solid}

  • 1-е значение - Устанавливает единый стиль бордюра для всех сторон элемента.
  • 2

    Пример:div{border-style:solid double}

  • 1-е значение - Устанавливает стиль верхней и нижней границы элемента.
  • 2-е значение - Устанавливает стиль левой и правой границы элемента.
  • 3

    Пример:div{border-style:solid double dashed}

  • 1-е значение - Устанавливает стиль верхней границы элемента.
  • 2-е значение - Устанавливает стиль левой и правой границы элемента.
  • 3-е значение - Устанавливает стиль нижней границы элемента.
  • 4

    Пример:div{border-style:solid double dashed ridge}

  • 1-е значение - Устанавливает стиль верхней границы элемента.
  • 2-е значение - Устанавливает стиль правой границы элемента.
  • 3-е значение - Устанавливает стиль нижней границы элемента.
  • 4-е значение - Устанавливает стиль левой границы элемента.
  • Толщина границы

    Свойство border-width - устанавливает ширину границы элемента.

    Ширина бордюра может быть заданна с помощью следующих аргументов:

  • thin - тонкая граница
  • medium - средняя толщина границы
  • thick - толстая граница

    А также в пикселях или любых других единицах измерения принятых в CSS.

    По аналогии со стилем, толщина бордюра тоже может иметь от 1 до 4 значений и в каждом случае устанавливает ёе для тех или иных сторон бордюра как показано в таблице ниже.
    Число значенийРезультат
    1

    Пример:div{border-style:solid;border-width:1px}

  • 1-е значение - Устанавливает единую толщину бордюра со всех сторон.
  • 2

    Пример:div{border-style:solid;border-width:1px 4px}

  • 1-е значение - Устанавливает толщину верхней и нижней границы элемента.
  • 2-е значение - Устанавливает толщину левой и правой границы элемента.
  • 3

    Пример:div{border-style:solid;border-width:1px 4px 7px}

  • 1-е значение - Устанавливает толщину верхней границы элемента.
  • 2-е значение - Устанавливает толщину левой и правой границы элемента.
  • 3-е значение - Устанавливает толщину нижней границы элемента.
  • 4

    Пример:div{border-style:solid;border-width:1px 4px 7px 5px}

  • 1-е значение - Устанавливает толщину верхней границы элемента.
  • 2-е значение - Устанавливает толщину правой границы элемента.
  • 3-е значение - Устанавливает толщину нижней границы элемента.
  • 4-е значение - Устанавливает толщину левой границы элемента.
  • Пример:

    <title>Толщина границы</title>

    <div style="border-style:solid;border-width:3px 1px 10px 4px">

    Толщина границ данного блока:

    <li>Сверху 3 пикселя

    <li>Справа 1 пиксель

    <li>Снизу 10px

    <li>Слева 4 пикселя

    </ul>

    </div>

    <p>

    <div style=border-style:double;border-width:thick>В этом блоке границы со всех сторон одинаково толстые</div>

    смотреть пример

    Цвет границы

    Цвет рамки или её сторон по отдельности определяется свойством border-color.

    Цвет бордюра может иметь следующие значения:

  • #ff0 - 16-ное значение цвета RGB.
  • red - именное значение цвета.
  • RGB(255,0,0) - значение цвета RGB.
  • transparent - прозрачная граница.

    Ну и так же как и в случаях с толщиной и стилем, цвет бордюра тоже может иметь от 1 до 4 цветовых значений при каждом "раскладе" окрашивая нужные стороны бордюра как показано в таблице ниже.
    Число значенийРезультат
    1

    Пример:div{border-style:solid;border-width:3px;border-color:#008}

    1-е значение - Устанавливает единый цвет бордюра со всех сторон.

    2

    Пример:div{border-style:solid;border-width:3px;border-color:#008 #0ff}

  • 1-е значение - Устанавливает цвет верхней и нижней границы элемента.
  • 2-е значение - Устанавливает цвет левой и правой границы элемента.
  • 3

    Пример:div{border-style:solid;border-width:3px;border-color:#008 #0ff #ff0}

  • 1-е значение - Устанавливает цвет верхней границы элемента.
  • 2-е значение - Устанавливает цвет левой и правой границы элемента.
  • 3-е значение - Устанавливает цвет нижней границы элемента.
  • 4

    Пример:div{border-style:solid;border-width:3px;border-color:#008 #0ff #ff0 #f00}

  • 1-е значение - Устанавливает цвет верхней границы элемента.
  • 2-е значение - Устанавливает цвет правой границы элемента.
  • 3-е значение - Устанавливает цвет нижней границы элемента.
  • 4-е значение - Устанавливает цвет левой границы элемента.
  • Так вот перестраховываясь, привожу пример:

    <title>Цвет границы</title>

    <div style="border-style:solid;border-width:10px;border-color:#ff0 #f00 #00f #0ff">

    <p style="border-style:double;border-width:5px;border-color:#008">Зелёный

    <p style="border-style:double;border-width:5px;border-color:red;">Красный

    <p style="border-style:double;border-width:5px;border-color:rgb(0,0,255);">Синий

    </div>

    смотреть пример

    Границы справа слева сверху и снизу отдельно

    Для того, что бы определить стиль, цвет и ширину бордюра для 1 из сторон элемента, пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними "коллегами по цеху" список которых приведён ниже: border-bottom - Определяет стиль, цвет и ширину нижней границы элемента.

  • border-bottom-color - Устанавливает цвет нижней границы элемента.
  • border-bottom-style - Определяет стиль нижней границы элемента.
  • border-bottom-width - Определяет ширину нижней границы элемента. border-left - Определяет стиль, цвет и ширину левой границы элемента.
  • border-left-color - Устанавливает цвет левой границы элемента.
  • border-left-style - Определяет стиль левой границы элемента.
  • border-left-width - Определяет ширину левой границы элемента. border-right - Определяет стиль, цвет и ширину правой границы элемента.
  • border-right-color - Устанавливает цвет правой границы элемента.
  • border-right-style - Определяет стиль правой границы элемента.
  • border-right-width - Определяет ширину правой границы элемента. border-top - Определяет стиль, цвет и ширину верхней границы элемента.
  • border-top-color - Устанавливает цвет верхней границы элемента.
  • border-top-style - Определяет стиль верхней границы элемента.
  • border-top-width - Определяет ширину верхней границы элемента.

    Не буду описывать каждый из них, думаю и так понятно, что дело обстоит, так же как и с их сородичами, свойствами border-style, border-width и border-color, кроме того факта, что в данном случае свойства указываются для 1 из сторон границы элемента.

    Приведу пример:

    <title>Граница слева</title>

    <style>div{border-left:10px solid #008;background:#c6f}</style>

    <div>

    <p>В этом примере у контейнера div мы обозначили только его левую границу с помощью свойства border-left написав:

    div{<p>

    border-left:10px solid #008;<p>

    background:#c6f;<p>}

    <p>Такого же результата можно было бы добиться прописывая свойства стиля, толщины и цвета для левой границы элемента отдельно.

    <p>Это выглядело бы вот так:

    div{<p>

    border-left-color:#008;<p>

    border-left-style:solid;<p>

    border-left-width:10px;<p>

    background:#c6f;<p>} <p>Кстати Вам этот блок ничего не напоминает?

    </div>

    смотреть пример

    Border

    Свойство border - базовый атрибут одновременно определяет стиль, цвет и толщину границы элемента.

    Так как атрибут border является базовым, значения родственных свойств указываются в любом порядке через пробел.

    Пример:

    <title>border</title>

    <style>div{border:RGB(25,125,25)6px ridge}</style>

    <div>

    <h3>А знаете ли Вы что:</h3>

    <p>Слон - символ положительного характера - используется в Азии как царское верховное животное и высоко ценится за ум и хитрость.

    . . .

    </div>

    смотреть пример

    Однако если Вы хотите присвоить разные свойства различным сторонам границы элемента или только 1 из них, пользуйтесь свойствами border-bottom, border-left, border-right, border-top.

    Границы таблицы

    Свойство CSS border-collapse определяет стиль отображения границ таблицы.

    По умолчанию каждая ячейка таблицы имеет собственную рамку (ну если конечно использован атрибут HTML border или одноимённое свойство CSS), так вот в местах соприкосновения ячеек образуется двойная линия, border-collapse заставляет браузер анализировать таковые места и поступать с ними согласно присвоенному значению данному свойству.

    Внешний вид границ таблицы может принимать следующий вид:

  • separate - ячейки таблицы отделены друг от друга (по умолчанию).
  • collapse - ячейки таблицы не имеют промежутков между собой.
  • inherit - свойства наследуются у родителя элемента. (работает далеко не во всех браузерах.)

    Пример:

    <title>Стиль таблицы</title>

    <table cellpadding=5 border=5>

    <caption>Таблица с бордюром по умолчанию</caption>

    <tr>

    <td>ячейка<td>ячейка<td>ячейка<td>ячейка

    <tr>

    <td>ячейка<td>ячейка<td>ячейка<td>ячейка

    </table>

    <hr>

    <table cellpadding=5 border=5 style="border-collapse:collapse">

    <caption>А эта таблица использует свойство CSS border-collapse с значением collapse</caption>

    <tr>

    <td>ячейка<td>ячейка<td>ячейка<td>ячейка

    <tr>

    <td>ячейка<td>ячейка<td>ячейка<td>ячейка

    </table>

    смотреть пример

    Свойство border-collapse применяется только к тегу <table> и элементам, у которых атрибут display имет значение table или inline-table.О свойстве display расскажу в отдельной главе.

    Полезные советы:

    Довольно часто слышу вопрос: "Как сделать вертикальную линию, по аналогии с тегом hr - горизонтальная разделительная линия"?

    1 из способов решения данной задачи является использование блока "пустышки" нужных размеров с левым или правым бордюром (свойства:border-left или border-right) необходимого стиля, который собственно и будет выступать в роли вертикальной линии.

    << предыдущая глава | следующая глава >>

  • Отвечу на любые вопросы. С уважением, Дмитрий Владимирович:
    8-965-148-98-02, diplom07@mail.ru.
    Печатать страницу: Глава 5. Границы элемента

    Глава 5, Границы элемента, Глава, 5, Границы, элемента, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, Создание сайтов, web-программирование, seo-продвижение, создание и раскрутка сайтов, вбиваю в топ-10, как гвозди, попробуйте бесплатно, Создание сайтов, web-программирование, seo-продвижение, Глава, 5, Границы, элемента, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, раскрутка сайтов, Вбиваю в ТОП-10, как гвозди, раскрутка сайтов, Делаю и раскручиваю сайты, Дмитрий Владимирович

    ×

    Ваше письмо