Sunteți pe pagina 1din 8

Fundal (background) CSS

Proprietatile CSS pentru fundalul unei pagini HTML sunt:


background-color
background-image
background-repeat
background-attachment
background-position

Aplicatie: pagina HTML cu fundal pink

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
</style>
</head>
<body>
<h1>Prima pagina HTML cu CSS.</h1>
</body>
</html>

Formatarea textului cu CSS


1. Culoarea textului
Exemplu:
h1 {
color: #00ff00;
}

h2 {
color: rgb(255,0,0);
}

1. Alinierea textului

Exemplu:

1
h1 {
text-align: center;
}

2. Text decoration

Exemplu:

h1 {
text-decoration: none;
}

h3 {
text-decoration: underline;
}

3. Indentarea textului

Exemplu:

p{
text-indent: 50px;
}

4. Fonturi

Exemplu:

p{
font-family: "Times New Roman", Times, serif;
}

Stilizarea link-urilor
Pentru link-uri putem folosi orice proprietate CSS (color,
background, etc)

2
Exista patru stari ale link-urilor:

a:link link normal, nevizitat


a:visited link vizitate
a:hover link pe care se face mouse over
a:active link pe care se face clic

Aplicatie:

<!DOCTYPE html>
<html>
<head>
<style>
/* link nevizitat */
a:link {
color: #FF0000;
}

/* link vizitat*/
a:visited {
color: gray;
}

/* link cu mouse over */


a:hover {
color: #FF00FF;
}

/* link selectat */
a:active {
color: red;
}
</style>
</head>

<body>

3
<p>
<a href="destinatii.html" target="_blank">Destinatii
turistice</a>
</p>
</body>
</html>

Liste in CSS
In CSS putem defini diferiti marcatori pentru liste:
cerc, patrat, imagine, etc.

Aplicatie:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

</style>
</head>
<body>

<p>Liste neordonate:</p>
<ul class="a">

4
<li>Luni</li>
<li>Marti</li>
<li>Miercuri</li>
</ul>

<ul class="b">
<li>Luni</li>
<li>Marti</li>
<li>Miercuri</li>
</ul>

<p>Lista ordonata:</p>
<ol class="c">
<li>Ianuarie</li>
<li>Februarie</li>
<li>Martie</li>
</ol>

</body>
</html>

5
Tabele in CSS:

1. Chenare

table, th, td {
border: 1px solid blue;
}

2. Latimea, inaltimea tabelului

table {
width: 90%;
}

th {
height: 50px;
}

3. Alinierea in celula:

td {
text-align: center;
}

td {
vertical-align: bottom;
}

4. Culoarea tabelului, chenarului:

table, td, th {
border: 1px solid blue;
}

th {
background-color: yellow;

6
color: white;
}

Bare de navigare create cu ajutorul listelor

<ul>
<li><a href="destinatii.html">Destinatii</a></li>
<li><a href="noutati.html">Noutati</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="galerie.html">Galerie</a></li>
</ul>

Stergerea marcatorilor se face astfel:

<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>

Pentru a construi o bara de navigare pe un fundal de culoare


rosie, se adauga:

a{
display: block;
width: 60px;
background-color: red;
}

Pentru a afisa bara de navigare orizontal se foloseste:

li {
display: inline;
}

7
Aplicatie: Sa se realizeze urmatoarea pagina, folosind HTML
4 si CSS: