CSS: ohraničení. Hranice prvků. Vytvořte bublinu. Příklad. Krásný rám pro zvýraznění citátů

Obecná vlastnost ohraničení umožňuje současně nastavit tloušťku, styl a barvu ohraničení kolem prvku. Hodnoty mohou být v libovolném pořadí, oddělené mezerou, prohlížeč sám určí, která z nich odpovídá požadované vlastnosti. Chcete-li nastavit ohraničení pouze na určité strany prvku, použijte vlastnosti border-top , border-bottom , border-left , border-right.

Stručné informace

Označení

	Popis	Příklad
<тип>	Označuje typ hodnoty.	<размер>
A && B	Hodnoty musí být uvedeny v uvedeném pořadí.	<размер> && <цвет>
A | B	Označuje, že musíte vybrat pouze jednu z navržených hodnot (A nebo B).	normální | malokapitálky
A || B	Každá hodnota může být použita samostatně nebo společně s ostatními v libovolném pořadí.	šířka || počítat
	Hodnoty skupin.	[ plodina || křížek]
*	Opakujte nula nebo vícekrát.	[,<время>]*
+	Opakujte jednou nebo vícekrát.	<число>+
?	Zadaný typ, slovo nebo skupina je volitelná.	vložka?
(A, B)	Opakujte alespoň A, ale ne více než Bkrát.	<радиус>{1,4}
#	Opakujte jednou nebo vícekrát odděleně čárkami.	<время>#

×

Hodnoty

Hodnota border-width určuje tloušťku ohraničení. K ovládání jeho vzhledu je k dispozici několik hodnot stylu ohraničení. Jejich jména a výsledek akce jsou uvedeny na Obr. 1.

Obr.1. Styly rámů

border-color nastavuje barvu okraje, hodnota může být v libovolném formátu povoleném CSS.

Příklad

Tento příklad přidá kolem bloku dvojité ohraničení. Výsledek je znázorněn na Obr. 2.

Rýže. 2. Použití vlastnosti border

Objektový model

Objekt.styl.hranice

Poznámka

Prohlížeč Internet Explorer do verze 6 včetně zobrazuje tečkované jako čárkované s tloušťkou okraje 1 pixel. Při tloušťce 2px a vyšší tečkovaná hodnota funguje správně. Tato chyba je opravena v IE7, ale pouze pro všechna ohraničení 1px. Pokud má jeden z okrajů bloku tloušťku 2px nebo vyšší, pak se v IE7 hodnota s tečkami změní na čárkovanou .

Styl ohraničení se může mezi prohlížeči mírně lišit při použití hodnot groove , ridge , inset nebo outset.

Specifikace

Každá specifikace prochází několika fázemi schvalování.

• Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
• Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
• Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
• Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
• Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
• Koncept ( Návrh specifikace) - první verze návrhu normy.

×

Vlastnost CSS border se používá k vytvoření ohraničení objektu, konkrétně tloušťky ohraničení, jeho barvy a stylu. Tato vlastnost je široce používána v HTML. Pro lepší vnímání obsahu stránky můžete vytvářet různé efekty. Navrhněte například postranní panel, záhlaví webu, nabídku atd.

1. Syntaxe ohraničení CSS

hranice: border-width border-style border-color | zdědit;

• border-width - tloušťka okraje. Můžete jej nastavit v pixelech (px) nebo použít standardní hodnoty tenký, střední, tlustý (liší se pouze šířkou v pixelech)
• border-style - styl zobrazeného ohraničení. Může nabývat následujících hodnot
  • žádné nebo skryté - zruší hranici
  • tečkovaný - tečkovaný rám
  • čárkovaný - rám vyrobený z čárek
  • plná - jednoduchá čára (nejčastěji používaná)
  • dvojitý - dvojitý rám
  • drážka - drážkovaný 3D okraj
  • hřeben, vložka, začátek - různé efekty 3D rámu
  • dědit - použije se hodnota nadřazeného prvku
• border-color - barva okraje. Lze zadat pomocí konkrétního názvu barvy nebo ve formátu RGB (viz názvy barev html pro web)

Poznámka

