Рассмотрим некоторый документ. На нем сформированы (отображены на экране в браузере) html-элементы. Они формируются на основании тегов. Вы расставляете теги, их обрабатывает парсер html (есть в любом браузере) и строит html-элементы. И как будут выглядеть эти элементы, определяет CSS.
У всех html-элементов есть 4 области: область внешних отступов, рамка, внутренние отступы и содержание элемента. Для чего они нужны?
- Внешние отступы (margin) - нужны, чтобы регулировать взаимодействие этого элемента с границами других элементов.
- Внутренние отступы (padding) - это расстояние от рамки до содержания данного элемента.
- Содержание самого элемента. Тут и так понятно. Если есть вложенные элементы, то они в этой области и находятся.
- Рамка (border). Очерчивает границы элемента. Схематично 4 области можно представить так:
Следует понимать, что каждый элемент лежит внутри какой-то области. Эта область для элемента, который лежит внутри нее, называется контейнером. Т.е. контейнер - это область контента родительского элемента. Эта область и определяет пространство для построения внутреннего элемента. Значит внутренний элемент будет подстраиваться под размер этой области.
Внешние отступы
Это когда наш элемент взаимодействует с границами контейнера и с границами соседних элементов (те, которые в коде расположены рядом с ним). Основные правила:
- margin-top: auto|величина|% - отступ сверху.
- margin-right: auto|величина|% - отступ справа.
- margin-bottom: auto|величина|% - отступ снизу.
- margin-left: auto|величина|% - отступ слева.
- margin: margin-top margin-right margin-bottom margin-left – сборное правило.
Значение “auto” - значит самостоятельный разбор браузером этих величин. Размер отступа можно указать в величинах: em, ex, px. Проценты (%) считаются от ширины контейнера (от области контента родительского элемента). Если указать отрицательное значение, то границы элементов внутри родительского контейнера наедут друг на друга.
Правило “margin” - сборное, здесь указываются значения всех 4-х отступов (начиная сверху и по часовой стрелке). Примеры:
Margin: 10px 20px 20px 30px; margin: 10px 20px 30px; - отступ слева справа одинаков margin: 10px 20px; - отступ сверху- снизу и слева- справа одинаков margin: 10px; - все отступы одинаковы
Внутренние отступы
Здесь не может быть отрицательных значений, т.к. невозможно контент выдвинуть за пределы рамки элемента. Проценты считаются от ширины контейнера.
- padding-top: величина|%.
- padding-right: величина|%.
- padding-bottom: величина|%.
- padding-left: величина|%.
- padding: padding-top padding-right padding-bottom padding-left - сборное правило. По аналогии с “margin”.
Рамки в CSS
У всех рамок есть следующие характеристики:
- Толщина - border-width: величина (thin|medium|thick). По умолчанию - medium.
- Цвет - border-color: цвет. По умолчанию - цвет шрифта в этом элементе.
- Тип - border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset. Типы: нет рамки | точками | пунктиром | сплошная | двойная | имитация рельефа.
Сами правила рамки:
- border-top- (width|color|style).
- border-right- (width|color|style).
- border-bottom- (width|color|style).
- border-left- (width|color|style).
- border: border-width border-style border-color. Сборное правило.
Рамки (блочные параметры)
Значения этих свойств используются для установки характеристик области вокруг элемента.
Это может быть применено к символам, изображениям и т.д.
Параметры | Значение | Описание |
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
Самый простой способ создания рамки заключается в использовании параметров таблицы border, определяющего толщину рамки и bordercolor, который задает ее цвет. Рамки созданные таким образом отличаются по своему виду в разных браузерах (рис. 3.1).
Рис. 3.1. Рамка полученная с помощью параметра border
Netscape имитирует трехмерность рамки, браузер Opera вообще оставляет ее цвет без изменения, а Internet Explorer делает рамку сплошной.
Пример 3.1. Использование параметра border
Содержимое |
Параметр border определяет толщину рамки, bordercolor – ее цвет, cellpadding задает расстояние от рамки до содержимого таблицы.
Вложенные таблицы
Еще один простой и универсальный способ построения рамки, работающий одинаково в разных браузерах, основан на наложении двух таблиц друг на друга. Если мы возьмем прямоугольник из, например, красной бумаги и сверху на него наложим еще один прямоугольник белого цвета, чуть меньшего размера, то увидим красную рамку. Только вместо листа бумаги используем тег TABLE, а цвет таблицы задаем параметром bgcolor.
Пример 3.2. Использование вложенных таблиц
|
В верхней таблице устанавливаем ширину и высоту таблицы по желанию, параметром bgcolor
задаем цвет рамки, cellspacing
присваиваем нулю, а cellpadding
управляет толщиной границы. Чем этот параметр больше, тем толще будет и рамка.
Для внутренней таблицы надо обязательно задать ее цвет, отличный от цвета внешней, совпадающий с цветом фона веб-страницы, в примере, например, задан белый. Параметр cellspacing
или cellpadding
(в данном случае без разницы какой использовать) определяет расстояние от границы рамки до содержимого таблицы.
Ширина и высота внутренней таблицы обязательно должны совпадать с шириной и высотой внешней таблицы.
Замечание:
Перенос строки в тексте кода HTML автоматически добавляет пробел. Если рамка в некоторых местах получается толще, чем задумано, следует убрать лишние пробелы между тегами и тем самым сократить количество строк.
Заливка ячеек таблицы цветом
Использование цвета фона ячеек таблицы – один из универсальных и распространенных способов создания рамки. Создаем таблицу (рис. 3.2) и заливаем крайние ячейки нужным цветом (рис. 3.3).
Рис. 3.2. Рис. 3.3
Толщина рамки определяется шириной и высотой ячеек. Обязательно следует поместить внутри этих ячеек таблицы распорку – прозрачный рисунок размером 1 на 1 пиксел (в примере он называется spacer.gif), иначе в браузере Netscape этот способ работать не будет.
Пример 3.3. Создание рамки заливкой цветом ячеек таблицы
height="2"> | ||
height="2"> | Содержимое | height="2"> |
height="2"> | height="2"> |
В данном примере делается красная рамка толщиной 2 пиксела, она смотрится наиболее элегантно. Параметры таблицы cellspacing и cellpadding приравниваются нулю, чтобы рамка оставалась нужной толщины и без зазоров. Если поместить внутрь такой таблицы текст, он будет плотно прилегать к рамке, что некрасиво и плохо читается. Чтобы добавить отступы можно создать для этой цели дополнительные ячейки, использовать вложенную таблицу или воспользоваться стилями.
Замечание: Приведенный способ чувствителен к разным параметрам, поэтому, в случае неправильной отрисовки рамки следует проверить следующее:
- если размер таблицы задается в пикселах, надо задать фиксированные размеры всех ячеек;
- когда ширина таблицы указана в процентах, внутри рамки нужно поместить текст, который «распирает» внутреннюю ячейку до нужной ширины; при отсутствии текста или другого содержимого внутри таблицы с рамкой, ее ширина окажется гораздо шире желаемой;
- в ячейках, где проходит рамка, не должно быть никаких символов неразделяемого пробела (& nbsp;), что так любят автоматически добавлять некоторые редакторы веб-страниц;
- перенос строки автоматически добавляет в текст пробел, поэтому между открывающим и закрывающим тегами
и текст следует писать в одну строку, чтобы не было зазоров между ячейками.
Декоративная рамка
Для создания желаемой рамки ее необходимо предварительно нарисовать в каком-нибудь графическом редакторе. На рис. 3.4, например, показана рамка со скругленными углами. Затем это изображение разрезаем на 9 частей, помеченные на рисунке 3.5 оранжевыми линиями и номерами. Разрезать изображение можно, например, в программе ImageReady или другой подобной.
Рис. 3.4.
Рис. 3.5.
После разрезания рисунка на части получим 8 фрагментов:
Пятого фрагмента рамки не будет (5.gif), поскольку у нас его заменит содержимое. Теперь создаем таблицу размером 3х3, как показано на рис. 3.2 и в ее ячейках размещаем созданные рисунки.
Пример 3.4. Создание декоративной рамки
width="1"> | ||
Содержимое | ||
width="1"> |
В таблице параметры border, cellspacing
и cellpadding
должны быть равны нулю, иначе линии не будут состыковываться между собой.
Уголки вставляем как обычные рисунки с помощью тега IMG, а вот горизонтальные и вертикальные линии следует задавать с помощью фона ячейки таблицы, параметром background
. Это позволит сделать нашу рамку масштабируемой и размер ее будет изменяться в зависимости от содержимого.
Чтобы линии плотно прилегали друг к другу и между ними не было пробелов надо обязательно указывать все размеры ячеек и рисунков.
В ячейках, где фоном размещаются горизонтальные и вертикальные линии, необходимо поместить распорку – это либо пробел, либо прозрачный рисунок формата GIF размером 1 на 1 пиксел (в примере файл называется spacer.gif). Делается это для того, чтобы обмануть браузер Netscape, который не показывает содержимое ячейки, если она пуста.
Приведенный способ позволяет создавать рамки практически любого вида.
Использование стилей
С помощью стилей рамку можно применить к любому блочному тегу, например, параграфу (тег P), таблице и тегу DIV. Стили позволяют создать рамку проще и удобней, чем с использованием таблиц и предоставляют разные виды рамок, которые показаны на рис. 3.6.
Рис. 3.6 Вид рамок задаваемых с помощью стилей
Первые две типа рамок – dotted
и dashed
поддерживаются браузерами Netscape и Internet Explorer только со старших версий.
Рамка задается проще всего параметром border
, который сразу указывает ее вид, толщину и цвет.
Пример 3.6. Использование стилей
При работе на вычислительной технике необходимо сесть так, чтобы
руки с предплечьями образовывали прямой угол, глаза поставить на
расстояние 30-40 см от рабочей поверхности монитора.
В примере используется двойная рамка, толщина которой складывается из толщины линий и расстояния между ними. Чтобы рамка не соприкасалась с текстом, задан отступ от рамки до содержимого параметром padding
.
Замечание:
Браузер Netscape 4.x не добавляет рамку для таблиц и ограничивает ширину рамки ее содержимым.
Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.
1. Синтаксис CSS border
border : border-width border-style border-color | inherit ;
- border-width - толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
- border-style
- стиль выводимой рамки. Может принимать следующие значения
- none или hidden - отменяет границу
- dotted - рамка из точек
- dashed - рамка из тире
- solid - простая линия (применяется чаще всего)
- double - двойная рамка
- groove - рифленая 3D граница
- ridge , inset , outset - различные 3D эффекты рамки
- inherit - применяется значение родительского элемента
- border-color - цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет".
2. Примеры с различными границами рамок CSS border
2.1. Пример. Разные стили оформления границы рамки border-style
border-style: dashedborder-style: dashedborder-style: solidborder-style: doubleborder-style: grooveborder-style: ridgeborder-style: insetborder-style: outsetЧетыре разных рамки
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).
При наведении курсора мыши на блок цвет рамки изменится
Вот как это выглядит на странице:
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
border-width : thin | medium | thick | значение ;
- thin - тонкая толщина линии
- medium - средняя толщина линии
- thick - толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
border-width: thinborder-width: mediumborder-width: thickРазная толщина у границ
Вот как это выглядит на странице:
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
- border-top - для задания рамки сверху (верхняя граница)
- border-bottom - для задания рамки снизу (нижняя граница)
- border-right - для задания рамки справа (правая граница)
- border-left - для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color - задание цвета верхний границы
- border-top-style - задание стиля верхней границы
- border-top-width - задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
/* Описание двух одинаковых стилей: */
4.1. Пример. Красивая рамка для выделения цитат
Пример рамки для цитаты
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
5. Как сделать несколько границ border у элемента html
Иногда требуется сделать несколько границ. Приведем пример
5.1. Первый вариант с несколькими границами
Вот как это выглядит на странице:
Есть второй способ через наложение теней.
5.2. Наложение теней для создания нескольких границ
Вот как это выглядит на странице:
6. Скругление углов у границ (border-radius)
Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например
7. Вдавленная линия CSS
Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.
Вот как это выглядит на странице:
Для обращения к border из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.border ="VALUE "
Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает параметр 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. Вид границ, совпадающих с цветом фона Лучшие статьи по теме |