12790

Рамки. Примеры определения рамок

Практическая работа

Информатика, кибернетика и программирование

Рамки Рамки имеют многообразное применение например как декоративный элемент или для отделения двух объектов. CSS предоставляет бесчисленное множество вариантов использования рамок. borderwidth bordercolor borderstyle Примеры определения рамок border Толщи

Русский

2013-05-03

23.33 KB

2 чел.

Рамки

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

  •  border-width
  •  border-color
  •  border-style
  •  Примеры определения рамок
  •  border

Толщина рамки [border-width]

Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Цвет рамки [border-color]

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .

Типы рамок [border-style]

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для <h1>, <h2>, <ul> и <p>. Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:

h1 {

border-width: thick;

border-style: dotted;

border-color: gold;

}

h2 {

border-width: 20px;

border-style: outset;

border-color: red;

}

p {

border-width: 1px;

border-style: dashed;

border-color: blue;

}

ul {

border-width: thin;

border-style: solid;

border-color: orange;

}

  •  Показать пример

 Задание: можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается (применить для выше рассмотренного примера самостоятельно):

h1 {

border-top-width: thick;

border-top-style: solid;

border-top-color: red;

border-bottom-width: thick;

border-bottom-style: solid;

border-bottom-color: blue;

border-right-width: thick;

border-right-style: solid;

border-right-color: green;

border-left-width: thick;

border-left-style: solid;

border-left-color: orange;

}

Сокращённая запись [border]

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:

p {

border-width: 1px;

border-style: solid;

border-color: blue;

}

можно объединить в:

p {

border: 1px solid blue;

}

Задание: примените сокращенную запись для рассмотренного выше примера.

Резюме

В этом уроке вы познакомились с безграничными возможностями CSS при использовании рамок. В следующем уроке мы рассмотрим, как определять размеры в боксовой модели - height и width.

К началу


 

А также другие работы, которые могут Вас заинтересовать

15726. Бетоносмеситель СБ-103 341 KB
  Курсовая работа По дисциплине: Автоматизация проектирования на тему: Бетоносмеситель СБ103 СОДЕРЖАНИЕ КЛАССИФИКАЦИЯ БЕТОНОСМЕСИТЕЛЕЙ ПРИНЦИП РАБОТЫ И НАЗНАЧЕНИЕ МАШИНЫ ТЕХНИЧЕСКАЯ ХАРАКТЕРИСТИКА БЕТОНОСМЕСИТЕЛЯ СБ10...
15727. АТП на 150 автомобилей ВАЗ-2104 и 200 грузовых автомобилей ГАЗель 364.5 KB
  Расчетнопояснительная записка к курсовому проекту на тему: АТП на 150 автомобилей ВАЗ2104 и 200 грузовых автомобилей ГАЗель Введение Курсовое проектирование по кафедре Автомобильный транспорт имеет своей целью закрепление знаний по дисциплине Производственноте...
15728. Дизельные генераторы KDE12EA3 157.97 KB
  Дизельные генераторы KDE12EA3 Дизельные генераторы KIPOR KDE12EA3 имеют новый автоматический регулятор напряжения обеспечивающий высокую точность значения выходного напряжения и мощный дизельный двигатель KD2V86F. Генератор обладает номинальным напряжением 380 / 220В номинальной с
15729. ТЕХНИЧЕСКОЕ ОБСЛУЖИВАНИЕ СИСТЕМ ПИТАНИЯ АВТОМОБИЛЬНЫХ ДВИГАТЕЛЕЙ 116.9 KB
  Реферат на тему ТЕХНИЧЕСКОЕ ОБСЛУЖИВАНИЕ СИСТЕМ ПИТАНИЯ АВТОМОБИЛЬНЫХ ДВИГАТЕЛЕЙ Техническое обслуживание системы питания карбюраторного двигателя Неисправности системы питания заключаются в...
15730. Маркировка автомобильных шин 140.17 KB
  Маркировка автомобильных шин Автомобильные шины маркируются алфавитноцифровым кодом который обозначается на борту шины. Этот код определяет размеры шины и некоторые из ее ключевых характеристик типа индикаторов нагрузки и скорости. Иногда внутренний борт шины со
15731. Проект организации ТО и ремонта МТП в ЦРМ хозяйства с годовым объемом работ 33000 часов 151.16 KB
  КУРСОВАЯ РАБОТА Тема: Проект организации ТО и ремонта МТП в ЦРМ хозяйства с годовым объемом работ 33000 часов РЕФЕРАТ Пояснительная записка курсового проекта содержит 39 листов машиннопечатного текста формата А4 13 таблиц и два приложения список использованно
15732. МОДЕЛИРОВАНИЕ СОСТАВА МАШИННО-ТРАКТОРНОГО ПАРКА 369.5 KB
  Реферат по моделированию: МОДЕЛИРОВАНИЕ СОСТАВА МАШИННОТРАКТОРНОГО ПАРКА ВВЕДЕНИЕ За последние годы произошло значительное сокращение количества сельскохозяйственной техники в стране. Тяжелое финансовое положение предприятий нарушенный паритет цен на маши...
15733. ОСНОВНЫЕ ДАННЫЕ ДВИГАТЕЛЯ М-14П 422 KB
  КОНСТРУКЦИЯ ДВИГАТЕЛЯ М14П ОСНОВНЫЕ ДАННЫЕ ДВИГАТЕЛЯ М14П ОБЩИЕ СВЕДЕНИЯ Авиационный двигатель М14П поршневой четырехтактный бензиновый с воздушным охлаждением девятицилиндровый однорядный со звездообразным расположением цилиндров и с карб...
15734. Технология восстановления типовых деталей 92 KB
  Реферат по дисциплине Надежность и ремонт машин на тему: Технология восстановления типовых деталей Содержание 1 Номенклатура классов и групп деталей машин. 2 Характерные дефекты и способы их устранения у типовых деталей 2.1 Корпусные детали 2.2 ...