Chenar css solid. Model de casetă CSS

Am studiat proprietățile pentru designul textului și al fontului, acum este rândul nostru să trecem la alte elemente. În acest tutorial ne vom uita la crearea cadrelor folosind CSS. Această proprietate este folosit destul de des, așa că merită puțin mai multă atenție.

Și așa, să presupunem că trebuie să faceți un cadru în jurul unui element. De exemplu, să creăm un titluși vom face un cadru în jurul lui.

Parametrii care caracterizează cadrul: 1) Grosimea cadrului, 2) Stilul cadrului și 3) Culoarea cadrului. Și să mergem în ordine:

• 1. Grosimea cadrului: lățimea graniței: 2px;
• 2. Stilul cadru: stil de chenar: solid;
• 3. Culoare cadrul: culoarea chenarului: #ff0000;

În ce sunt stilurile de cadre CSS? Mai jos sunt toate stilurile de rame disponibile:

• punctat - Acesta este un cadru cu puncte.
• întreruptă - Acesta este un cadru punctat
• solid - Este un cadru solid
• dubla - Acesta este un cadru dublu
• canelură - Vedere volumetrică
• creastă - Vedere volumetrică
• medalion - Vedere volumetrică
• început - Vedere volumetrică

Acum avem totul pentru a crea un cadru în jurul titlului.

HTML

Creați un cadru în jurul titlului.

Și stilul pentru cadru în sine.