Hodnoty ve vlastnosti CSS border lze nastavit v libovolném pořadí. Nejčastěji používanou sekvencí je „barva stylu tloušťky“.

2. Příklady s různými okraji CSS

2.1. Příklad. Různé styly designu ohraničení styl ohraničení

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Несколькими уроками ранее мы рассматривали схематическое изображение блока веб-страницы, а также вкратце рассказывали о таком свойстве CSS как border , с помощью которого можно задать границы для элемента. В этот раз мы более детально рассмотрим это свойство на примерах.

Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.

Border-width: ширина границы

С помощью свойства border-width задается ширина границы. Наиболее часто этот размер указывается в пикселях. Можно задать одинаковую либо различную ширину для всех четырех границ, например:

/* все 4 границы имеют ширину 2px: */ border-width: 2px; /* верхняя и нижняя границы имеют ширину 2px, левая и правая - 4px: */ border-width: 2px 4px; /* верхняя граница - 2px, левая и правая - 6px, нижняя - 3px: */ border-width: 2px 6px 3px; /* верхняя граница - 2px, правая - 3px, нижняя - 4px, левая - 5px: */ border-width: 2px 3px 4px 5px;

Кроме этого, существуют ключевые слова для обозначения ширины границы:

• thin - граница шириной 2px;
• medium - граница шириной 4px;
• thick - граница шириной 6px.

Border-color: цвет границы

Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB - зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.

Border-color: #FFFF00;

Также можно задать прозрачный цвет, записав:

Border-color: transparent;

Border-style: стиль границы

Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную - существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:

• solid - сплошная граница;
• dotted - граница из точек;
• dashed - пунктирная граница;
• double - двойная граница;
• groove - объемная граница-выемка;
• ridge - объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
• outset - выдавленная граница;
• inset - вдавленная граница (по сути, инверсия предыдущего стиля).

Как и в случае со свойствами border-width и border-color , для каждой границы блока можно задавать отдельный стиль - например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую - двойными. Здесь уже все зависит лишь от фантазии.

Border-style: double dotted;

Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.

Общее CSS-свойство border: 3 в 1

Чтобы задать стиль для границы, не обязательно по очереди использовать все три вышеперечисленных свойства. Достаточно знать об общем универсальном свойстве border CSS, с помощью которого вы гораздо быстрее напишете стиль и сэкономите место. Для этого в произвольном порядке запишите значения для всех трех свойств:

Border: 2px dotted #FF0000;

Границы для отдельных сторон

При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:

• border-top - стиль для верхней границы;
• border-right - для правой границы;
• border-bottom - для нижней границы;
• border-left - для левой границы.

border-top: 2px solid #0000FF; border-bottom: 7px double #000080;

Итоги

Теперь, когда вы знаете, как делать границы для блоков, вы можете потренироваться в их создании. Существует масса способов кратко описать стиль, избежав чрезмерного количества строк в файле CSS. Немаловажную роль здесь играет знание принципов каскадности таблиц стилей. Рассмотрим пример.

Допустим, вы хотите создать рамку для блока div с тремя сплошными серыми границами, а нижнюю границу сделать пунктирной зеленой. Можно записать этот стиль таким образом:

