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.

К началу


 

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

32261. Анализ различных методов возведения стальных вертикальных резервуаров 38.5 KB
  Конструкции поступившие на монтаж должны иметь маркировку изготовителя и сертификат качества а монтаж резервуаров должен производиться в соответствии с проектом и требованиями настоящих Правил строительных норм и правил разработанного ППР. Производитель работ монтажник должен иметь следующую нормативную и проектную документацию до выполнения монтажа: настоящие Правила; рабочую документацию КМ проектировщика; рабочие чертежи КМД изготовителя; проект плана производства работ далее ППР на сборку и сварку...
32262. Методы наращивания и подращивания поясов 26.5 KB
  Метод наращивания поясов резервуаров осуществляется на высоте путем сборки отдельных листов. Это позволяет возводить резервуары любого объема в основном для резервуаров с плавающей крышей. Недостаток данного метода возведения резервуаров монтаж конструкции неподвижной крыши осуществляется на значительной высоте что требует определенной квалификации рабочих задействование определенной техники и технологии возведения.
32263. Разработка грунта в траншее грейферным оборудованием для устройства «стены в грунте» 127 KB
  Схема разработки захватки траншеи за один проход грейфера представлена на рис. После разработки траншеи на полную глубину производится проверка глубины траншеи зачистка траншеи от слоя осыпавшего грунта и осадка глинистого раствора путем плавного опускания и перемещения грейфера по всей плоскости траншеи. Разработка захватки траншеи за один проход грейфера.
32264. Метод опускного колодца при строительстве сооружений водопровода и канализации 60 KB
  Сущность метода состоит в том что первоначально на поверхности земли возводят стены колодца оборудованные ножевой частью а затем внутри его разрабатывают грунт в направлении от центра к периметру стен.Первым этапом сооружения колодца является устройство основания под нож которое гарантирует надежное опирание последнего при возведении стен.По окончании устройства стен приступают к погружению колодца под действием его собственной силы тяжести.
32265. Устройство анкерного крепления котлованов 42 KB
  Грунтовые анкера относятся тоже к ограждению котлованов и применяются взамен распорной системы. Грунтовые анкера компенсируют опрокидывающий момент действующий со стороны грунта на конструкцию. Анкера располагаются за пределами котлована и как правило выходят за пределы участка застройки. Вовторых сами анкера не должны препятствовать дальнейшему городскому строительству в том числе подземному.
32267. Состав и порядок ведения исполнительной документации 143 KB
  Состав и порядок ведения исполнительной документации при осуществлении строительства реконструкции капитальном ремонте объектов капитального строительства разработан в соответствии с Градостроительным кодексом Российской Федерации иными нормативными правовыми актами Российской Федерации и обязательными требованиями технических регламентов норм и правил. В случае отсутствия технических регламентов проводится проверка соответствия выполняемых работ требованиям строительных норм и правил правил безопасности государственных стандартов...
32268. Виды вантовых покрытий 215.5 KB
  Системы с замкнутым контуром поэтому являются более экономичными. ПРЯМОУГОЛЬНЫЕ В ПЛАНЕ СИСТЕМЫ В таких зданиях применяют системы из параллельных вант или вантовых ферм; поверхность оболочки имеет цилиндрическую форму. Перед замоноличиванием швов ванты вновь натягивают гидравлическими домкратами чем создают требуемое предварительное натяжение вантовой системы. Системы могут быть однопролетными или многопролетными.