Web Design pentru copii: CSS

() translation by (you can also view the original English article)

Bun-venit la lecţia a cincea a seriei Web Design pentru copii, unde ne axăm cu precădere pe CSS.

Am lucrat din greu la conţinutul HTML, așa încât acum este timpul să îl facem să arate drăguț! Vom adăuga la pagina HTML aici, şi vom începe un nou fişier: un document CSS.

Uitaţi-vă la site-ul final pe care îl vom construi. Fişiere pentru această lecţie pot fi descarcate de aici şi nu uitați să puneți întrebări în secţiunea de comentarii în partea de jos a acestei pagini.

Ceea ce este mai exact CSS?

Înainte de a începe să codăm, mai întâi ne asigurăm că am înţeles ce este CSS. CSS vine de la Cascading Style Sheets şi este un limbaj care ne ajută să schimbăm modul în care arată pagina HTML.

În imaginea de mai sus, browserul din stânga arată un site fără niciun CSS, niciun stil, în timp ce siteul din dreapta are stil aplicat. Stilul a fost scris într-un CSS fişier – arată mult mai bine!

CSS este scris într-un fişier separat, folosind editorul de text. Documentul HTML a fost salvat cu extensia .html, dar documentul CSS va fi salvat cu extensia .css.

Crearea unui fişier CSS

Vom avea nevoie să începem un nou document în editorul de text şi să îl salvăm ca „tutstown.css” în „tutsfolder”; alături de „index.html” şi folderul „imagini”.

HTML & CSS

Pentru ca documentul CSS să aplice stiluri la HTML, avem nevoie să facem un link între ele. Acest lucru se face printr-un element <link> în cadrul elementului head, la începutul documentului HTML.

Vom adăuga acest link direct sub titlul nostru:

1	<head>
2	<title>Tuts Town</title>
3	<link type="text/css" rel="stylesheet" href="tutstown.css" />
4	</head>

Există câteva atribute importante de inclus în acest element care se închide singur, dintre care primul este type. Atributul type spune browserului cu ce tip de conţinut facem link. În acest caz este un fişier text/css.

Al doilea atribut este rel, ce spune browserului care este relaţia între HTML şi documentul legat (CSS). Documentul CSS este un stylesheet (foaie de stil) pentru HTML.

În sfârşit, avem href , de care ne amintim de la elementul <a>. Acesta trimite în altă parte. Aici, spune browserului unde găsim fişierul CSS către care am făcut link.

În cazul în care totul este legat în mod corespunzător, pagina va arăta diferit când dați în browser:

Clase

În fişierul CSS putem enumera elementele HTML folosite şi să spunem cum vrem să arate. Există o mulţime de moduri de a indica elementele dorite, clasele HTML fiind o astfel de modalitate.

Clasele HTML sunt atribute adăugate la elemente. Odată ce un element are un nume de clasă, îl putem folosi în CSS.

Numele ales pentru clasă trebuie să fie un cuvânt sau mai multe cuvinte care descriu conţinutul din elementul respectiv.

Adăugarea unei clase la <header> ar putea arata astfel:

1	<header class="primary-header"> </header>

Clasele nu sunt unice, astfel încât mai multe elemente diferite pot avea acelaşi nume de clasă. Acest lucru simplifică adăugarea de stiluri la o mulţime de elemente; vom vedea asta în acţiune atunci când ajungem la imaginile cu magazine!

Cum este scris CSS

Sintaxa este modul în care scriem codul. La fel ca și cu HTML, CSS trebuie să fie scris în mod corect pentru a funcționa.

Să trecem la fişierul CSS, şi doar pentru a face practica, să schimbăm culoarea de fundal background-color a headerului la albastru blue.

1	.primary-header {
2	background-color: blue;
3	}

Există o mulţime de piese care trebuie să se potrivească!

Astfel, CSS înţelege că ceea ce țintim este un nume de clasă, și avem nevoie de câteva lucruri:

Avem nevoie să punem un punct . înaintea numelui.
Instrucțiunile pentru stil sunt conţinute între paranteze, {}.
Stilul pe care îl dorim pentru background-color este imediat urmat de doua puncte :
Apoi vom adăuga valoarea (care este blue, în acest caz).
Fiecare stil trebuie să se termine cu punct şi virgulă ;

Poate fi foarte usor de uitat!

Salvaţi acest fişier CSS şi dați refresh browserului; Dacă nu îl aveţi deschis încă, dați dublu clic pe fișierul „index.html” din „tutsfolder”. Nu-i așa că este minunat?

Important! Acum haideţi să ştergeţi acest stil, deoarece ca site-ul nostru nu va avea header albastru!

Mai multe comentarii

CSS, de asemenea, ne permite să includem comentarii pe care browserul le va ignora, dar vor arăta puțin diferit de comentariile HTML.

Un comentariu CSS trebuie scris între aceste simboluri:/ * * /

1	/* This is a comment in CSS */

Documentul CSS din fişierele exerciţiu va conţine câteva comentarii utile pentru a explica mai mult lucrurile.

Body

