Ce este CSS?
CSS este acronimul pentru Cascading Style Sheets.
Ce pot sa fac cu CSS?
CSS este un limbaj (style language) care defineste “layout-ul” pentru documentele HTML. CSS acopera culori, font-uri, margini (borders), linii, inaltime, latime, imagini de fundal, pozitii avansate si multe alte optiuni.
HTML este de multe ori folosit necorespunzator pentru a crea layoutul site-urilor de internet. CSS ofera mai multe optiuni, este mai exact si sofisticat. In plus, este suportat de toate browserele actuale.
Care este diferenta dintre CSS si HTML?
HTML este folosit pentru a structura continutul in timp ce CSS este folosit pentru a formata continutul.
In perioada de inceput a web-ului, HTML era folosit numai pentru structura textului. Textul se putea marca cu taguri precum <hl> si <p> pentru a marca titlul sau un paragraf. Odata cu cresterea popularitatii web-ului designeri au inceput sa caute diferite posibilitati de a adauga layout documentelor online. Pentru a raspunde acestor cerinte, producatorii de browsere (in acea vreme Microsoft si Netscape) au inventat noi taguri HTML precum <font> care difera fata de tagurile originale HTML prin faptul ca definesc layoutul si nu structura.
Acest lucru a dus si la o situatie unde tagurile originale de structura ca <table> sa fie folosite necorespunzator pe pagini de layout (to layout pages). Multe taguri noi de layout brecum <blink> erau recunoscute numai de unele browsere. O formula comuna ce aparea pe siteuri era “Aveti nevoie de browserul X pentru a vedea aceasta pagina”. CSS a fost inventat pentru a remedia aceast situatie, furnizandu-le designerilor facilitati sofisticate pentru editarea layoutului, suportate de toate browserele.
In acelasi timp, separarea site-urilor de prezentare pentru documente de continutul documentelor usureaza foarte mult intretinerea lor.
Ce avantaje aduce CSS?
CSS a reprezentat un element revolutionar in lumea web-designului.
Beneficiile concrete includ:
- controlarea layoutului documentelor dintr-o singura pagina de stiluri,
- control mai exact al layoutului,
- aplicare de layouturi diferite pentru tipuri media diferite (ecran, printare, etc),
- tehnici numeroase si sofisticate.
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> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <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;} </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.
Un style sheet este un fisier text cu extensia.css. Ca pe orice fisier il poti salva pe server sau pe hard disk.
De exemplu, daca style sheet-ul se numeste style.css si este localizat in folderul style, situatia poate fi ilustrata astfel:
Ce este important este ca creezi un link (o legatura) de la documentul HTML (default.htm) la style sheet (style.css).
O legatura de acest tip poate fi creata cu o linie de cod HTML:
<link rel="stylesheet" type="text/css" href="style/style.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.css" /> </head> <body> </body> </html>
Aceasta legatura ii comunica browserului ca trebuie sa foloseasca un layout dintr-un fisier CSS atunci cand afiseaza fisierul HTML. Lucrul ingenios este acela ca mai multe documente HTML pot si legate la aceeasi style sheet. Cu alte cuvinte, un fisier CSS poate fi folosit pentru a controla layout-ul mai multor documente HTML.
Aceasta tehnica salveaza/econimiseste mult timp. Daca vrei de exemplu sa schimbi culoarea de fundal a unui site cu 100 de pagini, un style sheet te poate ajuta sa nu introduci manual modificarea de 100 de ori. Folosind CSS, modificarea poate fi facuta in cateva secunde prin schimbarea unui cod din fisierul style sheet.
Acum pune in practica teoria.
Deschide Notepad (sau orice alt editor de text) si creaza doua fisiere – unul HTML si unul CSS – cu urmatoarele continuturi: default.htm
<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>My first stylesheet</h1> </body> </html>
style.css
body { background-color: #FF0000; }
Acum pune cele doua fisiere in acelasi folder. Nu uita sa salvezi documentele cu extensiile corespunzatoare (.htm si .css). Deschide default.htm prin browser si observa fundalul rosu de pe pagina. Felicitari ai facut primul style sheet!
salut! am folosit si eu css un timp, ptr layouturile de la hi5. dar acum nu mai accepta si nu mai pot face:)
great job!