­čĹë CSS Ôם equaltozero.ro
­čĹë CSS Ôם equaltozero.ro - Agentie site-uri WEB si aplicatii WEB.
(last modified iunie 22, 2023)
de

CSS

CSS sau Cascading Style Sheets este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot ata╚Öa elementelor HTML prin intermediul unor fi╚Öiere externe sau ├«n cadrul documentului, prin elementul <style> ╚Öi/sau atributul style. CSS se poate utiliza ╚Öi pentru formatarea elementelor XHTMLXML ╚Öi SVGL.[1] CSS este una dintre tehnologiile de baz─â utilizate ├«n procesul de dezvoltare web, ├«mpreun─â cu HTML ╚Öi JavaScript.[2]

CSS permite separarea ╚Öi prezentarea vizual─â a con╚Ťinutului unei pagini web, inclusiv culorile ╚Öi fonturile disponibile.[3] Separarea elementelor unei pagini ├«mbun─ât─â╚Ťe╚Öte accesibilitatea paginii ╚Öi permite o mai bun─â flexibilitate ╚Öi un control ├«n specifica╚Ťiile caracteristicilor de prezentare.

CSS3

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte in webdesign.

Unele dintre cele mai importante segmente (module) noi ad─âugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil ├«n dezvoltarea activit─â╚Ťi webdesign.

Mai jos sunt prezente in list─â cele mai importante module ad─âugate in CSS3:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

De╚Öi au ap─ârut unele deficiente de compatibilitate intre browsere, majoritatea propriet─â╚Ťilor CSS3 au fost implementate cu succes in variantele browserelor noi.

CSS3 – Borduri

Acum CSS3 ofer─â posibilitatea de a crea borduri cu col╚Ťurile rotunjite far─â a folosi elemente grafice de fundal a╚Öa cum se folosea anterior acestui upgrade.

Proprietatea CSS3 border-radius define╚Öte prin valorile exprimate in pixeli cat de rotunjite vor fi col╚Ťurile unui element HTML sau unei imagini. Fiecare col╚Ť poate avea o alta valoare exprimat─â in pixeli diferit─â de un alt col╚Ť al aceluia╚Öi element. Prin urmare putem folosi pana la 4 valori diferite atribuite unui element HTML sau imagine.

Exemplu:

border-radius: 5px;

– define╚Öte valoarea de 5px radius pentru toate cele 4 col╚Ťuri ale elementului.

border-radius: 5px 7px 12px 4px;

– aceste valori multiple definesc cat de mult vor fi rotunjite col╚Ťurile elementului HTML, iar pentru fiecare colt este specificata valorarea. Col╚Ťul stanga-sus are valoarea border-radius de 5px, col╚Ťul dreapta-sus are valoarea border-radius de 7px, col╚Ťul dreapta-jos al elementului HTML are valoarea de 12px iar col╚Ťul din stanga-jos are valoarea de 4px.

CSS3 – Borduri Rotunjite – Optimizat

Varianta ne-comprimat─â sau ne-optimizat─â:

   border-radius-left: 5px;
   border-radius-right: 7px;
   border-radius-top: 12px;
   border-radius-bottom: 4px;
  

Varianta mimificat─â, compresat─â/optimizat─â:

border-radius: 5px 7px 12px 4px;

Ambele variante sunt corecte și acceptate de clientul browser.

CSS3 – Borduri Rotunjite – Compatibilitate Browser

Pentru compatibilitatea cu diferite browsere se folosesc prefixe: -webkit- , -moz- , -o-

Compatibilitate: Internet Explorer (IE) – 0.9 , Chrome folose╚Öte prefixul -webkit- pentru 4,0 , Firefox folose╚Öte prefixul -moz- pentru versiunea 3.0, Safari folose╚Öte prefixul -webkit- pentru versiunea 3.1, Opera 10.5 prefix -o-

Exemplu CSS3 border-radius:

div {
   border: 2px solid #333333;
   padding: 10px 40px; 
   background: #dddddd;
   width: 300px;
   border-radius:25px;
}

Elementul HTML div este definit de urmatoarele propriet─â╚Ťi CSS: dimensiunea in lungime este redat─â de valoarea in pixeli a propriet─â╚Ťii width, folose╚Öte o bordur─â de 2 pixeli, o bordur─â solid─â de culoare gri-inchis definit─â de caloarea HEX #333333. Culoarea de fundal este gri deschis definit─â de HEX #dddddd. Bordura rotunjit─â este de 25 pixeli pentru toate cele 4 col╚Ťuri.

Sursa: wikipedia

Default views: 263Social views: 0