CSS. Sintaxă. Proprietăți elementare
Linkuri utile:
CSS - Prezentare generală
Margini, Campuri, Spatieri, Dimensiuni (Width, Height)
CSS
Studiind această temă vei fi capabil:
- Să identifici modurile fundamentale utilizate în foile de stil cascadă
- Să aplici modurile inline și înglobat asupra elementelor HTML îmbinând proprietăți elementare ca: background, color, font-size, stiluri de afișare(bold, italic, underline), align.
- Să creezi un document HTML simplu unde să fie utilizate diferite efecte de aspect
- Să argumentezi avantaje / dezavantaje pentru modurile de definire inline și înglobat
Stilurile se folosesc pentru a crea diferite efecte de aspect pentru document. Prin stil se subînţelege un ansamblu de proprietăți, care pot fi atribuite unui fragment de document.
Aspectul documentului poate fi modificat în mod implicit cu ajutorul etichetei <font> şi a atributelor etichetelor <p>, <body>, <H*> etc. Această modalitate nu este foarte comodă, deoarece ori de cîte ori se doreşte formatarea unui text trebuie să definim din nou toate caracteristicele care formează aspectul necesar.
Să analizăm unele etichete standard. Atenție, stilul de afișare a etichetelor poate să difere, uneori neesențial, în dependență de browserul și mărimea ecranului dispozitivului care se utilizează.
h1. Gimnaziul CiuciuieniSintaxă: <h1>Un careva text</h1> |
36px |
h2. Gimnaziul CiuciuieniSintaxă: <h2>Un careva text</h2> |
30px |
h3. Gimnaziul CiuciuieniSintaxă: <h3>Un careva text</h3> |
24px |
h4. Gimnaziul CiuciuieniSintaxă: <h4>Un careva text</h4> |
18px |
h5. Gimnaziul CiuciuieniSintaxă: <h5>Un careva text</h5> |
14px |
h6. Gimnaziul CiuciuieniSintaxă: <h6>Un careva text</h6> |
12px |
Aşa cum într-un document se pot utiliza mai multe stiluri şi browser-ul crează o "ordine" (numită cascadă) pentru a le interpreta, în uz a fost introdus termenul Foi de stil in cascadă (CSS - Cascading Style Sheet).
Foile de stil în cascadă pot fi utilizate în cîteva moduri fundamentale:
-
Inline
Folosirea inline a stilurilor se realizează cu ajutorul atributului STYLE, care poate fi scris în interiorul majorităţii etichetelor.
<p style="color:red">Un careva text plasat în paragraf</p>
<p style="color:green; font-style: italic;">Un careva text plasat în paragraf cu stil de afișare italic</p>
<h3 style="color:orange">Un careva text plasat în H3</h3>Un careva text plasat în paragraf
Un careva text plasat în paragraf cu stil de afișare italic
Un careva text plasat în H3
-
Înglobat
Utilizarea acestui mod de stilizare are efect pentru fiecare tip de element: paragraf, nivel de titlu (h1, h2 ș.a), a textului de bază ș.a. Pentru definirea unui tip globalizat, se folosește de regulă etichetele STYLE care se scriu de regulă în tag-ul HEAD.
<html>
<head>
....
<style type = ”text/css”>
p {color: green; font-size: 12pt}
h1 {color: red; font-size: 18pt}
h2 {color: blue; font-size: 15pt}
</style>
</head>
<body> ....
<p>Un paragraf</p>
<h1>Text-nivel de titlu 1</h1>
<h2>Text-nivel de titlu 2</h2>
<p>Un alt paragraf</p>
...
</body>
</html>Un paragraf
Text-nivel de titlu 1
Text-nivel de titlu 2
Un alt paragraf
-
Extern (sau legat)
În cazul definirii stilurilor externe, vom crea fișiere cu extensia *.css. Acest tip de definire permite a realiza o claritate în documentele HTML. Sintaxa conținutului fișierului / fișierelor de tip css este similară celei utilizate în STYLE. Pentru a folosi stilurile externe, vom utiliza eticheta LINK în interiorul tag-ului HEAD cu următoarele atribute:
- rel="stylesheet"
- href="url adresa către fișierul de tip css"
- type="text/css"
Pentru a utiliza fișierul de tip CSS este necesar să efectuăm următorii pași:
- Creem un fișier cu extensia css în dosarul proiectului nostru (unde se află documentele noastre HTML). Deobicei, toate fișierele externe sunt create într-un subdirectoriu cu nume sugestiv.
- Scriem câteva stiluri în fișierul creat. Nu e neapărat să fie scrise toate stilurile necesare - putem reveni la modificarea acestor stiluri ori de câte ori avem nevoie.
- Conectăm în documentul / documentele HTML în care avem nevoie
p {color: green; font-size: 12pt}
h1 {color: red; font-size: 18pt}
h2 {color: blue; font-size: 15pt}<html>
<head>
<link rel="stylesheet" href="stiluri.css" type="text/css"> </head>
<body>
<p> Un paragraf</p>
<h1>Text-nivel de titlu 1</h1>
<h2>Text-nivel de titlu 2</h2>
</body>
</html>Un paragraf
Text-nivel de titlu 1
Text-nivel de titlu 2
Un alt paragraf