Regulile Css
4. Regulile CSS
CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML și se folosește pentru a personaliza tag-urile 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.
Documentele cu extensia .css definesc cum să fie afișate elementele HTML/XML. Ele au fost adăugate în HTML 4.0 pentru a rezolva problema separării structurii de prezentare.
Avantajele utilizării regulilor CSS:
îmbunătățirea accesibilității conținutului
control și flexibilitate în specificarea caracteristicilor prezentaționale
pagini multiple pot utiliza aceeasi formatare
reducerea complexității și a repetițiilor în conținutul structurat
permite utilizarea de stiluri diferite pt. același document markup (în print, on-screen, by voice)
permite afișarea documentului diferit in funcție de dimensiunea display-ului sau de device
permite definirea de către utilizatori a unor stiluri customizate
4.1. Standardizarea CSS
CSS Level 1 (Recomm. 1996)
Se definesc proprietățile următoarelor elemente: fonturi, culoare, atribute text (spațiere cuvinte, litere, linii de text), aliniere, margini, borders, poziționare, identificarea unică, și clasificarea generică a grupurilor de atribute.
CSS Level 2 (Recomm. 1998)
Se dezvoltă poziționarea absolută, relativă, fixă, z-index, tipuri media (aural, speech), text bidirecțional, proprietăți noi pt. fonturi (shadow).
CSS Level 2.1 (Recomm. 2011)
Tratează erorile din CSS 2 (eliminarea unor elemente non-interoperabile, adăugarea extensiilor la standard deja implementate de browsere)
CSS Level 3
Apare modularizarea, care aduce peste 50 module cu diferite status-uri. Apar următoarele noutăți: selectors, Box Model, Backgrounds and Borders noi, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout, User Interface
CSS Level 4
Apar câteva module de level 4, de exemplu Image Values, Backgrounds & Borders, Selectors și FlexBox.
Sintaxa de baza a unei reguli CSS:
selector {
property: value;
property: value;
…
property: value;
}
Varianta cea mai folosită de CSS este cea a treia, CSS3. Ea reprezintă un upgrade care aduce câteva atribute noi și ajută la dezvoltarea noilor concepte în webdesign.Unele dintre cele mai importante segmente (module) noi adăugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil in dezvoltarea activități webdesign. Cele mai importante modulele adăugate în CSS3 sunt:
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 între browsere, majoritatea proprietăților CSS3 au fost implementate cu succes în variantele browserelor noi.
4.2. Reguli CSS
O foaie de stil constă în una sau mai multe reguli, fiecare regulă începe cu un selector ce specifică un element HTML căruia îi aplică proprietăți de stil.
Pentru atașarea unui fișier CSS se folosește tag-ul <link>. Tag-ul <link> apare în interiorul elementului <head> și se pot lega mai multe foi de stil.
Fig.4.2.1. Folosirea tag-ului <link>
Pentru încorporarea foilor de stil se utilizează tag-ul <style>.
Fig. 4.2.2. Folosirea tag-ului <style>
4.2.1. Gruparea stilurilor:
Un stil poate selecta mai multe elemente separate prin virgulă. Proprietățile specificate vor fi aplicate tuturor elementelor elementele pot avea si stiluri individuale (ex. h2)
Fig.4.2.1.1. Exemplu pentru gruparea stilurilor
Gruparea elementelor de selecție
Elementele de selecție pot fi grupate cu scopul de a reduce mărimea și redundanța unei foi de stil, elementele fiind separate prin virgule.
Fig. 4.2.1.2 Exemplu pentru gruparea elementelor de selecție
Dacă se dorește să se adauge unui element particular alte modalități de formatare, se poate adăuga încă o regulă:
Fig. 4.2.1.3 Un alt exemplu pentru gruparea elementelor de selecție
4.2.2. 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:
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:
4.2.3 Elementele de selecție de tip id și class
Permit definirea de stiluri într-o manieră generală, același stil, putând fi aplicat unor elemente HTML diferite.
Elementul de selecție de tip id este utilizat pentru a specifica stilul pentru un singur element, în mod unic. Utilizează atributul id al unui element HTML.
Se definește prin intermediul construcției etichetă_html#nume_id { declarații_CSS }, stilul fiind aplicat elementului HTML cu eticheta etichetă_html și cu atributul id = nume_id (etichetă_html este opțional)
Fig. 4.2.3.1 Exemplu pentru folosirea elementului de selecție de tip id
Elementul de selecție de tip class este utilizat pentru a specifica stilul pentru un grup de elemente. Se utilizează atributul class al unui element HTML și se definește prin intermediul construcției etichetă_html.nume_class { declarații_CSS } , stilul fiind aplicat elementelor HTML cu eticheta etichetă_html și atributul class = nume_class (etichetă_html este opțional)
Fig. 4.2.3.2 Exemplu pentru folosirea elementului de selecție de tip class
Deci, selectorul class se folosește pentru:
definirea de stiluri diferite pentru același element
aplicarea mai multor clase aceluiași element
aplicarea unui stil pentru toate elementele HTML care au o anumită clasă
4.2.4 Cascadarea stilurilor
Este posibil ca pentru același element HTML să fie definite mai multe stiluri:
fișier .css
elementul <style>
atributul style
Ca urmare, documentul HTML va avea stilurile definite conform unei foi de stiluri virtuale obținute prin cascadarea definițiilor folosite:
Stilurile definite implicit de navigator – prioritate minimă
Stilurile definite prin fișier .CSS
Stilurile definite în elementul <style> (în interiorul elementului <head>)
Stilurile definite prin atributul style (aparținând unui element HTML din interiorul elementului <body>) – prioritate maximă
Dacă legătura către fișierul .css se află în document după elemental <style>, stilurile definite extern vor avea prioritate mai mare și vor suprascrie stilurile definite în interiorul elementului <style>.
Exemplu pentru cascadarea stilurilor
4.2.5 Definirea stilurilor pentru background:
4.2.6 Definirea stilurilor pentru text:
4.2.7 Definirea stilurilor pentru fonturi:
Definirea stilurilor pentru liste:
Copyright Notice
© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.
Acest articol: Regulile Css (ID: 150364)
Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.