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.

К началу


 

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

19711. Творческий путь Чехова 26 KB
  Творческий путь Чехова. Став студентом медицинского факультета Московского университета Чехов выступал под различными псевдонимами. Чехов уже с 1880 г. начал помещать рассказы фельетоны юморески мелочишки под псевдонимом Антоша Чехонте или его вариантами или сов...
19712. Жанр рассказа в творчестве Чехова 30.5 KB
  Жанр рассказа в творчестве Чехова. Чехов создал рассказ как самостоятельный и полноценный жанр и доказал что прозаический микромир может вместить в себя беспредельность. Тот или иной рассказ Чехова нетрудно превратить в роман ибо в нем достаточно материала для романа....
19713. Cвоеобразие Чеховских пьес 32 KB
  Cвоеобразие Чеховских пьес На первый взгляд драматургия Чехова представляет собою какойто исторический парадокс. Прежде всего в драматургии Чехова отсутствует €œсквозное действие€ ключевое событие организующее сюжетное единство классической драмы. Драма при э...
19714. Александр Борисович и Николай Семёнович Лесков 55.59 KB
  Александр Борисович История одного города. Роман. СЩ романист или нет Репутация представление о художественности поэтике писателя. СЩ очень хорошо описывает страшное. Описывает пороки личности и обществ жизни. СЩ: обстоятельства жизни делающие её не совсе
19715. Роман «Идиот» 81.92 KB
  Роман Идиот Написан полностью за границей один из самых амбициозных романов Дост. Роман о положительно прекрасном человеке о новом пришествии Христа Дост скм называет героя романа князь Христос. Дост кроме самого Христа вдохновлоялся картиной Гольбейна. Копия...
19716. Братья Карамазовы 79.39 KB
  Братья Карамазовы. Центральное место в романе отцеубийство избавленное от психологических обоснований. Иван настоящий убийца это убийство символическое ритуальное. Убийство отца демонический акт убийство бога в своей душе в своём воображении убийство для...
19717. Литература 70х гг 74.63 KB
  Литература 70х гг Начин с 68го и заканчиваются в марте 81го. Журнал Дело вместо журнала Слова издаёт Благосветлов. Начин с Отечественных записок Некрасова. В 81м умирает Достоевский убивают Александра 2го Толстой уходит из литературы. Очень яркая эпоха одна ...
19718. Гончаров, А.И. Герцен 74.55 KB
  Гончаров. 69 год Вестник Европы Обрыв. Несвоевременный роман художникдилетант и проблематика искусства мало интересовавшая общество то время. Современников удила преждевременная ностальгия о прошлом о крепостном праве. Идиллическое описание прошлого кот...
19719. Достоевский Ф.М. 75.83 KB
  Достоевский Ф.М. Родился в 1821 году в семье скорее разночинской в Москве. Отец был врачом больницы для бедных. Отношения с отцом одни из самых обсужд биографами. Отец был суровым но был важен для него в жизни. Часть в Москве часть в имении кот купил отец. Учился дома ...