Lecţia Practică 5

Lecţia practică 5
Revenind la site-ul nostru, începem să adăugăm câteva proprietăți bazate pe fonturi.
1) Vom începe prin actualizarea fontului pe tot textul nostru. Pentru a face acest lucru, vom
aplica stiluri pentru elementul <body>. Vom începe cu valoarea color și vom adăuga, de
asemenea, valorile font-weight, font-size, line-height și font-family prin
intermediul proprietății fontului și al valorilor shorthand.
Pentru a păstra fișierul main.css cât mai organizat, creăm o nouă secțiune pentru aceste stiluri
personalizate, plasându-l chiar sub resetarea noastră și deasupra stilurilor de grilă.
Trebuie să adăugăm următoarele:
/*
========================================
Custom styles
========================================
*/
body {
color: #888;
font: 300 16px/22px "Open Sans", "Helvetica Neue",

Helvetica, Arial, sans-serif;
2) În Lecția 3 am început să adăugăm câteva stiluri tipografice, adăugând în mod specific o

margină de jos la câteva niveluri diferite de titluri și paragrafe. În aceeași secțiune a
fișierului main.css, adăugăm o culoare la nivelurile heading 1-4.
h1, h2, h3, h4 {
color: #648880;
În timp ce suntem aici, să adăugăm și dimensiuni de fonturi pentru aceste niveluri de titlu
diferite. Elementele noastre <h1> și <h2> vor folosi valori de dimensiuni de font destul de
mari; în consecință, vom dori, de asemenea, să creștem valorile înălțimii liniei pentru a
menține textul în aceste elemente lizibile. Pentru referință, vom face valorile înălțimii liniei
lor de 44 de pixeli, dublând valoarea setului de înălțime a liniei de bază în cadrul setului de
reguli al elementului <body>.
h1 {
font-size: 36px;
line-height: 44px;
h2 {
font-size: 24px;
line-height: 44px;
h3 {
font-size: 21px;
h4 {
font-size: 18px;
3) Elementele noastre <h5> vor fi puțin mai unice decât restul rubricilor noastre. În

consecință, vom schimba puțin stilul lor.
Vom folosi o valoare a proprietății de culoare și o dimensiune a fontului puțin mai mică
pentru aceste elemente și vom schimba grosimea fontului la 400, sau normal.
În mod implicit, browserele redau titluri cu o valoare de caractere aldine. Titlurile noastre
sunt, însă, în prezent toate setate la o grosime de font de 300. Resetarea noastră din partea de
sus a fișierului main.css a schimbat font-weight la normal, iar apoi regulile setate pentru
font-ul nostru de 300 în elementul <body> au schimbat toate heading-urile la 300.
Grosimea fontului de 400 pe elementul <h5> îl va face de fapt puțin mai gros decât celelalte
titluri și texte.
h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
4) Resetarea noastră la începutul foii de stil resetează, de asemenea, stilurile implicite ale
browserului pentru elementele <strong>, <cite> și <em>, pe care vom dori să le adăugăm
din nou. Pentru elementele <strong>, vom dori să setăm o grosime a fontului de 400, ceea ce
echivalează de fapt cu normal, deoarece tipografia pe care o folosim este mai groasă decât
majoritatea caracterelor. Apoi, pentru elementele <cite> și <em> vom dori să stabilim un stil
de caractere cu caractere italice.
strong {
font-weight: 400;
cite, em {
font-style: italic;
5) Haideți să continuăm adăugând câteva stiluri la elementele de ancorare. În prezent, acestea

sunt albastre implicite ale browserului. Să le facem cu aceeași culoare cu elementele
noastre <h1> - <h4>. În plus, să folosim pseudo-clasa hover pentru a schimba culoarea într-
un gri deschis când un utilizator trece peste o ancoră.
/*
========================================
Links
========================================
*/
a:hover {
color: #a9b2b9;
a {
color: #648880;
6) Acum aruncăm o privire la elementul nostru <header> și actualizăm stilurile noastre

acolo. Vom începe să actualizăm logo-ul prin adăugarea proprietăților de dimensiune a
fontului și înălțime a liniei în setul de reguli al logo-ului. Adăugând proprietățile de bord,
flotare și padding existente, noul set de reguli ar trebui să arate astfel:
.logo {
border-top: 4px solid #648880;
float: left;
font-size: 48px;
line-height: 44px;
padding: 40px 0 22px 0;
7) Deoarece am ridicat destul de mult dimensiunea logo-ului, să adăugăm o margină la

elementul <h3> din elementul <header> pentru a-l echilibra. Vom face acest lucru punând o
valoare de atribut de clasă tagline pe elementul <h3> și apoi folosind acea clasă în CSS-ul
nostru pentru a aplica marginele corespunzătoare. Să nu uităm că modificările aduse
elementului <h3> trebuie să se întâmple pe fiecare pagină.
HTML:
<h3 class="tagline">Universitatea Tehnică a Moldovei</h3>
CSS:
.tagline {
margin: 66px 0 22px 0;

}
8) După elementul <h3> cu valoarea atributului de clasă tagline vine elementul <nav>. Să

adăugăm o valoare de atribut de clasă primary-nav la elementul <nav> și să adăugăm
proprietăți de dimensiuni de font și de grosime pentru a face ca navigarea să fie deosebită de
restul antetului.
HTML:
<nav class="primary-nav">
...
</nav>
CSS:
.primary-nav {
font-size: 14px;
font-weight: 400;
9) Cu elementul <header> în formă ușor mai bună, aruncăm o privire și asupra

elementului <footer>. Folosind clasa primary-footer, schimbăm culoarea și dimensiunea
fontului pentru tot textul din elementul <footer>. În plus, să creștem valoarea font-
weight a elementului <small> la 400.
Inclusiv stilurile existente, stilurile pentru secțiunea primary-footer ar trebui să arate astfel:
.primary-footer {
color: #648880;
font-size: 14px;
padding-bottom: 44px;
padding-top: 44px;
.primary-footer small {
float: left;
font-weight: 400;
10) Să actualizăm și pagina principală. Vom începe cu secțiunea hero, crescând înălțimea
totală a liniei secțiunii la 44 de pixeli. De asemenea, vom extinde textul din această secțiune,
mărind dimensiunea fontului elementului <h2> la 36 pixeli și dimensiunea fontului
elementului la 24 pixeli.
Putem face toate aceste modificări folosind selectorul de clase hero existent și creând noi
selectori pentru elementele <h2> și <p>. Stilurile noastre pentru secțiunea hero se vor
descompune în acest fel:
.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
.hero h2 {
font-size: 36px;
.hero p {
font-size: 24px;
11) În sfârșit, avem o mică problemă de rezolvat pe pagina noastră de pornire. Anterior am
dat tuturor elementelor noastre de ancorare o valoare de culoare gri deschis atunci când un
utilizator trece peste ele. Acest lucru funcționează excelent, cu excepția celor trei teasere de
pe pagina noastră principală în care elementul ancoră înfășoară atât elementele <h3> cât
și <h5>. Deoarece elementele <h3> și <h5> au o definiție proprie a culorii, acestea nu sunt
afectate de stilurile :hover pseudo-clase de până acum.
Din fericire putem rezolva acest lucru, deși vom avea nevoie de un selector destul de
complicat. Vom începe prin a adăuga o valoare a atributului de clasă de teaser la toate cele
trei coloane din pagina de pornire. În curând vom folosi această clasă ca selector de
calificare.
<section class="grid">

<section class="teaser col-1-3">
<a href="rst.html">
<h5>RST</h5>
<h3>Reţele şi Software de Telecomunicaţii</h3>
</a>
<p>Specialitatea RST pregăteşte specialişti calificaţi

în reţelistică.</p>
</section>
...
</section>
Suntem pregătiți să creăm un selector destul de complex. Vom începe selectorul nostru cu
clasa teaser, întrucât dorim doar să vizăm elemente dintr-un element cu clasa teaser. De
acolo dorim să aplicăm stiluri la elementele care se află în elementele de ancoră care sunt
transferate; astfel, vom adăuga selectorul de tip a împreună cu pseudo-clasa :hover. În
sfârșit, vom adăuga selectorul de tip h3 pentru a selecta elementele reale <h3> la care dorim
să aplicăm stiluri.
Deci, selectorul și stilurile noastre pentru aceste elemente <h3> vor arăta astfel:
.teaser a:hover h3 {
color: #a9b2b9;
}
12) În prezent, fiecare link din pagină este subliniat, asta fiind stilul implicit pentru
elementele de ancora. Totuși, acest stil este surprinzător, așa că îl vom schimba puțin. Vom
începe prin a elimina sublinierea din toate elementele de ancorare prin intermediul
proprietății text-decoration. În continuare, vom selecta toate elementele de ancoră care
apar într-un element de paragraf și le vom oferi o bordură de jos.
Am putea folosi proprietatea text-decoration în locul proprietății border-bottom pentru a
sublinia toate legăturile din fiecare alineat; cu toate acestea, folosind proprietatea border-
bottom, avem mai mult control asupra aspectului subliniatului. Aici, de exemplu, sublinierea
va avea culoare diferită de textul în sine.
Secțiunea noastră de legături, care include stilurile noastre anterioare, ar trebui să arate astfel:
a {
color: #648880;
text-decoration: none;
a:hover {
color: #a9b2b9;
p a {
border-bottom: 1px solid #dfe2e5;
13) Revenind la elementele noastre <h5> de până acum, care au stiluri ușor diferite decât
restul titlurilor, le facem pe toate cu majuscule folosind proprietatea text-transform. Noile
noastre stiluri de element <h5> ar trebui să arate astfel:
h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
14) Vom revizui elementul <header> pentru a aplica stiluri suplimentare în meniul nostru de

navigare (la care am adăugat anterior valoarea atributului clasei primary-nav). După
proprietățile existente cu dimensiunea fontului și cu grosimea fontului, adăugăm spațiere de
litere și schimbăm textul nostru cu majuscule prin intermediul proprietății de transformare a
textului.
Stilurile pentru elementul <nav> cu valoarea atributului clasei primary-nav ar trebui să arate
astfel:
.primary-nav {
font-size: 14px;
font-weight: 400;
letter-spacing: .5px;
15) Anterior, am plutit logo-ul nostru spre stânga în elementul <header>. Acum eticheta
noastră se află direct în dreapta logo-ului; cu toate acestea, ne-ar plăcea să apară până la
dreapta elementului <header>. Trebuie să adăugăm proprietatea text-align cu o
valoare right la elementul <h3> cu valoarea atributului de clasă tagline pentru a face ca
tagline să se așeze până la dreapta.
La adăugarea la proprietatea de margină existentă, noile noastre stiluri pentru
elementul <h3> cu valoarea atributului de clasă tagline, vor arăta astfel:
.tagline {
margin: 66px 0 22px 0;
text-align: right;
16) De asemenea, ne-ar plăcea meniurile noastre de navigare, atât în elementele <header> cât

și în <footer>, să steie la dreapta. Deoarece atât elementele <header> cât și <footer> au
elemente pentru copii care sunt plutite spre stânga, putem folosi aceeași abordare ca și în
cazul cu tagline. Elementele plutite din elementele <header> și <footer> sunt scoase din
fluxul normal al paginii și acest lucru face ca alte elemente să se înfășoare în jurul lor. În
acest caz specific, meniurile de navigație sunt elementele care se înfășoară în jurul
elementelor plutite.
Deoarece vom împărtăși aceleași stiluri în ambele meniuri de navigare, le vom oferi fiecărei
clase de nav. Elementul nostru <header> va arăta astfel:
<header class="container group">
<h1 class="logo">...</h1>
<h3 class="tagline">...</h3>
<nav class="nav primary-nav">
...
</nav>
</header>
Iar elementul nostru <footer> va arăta astfel:

<footer class="primary-footer container group">
<small>...</small>
<nav class="nav">
...
</nav>
</footer>
Să nu uităm, trebuie să modificăm elementele noastre <header> și <footer> pe fiecare
pagină.
17) Acum creăm o nouă secțiune în fișierul main.css pentru a adăuga stiluri de navigare
partajate. Vom începe prin adăugarea proprietății text-align cu o valoare right la un set
de reguli de clasă nav. Vom extinde aceste stiluri mai târziu, dar acest lucru va servi drept un
fundament excelent.
/*
========================================
Navigation
========================================
*/
.nav {
text-align: right;
18) În timp ce adăugăm proprietatea text-align la câteva elemente diferite, să adăugăm, de

asemenea, proprietatea text-align cu valoarea center, setului de reguli pentru selecția
clasei hero. Pentru referință, aceste stiluri, inclusiv proprietățile noastre existente line-
height și padding, se găsesc în secțiunea paginii de pornire a fișierului main.css.
.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
text-align: center;
Pentru a adăuga un pic de caracter pe site-ul nostru, încercăm să folosim un font Google.
19) Să mergem pe site-ul Google Fonts și să căutăm fontul pe care am dori să-l
folosim: Roboto. După ce l-am găsit, haideți să îl adăugăm la colecția noastră și să urmăm
pașii de pe site-ul lor web pentru a utiliza fontul.
Când va veni momentul să alegem grosimea de font pe care am dori să folosim, să ne
asigurăm că selectăm 300 și 400, deoarece deja le folosim pe cele din CSS. Să adăugăm, de
asemenea, 100 la colecție, pentru o altă variantă.
Google ne va oferi un element suplimentar <link> pentru a fi inclus în elementul <head> al

tuturor paginilor noastre. Vom plasa acest nou element <link> direct sub elementul
existent <link>. Noul element va include referința corespunzătoare a foii de stil la Google,
care va avea grijă să includă un nou fișier CSS cu regula @font-face corespunzătoare
necesară pentru a folosi fontul Roboto.
Odată cu adăugarea noului element <link>, elementul nostru <head> va arăta astfel:
<head>
<meta charset="utf-8">
<title>Departamentul Telecomunicaţii</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
</head>
20) După ce am adăugat noul element <link> la toate paginile noastre, suntem gata să
începem să utilizăm fontul Roboto. Vom face acest lucru adăugându-l la stiva noastră de
fonturi principale în proprietatea fontului din stilurile de element <body>. Să
adăugăm Roboto la începutul stivei de fonturi pentru a-l face „Roboto”, „Open Sans”,
„Helvetica Neue”, Helvetica, Arial, sans-serif.
Deși Roboto este un singur cuvânt, pentru că este un font web încorporat, vom dori să-l
înconjurăm cu ghilimele în orice referință CSS. Noile noastre stiluri de element <body> vor
arăta astfel:
body {
color: #888;
font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue",

Helvetica, Arial, sans-serif;
}
21) Roboto ar trebui să fie acum funcțional, vizibil în tot textul nostru pe site. Să aruncăm o
privire mai atentă asupra logo-ului și să-l actualizăm puțin.
În cadrul setului nostru de reguli pentru selectorul clasei logo, vom începe prin adăugarea
proprietății font-weight cu o valoare de 100, pentru a face textul destul de subțire. De
asemenea, vom folosi proprietatea text-transform cu valoarea uppercase pentru a face
toate literele majuscule, precum și proprietatea letter-spacing cu valoarea de .5 pixeli
pentru a adăuga un pic de spațiu între fiecare literă în interiorul logo-ului. Deci, stilurile
pentru logo vor arăta astfel:
.logo {
border-top: 4px solid #648880;
float: left;
font-size: 48px;
font-weight: 100;
letter-spacing: .5px;
line-height: 44px;
padding: 40px 0 22px 0;
22) Deoarece avem o valoare a proprietății font-weight de 100 disponibilă, să stabilim și

elementul de paragraf din secțiunea hero la acea greutate. Putem folosi selectorul existent
pentru a face acest lucru, iar noul set de reguli va arăta astfel:
.hero p {
font-size: 24px;
font-weight: 100;
Site-ul nostru a făcut câțiva pași mari în această lecție, iar aspectul site-ului web începe să
strălucească cu adevărat.

Lecţia Practică 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecţia Practică 5

Uploaded by

Copyright:

Available Formats

Lecţia practică 5

Revenind la site-ul nostru, începem să adăugăm câteva proprietăți bazate pe fonturi.

font: 300 16px/22px "Open Sans", "Helvetica Neue",

2) În Lecția 3 am început să adăugăm câteva stiluri tipografice, adăugând în mod specific o

3) Elementele noastre <h5> vor fi puțin mai unice decât restul rubricilor noastre. În

5) Haideți să continuăm adăugând câteva stiluri la elementele de ancorare. În prezent, acestea

