Cuprins
CSS
CSS economisește multă muncă. Poate controla aspectul mai multor pagini web simultan.
HTML + CSS
CSS descrie modul în care elementele HTML trebuie să fie afișate pe ecran, pe hârtie sau în alte suporturi.
CSS poate fi adăugat elementelor HTML în 3 moduri:
Inline - prin utilizarea atributului style în elementele HTML Intern - folosind un element <style> în secțiunea <head> Extern - folosind un fișier CSS extern
CSS Inline
CSS Intern
CSS-ul intern este adăugat cu ajutorul claselor.
CSS Extern
CSS-ul extern este o modalitate mai curată de a scrie cod.
Cum se procedează pentru a avea CSS Extern?
1. Creați un folder
2. Creați un document html în folder
3. Creați un document css în același folder (salvați-l cu extensia .css)
4. În documentul html deschideți un tag <head> apoi realizați legătură între cele două fișiere:
<link rel=”stylesheet” href = “nume.css”>
rel=”stylesheet" îi spune documentului HTML tipul fișierului cu care vrem să facem legătura
href este o atributa cu ajutorul căruia îi spunem fișierului HTML care este link-ul. Link-urile nu trebuie să fie neapărat către o pagină web! Link-urile pot fi și către alte
nume.css este numele fișierului către cu care vrem să facem legătură În documentul CSS Extern se pot crea DOAR CLASE
Creați un nou fișier HTML și copiați în el următorul cod.
<!DOCTYPE html>
<html>
<!-- porțiune css -->
<style>
.toate_proprietatile {
font-size: 150%;
color: red;
font-family: courier;
text-align: center;
font-weight: lighter;
}
</style>
<!-- încheiat potriune css -->
<p class="toate_proprietatile">Paragraf cu clase multiple</p>
<p> paragraf care trebuie comentat</p>
</html>
Creați un nou document.
cmd + n - pentru MacOs
ctrl + n - pentru Windows și linux
Salvați fișierul. Nu uitați de extensia .css.
Creați un link în interiorul tag-ului <head> </head> între cele două fișiere.
<link rel="stylesheet" href="styles.css">
Selectați clasa din porțiunea de CSS intern, apoi dați cut.
Intrați în fișierul CSS. Dați paște clasei în documentul CSS.
We are good to go!
De acum, de fiecare dată când vrem să adăugăm clase în fișierul jademy.html vom crea o clasa în “fisierstyle.css”.
Fișierul fisierstyle.css poate fi în legătură și cu alte fișiere html.
La nivel profesionist, partea de CSS a fișierelor HTML este adăugată precum mai sus. De obicei, sunt mai multe fișiere HTML în timp ce fișierul CSS este unul singur, iar fișierele HTML sunt puse în legătură cu CSS cu ajutorul <link rel=”stylesheet” href=”fisierstyle.css> în interiorul tag-ului head.
Ce facem atunci când dorim că toate elementele de un anume tip să aibă o anume proprietate?
Să spunem că dorim că toate paragrafele să fie roșii și să aibă fontul courier. Să spunem că, în același timp, dorim că heading-urile să fie de 150% de ori mai mari decât în mod normal. Cum facem asta? Trebuie să modificăm la fiecare în parte?
Evident, această funcție a CSS-ului se poate aplică pentru orice element HTML, de la link-uri și butoane până la imagini și chiar videoclipuri.
Padding
Proprietatea de padding CSS definește un padding (spațiu) între text și chenar.
În screenshot-urile alăturate se pot observă diferențe clare între cu și fără padding. Padding este o proprietate a CSS-ului foarte des folosită datorită simplului fapt că face că pagină web să fie cât mai aerisită.
Margin
Proprietatea marginii CSS definește o marjă (spațiu) în afară border-ului.
Proprietățile margin și padding au în comun faptul că se pot aplică pentru: top, right, bottom, left.
- margin-top
- margin-right
- margin-bottom
- margin-left
- padding-top
- padding-right
- padding-bottom
- padding-left
Nu întâmplător proprietățile de mai sus sunt în această ordine. În caz că dorim că un element HTML să aibă margini în toate cele patru direcții, dar nu dorim să fie egale putem folosi:
margin: 10px 100px 0px 150px;
sus dreapta jos stânga
Același lucru este valabil și pentru padding.
În imaginea alăturată este reprezentat mai bine ce înseamnă margin și padding.
Cu roșu este reprezentat border-ul, iar cel mai mic dreptunghi negru reprezintă obiectul căruia i se atribuie proprietățile.
Exerciții:
1. Creați un fișier nou HTML cu numele capitol9.html, apoi creați un fișier CSS cu numele capitol9.css . Realizați o legătură între ele.
2. Creați 3 paragrafe fiecare având textul “Exercițiu margine și padding”. Adăugați-le câte un border fiecare având una dintre culorile următoare: orange, red și #133337, folosind fișierul capitol9.css.
3. Adăugați paragrafelor de la exercițiul anterior
- o margine pentru top egală cu 30 de pixeli și apoi o margine pentru stânga de 100 de pixeli.
- o margine pentru top de 150 de pixeli și o margine pentru dreapta de 100 de pixeli.
- margine de 50 de pixeli pentru top, dreapta, jos și stânga
4. Creați un paragraf nou cu textul “Margini cu valori diferite”. Adăugați margine pentru top de 100 de pixeli, pentru dreapta de 30 de pixeli, pentru jos de 500 de pixeli și pentru stânga de 30 de pixeli. Adăugați partea de CSS folosindu-va de CSS extern.
5. Accesați documentul CSS creat la exercitul 1. Creați o clasa cu numele “padding-elemente”. Atribuiți-le elementelor HTML un padding de 70px. Creați încă 3 paragrafe în HTML fiecare având textul “Exercițiu margine și padding”. Creați câte o clasa pentru fiecare border, fiecare având un nume semnificativ; borderele având câte una din culoarile orange, red și #133337. Atribuiți clasele paragrafelor, astfel încât fiecare paragraf să aibă atribuite câte două clase.
7. Adăugați paragrafelor de la exercițiul anterior 1. un padding pentru top egal cu 50 de pixeli și apoi un padding pentru stânga de 100 de pixeli. 2. un padding pentru top de 150 de pixeli și o margine pentru dreapta de 100 de pixeli. 3. margine de 50 de pixeli pentru top, dreapta, jos și stânga și un padding de 20 de pixeli pentru top, dreapta, jos și stânga Folosiți clase.
8. Creați un paragraf nou cu textul “Paddings cu valori diferite”. Adăugați folosind clase padding pentru top de 100 de pixeli, pentru dreapta de 30 de pixeli, pentru jos de 500 de pixeli și pentru stânga de 30 de pixeli.
