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.

К началу


 

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

49147. Маркетинг в интернете 736.5 KB
  Мы благодарим наших американских друзей за поддержку и помощь в осуществлении идеи выпустить в России одну из первых книг по электронному бизнесу с компетентными и емко представленными данными. Выражаем также признательность авторам объявлений и новостных сообщений, представляющих свои труды во Всемирной Сети.
49148. История болезни 478.5 KB
  История болезни – документ, отражающий жалобы больного, развитие его основного заболевания, наличие сопутствующих заболеваний, объективное состояние на момент поступления, тактику обследования и терапии, динамику патологического процесса в течение периода наблюдения и лечения...
49149. Проектирование информационных систем 1.61 MB
  Преимущества использования системы: уменьшатся срок формирования регистров отчетности и отчета клиенту; расширяются возможности по получению информации в различных разрезах по площадкам стратегиям клиентам договорам ДУ; увеличивается скорость прохождения информации между специалистами компании; автоматизируется документооборот связанный со сделками с ценными бумагами. Система интегрирована с внешней системой LOISCpitlMrket для загрузки данных о сделках с ценными бумагами которые совершаются брокером на бирже. Отчёт Регистр...
49150. Программа, выполняющая перенос значения ячейки памяти с сохранением знакового разряда 153 KB
  Трансляция программы в исполняемый машинный код производится ассемблером от англ. Обеспечение максимального использования специфических возможностей конкретной платформы что также позволяет создавать более эффективные программы с меньшими затратами ресурсов. 3 РАЗРАБОТКА СТРУКТУРЫ ПРОГРАММЫ Для реализации поставленной задачи необходимо загрузить в аккумулятор значение ячейки памяти по адресу 6000Н затем непосредственно в аккумуляторе выполнять требуемые операции. Кодирование 5 ОТЛАДКА И ВЕРИФИКАЦИЯ ПРОГРАММЫ Начальное и итоговое состояния...
49153. Микропроцессорная система, обеспечивающая выдачу кодов управления в буферное устройство 178 KB
  В данной курсовой работе разработана микропроцессорная система обеспечивающая выдачу кодов управления в буферное устройство. Система состоит из микропроцессора тактового генератора системного микроконтроллера ПЗУ параллельного интерфейса. Микропроцессорная система МПС - это вычислительная или управляющая система. Микропроцессорная система на базе комплекта КР 580.
49154. Товароведная характеристика и экспертиза четырех образцов сметаны от разных производителей, реализуемых в магазине «Гавань» 18.11 MB
  Качественная фальсификация кисломолочных продуктов может осуществляться следующими способами: разбавлением водой; разбавлением сметаны другим кисломолочным продуктом; введением чужеродных добавок; введением пищевых красителей ароматизаторов загустителей и т. Для определения фальсификации сметаны исследуют ее маркировку на соответствие требованиям НТД штриховой код на соответствие заявленному товару проводят органолептические исследования и исследования на присутствие творога крахмала мела. Неправильный процесс производства не...
49155. Расчет физических свойств природного газа при нормальных условиях 344.5 KB
  Расчет физических свойств природного газа при нормальных условиях Основные физикохимические свойства компонентов газов используемых для газоснабжения Газы Молекулярная масса кг моль Плотность при 0 С и атмосферном давлении кг м3 Критическая температура К Критическое давление МПа.