6) Acum aruncăm o privire la elementul nostru <header> și actualizăm stilurile noastre

border-top: 4px solid #648880;

padding: 40px 0 22px 0;

7) Deoarece am ridicat destul de mult dimensiunea logo-ului, să adăugăm o margină la

<h3 class="tagline">Universitatea Tehnică a Moldovei</h3>

margin: 66px 0 22px 0;

8) După elementul <h3> cu valoarea atributului de clasă tagline vine elementul <nav>. Să

9) Cu elementul <header> în formă ușor mai bună, aruncăm o privire și asupra

padding: 22px 80px 66px 80px;

<section class="teaser col-1-3">

<h3>Reţele şi Software de Telecomunicaţii</h3>

<p>Specialitatea RST pregăteşte specialişti calificaţi

border-bottom: 1px solid #dfe2e5;

14) Vom revizui elementul <header> pentru a aplica stiluri suplimentare în meniul nostru de

margin: 66px 0 22px 0;

16) De asemenea, ne-ar plăcea meniurile noastre de navigare, atât în elementele <header> cât

<nav class="nav primary-nav">

Iar elementul nostru <footer> va arăta astfel:

18) În timp ce adăugăm proprietatea text-align la câteva elemente diferite, să adăugăm, de

padding: 22px 80px 66px 80px;

Google ne va oferi un element suplimentar <link> pentru a fi inclus în elementul <head> al

<link rel="stylesheet" href="assets/stylesheets/main.css">

font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue",

border-top: 4px solid #648880;

padding: 40px 0 22px 0;

22) Deoarece avem o valoare a proprietății font-weight de 100 disponibilă, să stabilim și

You might also like