Cu câteva lecții mai devreme, ne-am uitat la o reprezentare schematică a unui bloc de pagină web și am vorbit, de asemenea, pe scurt despre marginea proprietății CSS, care poate fi folosită pentru a seta margini pentru un element. De data aceasta ne vom uita la această proprietate mai detaliat folosind exemple.

Chenarul este situat între margine și umplutură. Aceasta înseamnă că marja este in spate frontieră. Chenarul poate fi fixat pe toate cele patru laturi (ca și cum ar include blocul într-un cadru), sau pe una, două sau trei laturi. CSS vă permite să controlați grosimea, culoarea și stilul chenarelor. Să studiem asta mai detaliat.

Border-width: lățimea chenarului

Proprietatea border-width setează lățimea chenarului. Cel mai adesea această dimensiune este indicată în pixeli. Puteți seta lățimi identice sau diferite pentru toate cele patru chenare, de exemplu:

/* toate cele 4 margini au 2px lățime: */ border-width: 2px; /* chenarele de sus și de jos au 2px lățime, stânga și dreapta sunt 4px: */ border-width: 2px 4px; /* chenar superior - 2px, stânga și dreapta - 6px, jos - 3px: */ border-width: 2px 6px 3px; /* chenar de sus - 2px, dreapta - 3px, jos - 4px, stânga - 5px: */ border-width: 2px 3px 4px 5px;

În plus, există cuvinte cheie pentru a indica lățimea chenarului:

• subțire - chenar 2px lățime;
• mediu - chenar 4px lățime;
• gros - chenar 6px lățime.

Culoarea chenarului: culoarea chenarului

Proprietatea border-color specifică culoarea chenarelor. Culorile pot fi specificate în orice format CSS: cuvinte cheie, hexazecimal sau RGB - oricare este mai convenabil pentru dvs. Prin analogie cu proprietatea anterioară, puteți seta fie o culoare pentru toate marginile, fie selectați culori diferite pentru fiecare chenar.

Culoarea chenarului: #FFFF00;

De asemenea, puteți seta o culoare transparentă scriind:

Chenar-culoare: transparent;

Border-style: stil de chenar

Datorită proprietății în stilul chenarului, puteți transforma o chenar obișnuit într-unul punctat, dublu sau tridimensional - există multe sensuri diferite. Pentru a face acest lucru, utilizați următoarele cuvinte cheie:

• solid - chenar solid;
• punctat - chenar de puncte;
• punctat - chenar punctat;
• dublu - chenar dublu;
• marginea canelură - crestătură volumetrică;
• creasta - o margine voluminoasă cu o margine groasă (în esență o inversare a stilului anterior);
• start - chenar extrudat;
• inserție - o chenar indentat (în esență o inversare a stilului anterior).

Ca și în cazul proprietăților de lățime a chenarului și culoarea chenarului, fiecare chenar de bloc poate fi stilat diferit - de exemplu, puteți face chenarele de sus și de jos întrerupte, iar chenarele din dreapta și din stânga se dublează. Aici totul depinde doar de imaginație.

Stil chenar: punct dublu;

Notă: V browsere diferite aspect limitele pot fi ușor diferite.

Limită comună a proprietății CSS: 3 în 1

Pentru a stila un chenar, nu trebuie să utilizați pe rând toate cele trei proprietăți de mai sus. Este suficient să știți despre marginea generală a proprietății universale CSS, cu ajutorul căreia veți scrie un stil mult mai rapid și veți economisi spațiu. Pentru a face acest lucru, notați valorile pentru toate cele trei proprietăți în ordine aleatorie:

Chenar: 2px punctat #FF0000;

Limite pentru partide individuale

Cu ajutor proprietăți suplimentare chenar în CSS, puteți stila fiecare chenar de bloc individual. Următoarele proprietăți vă vor ajuta în acest sens:

• border-top - stil pentru chenarul de sus;
• border-right - pentru marginea dreaptă;
• border-bottom - pentru marginea de jos;
• border-left - pentru marginea stângă.

Rezultate

