Programare WEB: Lectia 4

Programare WEB
CSS
Lectia 4.
CSS
 Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de
personalizare a paginilor Web.
 Un stil reprezinta un mod de a scrie un bloc de text ( adica anumite

valori pentru font, marime culoare, aliniere, distante fata de margini
etc).
 Liste de stil sunt numite foi în stil cascade (Cascade Style Sheets -
CSS).
 Liste de stil permit centralizarea formatării informaţiei într-un loc.
 Pentru aplicarea stilului la un bloc de informaţie trebuie numai de

indicat denumirea stilului, - toate indicările de formatare a stilului vor
fi aplicate la acest bloc de text.
Creare css
 CSS pot fi create în interiorul paginii web

sau în fişier aparte.
Stilurile definite în interiorul paginii web
 Pentru crearea stilului se utilizează tegul
<style> conţinutul stilului </style>.
 La crearea stilului se îndică denumirea tegului,

parametrii care se cere de determinat, după aceasta se
îndică valorile acestor parametri.
 Valorile ale parametrilor, îndicate în stil, vor fi aplicate la

orice apariţia a tegului îndicat în codul paginii web.
 Exemplu:
<style>
H2 {text-align: center; font-style; italic}
</style>
Stiluri definite in fisiere externe
 Stilurile definite in interiorul unui bloc <style>...</style> pot fi transferate intr-
un fisier extern existand astfel posibilitatea utilizarii lor in mai multe fisiere
HTML.
Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel:

 Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza
cu extensia .css sau .html. Continutul acestui fisier coincide cu continutul
unui bloc <style>...</style> , fara ca acesti delimitatori sa fie inclusi.
 In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1 ,

se include in blocul <head>...</head> o eticheta <link>avand trei atribute.
 atributul rel cu valoarea "stylesheet"
 atributul href avand ca valoare adresa URL a fisierului creat la punctul
 atributul type cu valoarea "text/css".
 Exemplu:
< Link rel=’stylesheet’ type=’text/css’ href=’calea’ >
Obiectele (regulile) CSS
Exista trei tipuri principale de obiecte CSS:
 selector
 clasa
 identificator.
Selectorul HTML
 Selectorul HTML se foloseste pentru a redefini modul de
afisare a continutului etichetei HTML.
 Un selector HTML reprezinta partea etichetei HTML care
indica navigatorului tipul de eticheta.
Iata un exemplu:
 h1 { font-family:"Arial"; font-size:15px; }
 Aici selectorul este "h1".

Definirea unui selector HTML folosind CSS are ca
rezultat redefinirea etichetei HTML. Selectorul si eticheta
desi par identice, totusi nu sunt.
Clasa
 Clasa este un obiect care poate fi aplicat oricarei etichete HTML.
 O clasa trebue creata in interiorul etichetei HTML inainte de a fi definita intr-
un cod CSS.
 Crearea clasei in interiorul etichetei se face simplu, prin specificarea
cuvantului class si numele clasei, ca in exemplu de mai jos:
<h1 class="nume_clasa"> Text </h1>
 "nume_clasa", poate fi orice nume dorim.
In interiorul codului CSS, clasa este definita prin adaugarea unui caracter
punct (.) inaintea numelui clasei, ca in exemplu urmator:
.nume_clasa { font-family:"Arial"; font-size:15px; }
 Numele aceleasi clase poate fi atribuit mai multor etichete HTML din
aceeasi pagina.
Identificator
 Obiectele de tip identificator (ID) sunt asemanatoare cu
clasele. Pot fi aplicate oricarei etichete HTML, dar spre
deosebire de clase, numele unui identificator trebuie atribuit
numai unei singure etichete HTML dintr-o pagina.
Ca si clasa, identificatoru trebuie intîi creat in interiorul
etichetei HTML. Modul de creare este simplu, prin
specificarea cuvantului id si numele clasei, ca in exemplu
de mai jos:
<h1 id="nume_id"> Text </h1>
 "nume_id", poate fi orice nume dorim.
