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.

К началу


 

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

8374. Велика Китайська стіна 24.5 KB
  Велика Китайська стіна - символ Китаю, одна із найграндіозніших споруд усіх часів і народів. Стіна починається недалеко від Ляодунської затоки і проходить по горах через Північний Китай і пустелю Гобі, довжина стіни зі сходу на захід - 6700 км....
8375. Первый властелин единого Китая 72 KB
  Первый властелин единого Китая 1. Вопросы для повторения. Определите словесно с помощью корты местоположение Китая. Докажите, что в Китае были все необходимые условия для занятия земледелием? Какие трудности приходилось преодолевать китай...
8376. Книгораспространение в Китае 26.27 KB
  Книгораспространение в Китае Книжное дело в Китае занимает одну из ведущих позиций на рынке информации и является важной статьей центрального и региональных бюджетов, несмотря на определенные изменения конъюнктуры рынка информационных технологий. Ве...
8377. Происхождение и история китайской письменности 73.5 KB
  Происхождение и история китайской письменности Место письменности в истории китайского языка Письменность является выразителем языка. Древние люди письменность и язык ставили на одну доску. Изменение звука речи они ошибочно принимали за изменение пр...
8378. Периодизация истории китайского языка 38 KB
  Периодизация истории китайского языка Количественные и качественные факторы языковых изменений Значение периодизации истории китайского языка заключается в том, что она ставит своей целью ещё более чётко выявить нить исторического развития языка, ещ...
8379. Тайцзи цюань - китайская традиционная гармонизирующая гимнастика 63.5 KB
  Тайцзи цюань - китайская традиционная гармонизирующая гимнастика, позволяющая достичь гармонии между телом, разумом и энергией вселенной. Это эффективное средство лечения болезней, укрепления здоровья, профилактики заболеваний и до...
8380. Типология и поэтика женской прозы: гендерный аспект 89.5 KB
  Типология и поэтика женской прозы: гендерный аспект О гендерном аспекте литературоведения. Фактически под гендерными литературоведческими исследованиями порой понимается изучение женского творчества, произведений женщин-писательниц, особенно, лите...
8381. Политическое и государственное устройство Китая. Собрание статей 157 KB
  Статья 1. Система государственного управления Согласно Конституции КНР в Китае на центральном уровне имеются шесть властных структур: Всекитайское Собрание народных представителей и его Постоянный Комитет, Председатель КНР, Государственный Совет, Це...
8382. Религии и культы Древнего Китая 83 KB
  Религии и культы Древнего Китая Введение Актуальность и научная значимость исследования религий и культов Древнего Китая обуславливается тем, что сегодня наблюдается особый интерес к изучению наследия религий и культов. Это объясняется тем, что наст...