cadru CSS Un element este una sau mai multe linii care înconjoară conținutul elementului și umplutura acestuia. Limita este setată folosind marginea scurtă a proprietății. Stilul cadrului este setat folosind trei proprietăți: stil, culoareȘi lăţime.
Decorarea chenarelor și a chenarelor elementelor HTML cu proprietăți CSS
1. Stil de chenar
În mod implicit, marginile sunt întotdeauna desenate deasupra fundalului unui element, fundalul extinzându-se până la marginea exterioară a elementului. Stilul cadrului determină afișarea acestuia, fără aceasta proprietățile cadrului nu vor fi vizibile deloc. Pentru un element, puteți seta un chenar pentru toate părțile în același timp utilizând proprietatea stil bordur sau pentru fiecare parte separat folosind proprietățile de calificare stil bordur și așa mai departe. Nu moștenit.
| stilul de chenar (stil chenar-sus, stil chenar-dreapta, stil chenar-jos, stil chenar-stânga) |
|
|---|---|
| Valori: | |
| nici unul | Valoarea implicită înseamnă că nu există cadru. De asemenea, elimină chenarul elementului din grupul de elemente cu valoarea acestei proprietăți setată. |
| ascuns | Echivalent cu niciunul. |
| punctat |
punctat |
| întreruptă |
întreruptă |
| solid |
solid |
| dubla |
dubla |
| canelură |
canelură |
| creastă |
creastă |
| medalion |
medalion |
| început |
început |
| {1,4} |
Enumerați patru stiluri diferite pentru marginile unui element deodată, doar pentru proprietatea stil de margine:
|
| iniţială | |
| moşteni | |
Sintaxă
P (stil chenar: solid;) p (stil chenar: solid;)
2. Culoarea chenarului culoarea chenarului
Proprietatea stabilește culoarea cadrelor de pe toate părțile în același timp. Puteți utiliza proprietățile de rafinare pentru a seta o culoare personalizată pentru marginea fiecărei părți a unui element. Dacă nu este specificată nicio culoare a chenarului, aceasta va fi aceeași cu culoarea textului elementului. Dacă elementul nu are text, atunci culoarea chenarului va fi aceeași cu culoarea textului elementului părinte. Nu moștenit.
| culoarea chenarului (culoare-chenar-sus-culoare, chenar-culoare-dreapta, chenar-culoare-jos, chenar-culoare-stânga) |
|
|---|---|
| Valori: | |
| transparent | Setează culoarea transparentă pentru cadru. În acest caz, lățimea cadrului rămâne. Poate fi folosit pentru a schimba culoarea chenarului atunci când treceți mouse-ul peste un element pentru a evita mutarea elementului. |
| culoare | Culoarea cadrului este setată folosind valorile proprietăților. (culoare-chenar: #cacd58;) |
| {1,4} |
Enumerați simultan patru culori diferite pentru marginile unui element, doar pentru proprietatea border-color:
|
| iniţială | Setează valoarea unei proprietăți la valoarea implicită. |
| moşteni | Moștenește valoarea proprietății de la elementul părinte. |
Sintaxă
P (culoare-chenar: #cacd58;)
3. Lățimea chenarului
Lățimea cadrului este specificată folosind unități de lungime sau cuvinte cheie. Dacă proprietatea de tip chenar este setată la niciunul și chenarul elementului este setat la o anumită lățime, atunci lățimea chenarului este setată la zero în acest caz. Nu moștenit.
Sintaxă
P (lățimea chenarului: 2px;)
4. Setarea cadrului cu o singură proprietate
Proprietatea border vă permite să combinați următoarele proprietăți: border-width , border-style , border-color , de exemplu:
Div ( lățime: 100 px; înălțime: 100 px; chenar: 2 px gri solid; )
În acest caz, proprietățile specificate vor fi aplicate la toate marginile elementului simultan. Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.
5. Setarea unui cadru pentru un chenar al unui element
În cazul în care trebuie să setați un stil diferit pentru marginile unui element, puteți utiliza o notație scurtă pentru chenarul corespunzător.
Proprietățile enumerate mai jos combină următoarele proprietăți într-o singură declarație: border-width , border-style și border-color . Lista proprietăților este specificată în ordinea dată, în timp ce una sau două valori pot fi omise, caz în care valorile lor vor prelua valorile implicite.
Stilul chenarului de sus este setat folosind proprietatea border-top, chenarul de jos este chenar-jos , chenarul din stânga este chenar-stânga și chenarul din dreapta este chenar-dreapta .
Sintaxă
P (chenar-sus: 2px gri solid;)
6. Contur contur
Proprietatea stabilește marginea exterioară în jurul elementelor (adică în afara graniței normale). Scopul principal al acestei proprietăți este de a evidenția un element. Spre deosebire de proprietatea border, aplicarea acestei proprietăți nu afectează dimensiunea sau poziția elementului, așa cum conturul este redat deasupra casetei elementului, ceea ce la rândul său poate cauza suprapunerea marginilor elementului și a zonelor adiacente.
De asemenea, conturul exterior, spre deosebire de chenarul elementului, înconjoară elementul din toate părțile, încadrându-l în întregime.
Conturul exterior este întotdeauna dreptunghiular și nu urmează marginea casetei care este setată la border-radius .
Proprietatea outline vă permite să combinați următoarele proprietăți: outline-color , outline-style , outline-width . Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.
Div ( lățime: 100px; înălțime: 100px; contur: #cacd58 solid 2px; )
6.1. Stil de contur stil de contur
Aspectul liniei conturului exterior este stabilit în același mod ca și stilul cadrului elementului. Nu moștenit.
Sintaxă
P (stil contur: creasta;)
6.2. Culoarea conturului culoarea conturului
Culoarea conturului exterior poate fi setată numai atunci când este setat stilul conturului. Nu moștenit.
Sintaxă
P (stil contur: creasta; culoarea conturului: argintiu; )
6.3. Lățimea conturului exterior outline-width
Grosimea liniei conturului exterior este stabilită în același mod ca și grosimea cadrului elementului. Nu moștenit.
Sintaxă
P (stil contur: punctat; lățime contur: 5px; )
Proprietatea border CSS se ajustează pentru a crea chenarul unui obiect, și anume pentru grosimea chenarului, pentru culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte pentru a percepe mai bine conținutul paginii. De exemplu, proiectați o bară laterală, un antet de site, un meniu etc.
1. Sintaxa chenarului CSS
granita: border-width border-style border-color | moşteni;
- border-width - lățimea chenarului. Îl puteți seta în pixeli (px) sau utilizați valorile standard subțire, mediu, gros (difer doar în lățimea pixelilor)
- border-style - stilul cadrului redat. Poate lua următoarele valori
- niciunul sau ascuns - anulează granița
- punctat - cadru punctat
- dashed - cadru liniuță
- solid - linie simplă (folosită 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 specificat folosind un nume de culoare specific 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 chenaruri CSS
2.1. Exemplu. Diferite stiluri de chenar în stil de chenar
stil de chenar: punctatstil de chenar: punctatstil de chenar: solidchenar-stil: dubluborder-style: caneluraborder-style: creastachenar-stil: insertborder-style: începutPatru rame diferite
stil de chenar: punctat
stil de chenar: punctat
stil de chenar: solid
chenar-stil: dublu
border-style: canelura
border-style: creasta
chenar-stil: insert
border-style: început
Patru rame diferite
2.2. Exemplu. Schimbarea culorii chenarului la trecerea cursorului
Acest exemplu este foarte simplu, dar interesant. Acesta arată cum puteți utiliza pseudoclasa :hover și chenarul CSS pentru a crea efecte simple (cum ar fi meniurile).
Când treceți mouse-ul peste bloc, culoarea cadrului se va schimba.
Iată cum arată pe pagină:
2.3. Exemplu. Cum să faci o chenar transparentă
Cadrul poate fi transparent. Acest efect este rar, dar poate fi uneori foarte util pentru web designeri. Pentru a seta transparența, trebuie să utilizați setarea de culoare în forma RGBA (R, G, B, P), unde ultimul parametru este transparența (număr real de la 0,0 la 1,0)
Iată cum arată pe pagină:
3. Grosimea chenarului: proprietatea lățimii chenarului
Setează grosimea liniei. Anterior, l-am setat într-o singură descriere a marginii.
Sintaxa CSS
lățimea graniței : subțire | mediu | gros | sens;
- subțire - grosime linie subțire
- medie - grosime medie a liniei
- gros - grosimea liniei groase
Mai jos sunt câteva exemple. Cel mai neobișnuit lucru va fi grosimea diferită a chenarului pe fiecare parte.
lățime margine: subțirelățime margine: medielățime chenar: grosGrosimi diferite la margini
Iată cum arată pe pagină:
lățime margine: subțire
lățime margine: medie
lățime margine: gros
Grosimi diferite la margini
4. Cum să faci un cadru de chenar cu o singură margine (chenar)
Proprietatea border CSS are proprietăți derivate pentru setarea chenarelor unilaterale pe un element:
- border-top - pentru a seta chenarul de sus (chenarul de sus)
- border-bottom - pentru a seta chenarul de jos (chenarul de jos)
- border-right - pentru a seta chenarul din dreapta (chenarul din dreapta)
- border-left - pentru a seta chenarul din stânga (chenarul din stânga)
Aceste limite pot fi combinate, de ex. scrieți un cadru pentru fiecare direcție. Sintaxa este exact aceeași ca și pentru bord.
Există și proprietăți
- border-top-color - setați culoarea chenarului superior
- border-top-style - setează stilul chenarului superior
- border-top-width - setați lățimea chenarului superior
- etc. pentru fiecare direcție
După părerea mea, este mai ușor să scrii totul într-o linie decât să produci text suplimentar în stiluri. De exemplu, următoarele proprietăți vor fi aceleași
/* Descrierea a două stiluri identice: */
4.1. Exemplu. Cadru frumos pentru evidențierea citatelor
Exemplu de cadru citat
Iată cum arată pe pagină:
Exemplu de cadru citat
Notă
Puteți seta un chenar separat pentru fiecare parte.
5. Cum să faci mai multe chenare pe un element html
Uneori trebuie să faci mai multe chenare. Să dăm un exemplu
5.1. Prima opțiune cu mai multe margini
Iată cum arată pe pagină:
Există o a doua cale prin suprapunerea umbrelor.
5.2. Suprapuneți umbre pentru a crea mai multe chenaruri
Iată cum arată pe pagină:
6. Rotunjirea colțurilor la margini (border-radius)
Pentru a crea chenare frumoase, utilizați proprietatea CSS border-radius (disponibilă numai în CSS3). Cu el, puteți face colțuri rotunjite, ceea ce creează un aspect complet diferit. De exemplu
7. Linie indentată CSS
Liniile în relief pot arăta spectaculos pe un fundal întunecat, care nu este potrivit pentru fiecare site.
Iată cum arată pe pagină:
Pentru a accesa chenarul din JavaScript, trebuie să scrieți următoarea construcție:
document.getElementById("elementID").style.border="VALOARE "(!LANG:
Sunt sigur că ești deja familiarizat cu proprietatea css border. Veți învăța ceva nou pe care nu știați înainte despre bordura css? Ei bine, nu numai că vei învăța, dar vei vedea și câteva lucruri noi pe care nu le-ai mai știut până acum!
Nu numai că CSS3 poate fi folosit pentru rotunjirea colțurilor, dar codul CSS pur poate fi folosit pentru a crea forme complexe. Anterior, puteai folosi imaginea de fundal pentru a da impresia de colțuri rotunjite. Datorită noilor tehnici de frontieră, putem face acest lucru în CSS pur.
Elementele de bază ale utilizării marginilor css
Probabil că sunteți deja familiarizat cu utilizarea standard a proprietății de frontieră:
Chenar: 1px negru solid;
Codul de mai sus va reda un chenar de 1 px care va fi negru. Simplu și ușor. De asemenea, puteți extinde puțin sintaxa:
lățime margine: gros; stil de chenar: solid culoarea marginii: negru
În plus, puteți utiliza valori specifice pentru proprietatea lățimea marginii, trei cuvinte cheie: subțire, mediu, gros.
Dar utilizarea sintaxei extinse nu este întotdeauna practică. Să ne uităm la un exemplu în care doriți să schimbați culoarea chenarului unui bloc atunci când treceți cu mouse-ul peste el. Într-un astfel de caz, folosirea sintaxei scurte este mult mai ușoară:
Casetă (chenar: 1px roșu continuu; ) .box:hover (chenar: 1px verde continuu; )
Mai elegant și mai simplu se poate face astfel:
Casetă (chenar: 1px roșu continuu; ) .box:hover (border-culoare: verde; )
După cum puteți vedea, tehnica avansată este utilă și atunci când modificăm doar unele proprietăți: lățime, stil, culoare și altele.
hotar-raza
Frontieră-rază este proprietatea „de aur” a CSS3 - prima, cea mai comună proprietate care a devenit practică și utilă. Cu excepția IE8 și mai jos, toate browserele afișează colțuri rotunjite cu aceasta.
Deși, este necesar să folosiți prefixe speciale pentru Webkit și Mozilla pentru ca stilul să fie corect.
webkit-border-radius: 10px; -moz-border-radius: 10px; raza-chenar: 10px
În zilele noastre, putem elimina prefixele speciale și putem folosi forma standard de chenar-rază.
Un alt avantaj este că putem folosi valori speciale pentru fiecare parte a blocului:
raza-chenar-sus-stânga: 20px; chenar-sus-dreapta-rază: 0; raza-chenar-jos-dreapta: 30px; raza-chenar-jos-stânga: 0;
În codul de mai sus, setând chenar-raza-sus-dreapta și chenarul-raza-jos-stânga la „zero”, se pot obține forme uimitoare. Deși elementul poate moșteni unele proprietăți care vor trebui anulate.
La fel ca marginea și umplutura, putem condensa sintaxa:
/* stânga sus, dreapta sus, dreapta jos, stânga jos */ border-radius: 20px 0 30px 0;
De exemplu, folosind proprietatea border-radius, vă voi arăta o „lămâie” pe care designerii o folosesc adesea atunci când creează site-uri web:
Lămâie ( lățime: 200px; înălțime: 200px; fundal: #F5F240; chenar: 1px solid #F0D900; chenar-rază: 10px 150px 30px 150px; )
Trecând dincolo de elementele de bază
La mulți designeri, toate cunoștințele, în domeniul css property border, se termină aici. Dar există și alte lucruri interesante pe care le puteți folosi pentru a crea lucruri uimitoare!
Structuri complexe de frontieră css
Există multe tehnici de proiectare a structurilor complexe de frontieră. De exemplu, luați în considerare următoarele...
stil de chenar
Folosim întotdeauna cele mai faimoase proprietăți solide, punctate și punctate. Dar există câteva alte proprietăți tip chenar: groove și creasta.
Chenar: canelura de 20px #e3e3e3;
Sau în sintaxă extinsă:
culoare-chenar: #e3e3e3; lățime chenar: 20px chenar-stil: canelura;
Deși aceste proprietăți sunt utile, ele nu sunt baza pentru crearea cadrelor complexe.
contur
Cea mai populară tehnică a marginii duble este utilizarea proprietății outline.
Casetă (chenar: 5px solid #292929; conturul: 5px solid #e3e3e3; )
Această metodă funcționează excelent, deși ne limitează la doar două cadre. Uneori trebuie să creați un chenar cu gradient care constă din mai multe straturi... cum atunci?
Pseudo elemente
Când tehnica conturului nu este suficientă, alternativa este să folosiți pseudo-elementele :before și :after. Cu care puteți adăuga chenare suplimentare elementului:
Casetă ( lățime: 200px; înălțime: 200px; fundal: #e3e3e3; poziție: relativ; chenar: 10px verde continuu; ) /* Creați două casete cu aceeași lățime a containerului */ .box:after, .box:before ( conținut: ""; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; ) .box:după (chenar: 5px roșu continuu; contur: 5px galben continu; ) .box:before (chenar : 10px albastru solid; )
Nu pare foarte elegant, dar măcar funcționează. Este puțin problematic să te ocupi de secvența de culori din interiorul... dar poți înțelege.
Box Shadow
O modalitate „copilără” interesantă de a crea acest efect este utilizarea proprietății CSS3 box-shadow:
Casetă (chenar: 5px roșu continuu; casetă-umbră: 0 0 0 5px verde, 0 0 0 10px galben, 0 0 0 15px portocaliu; )
În acest caz, am fost mai deștepți, folosind proprietatea dedicată box-shadow. Schimbând parametrii x, y, estompare la zero, putem folosi diferite culori pentru a crea mai multe cadre.
Dar există o problemă, în browserele mai vechi care nu înțeleg proprietatea box-shadow, doar un chenar roșu de 5px va fi vizibil.
"Tine minte! Designul site-ului ar trebui să arate cross-browser, adică același în toate browserele. Inclusiv versiunile mai vechi.
Schimbarea unghiurilor
Pe lângă raza-chenar simplu folosită, putem specifica două separate - prin separarea lor cu / vom specifica raza orizontală și verticală.
De exemplu:
Raza marginii: 50px / 100px /* rază orizontală, rază verticală */
... acest lucru este echivalent cu:
Chenar-sus-stânga-rază: 50px 100px; chenar-sus-dreapta-rază: 50px 100px; raza-chenar-jos-dreapta: 50px 100px; raza-chenar-jos-stânga: 50px 100px;
Această tehnică este potrivită pentru a crea forme de bloc unice. De exemplu, iată cum puteți crea un efect de hârtie înfășurată:
Casetă ( lățime: 200 px; înălțime: 200 px; fundal: #666; chenar-sus-stânga-rază: 15em 1em; chenar-jos-dreapta-rază: 15em 1em; )
Forme CSS folosind chenar
Această tehnică arată cum puteți crea formulare CSS în timp ce utilizați elemente cu dimensiuni de înălțime și lățime zero. Uimit? Să ne uităm la un exemplu...
Pentru următoarele câteva exemple, vom folosi următorul marcaj:
… și următorul stil de bază:
Cutie ( lățime: 200 px; înălțime: 200 px; fundal: negru; )
Cea mai obișnuită utilizare a formelor CSS este de a crea o săgeată înfăşurată. Secretul acestei săgeți constă în crearea unui chenar cu culori diferite pentru fiecare dintre părți. Apoi, setați atributele lățime și înălțime la 0.
Să atribuim clasa săgeată blocului div:
Săgeată ( lățime: 0; înălțime: 0; chenar-sus: 100px roșu continu; chenar-dreapta: 100px verde continuu; chenar-jos: 100px albastru continu; chenar-stânga: 100px galben continu; )
Pentru a demonstra, folosim mai întâi sintaxa extinsă. În continuare, putem elimina codul suplimentar folosind sintaxa scurtă:
Săgeată (lățime: 0; înălțime: 0; chenar: 100px solid; culoarea chenarului: roșu verde albastru galben; )
Interesant, nu? Acum vom seta culori transparente pe toate părțile, cu excepția părții albastre.
Săgeată ( lățime: 0; înălțime: 0; chenar: 100 px solid; culoarea chenarului de jos: albastru; )
A ieșit grozav! Dar asta contrazice aspect semantic, creați un div .arrow, doar pentru a adăuga o săgeată la pagină. În acest scop, putem folosi pseudo-elemente, ceea ce vom face acum.
Creați un balon de vorbire
Pentru a crea un balon de vorbire, avem nevoie de o mică bucată de cod CSS pur și un bloc div.
Balon de vorbire (poziția: relativă; culoarea fundalului: #292929; lățime: 200px; înălțimea: 150px; înălțimea liniei: 150px; /* vertical centru */ culoare: alb; text-align: center; )
Balon de vorbire:după (conținut: „”; )
În acest moment, vom crea săgeata pe care am făcut-o înainte, o vom adăuga la element și tot ce mai rămâne de făcut este să o poziționăm:
Balon: după (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 10px solid; culoare chenar: roșu verde albastru galben; )
Dacă vrem ca săgeata să indice în jos, va trebui să setăm toate marginile la transparente, cu excepția celui de sus.
Balon de vorbire:după (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 10px solid; culoarea chenarului de sus: roșu; )
Când creăm această formă CSS, nu putem specifica în mod specific dimensiunea săgeții. În schimb, putem seta proprietatea border-width, care va seta dimensiunea săgeții. De asemenea, vom seta poziția săgeții în mijlocul de jos. În consecință, folosim valorile de sus și din stânga pentru aceasta.
Balon de vorbire:după (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 15px solid; culoarea chenarului de sus: roșu; sus: 100%; stânga: 50%; )
În plus, rămâne să dăm culoarea aceeași cu cea a blocului. Amintiți-vă, atunci când poziționați, trebuie să luați în considerare dimensiunea celorlalte chenare care sunt invizibile (15px). Vom da și blocului rotunjire la colțuri.
Speech-bubble ( /* ... alte stiluri */ border-radius: 10px; ) .speech-bubble: after (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 15px solid; chenar -sus -culoare: #292929; sus: 100%; stânga: 50%; margine-stânga: -15px; /* ajustați pentru lățimea chenarului */ )
Nu-i rău, nu? Folosind câteva clase css și trucuri de frontieră, puteți crea așa ceva.
/* Utilizarea bulelor de vorbire: Aplicați clasa .speech-bubble și .speech-bubble-DIRECTION așa cum se arată mai jos
Primă! Centrare verticală în cadrul unui bloc
Pentru o singură linie de text, se poate folosi line-height. Dar dacă aveți două sau mai multe rânduri de text... Cea mai bună soluție este să setați proprietatea de afișare la tabel și să puneți tot textul într-un paragraf. Iată cum arată în markup html:
Speech-bubble ( /* alte stiluri */ display: table; ) .speech-bubble p ( display: table-cell; vertical-align: middle; )
Nu ne limităm la triunghiuri. CSS este capabil să afișeze diferite forme - chiar și inimi și un semn de pericol biologic.
Pericol biologic ( lățime: 0; înălțime: 0; chenar: 60px solid; chenar-rază: 50%; chenar-sus-culoare: negru; chenar-jos-culoare: negru; chenar-stânga-culoare: galben; chenar-dreapta- culoare:galben;)
Concluzie
Bună ziua, dragi cititori ai site-ului blogului. Astăzi vreau să continui subiectul de studiu și să iau în considerare acele reguli de stil care vă permit să setați indentări și chenare pentru elementele Html: chenar, margine și padding.
Înainte de asta, am reușit să studiem proprietăți destul de simple care controlau fonturile (), textul () și am examinat modelul
Da, am reușit să luăm în considerare și principiile de utilizare în toate detaliile (întinse în mai multe articole). Acum este timpul să trecem la regulile care stau la baza construirii documentelor (pagini web) și vom începe cu modelul bloc (relația elementelor HTML).
În termeni generali, am scris deja despre și modern, ei bine, dar astăzi vor fi specifice pure. Dacă doriți să citiți publicațiile anterioare pe această temă, sunteți binevenit la.
Model de casetă CSS - umplutură, margine și chenar
În al treilea rând, se pot folosi procentele. De la ce sunt considerate? Se pare că de la lățimea containerului(adică din zona de conținut a elementului părinte). Mai mult, acest lucru se aplică nu numai marginii-dreapta și stânga, ceea ce ar fi logic, ci și pentru marginea-sus și jos, procentele vor fi calculate din lățimea (nu înălțimea) containerului.
Trebuie remarcat, vorbind despre stabilirea valorilor dimensionale, acea Marja poate fi, de asemenea, negativ. Acestea. când setăm o valoare pozitivă pentru indentarea exterioară, mutăm elementul adiacent la distanța specificată, iar dacă este specificată o valoare negativă, blocul adiacent va merge pur și simplu la cel pentru care am setat această indentație negativă. Și acest lucru este foarte des folosit în CSS.
Și este de la sine înțeles că există o regulă CSS Margin prefabricată, care în multe cazuri vă permite să reduceți dimensiunea codului folosit pentru a seta marjele necesare. Ordinea valorilor din ea este strict reglementată (sunt scrise printr-un caracter spațiu) și trebuie să se potrivească cu modelul:
Acestea. enumerarea începe de sus (sus) și continuă în sensul acelor de ceasornic până la sfârșitul cercului cu liniuța din dreapta (dreapta). Ar putea arăta cam așa:
Marja: 20px 10px 40px 30px;
Și asta va însemna că browserul ar trebui să indenteze 20 de pixeli deasupra blocului nostru, 10 pixeli la dreapta, 40 pixeli în jos și 30 pixeli la stânga. această intrare ar fi echivalentă cu:
Scurtarea codului CSS este vizibilă cu ochiul liber. Dar aceasta nu este limita. Este perfect acceptabil să folosiți nu numai patru, ci și trei, două și chiar o singură valoare într-o regulă prefabricată. Ceea ce va ajuta și mai mult la reducerea dimensiunii codului. Cu toate acestea, va fi posibil să se reducă numărul de valori numai în anumite cazuri:
- Dacă marginile din stânga și din dreapta sunt aceleași, de exemplu: margin:20px 30px 40px 30px;
Acesta din urmă poate fi omis:
Marja: 20px 30px 40px;
Aceste două intrări ale regulilor de colectare fac același lucru. Prin urmare, dacă vedeți o intrare cu trei valori în Marjă, atunci valoarea celei de-a patra (în dreapta) poate fi văzută în a doua (în stânga).
În cazul liniuțelor egale de sus și de jos, un astfel de truc nu va mai funcționa, deoarece în mod logic, este posibil să se reducă structura intrării regulii prefabricate, doar tăind valorile duplicate de la capătul său(și valoarea liniuței de jos va fi penultima).
- Dacă, pe lângă egalitatea marjelor din stânga și din dreapta, există o egalitate a valorilor lor deasupra și dedesubt: margin:20px 30px 20px 30px;
sau, care este același (în virtutea punctului 1):
Marja: 20px 30px 20px;
Că o astfel de regulă prefabricată poate fi scrisă cu doar două valori, eliminând ultima care se potrivește cu prima:
Marja: 20px 30px; În acest caz, prima valoare descrie marginile verticale, iar a doua descrie marginile orizontale.
- Și, în sfârșit, dacă toate valorile din regula prefabricate sunt aceleași: margin:20px 20px 20px 20px;
sau, care este același (în virtutea punctului 2):
Marja: 20px 20px;
Asta poate fi folosit cel mai scurt tip de înregistrare(eliminând ultima valoare care se potrivește cu prima):
Marja: 20px; Ce va însemna aceeași liniuță exterioară pe toate părțile elementului nostru HTML.
Vorbind despre marje, merită menționată o astfel de schemă ca "marja-colapsare" sau, cu alte cuvinte, „colapsul marjei”. Pe scurt, esența acestui fenomen este următoarea.
Dacă avem două blocuri situate unul sub celălalt (marginile se pot prăbuși doar pe verticală) și ambele au margini opuse (de exemplu, de jos pentru elementul superior și marginea de sus pentru partea de jos), atunci o valoare mai mare a Marjei va absorbi o valoare mai mică. unu.
De exemplu, dacă blocul de sus este setat la:
Marja: 20px 20px 200px 20px;
Și pentru partea de jos:
Marja: 100px 20px 20px 20px;
Apoi, marginea inferioară a blocului superior (200px) va absorbi marginea superioară a celui de jos (100px, și chiar dacă devine egală cu 199px, nimic nu se va schimba), iar indentația exterioară rezultată între aceste două blocuri va fi tot 200px. Acestea. Se ia in calcul doar cel mai mare. modulo Margin și nu se adună în niciun fel cu valoarea opusă a elementului învecinat vertical.
Acesta este un astfel de truc care funcționează exclusiv pe verticală, iar pe orizontală dimensiunile opuse Margin se vor adăuga pur și simplu unele la altele. Dar acest lucru este doar în ceea ce privește marjele cu același semn, dar dacă sunt cu semne diferite, atunci numerele lor se vor aduna pur și simplu și blocurile vor fi separate unul de celălalt prin valoarea rezultată.
De exemplu, în acest caz:
Marja de sus: 20px 20px -20px 20px; marginea inferioară: 10px 20px 20px 20px;
Umplutura rezultată între blocuri va fi -10px, adică. cei 10 pixeli de jos vor rula peste elementul HTML de sus.
O altă caracteristică a utilizării regulii Margin în CSS este că valoarea specificată verticala pentru elementele inline este ignorată. Întrebând:
Marja: 20px;
De exemplu, pentru , care este un element inline, vom vedea de fapt doar umplutură orizontală și nu vor avea loc modificări verticale.
Privind puțin înainte, voi spune că Umplutura pentru etichetele inline pe verticală va funcționa, dar adâncirea crescută nu va afecta poziția sa generală în raport cu alte elemente învecinate.
În cazul unei etichete de bloc (titluri, paragrafe), Padding-ul mărit vertical ar muta acest element în raport cu alte blocuri învecinate.
Ei bine, cadrul (Border), sau mai degrabă lățimea sa, nu va putea, de asemenea, să mute alte blocuri adiacente pe verticală din eticheta inline. Pentru elementele inline, mișcarea este posibilă doar într-o direcție - orizontal și atât.
Căptușeală și chenar - căptușeală și chenare
Să trecem acum la setarea umpluturii folosind regula Padding și să vedem ce valori poate lua:
După cum puteți vedea, aici nu se menționează Auto, iar această regulă CSS nu permite valori negative (pot fi doar pozitive, zero sau mai mari). Acestea. cu ajutorul Padding-ului, conținutul nu poate fi împins în afara cadru. Maximul care se poate face este să apropii conținutul de cadru.
Procentele din acesta sunt calculate în același mod ca în Margin - în raport cu lățimea containerului (zona de conținut a elementului părinte) în care este închis elementul nostru. Regula de umplutură prefabricată în Css este format și respectă aceleași legi ca cele discutate mai sus:
Umplutură: 20px 10px 40px 30px;
În această regulă, începând de sus, descriem toate cele patru părți. Dacă trebuie să reduceți ceva în el (până la trei, două sau chiar o valoare), atunci va trebui să utilizați principiile de reducere descrise mai sus pentru indentările externe, care vor funcționa cu exact același succes pentru cele interne.
Și ultimul lucru pe care aș dori să-l iau în considerare astăzi este cadrul care este setat folosind Frontieră. Au trei tipuri de parametri:
- Border-width - setează lățimea chenarului
- Border-color - își stabilește culoarea
- Border-style - tip de cadru sau tip de linie cu care va fi desenat
Toate aceste trei reguli CSS au un set valid de valori:
Lățimea liniei pentru chenar ( lățimea graniței) poate fi specificat atât cu ajutorul numerelor din Em, Ex sau Px, cât și cu cuvintele:
- Subțire - linie subțire;
- Mediu - mediu (această valoare este utilizată implicit);
- Gros - gros.
Ca valoare pentru culoarea chenarului ( chenar-culoare) puteți folosi metodele acceptate pentru specificarea lor (cod hexazecimal, cuvinte etc.):
culoare-chenar:roșu;
În mod implicit, dacă culoarea pentru chenar nu este setată în mod explicit, atunci va fi folosită cea folosită pentru fontul din interiorul elementului dat.
Proprietatea CSS în stil Border vă permite să setați tipul de chenar în cuvinte:
- Niciunul - fără chenar (implicit)
- Punctată - linia este trasată cu puncte
- Punctată - punctată
- Solid - linie continuă
- Linie dublă - dublă
- Canelură - cadru crestat
- Creasta - bombată
- Inset și start - jocuri cu umbre
Desigur, deoarece există patru laturi pentru orice bloc, puteți folosi atât reguli generale, cât și unele separate pentru fiecare dintre părți:
Același lucru se va aplica și în cazul Prefabricat Rule Border- se poate scrie atât pentru toate părțile în același timp (Border), cât și pentru fiecare dintre părți separat (Border-sus, stânga, jos și dreapta). Ordinea valorilor nu este importantă:
Chenar: 1px roșu continuu;
Dacă ceva este omis, se va folosi în schimb valoarea implicită.
Multă baftă! Ne vedem curând pe site-ul paginilor blogului
Puteți viziona mai multe videoclipuri accesând");">
S-ar putea să fiți interesat
Înălțime, lățime și depășire - reguli CSS pentru descrierea zonei de conținut în aspectul bloc 
Poziție (absolută, relativă și fixă) - moduri de a poziționa elementele HTML în CSS (reguli stânga, dreapta, sus și jos) Stil diferit pentru link-urile interne și externe prin CSS 
Float și clar în CSS - instrumente de aspect bloc 
Afișare (block, none, inline) în CSS - setați tipul de afișare a elementelor HTML pe o pagină web
Un bloc poate avea o chenar. Acesta marchează limitele blocului. În acest caz, indentarea interioară este în interiorul blocului, adică în interiorul cadrului, iar indentarea exterioară este în afara cadrului. Cadrul își ia locul pe pagină și nu este inclus nici în marginea exterioară, nici în cea interioară. Pentru a crea un cadru, trebuie să specificați trei proprietăți: lățimea cadrului, stilul cadrului și culoarea.
Proprietatea border-width este folosită pentru a specifica lățimea chenarului. Poate lua următoarele valori:
lățime chenar: mediu - mediu (implicit)
lățime margine: subțire
lățime margine: gros
border-width: lățimea în unități CSS
border-width: inherit - valoarea este preluată din elementul părinte
Cel mai adesea, lățimea este specificată în orice unități de măsură care există în CSS.
Stilul chenar este setat folosind proprietatea border-style. În funcție de această proprietate, ramele arată diferit. Următoarele sunt valorile pentru această proprietate și stilurile pe care le stabilesc.
Cu o lățime mică, cadrul poate arăta ușor diferit.
În plus față de valorile specificate, proprietatea tip border poate lua următoarele valori:
border-style: none - fără chenar
border-style: ascuns - la fel ca niciunul, aplicat celulei tabelului
border-style: inherit - valoarea este preluată din elementul părinte
Culoarea chenarului este setată de proprietatea border-color. Valoarea proprietății este o culoare specificată într-una dintre metodele CSS.
Să creăm un bloc și să-i dăm un cadru.
Stil:
Încercați să dați blocului un cadru cu valori diferite ale proprietăților.
Notație prescurtată
Cadrul poate fi creat într-un mod mai scurt. Pentru a face acest lucru, există o proprietate border, care listează proprietățile chenarului separate printr-un spațiu, mai întâi lățimea, apoi stilul, apoi culoarea. De exemplu, să creăm un bloc cu același chenar, dar să îl setăm folosind notația scurtă.
Dacă nu specificați o lățime sau o culoare, se va folosi valoarea implicită.
Laturile separate ale cadrului
Cadrul bloc poate fi setat nu în întregime, ci pe fiecare parte separat. Diferite părți ale cadrului pot avea un stil separat, pe de o parte poate exista un cadru, iar pe de altă parte poate să nu fie, în general, aveți libertate deplină de acțiune.
Pentru a crea un chenar pe fiecare parte, există proprietățile border-left , border-right , border-top , border-bottom. De exemplu, să creăm un bloc care are un cadru doar în stânga.
Creați un cadru pentru acest bloc pe alte părți cu o vedere diferită.
Pentru orice parte a cadrului, puteți specifica fiecare proprietate separat:
border-left-width , border-left-style , border-left-color
border-right-width , border-right-style , chenar-dreapta-culoare
border-top-width , border-top-style , border-top-color
border-bottom-width , border-bottom-style , chenar-bottom-color
Dacă doriți ca cadrul să fie afișat diferit pe toate părțile, puteți seta oricare dintre proprietățile cadrului nu la o valoare, ci la patru, pentru fiecare dintre părți. Valorile sunt enumerate separate prin spații, mai întâi pentru partea de sus, apoi pentru dreapta, apoi pentru partea de jos și apoi pentru stânga.
De exemplu, să creăm un bloc al cărui cadru are lățimi diferite pe toate părțile.
Stil:
De asemenea, puteți specifica două sau trei valori pentru proprietate. Dacă sunt specificate două valori, atunci prima valoare este specificată pentru partea de sus și de jos a cadrului, iar a doua pentru stânga și dreapta. Dacă sunt specificate trei valori, atunci prima valoare este specificată pentru partea de sus a cadrului, a doua valoare pentru părțile din stânga și dreapta și a treia pentru partea de jos.
