Jump to content
gaby

Cascading Style Sheets - Notiuni De Baza

Recommended Posts

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=??€

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...