HTML - OPŢIONAL

CSS

CSS-uri
CSS înseamnă Cascading Style Sheets aică Foi de Stil in Cascada. CSS-ul ne permite să aplicăm stiluri diferite, pe bucati separate de cod HTML, folosind numele tag-ului, ID-uri sau clase de stiluri, definite de noi. Acest lucru se face folosind selectorii CSS. CSS-ul se bazează pe tagurile din codul HTML, care au ID-uri sau clase. Singura diferenţă între o clasa si un ID este aceea ca un ID se referă la un singur tag (definit de acel ID), pe când o clasă se poate aplica la mai multe taguri. Dacă folosiţi în foaia de stil numele unui tag, atunci acel stil se va plica la toate tagurile de acel tip din pagină. Ex: p /* va fi aplicat tuturor paragrafelor */ p.ceva /* va fi aplicat tuturor paragrafelor din clasa "ceva" */ p#ceva /* doar paragrafului cu ID-ul "ceva" */ .ceva /* tuturor tagurilor din clasa "ceva" */ #ceva /* doar tagului cu ID-ul "ceva" */ Din punct de vedere al locului unde se declară avem: stil în linie, stil în foaia internă şi stil în foaia externă. În linie: <p style="color: green;">Text verde</p> Stiluri interne <head> <title>titlu pagina</title> <style type="text/css"> Aici se definesc stilurile CSS </style> </head> Stiluri scrise într-o pagină externă (aceasta trebuie salvată cu extensia .css) <link rel="stylesheet" type="text/css" href="Calea catre fisierul.css" /> Sau există şi opţiunea de import style type="text/css">@import url( Calea catre fisierul.css )</style> se introduc în secţiunea head <head> <title> titlu pagina </title> <link rel="stylesheet" type="text/css" href="stil.css" /> </head> Avantajul unei astfel de utilizări pentru stiluri şi anume (externă) este aceea că atunci când dorim să aducem o modificare unui stil acesta se face într-un singur loc şi nu în fiecare pagină ca la cele definite intern. În stabilirea formatelor pentru text în ceea ce priveşte textul putem întâlni:
<style type="text/css"> <!— .text{ color:red;} --> </style>

line-through(taiat) text-indent distanta primului rând faţă de marginea din data in puncte(pt). groove. justify text-decoration evidenţierea textului none(nimic). solid.4 mm. italic(cursiv). pixeli (px) margin-right distanţa faţă de marginea din dreapta a dată în puncte (pt). pixeli (px) font-style stil text normal. underline(subliniat). light. right(dreapta). extra-bold line-height distanţa între liniile de bază ale rândurilor dată în puncte (pt). dotted.HTML . inch (in). bold. inch (in). paginii centimetri (cm). inset. inch(in). inch (in). pixeli (px). demi-bold. procent (%) margin-left distanţa faţă de marginea din stânga a data in puncte (pt). pixeli(px) border-style tipul chenarului none. inch(in). pixeli(px) border-color culoarea chenarului nume sau valoare RGB 72 pt=1 inch = 25. pixeli (px) text-align alinierea textului left(stanga). dashed. centimetri (cm). centimetri(cm). ridge. inch(in). centimetri paginii (cm). stânga centimetri(cm). marginea de sus a paginii centimetri (cm). italic font-weight grosimea fonului extra-light. centimetri (cm). un font de dimensiunea 10pt inseamna ca sunt 10 puncte între partea superioară a literei N sau h si partea inferioara a literei y sau j Element color font-family Descriere culoarea textului tipul fontului . medium.OPŢIONAL CSS Cum se utilzează nume sau valoare rgb numele fontului sau al familiei de fonturi font-size dimensiunea fontului dată în puncte (pt). pixeli (px) margin-top distanţa faţă de textul precedent sau fata de dată în puncte (pt). center(centru). outset border-width grosimea chenarului dată în puncte(pt). inch (in). double.

text-align:left. font-style:normal. font-size:medium. border-color:red. font-style:normal. font-size:large. font-weight:200.HTML . line-height:100%. color:green. text-indent:4cm. font-size:medium. font-style:italic. } . font-weight:100. font-stile:normal. font-style:normal.text1_formatat{font-family:Tahoma. text-align:center. font-size:50 pt. text-indent:4cm. margin-left:3cm. border-style:solid.css – un fişier în care am creat câteva stiluri stiluri .text2_formatat{font-family:Tahoma. margin-right:3cm. } . } . } #albastru{color:blue} descriere . line-height:100%. font-weight:medium.h1_formatat{font-family:Arial. } .OPŢIONAL CSS Exemplu fişier stiluri. text-align:left. font-weight:medium.text_formatat{font-family:Arial. font-weight:bold. margin-left:3cm.text3_formatat{font-family:Tahoma. margin-right:3cm. font-size:medium. color:red.

Acest lucru se face folosind selectorii CSS. folosind numele tag-ului. CSS-ul ne permite să aplicăm stiluri diferite.</p> <p class="text3_formatat"> CSS-ul ne permite să aplicăm stiluri diferite. Acest lucru se face folosind selectorii CSS. ID-uri sau clase de stiluri.</p><br> <p class="text1_formatat">Un alt paragrafcaruia i s-a atasat si culoare. CSS-ul ne permite să aplicăm stiluri diferite. pe bucati separate de cod HTML.</p> <p id="albastru">Din nou un paragraf albastru!</p> </body> </html> . folosind numele tag-ului.</h1> <p class="text_formatat">Un texte cu stil din fisier. definite de noi.</p> <p>Un paragraf scris obisnuit. atunci acel stil se va plica la toate tagurile de acel tip din pagină.</p> <p class="text2_formatat"> CSS-ul ne permite să aplicăm stiluri diferite.</p> <h1>Urmeaza un paragraf nou in care se apeleaza din nou text2_formatat</h1> <p class="text2_formatat">CSS-ul se bazează pe tagurile din codul HTML.</p> <p id="albastru">Un paragraf colorat in albastru.css"> </head> <body> <center><h1> Texte formatate cu stiluri</h1></center> <h1 class="h1_formatat"> Un nou titlu cu css. folosind numele tag-ului. ID-uri sau clase de stiluri. Singura diferenţă între o clasa si un ID este aceea ca un ID se referă la un singur tag (definit de acel ID). Acest lucru se face folosind selectorii CSS. definite de noi. definite de noi.OPŢIONAL CSS Exemplu fişier care apelează un fişier cu stiluri definite 1_apel_stil. pe bucati separate de cod HTML. care au ID-uri sau clase. folosind numele tag-ului. Acest lucru se face folosind selectorii CSS. definite de noi. ID-uri sau clase de stiluri.HTML . pe bucati separate de cod HTML. pe bucati separate de cod HTML. pe când o clasă se poate aplica la mai multe taguri. ID-uri sau clase de stiluri.Dacă folosiţi în foaia de stil numele unui tag.html <html> <head> <link rel="stylesheet" type="text/css" href="stiluri.

Sign up to vote on this title
UsefulNot useful