Acum că știi cum să faci chenare pentru blocuri, poți exersa să le faci. Există multe moduri de a descrie concis un stil fără a avea prea multe linii în el. fișier CSS. Cunoașterea principiilor foilor de stil în cascadă joacă un rol important aici. Să ne uităm la un exemplu.

Să presupunem că doriți să creați un cadru pentru bloc div cu trei margini gri solide și marginea de jos punctată în verde. Puteți scrie acest stil astfel:

Div ( chenar-dreapta: 8px dublu #FF0000; chenar-stânga: 8px dublu #FF0000; chenar-jos: 8px dublu #FF0000; chenar-sus: 4px punctat #FDD201; )

Dar aceasta este o postare prea lungă. Toate acestea pot fi scrise pe scurt:

Div ( chenar: 8px dublu #FF0000; chenar-sus: 4px punctat #FDD201; )

După cum am menționat mai sus, aici vom profita de proprietățile în cascadă ale CSS. Mai întâi scriem stilul pentru toate cele patru laturi ale cadrului, apoi specificăm stilul separat pentru chenarul de jos, suprascriind astfel parțial stilul anterior. Este foarte important să urmați această succesiune de linii.

Mini sarcină

Încercați să creați un chenar pentru div-ul cu dimensiuni de 200x200 pixeli. Stilurile pentru cadru ar trebui să fie astfel:

• Faceți chenarele de sus și de jos solide solid, oferiți-le aceeași culoare la alegere și o lățime de 5 pixeli.
• Faceți chenarul din stânga întreruptă, 3 pixeli lățime, alegeți o culoare diferită de cea anterioară.
• Dublați chenarul drept dubla, 7 pixeli lățime, culoare diferită față de cele două anterioare.

În cele din urmă, lucrarea dvs. ar trebui să arate astfel (cu excepția culorii, pe care o alegeți):

Rezultatul sarcinii (vizualizare în Chrome)

Proprietatea chenar generică vă permite să setați simultan grosimea, stilul și culoarea chenarului în jurul unui element. Valorile pot fi în orice ordine, separate printr-un spațiu; browserul însuși va determina care dintre ele corespunde proprietății dorite. Pentru a seta un chenar numai pe anumite laturi ale unui element, utilizați proprietățile border-top , border-bottom , border-left , border-dreapta.

informatie scurta

Denumiri

Valori

Valoarea lățimii chenarului determină grosimea chenarului. Sunt furnizate mai multe valori de tip chenar pentru a-i controla aspectul. Numele lor și rezultatul acțiunii sunt prezentate în Fig. 1.

Fig.1. Stiluri de cadru

border-color setează culoarea chenarului, valoarea poate fi în orice format permis de CSS.

Exemplu

ÎN în acest exemplu Se adaugă un chenar dublu în jurul blocului. Rezultatul este prezentat în Fig. 2.

Orez. 2. Aplicarea proprietăţii de frontieră

Model de obiect

Un obiect.stil.chenar

Notă

Browser Internet Explorer până la a șasea versiune inclusiv, cu o grosime a marginii de 1 px, se afișează punctat ca punct . Cu o grosime de 2 px și mai mare, valoarea punctată funcționează corect. Această eroare este remediată în IE7, dar numai pentru toate marginile de 1px. Dacă unul dintre marginile blocului are o grosime de 2px sau mai mare, atunci în IE7 valoarea punctată se transformă în punctată .

Stilul de chenar poate varia ușor între browsere când se utilizează valorile groove , ridge , inset sau outset.

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

În articolul precedent am discutat aplicarea CSS proprietățile border() ale elementelor paginii. Și ți-am promis că îți voi spune cum să folosești imagini pentru a desena chenarele. Despre asta vom vorbi astăzi.

Pentru a folosi imagini pentru a crea chenare, vom folosi proprietatea CSS border-image.

Grosimea chenarelor este setată de proprietate, iar dacă se specifică chenar: 0, atunci chenarul nu este afișat. Cu alte valori de margine, imaginea are întotdeauna prioritate. Fundalul, dacă este specificat prin proprietatea de fundal, este afișat sub cadru.

Sintaxa codului

Să ne uităm la un exemplu de înregistrare a proprietății:

url (images/bg-image.png) — adresa imaginii de fundal.

30 - pot exista una, două, trei sau patru valori care indică dimensiunile părților imaginii în pixeli, definind astfel zonele de divizare a imaginii. Unitățile în sine nu sunt scrise, doar numărul (10, nu 10px). În figură, liniile roșii evidențiază zonele necesare pentru a crea cadrul.

Puteți utiliza una, două, trei sau patru valori, separate printr-un spațiu. Efectul depinde de numărul de valori și este prezentat în tabel.

rotund rotund — doi parametri (pentru marginile orizontale, respectiv verticale). Poate lua una dintre cele trei valori. Rezultatul se vede in poze.

întinde— Întinde desenul de chenar la dimensiunea elementului. Aceasta este valoarea implicită.
repeta— Repetează modelul de chenar.
rundă— Repetează desenul și îl scalează astfel încât să existe un număr întreg de imagini pe partea elementului.

Compatibilitate browser

Din păcate, nu toate versiunile de browser acceptă proprietatea bordur-image. Pentru o mai bună compatibilitate, este recomandabil să înregistrați proprietatea pentru toate browserele.

Cod simplu:

Automatizare

Există instrumente pe web care ne ajută să scriem cod. Există un constructor foarte convenabil pentru proprietatea border-image. Pur și simplu încărcați imaginea de chenar acolo (apropo, puteți găsi o mulțime de ele pe Internet). Folosind glisoarele, împărțiți imaginea în zone, setați grosimea marginii și parametrii de repetare.

Mai mult, imediat, în modul online vezi rezultatul (ce se întâmplă până la urmă).

Când obțineți rezultatul dorit, tot ce trebuie să faceți este să copiați codul generat și să-l lipiți în codul paginii (fișier CSS).

Foarte simplu și convenabil.

Concluzie

Aceasta încheie discuția noastră despre proprietățile de frontieră în CSS. Nu-ți spun la revedere. În viitorul apropiat vom continua pregătirea în layout. Abonați-vă la actualizări...și...Ne vedem!

Proprietatea border CSS este folosită pentru a crea chenarul unui obiect, și anume grosimea chenarului, culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte Pentru percepție mai bună continutul paginii. De exemplu, proiectați o bară laterală, un antet de site, un meniu etc.

1. Sintaxa chenarului CSS

granita: border-width border-style chenar-culoare | moşteni;

• border-width - grosimea chenarului. Îl puteți seta în pixeli (px) sau îl puteți utiliza valori standard subțire, mediu, gros (se deosebesc doar prin lățimea pixelilor)
• border-style - stilul chenarului afișat. Poate lua următoarele valori
  • niciunul sau ascuns - anulează granița
  • punctat - cadru punctat
  • întreruptă - cadru format din liniuțe
  • solid - linie simplă(utilizat cel mai des)
  • dublu - cadru dublu
  • groove - margine 3D canelată
  • creasta, inserție, început - diverse efecte de cadru 3D
  • moștenire - se aplică valoarea elementului părinte
• border-color - culoarea chenarului. Poate fi setat folosind nume specific culori sau în format RGB(vezi numele culorilor html pentru site)

Valorile din proprietatea border CSS pot fi setate în orice ordine. Secvența cea mai des folosită este „culoarea stilului de grosime”.

2. Exemple cu diferite margini CSS

2.1. Exemplu. Diferite stiluri de design de chenar-stil de chenar

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-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

Синтаксис

P {border-style: solid;} p {border-top-style: solid;}

2. Цвет рамки border-color

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

Синтаксис

P {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

Синтаксис

P {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

Div { width: 100px; height: 100px; border: 2px solid grey; }

При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.

5. Задание рамки для одной границы элемента

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

Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .

Синтаксис

P {border-top: 2px solid grey;}

6. Внешний контур outline

Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.

Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.

Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .

Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.

Div { width: 100px; height: 100px; outline: #cacd58 solid 2px; }

6.1. Стиль внешнего контура outline-style

Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.

Синтаксис

P {outline-style: ridge;}

6.2. Цвет внешнего контура outline-color

Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.

Синтаксис

P { outline-style: ridge; outline-color: silver; }

6.3. Толщина внешнего контура outline-width

Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.

Синтаксис

P { outline-style: dotted; outline-width: 5px; }