Jump to content

Cascading Style Sheets - Notiuni De Baza


Recommended Posts

Posted

CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web.

Sintaxa CSS este structurata pe trei nivele:

nivelul 1 -proprietatile etichetelor din documentul HTML, tip inline

nivelul 2 -informatia introdusa in blocul HEAD, tip embedded

nivelul 3 - comenzile aflate in pagini separate, tip externe

Nivelul 1 - se afla in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:

<eticheta style=??€

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

Posted

Dupa cum spunea si @gaby CSS este pentru formatarea imaginilor, aduce o imbunatatire atributelor HTML oferind o imbunatatire a prezentarii ( designului ) unei pagini web.

Sintaxa unui selector CSS este dupa modelul:

selector { proprietate: valoare;}

"selector" in mod uzual este un atribut ( tag ) HTML caruia vrei sa-i atasezi o anumita proprietate sau un bloc de proprietati.

"proprietate" este un cuvint specific CSS ( ex: position, margin, padding, cursor etc ) si reprezinta o declaratie.

exemple:


h1 { color: #012345; }


body {

   background-color: red;

   margin: 0px;

   padding: 0px;

}

Poti pune spatii dupa o declaratie pentru a-ti formata codul astfel incit sa fie mai usor lizibil.

1. Exista posibilitatea ca mai multor taguri HTML sa le atribuiti aceleasi proprietati:

h1, i { color: red; }

2. Poti specifica unui anume tag ca o proprietate sa o aiba doar intr-un anume context:

h1 i { color: red; }

in acest caz textul ce apare intre tagurile <i></i> si este inclus la rindul lui intre tag-urile <h1></h1> va avea textul de culoare rosie, orice alt text ce va contine tag-urile <i></i> dar nu va fi inclus si in <h1></h1> va avea culoarea implicita ( default )

exemple:

1.

<h1>textul va fi de <i>textul va fi de culoare rosie</i> culoare rosie</h1>

<h1>textul va fi de culoare rosie</h1>

<i>textul va fi de culoare rosie</i>

2.

<h1>textul va avea culoarea default <i>textul va avea culoarea rosie</i></h1>

<h1>textul va avea culoare default declarata in browser sau in cadrul tagului body sau a unui tag parinte</h1>

<i>textul va avea culoare default declarata in browser sau in cadrul tagului body sau a unui tag parinte</i>

Vitrine frigorifice orizontale si verticale de refrigerare si congelare

Parchet din lemn masiv exotic

Posted

O alta categorie specifica paginilor HTML sint selectorii. Acestia aplica regulile CSS paginilor HTML.

selectorul universal *

exemplu:

<html>

<head>

	<style>

* {

	color: red;

}

	</syle>

</head>

<body>

<h1>acest text va fi de culoare rosie</h1>

<a href="#">acest text va fi de culoare rosie</a>

<p>acest text va fi de culoare rosie</p>

</body>

</html>

Selectorul universal aplica proprietatile sale tuturor tagurilor HTML prezente in pagina web.

selectorul class

este un selector ce se aplica de mai multe ori intr-o pagina web, tagul HTML "chema" acest selector astfel:

<div class="nume_class">textul tau</div>

si se identifica in fisierul CSS prin aparitia semnului "punct" ( . ) in fata "nume_class"

.nume_class {

color: red;

}

Unui tag HTML i se poate atribui la un moment dat mai multe clase:

<div class="nume_class1 nume_class2 nume_class3">textul tau</div>

Nota: Numele "nume_class" nu poate incepe cu o cifra deoarece veti avea problema in browserul FF.

selectorul id

este un identificator unic in toata pagina HTML, adica in cadrul unei pagini el nu poate fi "chemat" de mai multe taguri.

<div id="nume_id">textul tau</div>

si se identifica in fisierul CSS prin aparitia semnului "diez" ( # ) in fata "nume_id"

#nume_id {

color: red;

}

Nota: Numele "nume_id" nu poate incepe cu o cifra deoarece veti avea problema in browserul FF.

Vitrine frigorifice orizontale si verticale de refrigerare si congelare

Parchet din lemn masiv exotic

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.