Primul lucru notabil pe care îl putem face este să schimbăm background-color (culoarea de fundal) cu acest galben deschis. Există unele valori de culoare ce pot fi scrise ca atare în CSS, cum ar fi blue în codul de exemplu de mai sus, şi browserul le înţelege. Pentru culori mai puțin comune vom avea nevoie de codul hexazecimal, sau hex.

Toate culorile au un număr hexazecimal. Browserele nu înţeleg multe culori atunci când acestea sunt scrise în cuvinte, dar interpretează codurile hex foarte bine. Numărul hexazecimal pentru galben deschis este #FAF8DA, şi vrem să îl aplicăm la <body>, pentru a umple întreaga pagină.

1	body {
2	background-color: #FAF8DA;
3	}

Important! Nu trebuie să punem punct în faţa body, pentru că nu este un nume de clasă. În schimb, am scris elementul body direct.

Daca sunteți curioși despre valorile în format hexazecimal pentru alte culori, acest website hex pot fi foarte util.

Fonturi

Putem seta, de asemenea, fontul (stilul literelor) folosind body în CSS.

Tot ce trebuie să ştim în acest moment este că facem legătura între un font Google și documentul HTML. Astfel browserul îl va înţelege şi îl putem folosi.

Priviți aici linkul pe care trebuie să îl adăugăm în <head> (același loc în care am făcut legătura cu fișierul CSS!)

1	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Apoi trebuie să salvăm și să revenim la CSS.

1	body {
2	font-family: 'Open Sans';
3	}

Acest lucru va seta fontul Open Sans pentru tot textul paginii.

Header

În header vom schimba culoarea textului și mărimea sa, dar și dimensiunea imaginii cu orașul.

În primul rând, avem nevoie să adăugăm clase HTML elementelor din header, pentru a le folosi în CSS.

În deschiderea tagului <h1> adăugăm o clasă main-heading şi în <img> vom adăuga o clasă town-preview.

1	<header>
2	<h1 class="main-heading">Welcome To Tuts+ Town</h1>
3	<img class="town-preview" src="images/townheader.svg" alt="An illustration of Tuts Town tower." />
4	</header>

În CSS putem acum indica elementele dorite prin clasele pe care le-am stabilit.

Scriem aici o mărime pentru font de 70px sau pixeli (un pixel = un punct pe ecran). Acest punct este umplut de culoare şi este folosit ca o unitate de măsură. Imaginea orașului este de asemenea destul de mare, așa că vom seta 650 px.

Proprietatea color stabileşte culoarea textului, care aici este un albastru inchis (#205D76).

.main-heading {
    font-size: 70px;
    color: #205D76;
}

.town-preview {
    width: 650px;
}

Main

Amintiţi-vă, în main (partea principală) avem secțiuni mai mici, care conţin o imagine şi text. Vom seta o dimensiune pentru aceste imagini şi adăugăm stil pentru headinguri şi liste

Imagini

Primul lucru pe care trebuie să îl facem este să stabilim dimensiunea imaginilor pentru clădiri. Pentru a seta dimensiunile mai multor imagini în același timp, folosim acelaşi nume de clasă.

Adăugăm numele de clasă buidling, la toate cele trei imagini cu magazine, şi apoi le redimensionăm în CSS, astfel:

1	.building {
2	width: 200px;
3	}

Headinguri

Cele trei headinguri mai mici pot avea acelaşi nume de clasă şi în acest mod schimbăm color şi font-size.

1	.category-heading {
2	color: #205D76;
3	font-size: 30px;
4	}

Listele şi linkuri

După headingul din fiecare secțiune avem o listă neordonată cu magazine, vă amintiți? În plus faţă de schimbarea dimensiunea şi culoarea linkurilor aici, vom avea nevoie și să schimbăm culoarea bullet points.

Să adăugăm o clasă store-list pentru <ul> şi store-link pentru <a> şi apoi salvăm.

.store-list {
    color: #FFC122; /* Changes list’s bullet point color */
}

.store-link {
    color: #EA6E2F;
    font-size: 20px;
}

Este posibil să observaţi, atunci când verificăm în browser, că nu există mult spațiu între elementele listei, făcând-o să arate un pic aglomerat. Într-un alt tutorial din serie, vom vorbi despre spaţiere şi adăugarea de stil aici.

Footer

După ce vom adăuga o clasă footer-primary pentru <footer> şi o clasă created-by pentru <p>, în acest footer putem declara background-color, color și font-size:

.primary-footer {
    background-color: #FFC122;
}

.created-by {
    color: #FFFFFF;
    font-size: 20px;
}

Concluzie

În această lecţie am învăţat totul despre cum facem legătura dintre un fișier HTML şi unul CSS şi despre cum adăugăm stiluri minunate elementelor folosind clase. În acest moment ceea ce vedem în browser încă nu se potrivește complet cu previzualizarea, dar priviți ce diferență fac culorile și redimensionările. De aici lucrurile nu pot decât să evolueze.

Data viitoare vom plasa conținutul pe ecran unde trebuie, folosind niște tehnici de CSS layout inteligente.

Ne vedem prin oraș!