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.

К началу


 

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

13689. Человек немыслим вне общества 16.55 KB
  Человек немыслим вне общества Л.Н. Толстой Лев Николаевич Толстой – великий русский писатель второй половины XIX – начала XX вв. Его творчество поражает читателя глубочайшими философскими смыслами. Человек немыслим вне общества как это понять Чтобы грамотно сформул...
13690. Человеческий ребенок в момент рождения не человек, а только кандидат в человека 18.39 KB
  Человеческий ребенок в момент рождения не человек а только кандидат в человека. А. Пъерон Человек это высшая ступень живых организмов на Земле субъект общественноисторической деятельности и культуры в котором биологическое и социальное начало тесно взаимосвязан
13691. Закон не может быть законом, если за ним нет силы, могущей принудить 15.82 KB
  Закон не может быть законом если за ним нет силы могущей принудить Д.Гарфилд Высказывание Джеймса Абрахама Гарфилда американского политика и президента США жившего в 19 веке продолжает сохранять актуальность и сегодня. Закон как нормативноправововй акт не мож...
13692. Законы должны для всех иметь одинаковый смысл 14.91 KB
  Законы должны для всех иметь одинаковый смысл Ш. Монтескье Ш. Монтескье этим высказыванием хотел сказать что в не зависимости от пола возраста национального признака и других критериев закон должен быть общим для всех одинаковым. Не должно быть таких людей которые ...
13693. Эссе. Кто, имея возможность предупредить преступление, не делает этого, тот ему способствует 13.88 KB
  Кто имея возможность предупредить преступление не делает этого тот ему способствует.СенекаЯ полностью согласна с утверждением римского философа. Действительно человек который может предупредить избежать преступления и не делает этого становится его соучастник
13694. Подчинившись закону толпы, мы возвращаемся в каменный век 14.57 KB
  Подчинившись закону толпы мы возвращаемся в каменный векС. Паркинсон Данная мудрость высказанная английским публицистом Сирилом Паркинсоном является актуальной на протяжении всей человеческой жизни. Толпизм является пороком современного человека потому что сл
13695. Подчинившись закону толпы, мы возрващаемся в каменный век 13.43 KB
  Подчинившись закону толпы мы возрващаемся в каменный векЯ согласна с автором что толпа неорганизованная общность которая в целом опасна для общества потому что в толпе люди становятся неуправляемым стадом поэтому автор говорит что возвращаемся в каменный век. Толп...
13696. Пусть погибнет мир, но закон должен быть соблюден 14.1 KB
  Пусть погибнет мир но закон должен быть соблюден.Изречение римского праваДанное высказывание настолько парадоксально что трудно и согласиться и не согласиться с ним полностью. С одной стороны я согласна с тем что закон обязательно должен соблюдаться. Ведь законы
13697. Правонарушение. Что есть право и в чем состоит правонарушение, это должен определить закон 13.59 KB
  Что есть право и в чем состоит правонарушение это должен определить закон Латинское юридическое изречение.Эссе № 1На протяжении многих столетий государство принимает законы которым должен следовать каждый. Любое непослушание несоблюдение этих законов ведет к нак...