Escolar Documentos
Profissional Documentos
Cultura Documentos
HTML + CSS
HTML
Limbaj de marcare care ofera continutului structura si semnificatie.
CSS
Limbaj de prezentare care ofera continutului stil si aspect.
HTML
Elementele
body, h1, p, div strong, em, span
Elementele sunt cuvinte cheie ce definesc obiecte n cadrul paginii web.
Uneori aceste obiecte sunt denumite generic elemente.
I Atributele
href="http://itee.elth.pub.ro" title="ABC"
Atributele ofera informatii suplimentare unui anumit element
I Tagurile
I Elementele de bloc
I Elementele de linie
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Acesta este un site web</p>
</body>
</html>
CSS
Selector
h1 {
font: bold 16px/24px Arial, sans-serif; }
Un selector determina carui element sa i se aplice stilul.
I Proprietate
h1 {
font: bold 16px/24px Arial, sans-serif; }
O proprietate este un tip de stil care se aplica elementului.
I Valoare
h1 {
font: bold 16px/24px Arial, sans-serif; }
O valoare determina comportamentul unei proprietati.
I Set de reguli
h1 {
font: bold 16px/24px Arial, sans-serif; }
Un set de reguli cuprinde un selector si toate declaratiile corespunzatoare.
I Declaratii
h1 {
font: bold 16px/24px Arial, sans-serif; }
Declaratiile sunt linii individuale n CSS din cadrul unui set de reguli.
I Selectorul de element
h1 {
font: bold 16px/24px Arial, sans-serif; }
Un selector de element precizeaza elementul prin numele sau.
I Selectorul ID
#logo {
background: url("fundal.png") 0 0 no-repeat; }
Un selector ID precizeaza elementul prin ID-ul sau. Un ID apare o singura
data pe pagina.
I Selectorul de clasa
.coloana {
width: 200px; }
Un selector de clasa precizeaza elementul prin clasa sa. O clasa poate
aparea de mai multe ori pe o pagina.
5
Modelul cutie
CALCUL:
Latime totala = Width + (Margin * 2) + (Border * 2) + (Padding * 2)
492 = 400 + (20 * 2) + (6 * 2) + (20 * 2)
naltime totala = Height + (Margin * 2) + (Border * 2) + (Padding * 2)
192 = 100 + (20 * 2) + (6 * 2) + (20 * 2)
Elemente flotante: img {
border: 1px solid #ccc;
float: right;
margin: 10px 0 10px 20px;
padding: 4px;
}