In interiorul codului CSS, identificatorul este definit prin
adaugarea unui caracter diez (#) inaintea numelui, ca in
exemplu urmator:
#nume_id { font-family:"Arial"; font-size:15px; }
Componentele unui obiect CSS
Obiectele CSS, indiferent de tipul lor, au in componenta
urmatoarele elemente:
 Selectorii - identifica un obiect; pot fi selectori de etichete
HTML, clase sau identificatori.
 Proprietatile - identifica o proprietate a obiectului; se refera
in special la aspect.
 Valorile - sunt atributele unei proprietati; pot fi cuvinte cheie,
valori numerice sau procentuale, tipul valorii depinzand de
proprietate.
Sintaxa generala a unei reguli CSS este urmatoarea:

selector {proprietate: valoare; }
Background Properties
 Background-Sets all the background properties in one declaration1
 background-attachment - Sets whether a background image is fixed

or scrolls with the rest of the page1
 background-color - Sets the background color of an element1
 background-image - Sets the background image for an element1
 background-position - Sets the starting position of a background

image1
 background-repeat - Sets how a background image will be

repeated1
Font Properties
 Font - Sets all the font properties in one
declaration1
 font-family - Specifies the font family for text1
 font-size - Specifies the font size of text1
 font-style - Specifies the font style for text1
 font-variant - Specifies whether or not a text
should be displayed in a small-caps font1
 font-weight - Specifies the weight of a font1
List Properties
 list-style - Sets all the properties for a list
in one declaration1
 list-style-image - Specifies an image as
the list-item marker1
 list-style-position - Specifies where to
place the list-item marker1
 list-style-type - Specifies the type of list-
item marker1
Positioning Properties
 Bottom - Sets the bottom margin edge for a positioned box2
 Clear - Specifies which sides of an element where other floating elements are not
allowed1
 Clip - Clips an absolutely positioned element2
 Cursor - Specifies the type of cursor to be displayed2
 Display - Specifies the type of box an element should generate1
 Float - Specifies whether or not a box should float1
 Left - Sets the left margin edge for a positioned box2
 Overflow - Specifies what happens if content overflows an element's box2
 Position - Specifies the type of positioning for an element2
 Right - Sets the right margin edge for a positioned box2
 Top - Sets the top margin edge for a positioned box2
 Visibility - Specifies whether or not an element is visible2
 z-index - Sets the stack order of an element2
Text Properties
 Color - Sets the color of text1
 Direction - Specifies the text direction/writing direction2
 letter-spacing - Increases or decreases the space between
characters in a text1
 line-height - Sets the line height1
 text-align - Specifies the horizontal alignment of text1
 text-decoration - Specifies the decoration added to text1
 text-indent - Specifies the indentation of the first line in a text-block1
 text-shadow - Specifies the shadow effect added to text2
 text-transform - Controls the capitalization of text1unicode-bidi 2
 vertical-align - Sets the vertical alignment of an element1
 white-space - Specifies how white-space inside an element is
handled1
 word-spacing - Increases or decreases the space between words in
a text1
CSS Pseudo-classes/elements
 :active - Adds a style to an element that is activated1
 :after - Adds content after an element2
 :before - Adds content before an element2
 :first-child - Adds a style to an element that is the first child of
another element2
 :first-letter - Adds a style to the first character of a text1
 :first-line - Adds a style to the first line of a text1
 :focus - Adds a style to an element that has keyboard input focus2
 :hover - Adds a style to an element when you mouse over it1
 :lang - Adds a style to an element with a specific lang attribute2
 :link - Adds a style to an unvisited link1
 :visited - Adds a style to a visited link
Cursor
 Auto - utilizeaza setarile implicite ale utilizatorului
 Crosshair - creeaza o cruce
 Default - setarile implicite ale browserului
 e-resize - sageata Est-Vest
 Hand – mana
 Help - semnul intrebarii
 Move - cruce cu sageti la capete
 n-resize - sageata sud-nord
 ne-resize - sageata SudVest – NordEst
 nw-resize - sageata SudEst – NordVest
 Pointer – mana
 s-resize - sageata Nord – Sud
 se-resize - sageata NordVest – SudEst
 sw-resize - sageata NordEst – SudVest
 Text - bara verticala campuri de introducere a datelor
 w-resize - sageata Est-Vest
 Wait - clepsidra

Programare WEB: Lectia 4

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Programare WEB: Lectia 4

Încărcat de

Drepturi de autor:

Formate disponibile

Programare WEB

 Un stil reprezinta un mod de a scrie un bloc de text ( adica anumite

 Liste de stil permit centralizarea formatării informaţiei într-un loc.

 Pentru aplicarea stilului la un bloc de informaţie trebuie numai de

 CSS pot fi create în interiorul paginii web

<style> conţinutul stilului </style>.

 La crearea stilului se îndică denumirea tegului,

 Valorile ale parametrilor, îndicate în stil, vor fi aplicate la

Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel:

 In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1 ,

Exista trei tipuri principale de obiecte CSS:

 Aici selectorul este "h1".

Sintaxa generala a unei reguli CSS este urmatoarea:

 background-attachment - Sets whether a background image is fixed

 background-color - Sets the background color of an element1

 background-image - Sets the background image for an element1

 background-position - Sets the starting position of a background

 background-repeat - Sets how a background image will be

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