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.

К началу


 

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

46929. Инновационные проекты в управлении стоимостью предприятия 37.38 KB
  Жизненный цикл инновации определяется как промежуток времени от зарождения идеи до снятия с производства реализованного на ее основе инновационного продукта. Инновация в своем жизненном цикле проходит ряд стадий включающих: зарождение сопровождающееся выполнением необходимого объема научноисследовательских и опытноконструкторских работ разработкой и созданием опытной партии новшества; рост промышленное освоение с одновременным выходом продукта на рынок; зрелость стадия серийного или массового производства и увеличение объема...
46930. The simple sentence. The semantic classification of simple sentence 37.5 KB
  The simple sentence s ny sentence in generl is orgnised s system of functionexpressing positions the content of the functions being the reflection of situtionl event. The nomintive prts of the simple sentence ech occupying notionl position in it re subject predicte object dverbil ttribute prentheticl enclosure ddressing enclosure; specil seminotionl position is occupied by n interjectionl enclosure. The ultimte nd highest object of this integrl modifiction is the sentence s whole nd through the sentence the reflection of the...
46932. Профессиональные риски в СР. Проблемы профессионального здоровья специалиста, пути его сохранения и совершенствования 37.5 KB
  Проблемы профессионального здоровья специалиста пути его сохранения и совершенствования. Важнейшая задача органов управления в ведении которых находятся социальные службы и учебные центры осуществляющие подготовку и переподготовку социальных работников не столько содействие им в профессиональном развитии и продвижении по службе а сохранение здоровья социальных работников профилактика их профессиональных заболеваний проведение консультаций относительно профессиональных рисков в социальной работе. Важную роль в освоении профессии...
46935. ДОСЛІДЖЕННЯ ПРОГРАМИ ФІЗИЧНОГО ВИХОВАННЯ ДЛЯ 5-9 КЛАСІВ СПЕЦІАЛЬНОГО ЗАГАЛЬНОГО ЗАКЛАДУ ДЛЯ СЛІПИХ ДІТЕЙ 240.5 KB
  Розглянути особливості проведення занять з дітьми з особливими потребами. Вивчити особливості корекційних занять з дітьми з особливими потребами. Узагальнити дані науково-дослідницької роботи по впровадженню корекційних вправ в процесі фізичного виховання дітей шкільного віку. Проаналізувати особливості фізичного виховання дітей-інвалідів.
46937. Сущность экологических проблем. Причины возникновения, пути решения 37.93 KB
  Рост потребления природных ресурсов сопровождается с одной стороны истощением природы с другой увеличением масштабов образования отходов. тонн только твердых отходов в том числе 80 млрд. Особую тревогу вызывает рост складируемых токсичных отходов количество которых достигло 2 млрд. тонн ежегодно образующихся токсичных отходов используется и обезвреживается только одна треть.