Scribd
Încărcați
240 vizualizări13 pagini

Stiluri HTML

Încărcat de

tudor_tdh
Drepturi de autor
© Attribution Non-Commercial (BY-NC)
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
240 vizualizări13 pagini

Stiluri HTML

Încărcat de

tudor_tdh
Drepturi de autor
© Attribution Non-Commercial (BY-NC)
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 13

Capitoul 8 Stiluri HTML

Tag-urile de style
Tag <style> <link> <div> <span> <font> <basefont> <center> Descriere Definete o definire de stil Definete o resurs a unei referine Definete o seciune a unui document Defines a section in a document Depreciat. Se folosete styles Depreciat. Se folosete styles Depreciat. Se folosete styles

n capitolele anterioare am menionat faptul c n standardul HTML 4 se recomand iar n standardul XHTML se impune formatarea textului unui document html n afara sa cu ajutorul unei foi de stil. Declararea unui stil se poate face n trei moduri: n foaie extern documentului HTML n foaie intern n cadrul intruciunii html Foaia de stil extern utilizarea unei foi de stil externe (un fiier css) este util atunci cnd se dorete modificare formatrii unui sit ntreg. Practic orice modificare a unui stil n fiierul css duce la modificarea formatrii paginilor sit-ului cu condiia ca paginile sit-ului s fie legate de aceast foaie de stil. Fiecare pagin din sit se va lega de foaia de stil prin tag-ul <link> . Acest tag trebuie specificat n zona de head a fiecrei pagini care va folosi stilurile declarate n foaia de stiluri. Exemplu: <head> <link rel="stylesheet" type="text/css" href="silul_meu.css"> </head>

Foaia de stil intern Acest tip de foaie de stil se folosete atunci cnd stilul de formatare se va utiliza doar n cadrul unui singur document HTML. Ca i n cazul foii de stil

