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.

К началу


 

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

6093. Состав горючих газов 32.23 KB
  Состав горючих газов. В состав газообразного топлива входят горючие и негорючие газы. Физико-химические и теплотехнические характеристики газового топлива обусловлены различием в составе горючих компонентов и наличием в газе негорючих газообразных к...
6094. Детали машин как научная дисциплина 30 KB
  Детали машин - научная дисциплина, включающая теорию, расчет и конструирование деталей общего назначения. Как отдельные детали и узлы любой машины, так и машина в целом должны удовлетворять следующим требованиям: работоспособности Работоспособным...
6095. SDI інтерфейс на основі модальних форм 33.71 KB
  SDI інтерфейс на основі модальних форм Хід роботи Створив новий проект, та підключив до нього форму Form2. Розмістив на формах необхідні компоненти. Викликаю другу форму як модальну за допомогою події OnClick від Button1, та в цій події вказав ф...
6096. Використання логічних операторів при пошуку 31.5 KB
  Використання логічних операторів при пошуку Для розширення можливостей пошуку за текстом використовуються логічні оператори. Необхідно враховувати, що всі слова-оператори повинні вводитись лише великими літерами OR Оператор OR використовується, якщо...
6097. Компоненты ЭИС. Предметная область. Детализация представлений ЭИС. Жизненный цикл ЭИС. 33.02 KB
  Компоненты ЭИС. Предметная область. Детализация представлений ЭИС. Жизненный цикл ЭИС. Компоненты ЭИС Все, что происходит в процессе функционирования материальных систем окружающего нас мира, может быть описано в форме сообщений. Сообщен...
6098. Молекулярная генетика. Характеристика ДНК 18.71 KB
  Молекулярная генетика. Модель ДНК в форме регулярной двойной спирали была предложена Дж. Уотсоном и Ф. Криком в 1953 г. Характеристика бета - спирали ДНК Правовращающая Двойная Антипараллельная Диаметр 1,8-22 нм, Шаг (виток) - 3,4 нм В шаге (витк...
6099. Організація ділових прийомів 25.19 KB
  Організація ділових прийомів План Організація і проведення прийомів. Види прийомів. Ділові питання вирішуються не тільки за столом переговорів, але і під час прийомів, які є найпоширенішою формою ділового протоколу. Прийоми - зібран...
6100. Правовое отношение: понятие и признаки 24.39 KB
  Правовое отношение: понятие и признаки Правовое отношение - это такое общественное отношение, в котором стороны связаны между собой взаимными юридическими правами и обязанностями, охраняемыми государством. Правоотношение есть та мера внешней св...
6101. План-конспект внеклассного мероприятия 27 KB
  План-конспект внеклассного мероприятия Внеклассное мероприятие - это особый вид деятельности, отличающийся от урока. Внеклассные мероприятия - это события, ситуации, ситуации в коллективе, организуемые преподавателем или кем-нибудь другим...