Selectorii CSS

 Dupa cum am spus si in primul articol, CSS-ul este folosit pentru a adauga elemente de stil pentru diverse taguri HTML. Daca pentru unele elemente cum ar fi body este destul de sigur ca nu se vor repeta pe parcursul paginii web, la altele mai mult ca sigur vom dori sa folosim atribute diferite in functie de context sau asezarea lor. Pentru aceste cazuri exista doua abordari posibile: se poate atasa un id (in cadrul tagului se introduce un id="id-ul meu") elementului vizat sau o clasa (in cadrul tagului se introduce un class="clasa mea" ). Pentru a selecta elementul respectiv in CSS se foloseste selectorul " # " pentru id-uri si selectorul " . " pentru clase. Sa presupunem ca avem urmatorul HTML simplu si ca dorim sa schimbam culoarea de fundal pentru fiecare din cele doua paragrafe:


Ceva titlu

Enimnunc et habitur mollisi sagittis velit a eu famet leo in. Habitaemauris non wisi sit dolorem laoreet ac semper nam nunc sapientum. Malesuadatellus estique accum cum convallicitur id quis habituris cursus congue loreet.

Enimnunc et habitur mollisi sagittis velit a eu famet leo in. Habitaemauris non wisi sit dolorem laoreet ac semper nam nunc sapientum. Malesuadatellus estique accum cum convallicitur id quis habituris cursus congue loreet.

Si acum partea de CSS:

body{

font-size:100%;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#000000;

background-color:#FFFFFF;

}

h1{font-size:1.5em;}

p{

font-size:.8em;

font-weight:bold;

}

p.1{background:red;}

p.2{background:blue;}

Pentru a adauga atribute speciale unor elemente fara a scrie o clasa speciala pentru aceste elemente se poate folosi metoda inlantuirii claselor CSS:


Lorem ipsum dolor sit amet

In exemplul acesta prin adaugarea clasei stanga vreau sa fac elementul sa se alinieze la stanga:

p{

width:300px;

font-family:Corbel;

color:#ef32th;

font-size:8pt;

text-indent:15pt;

}

p.rosu{color:red;}

p.stanga{float:left;}

Atat pentru astazi, va multumesc pentru timpul petrecut citind acest articol si sper sa reveniti si la urmatorul.

Daniel Ispas

0Comentarii la "Selectorii CSS"

Adauga Comentariu

Mesaj

Trimite