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.

К началу


 

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

31493. Інструменти виділення, канали і маски. Фотомонтажі 891.41 KB
  Photoshop має в своєму розпорядженні багатий набір засобів виділення серед яких інструменти виділення Mrquee Область Lsso Лассо Mgic Wnd Чарівна паличка; інструменти виділення контурів Pth Tools; спеціальна команда Color Rnge Колірний ряд; особливий режим виділення Quick Msk Швидка маска. Виділення і трансформація областей У Photoshop велика частина операцій редагування діють лише в межах виділеної області. Приклад обробки виділення кистю Для виділення областей правильної геометричної форми є чотири інструменти які зібрані...
31494. Інструменти кольорової коррекции і ретушування 734.31 KB
  Інструменти з групи Освітлювач У цьому вікні: Dodge Освітлювач для освітлення областей і збільшення яскравості зображення; Burn Затемнювач для затемнення областей і зменшення яскравості зображення; Sponge Губка міняє насиченість контраст зображення. Інструменти з групи Розмиття У цьому вікні: Blur Розмиття пом'якшує кордони між об'єктами; Shrpen Різкість збільшує чіткість зображення; Finger Палець розмазує розтушовує колір. Перший варіант надає можливість створення точних копій елементів зображення а другий колірних зразків...
31495. Шрифт і текст 1001.83 KB
  Різниця та ж що і між точковими і векторними зображеннями.FON це точкові зображення добре пристосовані для швидкого виводу на екран. Атрибути стилю тексту включають наступні поняття як: гарнітура шрифту зображення кегль інтерліньяж міжбуквений просвіт междусловный пропуск виключення відступ першого рядка втяжка відступи справа і зліва міжабзацне відбиття інші прийоми оформлення мал. Список Set the font style Встановити зображення призначений для вибору стилю написання тексту напівжирний курсив підкреслений або інший.
31496. Комп’ютерна графіка. Основні поняття комп'ютерної графіки 146.89 KB
  Річ у тому що будьяке цифрове зображення на комп'ютері характеризуються набором його таких параметрів як розмір дозвіл формат і тип колірної моделі. Перераховані параметри і визначають якість растрового зображення а також розмір графічного файлу. Дозвіл зображення Растрове зображення формується з сукупності крихітних елементів званих пікселями. Якщо вдуматися то стає очевидним що чим вище дозвіл тим більшу кількість пікселів містить зображення і тим більшою кількістю деталей тобто якістю таке зображення характеризується.
31497. Інтерфейс Photoshop CS5 577.95 KB
  Інтерфейс елементи головного вікна графічного редактора При запуску dobe Photoshop ми побачимо головне вікно програми показане на мал. Мал. Інтерфейс dobe Photoshop Панель управління і головне меню У верхній частині вікна Photoshop знаходиться головне меню що містить практично всі команди для налаштування і здійснення процесу редагування зображення а також панель управління яка також призначена для налаштування і запуску безлічі функціональних можливостей програми мал. Мал.
31498. ФОНДОВИЙ РИНОК 142 KB
  Загальна характеристика фондового ринку Фондовий ринок ринок цінних паперів сукупність учасників фондового ринку та правовідносин між ними щодо розміщення обігу та обліку цінних паперів і похідних деривативів. В економічній літературі терміни фондовий ринок і ринок цінних паперів стали майже синонімами. Основними інструментами фондового ринку є цінні папери різних видів типів які формують свої сегменти: грошового ринку ринку цінних паперів ринку капіталів фондового ринку. Сучасний світовий фондовий ринок розвивається за...
31499. Фондова біржа та біржові операції 231.5 KB
  Сутність фондової біржі її види та функції Фондові біржі це спеціалізовані установи які створюють умови для постійно діючої централізованої торгівлі цінними паперами шляхом обєднання попиту пропозицій на них надання місця системи і засобів як для первинного розміщення так і для вторинного обігу цінних паперів. Вони мають працювати за єдиними правилами та за єдиною технологією електронного обігу цінних паперів визначеними Національною фондовою біржею. Виділяють декілька етапів розвитку й удосконалення фондових бірж: зміна способів...
31500. Фінансовий ринок: сутність, функції та роль в економіці країни 153 KB
  Фінансовий ринок: сутність функції та роль в економіці країни Сутність фінансового ринку необхідність і передумови його створення. Принципи та функції фінансового ринку. Структура фінансового ринку. Сутність фінансового ринку необхідність і передумови його створення Фінансовий ринок є складовою сферою фінансової системи держави.
31501. Регулювання фінансового ринку 119 KB
  Регулювання фінансового ринку Сутність принципи та напрями регулювання фінансового ринку. Рівні та форми регулювання фінансового ринку. Державне регулювання фінансового ринку України. Внутрішнє регулювання фінансового ринку.