css_____cascading_style_sheets.ppt
TRANSCRIPT
CSS – Cascading Style Sheets (foi de stil în cascadă)
Stiluri
Stil-mod de a scrie un bloc de text, cu posibilitatea de a defini de la început toate formatările necesare
Folosit pentru îmbunătăţirea aspectului unei pagini Web
AVANTAJE: Economie de timp Uşor de modificat Sunt aplicate în mod unitar Pot fi aplicate mai multor pagini web Oferă posibilităţi de formatare suplimentară faţă de HTML şi
cu o mai mare precizie
O foaie de stil conţine un set de reguli. Regula se compune din selector şi declaraţie.
Declaraţianume_proprietate : valoare_proprietate;
Unde: nume_proprietate este un cuvânt rezervat care defineşte
proprietatea valoare_proprietate este o valoare validă pentru proprietatea
respectivă. Ex:
font-size:12pt;color:red;font-style:italic;
Blocuri de declaraţii
O lista de declaraţii separate de ; inclusă între { }.
Ex:{ font-size: 12pt; font-style: italic; }{ color: red; text-transform: uppercase; }
Selectorii de tip (stiluri dedicate)
Selectorii de tip sunt de fapt etichete HTML. Regulile definite se vor aplica tuturor etichetelor HTML de un anumit tip folosite în cadrul sursei HTML.
Ex:p { font-size: 12pt; font-style:italic;}orice text cuprins intre etichete p va fi italic, de 12 puncte
Stilurile se aplică doar asupra blocurilor de text încadrate de etichetele pentru care sunt definite
Zone de definire a stilurilor
Aplicarea stilurilor asupra unei pagini web se poate face în 3 moduri (zone):Formatare locală (in-line)Formatare în zona head a fişierului HTML
(în antet) Includerea elementelor de formatare CSS
într-un fişier extern de tip .css (extern)
Formatarea locală (in-line)
prin inserarea în cadrul orcărei etichete de deschidere HTML, a atributului style, căruia i se ataşează elementele css. Ex:<body style=“font-weight:bold; color:red;”>
Valoarea lui style este o listă de declaraţii separate prin ; şi cuprinsă între “ ”
Atributul style poate fi adăugat aproape oricărui element HTML (excepţie fac: BASEFONT, HEAD, HTML, META, SCRIPT, STYLE, TITLE)
Formatare în zona head a fişierului HTML
Se face prin definirea elementelor de stil între perechea de etichete <style> … </style>. ex:<head><style type=“text/css”><!- -H1{font-size:17px;color:#FFFFFF;}- -></style>}</head>
Observaţie – pentru browserele de tip vechi este indicată izolarea conţinutului din blocul <style> între comentarii
Type este un atribut obligatoriu, cu valoarea “text/css”, precizând sintaxa folosită pentru definirea regulilor
Fişier extern .css În acest caz toate definiţiile de stil sunt inserate într-un
fişier distinct faţă de fişierul HTML în care vor fi apelate stilurile.
Acest fişier poate fi generat şi editat cu Notepad (sau orice editor HTML), salvarea lui făcându-se cu extensia .css
Conţinutul acestui fişier coincide cu conţinutul unui bloc <style>, însă fără ca aceşti delimitatori să fie incluşi
Pentru a putea apela în orice fişier HTML stilurile dintr-un fişier css, este necesară crearea unei legături între cele două. Această legătură se face între etichetele <head>..</head> folosind următoarea linie:<link rel=“stylesheet” type=“text/css” href=“numefisier.css”>
În cadrul fişierului HTML apelarea unei definiţii de stil se face ca şi cum aceasta ar fi definită în fişierul html curent, într-un bloc <style></style>
Selectorul CLASS
Permite definirea unui stil general şi folosirea lui oriunde este necesar
Se foloseşte atributul class care ia ca şi valoare numele clasei de stil. Se poate aplica în orice eticheta de deschidere HTML
Ex:.textBold{font-weight:bold; font-size:14px;}utilizarea clasei<p class=“textBold”>bloc de text </p>