H2(latime chenar: 2px; stil chenar: solid; culoare chenar: #FF0000; )

Ca rezultat, un cadru roșu solid cu o grosime de 2px.

Cadrul este format din patru laturi: Superior, Dreapta, InferiorȘi Stângași, întrucât avem proprietatea specificată frontieră , apoi browserul desenează implicit toate cele patru laturi ale cadrului. Astfel, dacă trebuie să specificați un cadru doar pe o parte, atunci prefixele sunt folosite pentru a indica partea în care să creați cadrul.

• top - Sus.
• dreapta - Dreapta
• fund - Fund
• stânga - Stânga

Astfel, dacă vrem să facem un cadru doar în partea de jos a paragrafului, adică să-l subliniem, atunci pentru fiecare proprietate frontieră adăugați un prefix fund . Rezultatul va fi următoarea structură de cod.

H2( lățime-chenar-jos: 2px; chenar-jos-stil: dublu; chenar-jos-culoare: #FF0000; )

Folosirea acestor stiluri pentru browser va însemna că trebuie doar să creați un cadru din partea de jos, de exemplu. subliniind titlul. Îl puteți duplica în același mod acest cod, punând cadrul pe cealaltă parte, de exemplu partea superioară.

H2( chenar-jos-lățime: 2px; chenar-bottom-style: dublu; chenar-bottom-color: #FF0000; chenar-top-width: 2px; border-top-style: dublu; chenar-top-culoare: # FF0000;

Titlul va avea acum un chenar roșu în partea de sus și de jos. Același lucru se poate face și pentru alte părți.

După cum probabil ați observat deja, înregistrarea s-a dovedit a fi destul de mare, așa că există un tip abreviat de înregistrare care este adesea folosit în practică.

Imaginea de mai sus arată structura notației abreviate, unde este indicată proprietatea frontieră iar ca valori, separate printr-un spațiu, este indicată lățimea cadrului - lățimea graniței , stil cadru - stil de bordura și culoarea cadrului - #ff0000 .

Adică browserul, văzând o astfel de intrare prescurtată frontieră: 2px solid #ff0000; , va crea, de asemenea, un cadru pe toate cele patru laturi ale titlului. Această intrare scurtă este echivalentă cu intrarea pe care am folosit-o mai sus (unde au fost folosite trei proprietăți).

Dacă folosiți o notație scurtă trebuie să indicați cadrul pe o singură parte, atunci adăugăm la proprietate simplonul indicând partea din care să creați cadrul.

H2( chenar-sus: 2px solid #ff0000; )

Deci, folosind o notă scurtă, se face un cadru din partea de sus, unde sunt indicate și grosimea, stilul și culoarea cadrului.

În acest fel, folosind proprietatea frontieră se face un cadru în jurul oricărui element. De asemenea, puteți utiliza cadrul pentru a crea subliniere pentru legături atunci când aveți nevoie de o culoare diferită pentru subliniere. Ei bine, asta e totul cu cadrul, să trecem la următorul lecție importantă, unde vom lua în considerare

In acest capitol:

Modelul bloc este o modalitate de afișare a elementelor de către browsere care procesează toate etichetele ca blocuri mici, pentru ei orice etichetă este un container cu conținut: text, imagini, alte etichete etc.

• Marja(marja) - spațiu gol (marja) care separă un element de altul. Cel mai simplu exemplu de indentare este spațiul dintre paragrafele care se succed. Zona de margine este transparentă și nu poate avea propria culoare sau alte efecte de design.
• Frontieră(chenar element) - chenar pe orice parte a elementului. Cadrul poate fi instalat pe toate laturile elementului, sau pe o parte. Folosind un cadru, puteți pur și simplu să decorați frumos un element sau să separați vizual conținutul elementului curent de alte elemente de pe pagină.
• Captuseala(padding) - spațiu gol între conținutul unui element și chenarul acestuia. Zona de umplutură este transparentă și nu poate avea propria culoare sau alte efecte de design.
• Majoritatea elementelor au o zonă de conținut care conține totul conţinut element (text, imagini inserate sau alte elemente).

Cadru

Un chenar este o linie simplă care apare în jurul elementului pe care îl stilizați. Dar nu este deloc necesar să folosiți un cadru care înconjoară elementul pe toate părțile. Îl puteți adăuga numai din partea necesară a elementului. De exemplu, dacă adăugați un chenar numai în partea de jos a unui element bloc, acesta va produce același efect ca și elementul

---

(linie orizontală), acționând ca un separator.

Fiecare cadru are trei proprietăți pe care le putem controla folosind CSS: lățime, stil și culoare. Să ne uităm la ce proprietăți pot fi folosite pentru a le seta și modifica:

În loc să specificați toate cele trei proprietăți, puteți specifica doar una - proprietatea chenar, care vă permite să specificați simultan lățimea, stilul și culoarea pentru chenar:

Primul paragraf.

Al doilea paragraf.

Al treilea paragraf.

Pentru a controla cadrul separat pe fiecare parte a elementului, utilizați următoarele proprietăți:

• border-top - cadru de sus
• border-left - cadru din stânga
• chenar-dreapta - cadru dreapta
• border-bottom - rama de jos

Aceste proprietăți funcționează exact la fel ca proprietatea chenar, cu excepția faptului că vă permit să controlați chenarul doar pe o parte a elementului pe care îl modelați.

Marginile exterioare și interioare

Indentare- spațiu gol între conținutul elementului și chenarul acestuia (dacă este instalat). Pentru a adăuga și a controla lățimea umpluturii pe toate cele patru laturi ale unui element, utilizați proprietatea padding.

Marja este spațiul gol care separă un element de alte elemente sau de marginile ferestrei browserului. Pentru a adăuga și a controla lățimea marginilor pe toate cele patru laturi ale unui element, utilizați proprietatea margine.

Proprietățile de umplutură și marjă pot lua de la una până la patru valori:

Unde valorile sunt setate în sensul acelor de ceasornic, începând de sus:

Dacă specificați o singură valoare pentru proprietăți, atunci indentațiile de pe toate laturile vor avea aceeași lățime.

La prima vedere, efectul vizibil atunci când utilizați aceste proprietăți arată același pentru a observa o diferență vizuală între ele, puteți, de exemplu, să setați un chenar pentru un element sau set fundalul:

Paragraf obișnuit.

Pentru indentări, precum și pentru cadre, există proprietăți care vă permit să controlați dimensiunea indentării pe fiecare parte separat. Captuseala controlat de proprietățile: padding-top , padding-right , padding-bottom și padding-left . Marginile externe sunt controlate de proprietăți: margin-sus , margin-right , margin-bottom și margin-left .

Notă: valori proprietăți de umpluturăși marginea nu sunt moștenite elemente copil, deci trebuie să specificați lățimea de umplutură separat pentru fiecare element care are nevoie de ea.

Lățimea și înălțimea elementului

Implicit pentru elemente de bloc se folosește autowidth. Aceasta înseamnă că elementul va fi întins exact cât este spatiu liber. Înălțimea implicită a elementelor blocului este setată automat, de exemplu. browserul întinde zona de conținut la direcție verticală astfel încât să fie afișat tot conținutul. Pentru a seta dimensiuni personalizate pentru zona de conținut a unui element, puteți utiliza proprietăți de lățime si inaltime.

Vlad Merjevici

Folosind CSS, puteți adăuga o chenar la un element în mai multe moduri. Practic, desigur, proprietatea de frontieră este utilizată, ca cea mai universală, precum și contur și, în mod surprinzător, cutie-umbră, a cărei sarcină principală este de a crea o umbră. În continuare, vom lua în considerare aceste metode și diferențele dintre ele.

proprietate de contur

Cea mai simplă proprietate pentru crearea cadrelor. Are aceiași parametri ca și border , dar diferă semnificativ în unele detalii:

• conturul este afișat în jurul elementului (chenar în interior);
• conturul nu afectează dimensiunile elementului (chenarul este adăugat la lățimea și înălțimea elementului);
• conturul poate fi setat numai în jurul întregului element, dar nu și pe părțile individuale (chenarul poate fi folosit pentru orice parte sau pentru toate deodată);
• conturul nu este afectat de raza de filet specificată de proprietatea border-radius (chenarul este afectat).

Se pune întrebarea - în ce cazuri este nevoie de contur, când rolul său, în ciuda diferențelor enumerate, este complet preluat de graniță? Nu există multe situații, dar apar:

• crearea de rame complexe multicolore;
• adăugarea unui cadru la un element atunci când treceți mouse-ul peste el;
• ascunderea chenarului pe care browserul îl adaugă automat unor elemente la primirea focalizării;
• pentru contur, puteți seta distanța de la marginea elementului la cadru folosind proprietatea outline-offset, pentru a crea .

Rame multicolore

Trebuie să înțelegeți că conturul nu înlocuiește în niciun fel chenarul și poate exista cu ușurință împreună cu acesta, așa cum se arată în exemplul 1.

Exemplul 1: Crearea unui cadru

În acest exemplu, în jurul elementului este adăugat un cadru negru, care este separat de fundal printr-un chenar alb (Fig. 1).

Orez. 1. Încadrați în jurul elementului

Încadrare când se utilizează: hover

Când se adaugă un cadru prin chenar, lățimea elementului crește, ceea ce este destul de vizibil când se combină chenar și pseudo-clasa :hover. Există două moduri de a „câștiga” acest lucru. Cel mai simplu lucru este să înlocuiți chenar cu outline , care, după cum știm, nu afectează dimensiunea elementului (exemplul 2).

Exemplul 2: Cadru pe Hover

conturul nu este întotdeauna potrivit, fie și numai pentru că rotunjirea colțurilor nu îl afectează. A doua metodă este potrivită aici - adăugați un cadru invizibil sau un cadru care se potrivește cu culoarea de fundal, apoi schimbați parametrii acestuia când treceți cu mouse-ul (exemplul 3). Atunci nu va avea loc nicio deplasare a elementului, deoarece cadrul inițial există deja. Dar ne amintim întotdeauna că lățimea elementului este suma valorilor lățimii, marginea din stânga și chenarul din dreapta. Situația este similară cu înălțimea.

Exemplul 3: Cadru pe Hover

Chenar în jurul câmpurilor de formular

În unele browsere (Chrome, Safari, ultimele versiuni Opera) o pictogramă mică este afișată în jurul câmpurilor de formular atunci când acestea primesc focalizare. rama de culoare(Fig. 2). Pentru a-l elimina, trebuie doar să adăugați valoarea none la proprietatea contur din stiluri, așa cum se arată în exemplul 4.

Orez. 2. Încadrați în jurul marginilor

Exemplul 4. Scoaterea cadrului

Cadre prin box-shadow

Deși proprietatea box-shadow este destinată să adauge o umbră în jurul unui element, poate fi folosită și pentru a crea chenare care nu pot fi create folosind border sau outline . Acest lucru se datorează faptului că numărul de umbre poate fi nelimitat, ai căror parametri sunt enumerați separați prin virgule.

Pentru a obține un cadru, primii trei parametri ar trebui setați la zero, ei sunt responsabili pentru poziția umbrei și neclaritatea acesteia. Al patrulea parametru în în acest caz, este responsabil pentru grosimea chenarului, iar al cincilea stabilește culoarea chenarului. Pentru al doilea cadru, al patrulea parametru este egal cu suma grosimilor celor două rame.

Exemplul 4 arată cum să adăugați două cadre și un chenar la dreapta folosind o singură proprietate casetă-umbră.

Exemplul 4: Utilizarea box-shadow

Rezultat acest exemplu prezentată în fig. 3.

Orez. 3. Cadre create de proprietatea box-shadow

Pentru a controla chenarul unui element, utilizați proprietate universală hotar . Această proprietate vă permite să setați grosimea, stilul și culoarea chenarului unui element într-o singură declarație.

Aceste trei proprietăți (grosimea chenarului, stilul chenarului și culoarea) pot fi setate într-o singură declarație. Iată un exemplu:

Puteți specifica un stil de chenar doar pe o parte a unui element. Pentru a face acest lucru, utilizați proprietățile border-top (bord superior), border-right (chenar dreapta), border-bottom (chenar jos), border-left (chenar stânga).

În acest exemplu, fiecare parte a blocului are o grosime, un stil și o culoare diferită a chenarului.

Gândește-te cum să Ajutor CSS puteți crea o formă ca aceasta:

Valorile marginilor - grosimea, stilul și culoarea - pot fi setate separat folosind proprietăți speciale.

• border-style - stil de chenar.
• border-width - lățimea chenarului.
• border-color - culoarea chenarului.

Să luăm în considerare fiecare dintre valori separat.

proprietate tip graniță Stil de chenar.

proprietate de frontieră-style stabilește stilul de chenar. În CSS, în Diferențele HTML, marginea unui element poate fi nu numai solidă. Următoarele valori sunt acceptate pentru stilul de chenar:

1. none - fără margine (implicit).
2. solid - chenar solid.
3. dublu - chenar dublu.
4. punctat - chenar punctat.
5. punctat - un chenar format dintr-o serie de puncte.
6. creasta - chenar „creastă”.
7. groove - margine „groove”.
8. inset - margine deprimată.
9. start - chenar extrudat.

Exemple de cum arată.

fara frontiera (niciuna)

margine solidă

chenar dublu

marginea unei serii de puncte (punctate)

margine întreruptă

marginea canelurii

marginea crestei

chenar indentat (inserat)

margine extrudată (început)

Apropo, dacă setați culoarea marginii la negru pentru cadrul de creastă, veți obține acest rezultat.

Un bloc div cu margine neagră și stil de creastă.

Cadrul pare solid, dar asta se datorează faptului că stilul de creastă este creat prin adăugarea unui efect de umbră neagră, iar efectul negru nu este vizibil pe un cadru negru.

Folosind proprietatea border-style, stilul chenar poate fi setat nu numai pentru toate laturile blocului. Este posibil să setați mai multe valori pentru o proprietate de tip chenar, în funcție de numărul de valori, stilul de chenar va fi atribuit unui număr diferit de laturi ale blocului. Puteți seta una, două, trei sau patru valori. Să ne uităm la exemple pentru fiecare caz.

O singură valoare (solid) - stilul de chenar este setat pentru toate laturile blocului.

Două valori (dublu solid) - prima valoare setează stilul pentru părțile de sus și de jos, a doua pentru partea laterală.

Trei valori (solid dublu punctat) - prima valoare pentru partea de sus, a doua pentru laturi, a treia pentru partea de jos.

Patru valori (liniate dublu punctată) - fiecare valoare pentru o parte în sensul acelor de ceasornic începând de sus.

Proprietatea border-width. Grosimea chenarului.

Pentru a seta lățimea chenarului unui element, utilizați proprietatea border-width. Grosimea marginii poate fi specificată în orice unitate de măsură absolută, de exemplu în pixeli.

Asemenea proprietății în stil de chenar, proprietatea poate fi setată la una până la patru valori. Să ne uităm la exemple pentru fiecare caz.

Exemplu de cod:

De asemenea, pentru proprietatea border-width există valori în formular Cuvinte cheie. Sunt trei în total:

• subțire - margine subțire;
• medie - grosime medie;
• gros - chenar gros;

Grosimea chenarului: subțire.

Grosimea chenarului: medie.

Grosimea chenarului: gros.

Proprietatea chenar-culoare. Culoarea chenarului.

Pentru a controla culoarea chenarului, utilizați instrumentul pentru culoarea chenarului. Culorile pentru această proprietate pot fi setate folosind orice metodă descrisă în articolul „ Culori în CSS", și anume:

• Notația hexazecimală (#ff00aa) a culorii.
• format RGB- rgb(255,12,110) . format RGBA pentru CSS3.
• formatele HSLși HSLA pentru CSS3.
• Numele culorii, de exemplu negru. Lista plina numele culorilor sunt date în Tabel cu nume de culori CSS.

Proprietatea culoare-chenar poate avea, de asemenea, una până la patru valori și le tratează în mod similar cu proprietățile anterioare.

O valoare (roșu).

Două valori (roșu negru).

Trei valori (roșu negru galben).

Patru valori (roșu negru galben albastru).

Acum să revenim la problema de mai sus și să desenăm o figură:

Iată codul care desenează o astfel de cifră, doar mai mare ca dimensiune:

Setarea valorilor pentru laturi separat

S-a menționat mai sus că puteți specifica valorile proprietăților de frontieră pentru o singură parte a unui bloc. Există proprietăți în aceste scopuri:

• border-top (chenar de sus)
• granita-dreapta
• chenar-de jos
• border-left (chenar din stânga)

Permiteți-mi să vă reamintesc că pentru toate proprietățile sunt specificate trei valori (grosime, stil și culoare) în orice ordine. Dar există proprietăți care vă permit să setați separat grosimea, culoarea și stilul pentru fiecare parte. Scrierea acestor proprietăți este derivată din cele de mai sus.

Opțiuni de margine de sus (border-top).

• border-top-color - setează culoarea chenarului superior al elementului.
• border-top-width - setează grosimea marginii superioare a elementului.
• border-top-style - setează stilul chenarului superior al elementului.

Opțiuni pentru marginea dreaptă (chenar-dreapta).

• border-right-color - setează culoarea chenarului drept al elementului.
• border-right-width - setează grosimea marginii drepte a elementului.
• border-right-style - setează stilul chenarului drept al elementului.

Opțiuni pentru marginea de jos (border-bottom).

• border-bottom-color - setează culoarea marginii de jos a elementului.
• border-bottom-width - setează grosimea marginii de jos a elementului.
• border-bottom-style - setează stilul marginii de jos a elementului.

Opțiuni pentru marginea stângă (border-left).

• border-left-color - setează culoarea marginii din stânga a elementului.
• border-left-width - setează grosimea marginii din stânga a elementului.
• border-left-style - setează stilul marginii din stânga a elementului.

Un exemplu de utilizare a acestor proprietăți:

Proprietatea frontier-raza. Colțurile de margine rotunjite.

Proprietatea border-radius este destinată rotunjirii colțurilor marginilor unui element. Această proprietate a apărut în CSS3 și funcționează corect în toate browsere moderne, cu exceptia Internet Explorer 8 (și versiuni mai vechi).

Valorile pot fi orice numere utilizate în CSS.

Proprietatea chenar-rază: 15px.

Dacă cadrul blocului nu este specificat, atunci fileul are loc cu fundalul. Iată un exemplu de bloc rotunjit fără chenar, dar cu o culoare de fundal:

Proprietatea chenar-rază: 15px.

Există proprietăți pentru rotunjirea fiecărui colț individual al unui element. Acest exemplu le folosește pe toate:

Chenar-sus-stânga-rază: 15px; raza-chenar-sus-dreapta: 0; raza-chenar-jos-dreapta: 15px; raza-chenar-jos-stânga: 0;

Proprietatea chenar-rază: 15px.

Deși acest cod poate fi scris într-o singură declarație: border-radius : 15px 0 15px 0 . Ideea este că pentru proprietățile razei de frontieră Puteți seta de la una la patru valori. Tabelul de mai jos prezintă regulile care guvernează astfel de anunțuri.

După ce ați studiat cu atenție acest tabel, puteți înțelege că cea mai scurtă intrare pentru stilul dorit va fi astfel: border-radius : 15px 0 . Există doar două sensuri.

Puțină practică

Desenând o lămâie folosind CSS.

Iată codul pentru un astfel de bloc:

Marja: 0 auto; /* Centrați blocul */ lățime: 200px; înălțime: 200px; fundal: #F5F240; chenar: 1px solid #F0D900; chenar-rază: 10px 150px 30px 150px;

Am desenat deja figura:

Acum să lăsăm un triunghi din el:

Codul triunghiului este:

Marja: 0 auto; /* Plasează blocul în centru */ padding: 0px; lățime: 0px; inaltime: 0; chenar: 30px alb solid; culoarea-chenar-jos: roșu;