CSS = stiluri si culori
Styling HTML cu CSS
CSS standuri pentru Cascading Style Sheets
Styling pot fi adăugate elemente HTML în 3 moduri:
- Inline - folosind un atribut de stil în elemente HTML
- Internă - folosind un <style> element HTML <head> secțiunea
- Extern - folosind unul sau mai multe fișiere externe CSS
Cea mai frecventă modalitate de a adăuga stil, este de a menține stiluri în fișiere CSS separate. Dar, în acest tutorial, vom folosi stil intern, deoarece este mai ușor să demonstreze, și mai ușor pentru tine să-l încercați singur.
Puteți afla mai multe despre CSS nostru Tutorial CSS .
Inline styling (Inline CSS)
Stilizare inline este utilizat pentru a aplica un stil unic la un singur element HTML:
Coafura inline foloseste style atribut.
Acest exemplu schimbă culoarea textului din <h1> Elementul la albastru:
Styling intern (Internal CSS)
stilizare intern este folosit pentru a defini un stil pentru o pagină HTML.
Stilizare intern este definit în <head> sectiune a unei pagini HTML, într - un <style> Element:
Exemplu
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Încearcă - l singur » Styling extern (External CSS)
O foaie de stil extern este folosit pentru a defini stilul pentru mai multe pagini.
Cu o foaie de stil extern, puteți schimba aspectul unui întreg site web prin schimbarea unui fișier!
Pentru a utiliza o foaie de stil extern, adăugați un link către acesta în <head> sectiune a paginii HTML:
Exemplu
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Încearcă - l singur » O foaie de stil extern poate fi scris în orice editor de text. Fișierul nu trebuie să conțină nici un tag-uri html. Fișierul foaie de stil trebuie să fie salvat cu o .css prelungire.
Iată cum „ styles.css “ arată:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS Fonturi
CSS color Proprietatea definește culoarea textului care urmează să fie utilizat pentru elementul HTML.
CSS font-family proprietate definește fontul utilizat pentru elementul HTML.
CSS font-size proprietate definește dimensiunea textului care urmează să fie utilizat pentru elementul HTML.
Exemplu
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Încearcă - l singur » CSS Box Modelul
Fiecare element HTML are o casetă în jurul său, chiar dacă nu se poate vedea.
CSS border Proprietatea definește un chenar vizibil în jurul unui element HTML:
CSS padding Proprietatea definește o căptușeală (space) în interiorul frontierei:
CSS margin de proprietate definește o marjă (space) în afara graniței:
Exemplele de mai sus CSS utilizarea px pentru a defini dimensiunile în pixeli.
id Atributul
Toate exemplele de mai sus utilizarea CSS pentru elementele de stil HTML într-un mod general.
Pentru a defini un stil special pentru un element special, adăugați mai întâi un atribut id la elementul:
<p id="p01">I am different</p>
apoi să definească un stil pentru elementul cu specific id :
class Atributul
Pentru a defini un stil pentru un tip special ( class ) de elemente, se adaugă o class atribut la elementul:
<p class="error">I am different</p>
Acum puteți defini un stil diferit pentru elemente cu clasa specifică:
Utilizați id - single id pentru a aborda un single element de . Utilizați class pentru a aborda groups de elemente.
Rezumatul capitolului
- Utilizați HTML în style atribut pentru stilul inline
- Utilizați HTML <style> Element pentru a defini CSS intern
- Utilizați HTML <link> elemente pentru a se referi la un fișier extern CSS
- Utilizați HTML <head> Element pentru a stoca <style> și <link> elemente
- Utilizați CSS color proprietatea pentru culorile de text
- Utilizați CSS font-family proprietate pentru fonturi de text
- Utilizați CSS font-size proprietate pentru dimensiunile de text
- Utilizați CSS border proprietatea pentru frontierele elementelor vizibile
- Utilizați CSS padding proprietatea pentru spațiul din interiorul marginii
- Utilizați CSS margin de proprietate pentru spațiul din afara graniței
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»
HTML Stil Tag-uri
| Etichetă | Descriere |
|---|---|
| <style> | Definește informații stil pentru un document HTML |
| <link> | Definește o legătură între un document și o resursă externă |