You are on page 1of 4

Cum functioneaza CSS ?

Cum functioneaza CSS? In aceasta lectie vei invata sa faci un stylesheet(foaie cu stiluri). Vei invata modelul de baza CSS si ce coduri sunt necesare pentru a folosi CSS intr-un document HTML. Multe din proprietatile folosite in CSS sunt similare cu cele din HTML, deci daca esti familiarizat cu folosirea HTML pentru layout vei recunoaste multe din coduri. Sintaxa de baza CSS Daca dorim ca fundal culoarea rosie pentru pagina web: Folosind HTML:

<body bgcolor="#FF0000">
Folosind CSS, acelasi rezultat poate fi obtinut astfel:

body {background-color: #FF0000;}
Codurile sunt mai mult sau mai putin similare la HTML si CSS. Exemplul de mai sus arata deasemenea si modelul fundamental CSS:

Aplicarea codului CSS unui document HTML Exista trei metode prin care poti aplica CSS. Recomandarea noastra e sa te concentrezi pe a trei-a metoda (externa) Metoda 1: In-line (the attribute style) Exemplul de mai sus cu fundalul rosu poate fi aplicat astfel:

<html>

"> <p>This is a red page</p> </body> </html> Metoda 2: Interna (the tag style) <html> <head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000.css). O legatura de acest tip poate fi creata cu o linie de cod HTML: <link rel="stylesheet" type="text/css" href="style/style.htm) la style sheet (style.} </style> </head> <body> <p>This is a red page</p> </body> </html> Metoda 3: Externa (link la un fisier style sheet) Metoda recomandata este de a face legatura cu asa numitul style sheet extern.<head> <title>Example</title> </head> <body style="background-color: #FF0000.css" /> Linia de cod trebuie inserata in sectiunea header a codului HTML intre <head>si </head> astfel: <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style. daca style sheet-ul se numeste style.css.css si este localizat in folderul style. De exemplu. situatia poate fi ilustrata astfel: Ce este important este ca creezi un link (o legatura) de la documentul HTML (default. Un style sheet este un fisier text cu extensia.css" /> . Ca pe orice fisier il poti salva pe server sau pe hard disk.

cu urmatoarele continuturi: default.htm <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style. Aceasta tehnica salveaza/econimiseste mult timp. Deschide Notepad (sau orice alt editor de text) si creaza doua fisiere . Cu alte cuvinte. Lucrul ingenios este acela ca mai multe documente HTML pot si legate la aceeasi style sheet. Acum pune in practica teoria.</head> <body> </body> </html> Aceasta legatura ii comunica browserului ca trebuie sa foloseasca un layout dintr-un fisier CSS atunci cand afiseaza fisierul HTML.css" /> </head> <body> <h1>My first stylesheet</h1> </body> </html> style.css . modificarea poate fi facuta in cateva secunde prin schimbarea unui cod din fisierul style sheet.unul HTML si unul CSS . un fisier CSS poate fi folosit pentru a controla layout-ul mai multor documente HTML. un style sheet te poate ajuta sa nu introduci manual modificarea de 100 de ori. Daca vrei de exemplu sa schimbi culoarea de fundal a unui site cu 100 de pagini. Folosind CSS.

htm si .body { background-color: #FF0000. Deschide default. Felicitari ai facut primul style sheet! .htm prin browser si observa fundalul rosu de pe pagina. } Acum pune cele doua fisiere in acelasi folder.css). Nu uita sa salvezi documentele cu extensiile corespunzatoare (.