Css

CSS
pe scurt ...
Cascading Style Sheets

CSS se ocupa in general cu aspectul si controlul grafic al
elementelor din pagina, cum ar fi: textul, imaginile, fondul,
culorile si asezarea acestora in cadrul ferestrei paginii.CSS
foloseste stiluri, acestea inglobeaza, sub un anumit nume,
atribute de formatare care se aplica asupra unui element
individual din pagina, asupra unui grup de elemente sau la
nivelul intregului document.CSS functioneaza cu HTML, insa nu
este HTML. El extinde functionalitatile HTML, permitand
redefinirea etichetelor HTML existente.Prin utilizarea CSS
aspectul documentului pe ansamblu, sau a unui element
individual din interiorul sau, poate fi controlat mult mai usor.
Stilurile pot fi aplicate asupra unui element, a unui document
sau chiar asupra unui intreg site web.
EDUARD STOICA
CUPRINS
Etichete HTML si stiluri CSS

Definirea selectorilor
Coduri CSS
Etichete HTML si stiluri CSS

CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin stabilirea unui anume stil in interiorul ei,
cu atributul "style". Acest lucru este util mai ales pentru a anula alte stiluri ale elementului respectiv sau de a da
elemente grafice de stil doar etichetei respective.
Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:
<eticheta style="proprietate:valoare;"> text ... </eticheta>
CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli trebuie scris in sectiunea
de antet (head) a documentului, in cadrul tag-ului <style>.
Sintaxa pentru definirea CSS intr-un document HTML, in interiorul etichetei <head> </head>, este urmatoarea:
<style type="text/css">
selector_1 {proprietate1:valoare1; proprietate2:valoare2; ... }
selector_n {proprietate1:valoare1; proprietate2:valoare2; ... }
</style>
Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei pagini.
Iata un exemplu practic de cod css:
h1 { font-family:Arial; font-size:15px; font-weight:bold; color:#1111ff; }
p {font-family:Arial; font-size:12px; color:blue; }
</style>
Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. Astfel, trebuie creata o foaie de
stil externa intr-un fisier separat, de preferat cu extensia ".css", care poate fi inclus in pagina HTML prin doua
procedee: legatura sau import.
Crearea unei foaie de stil externe se face scriind codul CSS intr-un fisier text cu ajutorul unui editor de texte simplu
(de exemplu Notepad in Windows), sau specializat in acest sens (precum Notepad++). In fisierul extern creat se
adauga reguli CSS, fara insa ca aceste reguli sa fie incadrate in etichete STYLE.
Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosita de un document HTML utilizand urmatoarea
sintaxa, in interiorul tag-ului <head> </head>:
<link rel="stylesheet" href="nume_fisier.css" type="text/css">
Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite transmit navigatorului tipul de
legatura ("rel" legatura cu o foaie de stil, "type" - tipul codului din fisier) si locatia inspre fisierul ce contine codul
CSS ("href" calea si numele complet al fisierului, inclusiv extensia).
O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta importul acestora folosind
comanda @import.
Sintaxa pentru importul unei foi de stil externe este urmatoarea:
@import url(nume_fisier.css);
</style>
Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului HTML eticheta STYLE. In
cadrul acestei etichete este adaugata instructiunea "@import" de mai sus, unde "nume_fisier.css" reprezinta calea si
numele fisierului ce contine regulile CSS definite.
Alaturi de instructiunea "@import", in cadrul etichetei STYLE, pot fi adaugate definiti si selectori suplimentari.
Legatura la un fisier CSS extern sau importul acestuia intr-un document HTML are acelasi efect ca si cum stilurile
incluse ar fi fost definire direct in eticheta STYLE din sectiunea HEAD a documentului HTML.
Definirea selectorilor
Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu eticheta HTML la care se refera,
avand urmatoarea forma generala:
selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ... }
Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor fi modificate automat.
Prin redefinirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se adauga altele noi.
Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care se pot aplica doar acelor elemente
care sunt etichetate cu clasa respectiva. Sintaxa generala de definire a unei clase CSS este:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate fi folosita doar cu
eticheta HTML respectiva. Pentru a defini o clasa care sa afecteze in mod direct un anume selector HTML, se
foloseste urmatoarea sintaxa:
selector_HTML .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase e recomandat sa fie diferit de
cuvantele rezervate JavaScript.
Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia sunt folositi pentru crearea de stiluri
care pot fi atribuite unei singure etichete HTML dintr-o pagina. Sintaxa generala de definire a unui identificator este:
#identificator { proprietate1:valoare1; proprietate2:valoare2; ... }
Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o singura data in cadrul unei
pagini web pentru identificarea tag-ului respectiv, astfel poate fi manipulat si cu ajutorul functiilor JavaScript.
Numele unui identificator e recomandat sa fie diferit de cuvantele rezervate JavaScript.
CODURI CSS
Fundal
Proprietate
background
background-attachment
background-color
background-image
background-position
background-repeat
background-clip
background-origin
background-size
Descriere
Seteaz toate proprietile de fond ntr-o singur declaraie
Stabilete dac o imagine de fundal este fixa sau ruleaza cu restul paginii
Seteaz culoarea de fundal a unui element
Seteaz o imagine de fundal pentru un element. background-image: url('--------.---');
Seteaz poziia de pornire a unei imagini de fundal
Seteaz modul n care o imagine de fundal va fi repetat
Specific zona de pictura de fundal
background-clip: border-box|padding-box|content-box;
Specific zona de poziionare a imaginilor de fundal
Specific dimensiunea de imagini de fundal
Borduri
Proprietate
Descriere
border
Sets all the border properties in one declaration
border-bottom
Sets all the bottom border properties in one declaration
border-bottom-color
Sets the color of the bottom border
border-bottom-style
Sets the style of the bottom border
border-bottom-width
Sets the width of the bottom border
border-color
Sets the color of the four borders
border-left
Sets all the left border properties in one declaration
border-left-color
Sets the color of the left border
border-left-style
Sets the style of the left border
border-left-width
Sets the width of the left border
border-right
Sets all the right border properties in one declaration
border-right-color
Sets the color of the right border
border-right-style
Sets the style of the right border
border-right-width
Sets the width of the right border
border-style
Sets the style of the four borders
border-top
Sets all the top border properties in one declaration
border-top-color
Sets the color of the top border
border-top-style
Sets the style of the top border
border-top-width
Sets the width of the top border
border-width
Sets the width of the four borders
outline
Sets all the outline properties in one declaration
outline-color
Sets the color of an outline
outline-style
Sets the style of an outline
outline-width
Sets the width of an outline
border-bottom-left-radius
Defines the shape of the border of the bottom-left corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
border-image
A shorthand property for setting all the border-image-* properties
border-image-outset
Specifies the amount by which the border image area extends beyond the border
border-image-repeat
Specifies whether the image-border should be repeated, rounded or stretched
border-image-slice
Specifies the inward offsets of the image-border
border-image-source
Specifies an image to be used as a border
border-image-width
Specifies the widths of the image-border
border-radius
A shorthand property for setting all the four border-*-radius properties
border-top-left-radius
Defines the shape of the border of the top-left corner
border-top-right-radius
Defines the shape of the border of the top-right corner
box-shadow
Attaches one or more drop-shadows to the box
Dimensiuni
Property
height
max-height
max-width
min-height
min-width
width
Description
Sets the height of an element
Sets the maximum height of an element
Sets the maximum width of an element
Sets the minimum height of an element
Sets the minimum width of an element
Sets the width of an element
Font
Property
font
font-family
font-size
font-style
font-variant
font-weight
Description
Sets all the font properties in one declaration
Specifies the font family for text
Specifies the font size of text
Specifies the font style for text
Specifies whether or not a text should be displayed in a small-caps font
Specifies the weight of a font
Continut generat automat