externe definirea unei foi de stil interne se face n seciune de head cu ajutorul tag-ului <style> Exemplu <html> <head> <style type="text/css"> body {background-color: #ff0000} h1 {font-face: Verdana} p {margin-left: 30px} </style> </head> <body> </body> </html> Declararea stilului n cadrul instruciunii html Acest tip de declarare se folosete doar n cazurile n care se dorete aplicarea stilului doar unei singure instruciuni html. Atributul style poate conine n acest caz orice valoare a unei proprieti CSS. <p style="color: red"> Propozitia mea </p> n continuare vom prezenta principalele elemente ale CSS

Ce este CSS?
CSS este prescurtatea de la Cascading Style Sheets (foi de stiluri cascadate) Stilurile definesc modul de afiare a elementelor HTML Stilurile sunt coninute n foi de stiluri - Style Sheets Stilurile au fost adugate n HTML pentru a rezolva o problem i anume separarea formei de coninut Foile de stil externe sunt salvate n fiiere CSS Definirea multipl de stiluri se va cascada n una singur. Problema pe care o rezolv utilizarea stilurilor de editare este faptul c se separ coninutul unui document HTML, marcat prin diverse tag-uri care l mpart n paragrafe, tabele, titluri etc., de forma sa. Pentru motoarele de cutare viitoare i chiar pentru web-ul semantic aceast separare este esenial. Astfel deja n standardul XHTML nu se mai accept tag-uri de formatare a textului cum ar fi <font> cu atributele sale de size, color,....

Problema formatrii externe a unui document HTML a fost rezolvat cu ajutorul CSS-urilor care sunt recunoscute deja de ctre Netscape Navigator 4 i IE 4. CSS-urile salveaz foarte mult munc. Dac dorii s modificai modul cum arat un sit ntreg este de ajuns s se modifice fiierul CSS. Ar fi foarte incomod s modificai de sute de ori tag-ul <font>

Ordinea de cascadare a stilurilor.


La nceputul acestui capitol am prezentat mai multe modaliti de a declara un stil: n cadrul unui tag, n partea de <head> a documentului, ntr-un fier extern CSS sau chiar n mai multe fiiere externe. Toate aceste stiluri se vor cascada ntr-unul nou, virtual dup urmtoarea regul unde 1 are cea miai mic prioritate iar 4 cea mai mare: 1. 2. 3. 4. Setri default ale browser-ului Foaie de stil extern - fiier CSS Foaie de stil intern declarare n interiorul tag-ului <head> Declarare n interiorul elementului HTML

Practic o declarare de stil n cardul unui element HTML va suprascrie orice stil declarat n partea de <head> i orice stil declarat ntr-un fiier extern CSS. n continuare ne vom ocupa de sintaxa declarrii unui stil i de tipurile de stiluri

Sintaxa CSS
Sintaxa CSS este alctuit din 3 pri: un selector o propietate o valoare atribuit propietii Mod de redactare: selector {propietate: valoare} Selectorul este de obicei chiar elementul/tag-ul HTML pe care dorim s-l definim Propietatea este atributul elementului HTML pe care dorim s-l modificm Valoarea propietii este chiar valoarea pe care dorim s o atribuim atributului elementului HTML

Trebuie s reinem faptul c n sintax propietatea este separat de valoare prin dou puncte. Dac o valoare este compus din mai multe cuvinte atunci n cadrul sintaxei acestea se pun ntre ghilimele. Dac se dorete stabilirea mai multor propieti pentru un singur selector acestea se vor separa cu punct i virgul Exemple: Ex1 body {color: red} Ex2 p {font-family: "sans serif"} font-family: verdana; color: green; text-align: right } Exemplul 1 stabilete pentru tag-ul <body> atributul color cu valoarea red adic textul delimitat de acest tag se va scrie cu culoarea roie Exemplul 2 stabilete pentru tag-ul de paragraph <p> atributul font-family cu valoarea sans serif adic textul delimitat de acest tag va fi scris utiliznd fontul sans serfi Exemplul 3 stabilete mai multe propieti pentru tag-ul <p>. Observm c acestea sunt separate de ; Ex3 p{

Gruparea selectorilor Selectorii pot fi grupai. Separarea lor se face cu virgul. Exemplu h1,h2,h3 { color: blue } Acest stil stabilete faptul c textul delimitat de cele 3 tag-uri <h1>, <h2> i <h3> se vor scrie cu culoare albstr. Selectorul de tip clas Cu acest tip de selector pot fi stabilite stiluri diferite pentru acelai tip de tag Exemplu: Dac am dori s avem dou tipuri de paragrafe: unul aliniat la centru iar cellalt aliniat la dreapta am proceda astfel: Pas 1 Ne declarm ambele stiluri cu ajutorul unui selector de tip clas astfel:

p.dreapta {text-align: right} p.centrat {text-align: center} Aceste clase (le numim astfel n continuare) vor trebui aplicate ca attribute paragrafelor. Afiarea ar fi astfel:

Codul surs ar arta astfel:


<html> <head> <title>Primul meu stil</title> <style type="text/css"> p.centrat {text-align:center} p.dreapta{text-align:right} </style> </head> <body> <p class="centrat">Ttilul meu</p> <p class="dreapta">Data 08.08.2008 </p> <p>care trebuie sa fie aliniata la dreapta </p> </body> </html>

Ceea ce este foarte important este faptul c ulterior se mai pot face modificri iar acestea se vor face n toate paragrafele care au ca atribut clasa respectiv. ATENIE: Un element HTML poate primi un singur atribut class. n declararea unui selector de clase se poate omite numele tag-ului, selectorul fiind acum unul general

Exemplu:

Codul surs arat astfel:


<html> <head> <title>Primul meu stil</title> <style type="text/css"> .centrat {text-align:center} p.dreapta{text-align:right} </style> </head> <body> <p class="centrat">Ttilul meu</p> <p class="dreapta">Data 08.08.2008 </p> <p>care trebuie sa fie aliniata la dreapta </p> <h1 class="centrat">un bla bla declarat cu h1 scris centrat;</h1> </body> </html>

Observaie: Nu s-a modificat modul de afiare a primului paragraf.

Proprietile CSS pentru background (fundal)


Aceste poprieti definesc modul de afiaj al funadlului unui element html.

n tabelul de mai jos n coloana a doua sunt trecute cu bold valorile explicite care pot fi atribuite proprietilor din prima coloan. Proprietate Valoare Scurt descriere background background-color background-image background-repeat background-attachment background-position O proprietate cu care se pot seta toate valorile de background

background-attachment scroll fixed

Stabilete faptul c o poz de pe fundal rmne fix sau se mic odat coninutul Seteaz culoarea de fundal a unui element HTML Seteaz o imagine pe fundalul elementului HTML Seteaz locul de unde ncepe poziionarea pozei de pe fundal

background-color

color-rgb color-hex color-nume transparent url none top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos repeat repeat-x repeat-y no-repeat

background-image

background-position

background-repeat

Seteaz modul cum/dac se repet o imagine pe fundal

Exemple: 1. Stabilirea unor fundaluri.. Codul surs:


<html>

<head> <title>Alt stil</title> <style type="text/css"> body{background-color:#CCCC00} .centrat {text-align:center} p.dreapta{text-align:right} h1{background-color:#3300FF} </style> </head> <body> <p class="centrat">Ttilul meu</p> <p class="dreapta">Data 08.08.2008 </p> <p>care trebuie sa fie aliniata la dreapta </p> <h1 class="centrat">un bla bla declarat cu h1 scris centrat;</h1> </body> </html>

n browser arat astfel: (nu am ales culori care s se potriveasc)

2. Imagine pe fundal i repetarea ei doar pe axa x


<html> <head> <title>Untitled Document</title> <style type="text/css"> body {background-image:url(04.gif); background-repeat:repeat-x} </style> </head> <body> </body> </html>

Arat astfel:

3. Toate proprietile ntr-o singur declaraie


<html> <head> <title>Untitled Document</title> <style type="text/css"> body {background:url(04.gif) #003366 repeat-x } </style> </head> <body> </body> </html>

Proprietile CSS pentru text


Cu aceste proprieti se pot modifica: modul cum se afieaz textul, distana dintre caractere, dintre cuvinte etc. Proprietate color direction Valori color ltr rtl normal length left right center justify none underline overline line-through blink Lungime px % none capitalize uppercase lowercase normal length Descriere Seteaz culoarea unui text Seteaz direcia de scriere ltr=stnga la dreapta rtl=dreapta la stnga Mrete sau micoreaz spaiul dintre litere Aliniaz textul dintr-un lelement html

letter-spacing text-align

text-decoration

Adaug decorri textului

text-indent text-transform

Indenteaz prima linie dintr-un element HTML Controleaz modul de afiare a literelor unui text: cu MAJUSCULE ..... Mrete sau micoreaz spaiul dintre cuvinte

word-spacing

Exemple: 1. Mrirea spaiului dintre litere: n pixeli i centimetri


<html> <head> <title>CSS Text</title> <style type="text/css"> h1 {letter-spacing:10px} h2{letter-spacing:1cm} </style> </head> <body> <h1>Primul titlu</h1> <h2>Al doilea titlu</h2> </body> </html>

Proprietile CSS pentru fonturi


Proprietate font Valori font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar family-name generic-family Descriere O proprietate cu care se pot defini ntr-o singur declaraie toate proprietile fontului

font-family

O list de nume de fonturi care se vor utiliza dac exist pe maina pe care ruleaz browserul n ordinea stabilit Seteaz dimensiunea fontului

font-size

xx-small x-small small medium large x-large xx-large smaller larger mrime % normal wider

font-stretch

Specific modul de condensare a textului

narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded font-style normal italic oblique normal small-caps normal bold bolder lighter 100 200 300 400 500 600 700 800 900 Seteaz stilul de scriere

font-variant font-weight

Afieaz textul cu CAPITALE MICI sau normal. Seteaz grosimea fontului

Exemplu: 1. Setarea tipului de font, fel, mrime


<html> <head> <title>Untitled Document</title> <style type="text/css"> p{ font-family:Verdana, Arial, Helvetica, sans-serif; font-variant:small-caps; font-size:small} </style> </head> <body> <p> Textul Meu</p> </body> </html>

S-ar putea să vă placă și