Cascading Style Sheets

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 XHTML, XML și SVGL. CSS este una dintre tehnologiile de bază utilizate în procesul de dezvoltare web, împreună cu HTML și JavaScript.

CSS permite separarea și prezentarea vizuală a conținutului unei pagini web, inclusiv culorile și fonturile disponibile. 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.

Vezi și 
 Listă alfabetică de limbaje de programare

Bibliografie

 Jeffrey Zeldman (2009): Designing With Web Standards, New Riders, ISBN 978-0321616951 (paperback) (book's companion site)
 Dan Cederholm (2009): Web Standards Solutions, The Markup and Style Handbook, Friends of Ed, ISBN 978-1430219200 (paperback) (Author's site )
 
 More Eric Meyer On CSS (2004) ISBN 0-7357-1425-8
 Eric Meyer On CSS (2002), ISBN 0-7357-1245-X
 Meyer, Eric A. (2001) Cascading Style Sheets 2.0 Programmer's Reference, McGraw-Hill Osborne Media, ISBN 0-07-213178-0
 The Zen of CSS Design (2005) (co-authored by CSS Zen Garden Owner, Dave Shea, and Molly E. Holzschlag), ISBN 0-321-30347-4
 Kynn Bartlett: Teach Yourself CSS in 24 Hours, 2nd Edition (2006), Sams Publishing, ISBN 978-0672329067
 Cascading Style Sheets: Designing for the Web  (2005) by Håkon Wium Lie and Bert Bos, ISBN 0-321-19312-1
 Cascading Style Sheets Cascading Style Sheets, PhD thesis, by Håkon Wium Lie – provides an authoritative historical reference of CSS
 Cascading Style Sheets: Separating Content from Presentation, (co-authored by Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson), Friends of Ed (2004), ISBN 978-1590592311
 Keith Schengili-Roberts (2003): Core CSS, 2nd Edition, Prentice Hall, ISBN 0-13-009278-9
 On the Analysis of Cascading Style Sheets, Pierre Geneves, Nabil Layaida, and Vincent Quint, Proceedings of the 21st International Conference on World Wide Web (WWW'12), p. 809–818, 2012.

Note

Legături externe

 CSS home page at W3C – Includes links to the CSS specifications.
 
 Tutoriale animații folosind CSS3  
 Tutorial tehnica tipografica folosind CSS3  

HTML
Standarde W3C
Web design