Div { border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px dotted #FDD201; }

Но это слишком длинная запись. Всё это можно записать короче:

Div { border: 8px double #FF0000; border-top: 4px dotted #FDD201; }

Как упоминалось выше, здесь мы воспользуемся свойствами каскадности CSS. Сначала мы записываем стиль для всех четырех сторон рамки, после чего указываем стиль отдельно для нижней границы, тем самым частично перезаписывая предыдущий стиль. Очень важно соблюдать эту последовательность строк.

Мини-задание

Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:

• Верхнюю и нижнюю границы сделайте сплошнымиsolid , задайте им одинаковый цвет на выбор и ширину 5 пикселей.
• Левую границу сделайте пунктирнойdashed , шириной 3 пикселя, цвет выберите отличный от предыдущего.
• Правую границу сделайте двойнойdouble , шириной 7 пикселей, цвет отличный от двух предыдущих.

В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):

Результат задания (вид в Chrome)

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Styl ohraničení můžete určit pouze na jedné straně prvku. K tomu použijte vlastnosti border-top (horní ohraničení), border-right (pravý okraj), border-bottom (dolní okraj), border-left (levý okraj).

V tomto příkladu má každá strana bloku jinou tloušťku, styl a barvu ohraničení.

Přemýšlejte o tom, jak byste mohli vytvořit podobný tvar pomocí CSS:

Hodnoty ohraničení – tloušťka, styl a barva – lze nastavit samostatně pomocí speciálních vlastností.

• border-style - border-style.
• border-width - šířka okraje.
• border-color - barva okraje.

Zvažme každou z hodnot samostatně.

vlastnost ve stylu hranice Styl ohraničení.

Vlastnost border-style nastavuje styl ohraničení. V CSS, na rozdíl od HTML, může být hranice prvku nejen pevná. Pro styl ohraničení jsou akceptovány následující hodnoty:

1. none - bez ohraničení (výchozí).
2. pevný - pevný okraj.
3. double - double border.
4. přerušovaná - tečkovaná hranice.
5. tečkovaný - hranice tvořená řadou teček.
6. hřeben - hranice "hřeben".
7. drážka - hranice "drážky".
8. vložka - stlačený okraj.
9. začátek - extrudovaný okraj.

Příklady toho, jak vypadají.

žádná hranice (žádná)

pevná hranice

dvojité ohraničení

ohraničení řady teček (tečkované)

přerušovaná hranice

hranice drážky

hřebenová hranice

odsazený okraj (vložka)

extrudovaný okraj (začátek)

Mimochodem, pokud nastavíte barvu okraje na černou pro hřebenový rám, dostanete tento výsledek.

Div blok s černým okrajem a hřebenovým stylem.

Rám vypadá pevně, ale to je způsobeno tím, že styl hřebene je vytvořen přidáním efektu černého stínu a černý efekt není na černém rámu vidět.

Pomocí vlastnosti border-style lze nastavit styl ohraničení nejen pro všechny strany bloku. Je možné nastavit několik hodnot pro jednu vlastnost stylu ohraničení v závislosti na počtu hodnot, styl ohraničení bude přiřazen jinému počtu stran bloku. Můžete nastavit jednu, dvě, tři nebo čtyři hodnoty. Podívejme se na příklady pro každý případ.

Jedna hodnota (plná) – styl ohraničení je nastaven pro všechny strany bloku.

Dvě hodnoty (solid double) - první hodnota nastavuje styl pro horní a spodní stranu, druhá pro stranu.

Tři hodnoty (plné dvojité tečkované) - první hodnota pro horní stranu, druhá pro strany, třetí pro spodní.

Čtyři hodnoty (plné dvojité tečkované přerušované) – každá hodnota pro jednu stranu ve směru hodinových ručiček počínaje shora.

Vlastnost šířky hranice. Tloušťka okraje.

Chcete-li nastavit šířku ohraničení prvku, použijte vlastnost border-width. Tloušťku okraje lze zadat v libovolných absolutních jednotkách měření, například v pixelech.

Stejně jako vlastnost border-style může být vlastnost také nastavena na jednu až čtyři hodnoty. Podívejme se na příklady pro každý případ.

Příklad kódu:

Existují také hodnoty klíčových slov pro vlastnost border-width. Jsou celkem tři:

• tenký - tenký okraj;
• střední - průměrná tloušťka;
• tlustý - tlustý okraj;

Tloušťka okraje: tenký.

Tloušťka okraje: střední.

Tloušťka okraje: tl.

Vlastnost border-color. Barva ohraničení.

Chcete-li ovládat barvu ohraničení, použijte nástroj Barva ohraničení. Barvy pro tuto vlastnost lze nastavit pomocí libovolné metody popsané v článku " Barvy v CSS“, totiž:

• Hexadecimální zápis (#ff00aa) barvy.
• Formát RGB je rgb(255,12,110) . Formát RGBA pro CSS3.
• Formáty HSL a HSLA pro CSS3.
• Název barvy, například černá. Kompletní seznam názvů barev je uveden v Tabulka názvů barev CSS.

Vlastnost border-color může mít také jednu až čtyři hodnoty a zachází s nimi podobně jako s předchozími vlastnostmi.

Jedna hodnota (červená).

Dvě hodnoty (červená černá).

Tři hodnoty (červená černá žlutá).

Čtyři hodnoty (červená černá žlutá modrá).

Nyní se vraťme k výše uvedenému problému a nakreslete obrázek:

Zde je kód, který kreslí takový obrázek, pouze větší velikost:

Nastavení hodnot pro strany samostatně

Výše bylo uvedeno, že můžete zadat hodnoty vlastností border pouze pro jednu stranu bloku. Pro tyto účely existují vlastnosti:

• border-top (horní okraj)
• hranice-pravá
• hranice-dole
• okraj-levý (levý okraj)

Dovolte mi připomenout, že pro všechny vlastnosti jsou zadány tři hodnoty (tloušťka, styl a barva) v libovolném pořadí. Existují ale vlastnosti, které umožňují nastavit tloušťku, barvu a styl pro každou stranu zvlášť. Zápis těchto vlastností je odvozen od výše uvedeného.

Možnosti horního okraje (border-top).

• border-top-color - nastavuje barvu horního okraje prvku.
• border-top-width - nastavuje tloušťku horního okraje prvku.
• border-top-style - nastavuje styl horního okraje prvku.

Možnosti pravého okraje (ohraničení vpravo).

• border-right-color - nastavuje barvu pravého okraje prvku.
• border-right-width - nastavuje tloušťku pravého okraje prvku.
• border-right-style - nastavuje styl pravého okraje prvku.

Možnosti dolního okraje (border-bottom).

• border-bottom-color - nastavuje barvu spodního okraje prvku.
• border-bottom-width - nastavuje tloušťku spodního okraje prvku.
• border-bottom-style - nastavuje styl spodního okraje prvku.

Možnosti levého okraje (ohraničení vlevo).

• border-left-color - nastavuje barvu levého okraje prvku.
• border-left-width - nastavuje tloušťku levého okraje prvku.
• border-left-style - nastavuje styl levého okraje prvku.

Příklad použití těchto vlastností:

Vlastnost border-radius. Zaoblení okrajových rohů.

Vlastnost border-radius je určena k zaoblení rohů ohraničení prvku. Tato vlastnost byla zavedena v CSS3 a funguje správně ve všech moderních prohlížečích kromě Internet Exploreru 8 (a starších verzí).

Hodnoty mohou být jakákoli čísla použitá v CSS.

Vlastnost Border-radius: 15px.

Pokud není zadán rámeček bloku, dojde k zaoblení s pozadím. Zde je příklad zaobleného bloku bez ohraničení, ale s barvou pozadí:

Vlastnost Border-radius: 15px.

Existují vlastnosti pro zaoblení každého jednotlivého rohu prvku. Tento příklad je používá všechny:

Poloměr okraje vlevo nahoře: 15 pixelů; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

Vlastnost Border-radius: 15px.

Ačkoli tento kód může být zapsán v jedné deklaraci: border-radius : 15px 0 15px 0 . Faktem je, že vlastnost border-radius lze nastavit od jedné do čtyř hodnot. Níže uvedená tabulka uvádí pravidla, kterými se taková oznámení řídí.

Po pečlivém prostudování této tabulky můžete pochopit, že nejkratší záznam požadovaného stylu bude vypadat takto: border-radius : 15px 0 . Existují pouze dva významy.

Trochu praxe

Kreslení citronu pomocí CSS.

Zde je kód pro takový blok:

Okraj: 0 auto; /* Vycentrovat blok */ width: 200px; výška: 200px; pozadí: #F5F240; ohraničení: 1px plný #F0D900; border-radius: 10px 150px 30px 150px;

Obrázek jsme již nakreslili:

Nyní z toho necháme trojúhelník:

Kód trojúhelníku je:

Okraj: 0 auto; /* Vycentrovat blok */ padding: 0px; šířka: 0px; výška: 0; ohraničení: 30px plná bílá; barva okraje: červená;