Frontiere în CSS

Patru ( chenar: solid 6px #888; fundal: #fff; lățime: 312px; înălțime minimă: 312px; ) .four div ( lățime: 300px; înălțime minimă: 300px; fundal: #222; margine: 6px automată; depășire : ascuns)

Elementul exterior are puțin marime mai mare, care creează iluzia unui cadru dublu.

Metoda 5: proprietatea imagine-chenar

O altă tehnică nouă este proprietatea CSS3 border-image, adesea uitată:

Cinci (border-width: 12px; -webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repetare; -moz-border-image: url(multiple-borders.gif) 12 12 12 12 repetare; border-image: url(multiple-borders) 12 12 12 12 repetare /* pentru Opera */ )

Stii alta metoda?

Desigur, aici sunt adunate metode cunoscute și utilizate pe scară largă. Dar poate știi un truc. Distribuie cititorilor în comentarii.

În procesul de proiectare a unui site web, mulți constructori de site-uri web începători se întreabă cum să schimbe fontul, dimensiunea și culoarea titlurilor. Da, aceasta este într-adevăr o opțiune grozavă cu care poți adăuga puțină prospețime designului site-ului tău. Dar există o altă întrebare la fel de intrigantă: cum să faci un cadru html.

Pentru ce este un cadru html?

De fapt, nicio funcție specială acest element nu poartă. Dar totuși, textul, închis într-un cadru atrăgător, trezește un anumit interes în rândul cititorilor. Prin urmare, un cadru în jurul textului poate fi numit în siguranță una dintre modalitățile de a sublinia importanța textului încadrat.

Caracteristici ale creării unui cadru în jurul textului

Desigur, variații în designul cadrului folosind CSS mult mai mult, dar asta este o cu totul altă poveste. În plus, această metodă este potrivită pentru constructorii de site-uri mai avansați. Cred că tu și cu mine și cu ajutorul editării cod html veți obține un cadru html la fel de frumos.

În prima etapă, trebuie să înțelegeți că un cadru poate fi făcut pentru toată lumea element html indiferent de ce fel de etichetă este

,

, , etc.

La rândul său, există o diferență între cadrele elementelor inline și bloc.

Rama de tip încorporat se află în interiorul etichetelor, sau mai corect, persoana responsabilă pentru aceasta afișaj html cod inclus între anumite etichete. Ca rezultat, obținem un cadru html în jurul textului, pentru care trebuie să scriem anumite comenzi pentru a seta marginile interne.

Cadrele bloc sunt formate pe toată lățimea blocului, ceea ce provoacă necesitatea de a specifica comenzi legate de limitarea lățimii.

Desigur, pentru a face text într-un cadru html, va trebui să apelăm la stilurile încorporate. Aceasta metoda va fi cel mai potrivit pentru evidențierea unor fraze individuale, paragrafe în text și imagini. Dacă trebuie să evidențiați o anumită parte a șablonului care este afișată pe toate paginile site-ului, este rezonabil să editați fișierul style.css al șablonului.

Cum să faci un cadru în jurul textului în html

Cred că există o mulțime de teorie. E timpul să exersezi. De exemplu, voi include într-un cadru verde deschis luminos cu fundal gri una dintre propunerile importante ale acestui articol.

Punct important! Stilurile încorporate funcționează perfect și nu dăunează validității HTML a site-ului.

Pentru a implementa același cadru, trebuie să vă referiți la etichetă

SUGESTIA DVS.

Din moment ce în în acest exemplu incorporat stiluri css, consider la fel de important să vă prezint pe fiecare dintre ele.

1. frontieră– proprietate responsabilă cu afișarea cadrului. Pentru a simplifica sarcina, nu am specificat fiecare proprietate separat - border-width (grosimea chenarelor cadrului), border-color (culoarea cadrului html). În schimb, am scurtat puțin codul html scriind toate proprietățile după două puncte.

Pentru a schimba aspectul cadrului, schimbați doar valoarea solid. Există următoarele limite ale cadrului:

Ridge – relief.

Punctat - punctat.

Dublu dublu.

Punctată - punctată.

Solid - solid.

2. căptușeală– o proprietate responsabilă pentru distanța dintre cadru și obiectul închis în acesta.

Dacă doriți, vă puteți juca puțin mai mult cu stilurile adăugând la numărul de comenzi cuprinse între etichetele de deschidere și de închidere

Proprietate marginea. În acest fel, puteți indenta elementele care se află în afara cadrului.

pentru a se schimba fundalul Este suficient să înregistrați proprietatea culoarea de fundal, specificând codul culorii dorite după două puncte.

Rama in jur imagini html Se face în același mod, așa că nu ar trebui să aveți probleme cu el. Singurul lucru pe care un începător trebuie să știe este că, pentru a-l afișa, proprietățile trebuie scrise într-o singură etichetă .

Pentru a rezuma, putem spune că pentru a realiza un cadru în jurul unei imagini sau text, este suficient să deschideți afișajul codului html al articolului și să scrieți în el proprietăți speciale între anumite etichete.

Vă mulțumesc pentru atenție și pe curând pe paginile Stimylrosta.

Găsit în text eroare gramaticală? Vă rugăm să raportați acest lucru administratorului: selectați textul și apăsați combinația de taste rapide Ctrl+Enter

Proprietate chenar CSS Funcționează pentru a crea marginea unui obiect, și anume grosimea cadrului, 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 chenar-culoare | moşteni;

• border-width - grosimea chenarului. Îl puteți seta în pixeli (px) sau utilizați valorile standard subțire, mediu, gros (se deosebesc doar prin lățime în pixeli)
• border-style - stilul chenarului afișat. Poate lua următoarele valori
  • niciunul sau ascuns - anulează granița
  • punctat - cadru punctat
  • liniuță - cadru format din liniuțe
  • solid - linie simplă(utilizat cel mai des)
  • dublu - cadru dublu
  • groove - chenar 3D canelat
  • creastă, inserție, început - diverse efecte de cadru 3D
  • moștenire - se aplică valoarea elementului părinte
• border-color - culoarea chenarului. Poate fi setat folosind nume specific culori 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 margini CSS

2.1. Exemplu. Diferite stiluri de design de chenar-stil de chenar

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 cadre 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. Schimbați culoarea cadrului la trecerea mouse-ului

Acest exemplu este foarte simplu, dar interesant. Acesta arată cum puteți utiliza pseudoclasa :hover și chenarul CSS pentru a crea efecte simple(de exemplu, pentru un meniu).

Când treceți mouse-ul peste un bloc, culoarea cadrului se va schimba

Cam asa arata pe pagina:

2.3. Exemplu. Cum să faci o chenară transparentă

Cadrul poate fi transparent. Acest efect este rar, dar uneori poate fi foarte util pentru web designeri. Pentru a seta transparența, trebuie să utilizați setul de culori în forma RGBA (R, G, B, P), unde ultimul parametru setează transparența ( numar real de la 0,0 la 1,0)

Cam asa arata pe pagina:

3. Grosimea chenarului: proprietatea lățimii chenarului

Setează grosimea liniei. Anterior am cerut-o descriere unificată frontieră.

Sintaxă CSS de lățime a marginii

lățimea graniței: subțire | mediu | gros | sens;

• subțire - grosime linie subțire
• medie - grosime medie a liniei
• gros - grosime linie groasă

Mai jos sunt câteva exemple. Cel mai neobișnuit lucru va fi grosimea diferită a chenarului pe fiecare parte.

lățime margine: subțire

lățime margine: medie

lățime margine: gros

Grosimi diferite la margini

Cam asa arata pe pagina:

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 pe 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 un chenar în partea de jos ( linia 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 propriul cadru pentru fiecare direcție. Sintaxa este exact aceeași cu border.

Există și proprietăți

• border-top-color - setați culoarea chenarului superior
• border-top-style - setarea stilului chenarului superior
• border-top-width - setarea grosimii marginii superioare
• etc. pentru fiecare direcție

După părerea mea, este mai ușor să scrii totul pe 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

Cam asa arata pe pagina:

Exemplu de cadru citat

Notă
Puteți seta un chenar separat pentru fiecare parte.

5. Cum să adăugați mai multe chenare la un element html

Uneori trebuie să faci mai multe chenare. Să dăm un exemplu

5.1. Prima opțiune cu mai multe margini

Cam asa arata pe pagina:

Există o a doua cale prin umbrire.

5.2. Suprapuneți umbre pentru a crea mai multe chenaruri

Cam asa arata pe pagina:

6. Rotunjirea colțurilor la margini (chenar-rază)

Pentru a crea rame frumoase folosiți proprietatea CSS chenar-rază(disponibil numai în CSS3). Poate fi folosit pentru a crea colțuri rotunjite, care creează un aspect complet diferit. De exemplu

7. Linie indentată CSS

Liniile apăsate pot arăta impresionant fundal întunecat, care nu este potrivit pentru fiecare site.

Cam asa arata pe pagina:

Pentru a accesa bordura din JavaScript, trebuie să scrieți următoarea construcție:

document.getElementById("elementID").style.border="VALOARE"

Bordurile sunt acele linii care înconjoară un element (conținutul pe care îl conține și umplutura din jurul acestuia). Un exemplu pe care l-am întâlnit deja sunt cadrele de celule din interiorul unui tabel.

CSS oferă două tipuri de margini: margini interioare și linii exterioare. Proprietăți CSS, responsabil pentru proiectarea cadrelor, începe cu cuvântul „border”, care poate fi tradus ca „Frame”, „Border”. Prezența și formatul conturului exterior sunt specificate de proprietăți care încep cu cuvântul „contur”. Contur, spre deosebire de chenar, nu afectează lățimea și poziția blocului încadrat. În plus, nu poate fi instalat doar pe o singură parte, așa cum frontieră- numai din toate părțile deodată.

Mai întâi, să vorbim despre designul graniței, apoi vom trece la contur.

lățimea graniței

Setează lățimea chenarului. Este clar că implicit elementul este înconjurat de rame pe patru laturi. Proprietatea vă permite să setați lățimea chenarelor fie aceeași pentru toate părțile, fie diferită pentru fiecare parte. În funcție de lățimea care trebuie alocată la care granițe, puteți specifica de la una până la patru valori în regulă.

Puteți seta lățimea fie folosind pixeli obișnuiți, procente și alte unități de lungime CSS, fie folosind cuvinte rezervate subţire(2px), mediu(4px) și gros(6px).

Lățimea chenarului: 16px 12px 4px 8px;

stil de bordura

Definește stilul de chenar. Rețineți că dacă nu setați această regulă, ci specificați proprietatea lățimea graniței, atunci nu vor fi deloc cadre, așa că dacă doriți chenare vizibile, asigurați-vă că specificați stil de bordura.

O proprietate poate avea destul de multe valori, toate fiind clar demonstrate în figura de mai jos.

Ultimul paragraf arată că stilul, ca și grosimea, al cadrului pe fiecare parte poate fi propriu:

stil de chenar: solid dublu punctat nici unul

chenar-culoare

Funcționează la fel ca și proprietățile anterioare, dar este responsabil pentru culoarea marginilor. De asemenea, îl puteți seta de la una la patru valori și știți deja rezultatul. Dacă regula nu este setată, cadrele vor avea culoarea textului elementului curent sau, dacă aceasta nu este specificată, culoarea textului elementului părinte.

Culoare chenar: #C85EFA;

frontieră

Ușurează scrierea și salvează codul, permițându-vă să setați toate proprietățile enumerate pentru chenarele de pe toate părțile unui element într-o singură linie:

P (chenar: 2px verde continuu; )

Pentru setari reguli diferite rame cu laturi diferite pot fi utilizate următoarele valori:

• border-top- Limita superioară.
• granita-dreapta- dreapta.
• marginea-de jos- inferior.
• granița-stânga- stânga.

P (chenar-stânga: 6px galben punctat; )

lățime-contur

La fel ca lățimea graniței, numai pentru extern, nu cadru interior. Setează grosimea conturului în aceleași valori ca lățimea graniței. Pe lângă grosimea cadrului elementului, trebuie să specificați stilul acestuia, altfel nu va exista un contur.

stil de contur

Valorile proprietăților dublează valorile stil de bordura. Regula specifică stilul conturului exterior.