Bună ziua, astăzi vom vorbi despre un atribut atât de important în CSS ca crearea unui cadru. Cadrul este foarte des folosit pentru a încadra textul, a separa un element de design de altul și pentru fiecare webmaster este util să știm cum să setăm cadrul în CSS.
Definiți stilul cadrului în CSS.
Nu voi crea un fișier nou, dar voi folosi cel vechi, în plus, există titluri de niveluri diferite pentru care vom crea cadre. Să setăm diferite tipuri de cadre pentru antetul primului nivel și care este specificat de eticheta h1. Pentru aceasta, adăugați următorul text în fișierul de stil: h1 și examinați pe scurt ceea ce am scris. h1 este am stabilit ce element definim echipa cadru, stil de frontieră, ceea ce înseamnă că elementul trebuie să fie stabilite în cadrul anumit stil de bine, solide se referă la caseta de afișare stil, în acest caz, linia solidă.
Putem schimba stilul de afișare al cadrului și pentru aceasta trebuie doar să setăm noi parametri și acum voi arăta ce comenzi sunt disponibile și cum sunt afișate pe site.
Opțiuni cadru:
solidă sau solidă.
punctat punctat.
linia cu linii umbrite.
dublă dublă linie solidă.
Acestea sunt stilurile de bază pe care le puteți seta stilul de cadru în CSS. Mai multe detalii despre toate comenzile pe care le puteți învăța din specificațiile CSS.
Înainte de aceasta, am stabilit stilul complet pentru întregul cadru, dar putem, de asemenea, seta parametrul specific pentru fiecare parte și foaia de stil ne oferă această capacitate. În acest mod vom fi ajutați de patru comenzi: stil de frontieră-stânga (top line) de tip border-right-style (dreapta) și border-bottom-style (linia de jos).
Să stabilim acum stilul pentru fiecare parte a poziției noastre. Să scriem comanda pentru toate cele patru laturi:
h1 de frontieră-stânga-stil: groove;
frontieră-top-stil: solid;
stil de frontieră-dreapta: dublu;
border-bottom-style: punctat;>
Și în practică vom vedea acest rezultat.
Cum se stabilește grosimea liniilor în cadrul CSS.
Pentru a stabili domeniul de aplicare trebuie să folosim un atribut de stil frontieră lățime, pentru care putem defini mai mulți parametri: primul este de a stabili dimensiunea cadrului în pixeli sau specificați echipele de grosime subțire (linia subțire), medie (linia de mijloc) sau gros (linia groasă). Grosimea liniei poate fi de asemenea setată pentru orice parte a cadrului, indiferent de stilul pe care îl plasează pentru celelalte.
Să începem prin a studia cum să setăm grosimea liniei de frontieră direct pentru toate părțile. Pentru a face acest lucru, trebuie doar să luăm și să setăm lățimea de comandă a frontierei și să definim dimensiunea liniei pentru aceasta. Pentru a seta grosimea, textul va arăta astfel:
h1 stil de frontieră: solid;
lățimea frontală: subțire;
>
Comanda subțire poate fi înlocuită cu o valoare medie sau groasă sau puteți specifica o grosime în pixeli prin specificarea unei unități de măsură, de exemplu o dimensiune de patru pixeli-4 pixeli.
Acum vom seta parametrii de grosime pentru fiecare parte a cadrului nostru. La fel ca în cazul setării stilului, lățimea stânga-stânga, marginea superioară a marginii, lățimea dreaptă a marginii și marginea inferioară a frontierei ne vor ajuta. line). Pentru aceasta adăugăm patru linii în fișierul de stil:
h1 stil de frontieră: solid;
frontieră-lățime stângă: mediu;
frontieră-top-lățime: subțire;
latime-dreapta: grosime;
frontieră-lățime de jos: 7px;
>
Și acum toate cele patru laturi ale cadrului nostru vor avea grosimea lor.
Cum se configurează culoarea de margine în CSS.
Să stabilim acum cadrul de culoare în CSS și acest lucru ne va ajuta echipa de frontieră stânga-culoare, border-top-color, border-dreapta-color și border-bottom-culoare pentru a specifica o culoare pentru stânga, sus, dreapta și liniile de cadru inferior, respectiv, . Pentru aceasta, atribuim comenzi și adăugăm culoarea la fiecare comandă.
h1 stil de frontieră: solid;
marginea stânga-culoarea: # 00CCCC;
border-top-color: # 6633CC;
border-right-color: # CCCCCC;
border-bottom-color: # 66CC99;
>
Acum, să vedem rezultatul aplicării acestui parametru.
Setați variabila globală pentru a scurta înregistrarea.
Acum, să vedem cum putem să scăpăm de astfel de desene și înregistrări greoaie. Pentru a face acest lucru, trebuie să specificăm un atribut de graniță globală în care să setăm parametrii cum ar fi grosimea marginii, stilul frontierei și culoarea și toate acestea nu se vor potrivi cel puțin în trei rânduri, ci într-o singură linie.
Pentru aceasta scriem o linie:
h1 de frontieră: 5px solid # 3399FF;
>
în linie, mai întâi specificăm grosimea liniei de graniță, apoi un spațiu și specificăm stilul designului de margine și, din nou, prin bara de spațiu, specificăm culoarea cadrului. Asta e tot, am scurtat înregistrarea la o singură linie.
Sper că datorită acestui articol veți putea seta cadrul pentru toate elementele din CSS. Am încercat să vă opresc atenția asupra celor mai necesare comenzi și să vă spun în detaliu cum să setați cadrul în CSS, să setați stilul cadru în CSS și să setați culoarea cadrului în CSS.
Articole similare
Trimiteți-le prietenilor: