Ca designer de layout, am fost întotdeauna foarte enervat de faptul că grosimea chenarului în CSS este luată în considerare la formarea lățimii blocului. Sunt de acord că este mai corect așa, dar în unele cazuri, aceasta este doar o nedreptate flagrantă, care implică multe probleme suplimentare.
O astfel de problemă a fost că mi-a fost imposibil să așez un aspect cu o aliniere perfectă a blocurilor de-a lungul marginilor. Unele blocuri s-au târât mereu, da, din marginile tuturor celorlalte. Această problemă a fost atenuată de faptul că „acest crawling” a fost de maximum 1-2 pixeli și, cel mai adesea, clientul pur și simplu nu a observat acest lucru. Dar personal, m-a deranjat foarte mult.
Este la fel cu a cumpăra Fals chinezesc Ceasuri elvețiene. Se pare că totul arată exact la fel, dar apoi tu însuți înțelegi că acesta este un fals.
Doar puțină teorie
Standardul CSS prevede că lățimea finală a unui bloc se formează din dimensiunea căptușelii, lățimea cadrului (dacă cadrul are 2 margini orizontale, atunci această dimensiune trebuie și înmulțită cu 2) și lățimea textului. . Acest sens lăţime, pe care toată lumea arată spre bloc divși este lățimea textului. Mulți oameni cred că aceasta este lățimea blocului, dar nu este. Exact asta am crezut si eu.
Există un instrument în CSS care vă permite să ocoliți această stare de lucruri și permite parametrul css lăţime setați lățimea blocului fără a ține cont de căptușeală și chenare.
Rezolvarea problemei
Pentru a fi mai ușor de înțeles, iată un exemplu de luptă:
Opțiuni -moz-box-sizingși -webkit-box-sizing sunt necesare pentru ca versiunile mai vechi ale browserelor Firefox și Safari să înțeleagă că nu este necesar să se includă lățimea chenarului și dimensiunile de umplutură în acest caz.
Fiecare specialist trebuie să caute zilnic informație nouăîn domeniul lor de activitate. La urma urmei, nu degeaba se spune că viața este o mișcare doar înainte. Dacă ai trăit o zi și nu ai învățat nimic nou din ea, atunci fii sigur că ai trăit această zi degeaba!
P.S. Pentru mine, ca dezvoltator de site-uri personalizate, este un test foarte serios - promovarea site-ului în motoarele de căutare. Pentru mine, toate acestea motoare de căutare, SEO este o pădure întunecată pe care încerc să o „dăruiesc” altor oameni, întrucât o persoană poate fi profesionistă doar într-una, în domeniul său. Nu am nevoie de altcineva.
Cu câteva lecții mai devreme, ne-am uitat la reprezentare schematică bloc al unei pagini web și, de asemenea, am vorbit pe scurt despre o astfel de proprietate CSS ca border , cu care puteți seta chenare 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 setat atât din toate cele patru laturi (ca și cum ar închide blocul într-un cadru), cât și din una, două sau trei laturi. În CSS, puteți controla grosimea, culoarea și stilul chenarelor. Să studiem asta mai detaliat.
border-width: lățimea chenarului
Prin intermediul proprietăți de frontieră-width stabilește lățimea chenarului. Cel mai adesea, această dimensiune este specificată î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 o lățime de 2 pixeli, la stânga și la dreapta sunt de 4 pixeli: */ 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 specifica lățimea chenarului:
- subțire - margine lată de 2px;
- mediu - margine lată de 4px;
- gros - 6px chenar lat.
border-color: culoarea chenarului
Proprietatea border-color setează 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 o culoare pentru toate marginile sau puteți alege culori diferite pentru fiecare chenar.
Culoarea chenarului: #FFFF00;
De asemenea, puteți seta o culoare transparentă scriind:
culoare-chenar: transparent;
border-style: stil de chenar
Datorită proprietății în stilul chenarului, puteți face o chenar obișnuit punctat, dublat, tridimensional - există multe sensuri diferite. Pentru a face acest lucru, utilizați următoarele cuvinte cheie:
- solid - chenar solid;
- punctat - chenar punctat;
- punctat - chenar punctat;
- dublu - chenar dublu;
- groove - limita tridimensională a canelurii;
- creasta - chenar volumetric cu o margine groasă (de fapt, inversarea stilului anterior);
- start - chenar extrudat;
- inserție - o chenar indentat (în esență inversul stilului anterior).
Ca și în cazul proprietăților de lățime a chenarului și culoarea chenarului, chenarul fiecărei casete 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: punctat dublu;
Notă:în browsere diferite aspect marginile pot varia ușor.
Limită generală a proprietății CSS: 3 în 1
Nu este necesar să folosiți pe rând toate cele trei proprietăți de mai sus pentru a seta stilul pentru chenar. Suficient să știi despre general proprietate universală border CSS, cu care poți stila mult mai rapid și economisi spațiu. Pentru aceasta in ordine aleatorie notează valorile pentru toate cele trei proprietăți:
Chenar: 2px punctat #FF0000;
Borduri pentru părți individuale
Cu proprietăți suplimentare de chenar 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 cutii, poți exersa să le faci. Există o mulțime de moduri de a descrie succint un stil fără a exagera cu replicile. fișier css. Un rol important aici îl joacă cunoașterea principiilor foilor de stil în cascadă. Luați în considerare un exemplu.
Să presupunem că doriți să încadrați un div cu trei chenare gri solide și să faceți chenarul de jos întrerupt î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 asta e mult 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 div de 200x200px. 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 5px.
- Faceți un chenar din stânga punctat, 3 pixeli lățime, alegeți o culoare diferită de cea anterioară.
- Dublați chenarul drept dubla, 7 pixeli lățime, culoare diferită de cele două anterioare.
În cele din urmă, munca ta ar trebui să arate astfel (cu excepția culorii pe care o alegi singur):
Rezultatul jobului (vizualizare în Chrome)
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 CSS3 poate fi folosit pentru a rotunji colțurile, ci și 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ă ești deja familiarizat utilizare standard proprietăți 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 chenar: gros; stil de chenar: solid culoarea marginii: negru
Ca și plus, pot fi utilizate valori specifice pentru proprietatea lățime margine, 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 hotar-raza.
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 domeniu proprietăți css graniță, acolo se termină. Dar mai sunt mai multe chestii tari cu care poți 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ă de creare cadru dublu- folosind proprietatea 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ă, remediu alternativ este de a folosi 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:după, .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 continuu; ) .box:before ( chenar: 10px albastru continuu; )
Nu pare foarte elegant, dar macar, functioneaza. 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ă cel folosit sens simplu border-radius, 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; )
Cel mai exemplu comun Utilizarea CSS forme - crearea unei săgeți curgătoare. Secretul acestei săgeți constă în crearea unei granițe cu Culori diferite pentru fiecare parte. Apoi, punem atribute de lățimeși înălțimea la 0.
Atribuiți la bloc div clasa de săgeți:
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ă. Apoi, putem elimina cod 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 stabili 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, avem nevoie de o bucată mică CSS pur cod ș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 asta Forma 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ă țineți cont de 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ă ai două sau mai multe linii text... cea mai bună soluție va seta proprietatea de afișare la tabel și va pune tot textul într-un paragraf. Iată cum arată marcaj 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;)
