Pagini

▼

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>
<head>
<title>Exampletitle>
head>
<body style="background-color: #FF0000;">
<p>This is a red pagep>
body>
html>
Metoda 2: Interna (the tag style)

<html>
<head>
<title>Exampletitle>
<style type="text/css">

body {background-color: #FF0000;}
style>
head>
<body>
<p>This is a red pagep>
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 si astfel:

<html>
<head>
<title>My documenttitle>
<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 documenttitle>
<link rel="stylesheet" type="text/css" href="style.css" />
head>
<body>
<h1>My first stylesheeth1>
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!

Niciun comentariu:

Trimiteți un comentariu