CSS

M-am documentat pe mai multe siteuri si am gasit <meta http-equiv="Content-Language" content="Romana" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
Cel ingrosat ii inteleg logica importa facut in CSS insa nu le inteleg rostul celorlalte 2 .... Am observat ca , cu ele sau fara ele nu se schimba nimic .... atunci pentru ce sunt puse??? sunt curios si asi dori sa stiu daca ma poate cineva lamuri in acest sens ... Multumesc!

alea sunt sintaxe html care sunt transpuse in headerele http...

cel cu content-type e important, sa zicem ca browserul tau e pus default pe latin-1... daca tu primesti pagina fara acel header (de utf-8) tu nu ai sa vezi ă ș ț â... iar cel care specifica limba (content-language) e optional...

Am inteles .. Mai am o intrebare daca se poate .. Am de exemplu stilul urmator
* {
    padding: 0;
    margin: 0;
}

body {
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333333;;
}

img { border: none; }
a { color: #57626a; text-decoration: none; }
a:hover { text-decoration: underline; color : #000; }

#wrap {
margin: 0 auto;
width: 800px;
}

#header {
padding: 10px 0 20px 0;
}
#header h1 {
font-size: 26px;
font-weight: 100;
letter-spacing: -3px;
padding: 12px 0 5px 10px;
}
#header h1 a {
color: #57626a;
text-decoration: none;
}
#header h1 a:hover {
color: #57626a;
text-decoration: none;
}
#header h2 {
color: #ccc;
font-size: 15px;
font-weight: 100;
padding: 0 0 0 11px;
letter-spacing: -1px;
line-height: 12px;
}

#menu {
height: 40px;
line-height: 40px;
background: #57626a url(images/menu.jpg) no-repeat;
text-transform: uppercase;
}
#menu ul {
padding-left: 10px;
list-style-type: none;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
color: #eee;
padding: 0 10px;
text-decoration: none;
font-weight: 100;
font-size: 14px;
letter-spacing: -1px;
}
#menu ul li a:hover {
color: #eee;
text-decoration: underline;
}

#content {
padding: 10px 20px;
}

.right {
width: 568px;
float: right;
text-align: justify;
}
.right h2 {
color: #FF4800;
font-size: 20px;
letter-spacing: -3px;
font-weight: 100;
padding : 10px 0 15px 0;
}

.left {
width: 150px;
float: left;
padding: 10px;
border-right: 1px solid #bbb;
font-size: 12px;
}
.left ul {
list-style-type: square;
padding: 5px 10px 10px 20px;
color: #57626a;
}
.left h2 {
height: 30px;
font-size: 14px;
color: #666;
line-height: 30px;
font-weight: 600;
}
.left a { text-decoration: none }

#footer {
background: #eee;
border-top: 3px solid #57626a;
margin-top: 20px;
text-align: center;
color: #333;
font-size: 11px;
padding: 10px;
}
Sincer am incercat sa inteleg dar insa nu inteleg mai nimic. Vreau sa inteleg deoarece as vrea la randul meu sa stiu sa fac un asemenea design ... Ma poate ajuta cineva sa mi poata explica sa inteleg ?? Multumesc!

Ce ai enumerat tu acolo e in esenta cam tot CSS-ul.
CSS-ul este pur si simplu o insiruire de atribute inauntrul unor ... 'pachete' numite stil-uri.

in loc sa folosesti <div width="500px" height="250px"></div>
poti folosi in head

<style type="text/css">
.divMeu{
height:500px;
width:250px;}
</style>

si in body <div class=divMeu></div>
Css ajuta doar prin pastrarea codului mai curat(plus cateva alte lucruri f folositoare in 'daily use') si e extrem de simplu.
Ai doar 3 lucruri ce poti face cu el:
redefinirea tag-urilor, setarea de clase si iduri.
clasele si idurile sunt stil-uri, gramezi de atribute puse la un loc.Tu le dai ce nume ai chef si pui cate si cum vrei.
clasele incep cu .
idurile cu #
Diferenta e ca id-urile se folosesc 1 singura data in tot codul.Nu poti de 2 ori <div id="x"> in aceiasi pag html sau <span id="x"> <div id="x">.1 sg data.

apoi in interiorul acoladei enumeri atributele care sunt cateva ce le folosesti mai des: height,width,text-align,margin,padding,font-family,font-color,color,background-image,background-color s.a

sa luam

* {
padding: 0;
margin: 0;
}

body {
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333333;;
}

img { border: none; }
a { color: #57626a; text-decoration: none; }
a:hover { text-decoration: underline; color : #000; }

#wrap {
margin: 0 auto;
width: 800px;
}
#header {
padding: 10px 0 20px 0;
}

* e un caracter special face ca tot din pachet sa se aplice la toate tagurile.Acum a, body, img orice tag au o margine de 0 si un padding de 0.Ai redefinit toate tagurile la asta.

body si img redefinesti tagurile astea.Daca <a href.. este de obicei un text albastru si subliniat(e un stil default) poti modifica asta din css.text-decoration face ca sa nu fie acel underline iar color seteaza culoarea.

#wrap e un id creat de user.header la fel.

mai complicat putin e #header h1.Asta redefineste toate h1 din interiorul header.Toate h1-rile din <div id="header"> vor fi cu atributele din paranteza aia.
Remarca ca wrap are 800px width. Fiind un id se fol 1 sg data.Evident fiind atat de lat (si din nume) este pt corpul site-ului.Header probabil pt partea de sus(1 singura parte de sus).

In fine nu are rost sati scriu un tutorial CSS intreg aici,gasesti destule pe net.
CSS se refera practic sa pui o clasa sau id sau redefinesti un tag si in interiorul lui setezi noi atribute.Nu e mare filozofie sau "language". Il inveti in 1 zi.

Edited by stefy, 07 March 2009 - 20:22.

http://w3schools.com/css/