CSS3: Tutorial cu toate elementele de bază pentru începători
În acest tutorial vă vom prezenta CSS3. CSS3 este noul standard pentru definirea designului unui site web sau document. Alături de HTML, CSS este cea mai importantă bază în dezvoltarea web.
Tutorial CSS3: Cerințe
Înainte de a putea începe programarea CSS, aveți nevoie de un editor. Vă recomandăm editorul gratuit Notepad ++, care este disponibil numai pentru Windows. Dacă lucrați cu Mac, veți găsi alternative bune aici. De asemenea, aveți nevoie de cunoștințe de HTML. Bazele HTML5 pot fi găsite într-un alt sfat practic.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger.webp)
Tutorial: Structura comenzilor CSS
În primul rând, învățăm structura de bază a comenzilor CSS.
- Practic, atunci când construiți o comandă CSS, trebuie să vă întrebați cine ar trebui să ia ce valoare dintr-o anumită proprietate.
- Exemplu: Toate
Titlurile ar trebui să aibă valoarea roșie în proprietatea culorii fontului.
- Sintaxa arată astfel: [element] {[proprietate]: [valoare]; }
- În exemplul nostru, colorăm rubrica astfel: h1 {color: red; }
- Orice număr de perechi de proprietăți-valori se pot urmări unul pe celălalt în parantezele cret.
- Important: fiecare pereche trebuie să se încheie cu punct și virgulă.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger-2.webp)
Tutorial CSS3: încorporați CSS în HTML
Există trei moduri de a încorpora CSS în HTML, dar doar una dintre ele are sens.
- Varianta 1: Ajustarea direct în element cu atributul stil. exemplu:
titlu
- Acest lucru se aplică numai acestui element. Tot aici, mai multe perechi proprietate-valoare pot fi utilizate succesiv.
- Varianta 2: La începutul fișierului HTML din cadrul unei etichete din document. Exemplu: h1 {culoare: roșu; fundal-culoare: albastru; }
- Varianta 3: externalizarea unui alt document. Scrieți comenzile într-un fișier extern cu extensia .css. Apoi, includeți acest fișier în capul HTML.
- În aproape fiecare caz, ar trebui să utilizați varianta 3. Acesta este singurul mod de a utiliza designul în mai multe fișiere HTML, fără a fi necesar să scrieți același cod de mai multe ori.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger-3.webp)
Tutorial CSS3: Elemente, ID-uri și clase ca selectori
Prima valoare înainte de bretele corespunde întotdeauna selectorului. Aceasta determină cui se aplică următoarele.
- Puteți utiliza pur și simplu o zi ca selector. Acest lucru afectează apoi fiecare element al acestei etichete. În exemplul de mai sus, fiecare rubrică h1 ar fi roșie.
- Alternativ, puteți utiliza un ID pentru a vă asigura că un singur element poate fi utilizat. Pentru a face acest lucru, adăugați atributul în elementul HTML:
Antetul meu
- Apoi referiți acest ID în foaia CSS cu un # în fața selectorului: #myHeader {color: red; }
- În mod alternativ, puteți atribui clase pentru a afecta unele, dar nu toate, dintre elemente:
Antetul meu
- În loc de un #, utilizați un „.” În CSS înaintea selectorului: .myH1Class {color: red; }
Tutorial CSS: caracteristici importante
Mai jos sunt proprietățile cheie de care aveți nevoie pentru a manipula aspectul elementelor.
- culoare: atribuiți o culoare de font. Multe culori obișnuite sunt predefinite, de exemplu roșu, negru, alb, galben etc. Puteți specifica culorile individuale ca valori hex .: # B3D2FF
- background-color: Folosiți acest lucru pentru a atribui culoarea de fundal. Puteți utiliza aceleași culori ca pentru culoare.
- border: Definiți un cadru în jurul unui element. graniță: negru 2px solid; creează un cadru negru, de exemplu.
- font-size: Setați dimensiunea fontului. Valorile relative (em) sau point (pt) sunt comune aici.
- lățime și înălțime: specificați lățimea și înălțimea elementelor. Aceasta se face de obicei static prin pixeli (px) sau relativ la valoarea maximă în procente: div {lățime: 70%; height: 300px; }
- float: Folosiți stânga și dreapta pentru a specifica dacă elementul trebuie să fie stânga sau aliniat la dreapta.
- căptușeală: Introduceți capitolul. De exemplu, puteți poziționa textul în interiorul unei cutii.
- margine: similar cu capitonarea, cu excepția faptului că specificați marja aici. Astfel poți crea un decalaj între două cutii.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger-4.webp)
Tutorial CSS3: posibilități cu CSS3
Cu CSS3, este mai puțin necesar să vă creați și să integrați propriile grafice, deoarece mai multe efecte pot fi create dinamic.
- opacitate: cu o valoare între 0 și 1 puteți determina cu ușurință transparența elementelor.
- Culorile pot fi acum specificate în format HSL. „H” reprezintă Hue (nuanță), „S” pentru saturație (saturație) și „L” pentru ușurință: culoare: hsl (300.100%, 60%);
- box-shadow: Atribuie o umbră pentru o zonă. cutie-umbră: 10px 10px 10px roșu; ar crea o umbră roșie în dreapta și în jos.
- rază de bordură: creați pur și simplu colțuri rotunjite pentru suprafețe sau imagini.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger-5.webp)
Modificarea spațiului de linii HTML cu CSS poate fi citită în următorul sfat practic.