Cadrele plasate în jurul imaginilor sau textului decorează site-ul și adaugă varietate designului său. Dacă utilizați tabele pentru a crea chenare, atunci codul pentru fiecare chenar va ocupa prea mult spațiu. De asemenea, în acest caz, va trebui să rescrieți codul HTML pentru fiecare cadru. Cu CSS, puteți crea cu ușurință o margine de orice grosime și culoare doriți, scriind un cod simplu o dată pentru toate elementele care vor fi înconjurate de această margine. Această tehnologie va permite, dacă este necesar, să schimbe tipul de cadre de pe site în câteva minute.
Este necesar
- - să ai propriul tău site web;
- - știți ce este CSS și unde sunt scrise aceste stiluri pe site.
Instrucțiuni
Pasul 1
Pentru a crea un chenar, mai întâi scrieți următorul cod în CSS:
ramka {}
Pasul 2
Pentru a face chenarul dimensiunea dorită, utilizați parametrul border-width, care setează lățimea liniei în pixeli. De exemplu, dacă linia cadrului ar trebui să aibă o lățime de 3 pixeli, atunci intrarea va arăta astfel:
ramka {border-width: 3px;}
Pasul 3
Acum definiți stilul chenarului utilizând parametrul stilului chenarului. Dacă doriți să creați o margine ale cărei laturi sunt linii continue regulate, atunci introduceți următoarea intrare în cod între parantezele crețate - în stil de margine: solid.
Pasul 4
O margine punctată poate fi obținută scriind-o astfel: border-style: punctat. Verificarea stilului chenar: punctat vă va oferi o margine punctată.
Pasul 5
Puteți face marginea o linie continuă dublă astfel: border-style: double. Utilizați stilul chenar: groove sau stilul chenar: ridge pentru a încadra textul sau imaginile în cadre cu efecte secundare 3D. Diferența dintre aceste două opțiuni este că, în primul caz, cadrul este format din linii indentate, iar în al doilea, convexe.
Pasul 6
Utilizați acest cod: border-style: inset pentru a crea efectul unei inserții cu marginea unui element de site. Pentru a face conținutul chenarului, alături de chenar, dimpotrivă, să fie convex, scrieți chenar în stil: început.
Pasul 7
Puteți adăuga culoarea dorită cadrului utilizând parametrul border-color, plasat, de asemenea, între acoladele. Dacă doriți să faceți marginea roșie, atunci scrieți border-color: roșu, albastru - border-color: albastru, portocaliu - border-color: portocaliu.
Pasul 8
Codul de frontieră CSS, inclusiv toate opțiunile, arată astfel:
ramka {border-width: 3px; stil de bordură: solid; border-color: albastru;}
Pasul 9
Acum, în HTML, scrieți acest lucru:
Conținut cadru În loc de expresia „Conținut cadru”, introduceți textul sau codul imaginii dorite.
Pasul 10
Astfel, puteți proiecta un număr nelimitat de elemente pe site. Pentru a schimba aspectul cadrului, trebuie doar să schimbați codul CSS.