Property
content
Description
Used with the :before and :after pseudo-elements, to insert generated content
Liste
Property
list-style
list-style-image
list-style-position
list-style-type
Description
Sets all the properties for a list in one declaration
Specifies an image as the list-item marker
Specifies if the list-item markers should appear inside or outside the content flow
Specifies the type of list-item marker
Margini
Property
margin
margin-bottom
margin-left
margin-right
margin-top
Description
Sets all the margin properties in one declaration
Sets the bottom margin of an element
Sets the left margin of an element
Sets the right margin of an element
Sets the top margin of an element
Spatiere (padding)
Property
padding
padding-bottom
padding-left
padding-right
padding-top
Pozitionare
Description
Sets all the padding properties in one declaration
Sets the bottom padding of an element
Sets the left padding of an element
Sets the right padding of an element
Sets the top padding of an element
Property
bottom
clear
clip
cursor
display
float
left
overflow
position
right
top
visibility
z-index
Description
Specifies the bottom position of a positioned element
Specifies which sides of an element where other floating elements are not allowed
Clips an absolutely positioned element
Specifies the type of cursor to be displayed
Specifies the type of box an element should generate
Specifies whether or not a box should float
Specifies the left position of a positioned element
Specifies what happens if content overflows an element's box
Specifies the type of positioning method used for an element (static, relative, absolute or fixed)
Specifies the right position of a positioned element
Specifies the top position of a positioned element
Specifies whether or not an element is visible
Sets the stack order of a positioned element
Tabel
Property
border-collapse
border-spacing
caption-side
empty-cells
Description
Specifies whether or not table borders should be collapsed
Specifies the distance between the borders of adjacent cells
Specifies the placement of a table caption
Specifies whether or not to display borders and background on empty cells in a table
Text Properties
Property
color
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
vertical-align
white-space
word-spacing
hanging-punctuation
punctuation-trim
text-align-last
text-justify
text-outline
text-overflow
text-shadow
text-wrap
word-break
word-wrap
Description
Sets the color of text
Specifies the text direction/writing direction
Increases or decreases the space between characters in a text
Sets the line height
Specifies the horizontal alignment of text
Specifies the decoration added to text
Specifies the indentation of the first line in a text-block
Controls the capitalization of text
Sets the vertical alignment of an element
Specifies how white-space inside an element is handled
Increases or decreases the space between words in a text
Specifies whether a punctuation character may be placed outside the line box
Specifies whether a punctuation character should be trimmed
Describes how the last line of a block or a line right before a forced line break is aligned
when text-align is "justify"
Specifies the justification method used when text-align is "justify"
Specifies a text outline
Specifies what should happen when text overflows the containing element
Adds shadow to text
Specifies line breaking rules for text
Specifies line breaking rules for non-CJK scripts
Allows long, unbreakable words to be broken and wrap to the next line

Css

Încărcat de

Informații document

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

Css

Încărcat de

Drepturi de autor:

Formate disponibile

CSS

Cascading Style Sheets

Etichete HTML si stiluri CSS

Etichete HTML si stiluri CSS

Continut generat automat

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