Css 9 overflow zindex pseudoclase

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

1. Alinierea unei imagini in functie de text

<html>
<head>
<style>
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>
<p>
This is an
<img class="top" border="0" src="logocss.gif" width="95" height="84">
image inside a paragraph.
</p>

<p>
This is an
<img class="bottom" border="0" src="logocss.gif" width="95" height="84">
image inside a paragraph.
</p>
</body>
</html>

2. Proprietatea overflow
hidden

Atunci cand un paragraf contine suficient text cat sa umple 4 randuri dar i se specifica o latime si o inaltime mai mica atunci el va respecta latimea dar inaltimea o va modifica astfel incat sa intre tot textul – sa spunem 8 randuri. Pentru a forta mărimea ceruta putem seta overflow: hidden iar textul va fi trunchiat.

<html>
<head>
<style>
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden;
}
</style>
</head>

<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p>

<div>
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>
</body>
</html>

Scroll

Daca doriti sa fie afisat tot textul intr-o zona de dimensiuni specificate atunci cu overflow:scroll se introduce o bara de scroll si se poate derula continutul acelei zone.
Modificati in stilul de mai sus si observati efectul.
visible
Daca doriti sa reveniti la setarea default atunci setati overflow:visible

3. Proprietatea z-index

Cu susținerea proprietati z-index: valoare numerica se poate pozitiona un element intr-un layer deasupra sau sub un alt element in functie de valoarea numerica asociata. Elementul trebuie sa aiba realizata pozitionarea : position absolute .
Urmatorul exemplu va pozitiona o imagine in spatele unui paragraf

<html>
<head>
<style>
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>
</html>
Incercati folosind mai numeroase imagini. Aranjati-le ca de pildă cartile dintr-un pachet de carti de joc.

Pseudoclasele.

De regula vom folosi pseudoclase pentru tag-urile link. De aceea exemplele urmatoare vor viza doar link-urile. Mai sunt si alte pseudoclase dar pe noi ne intereseaza link-urile mai ales pentru setarea comportamenului in meniuri
<html>
<head>
1. In urmatorul exemplu avem declaratia pseudoclaselor tag-ului a. Căci dorim diverse comportamente in variate situatii, fiecare situatie are o pseudoclasa:

a:link – modul de afisare a link-ului inainte de clic
a:visited – dupa clic
a:hover – mouse peste link
a:active – timpul cand se da clic

! Ordinea trebuie sa fie cea de mai jos:

<style>

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

</style>
</head>

<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>

2. In urmatorul exemplu se pot observa diverse variatiuni ale modului de afisare a unui link
<html>
<head>
<style>
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>

<body>
<p><b><a class="one" href="#nogo" target="_blank">schimba culoarea</a></b></p>
<p><b><a class="two" href="#nogo" target="_blank">dimensiunea fontului</a></b></p>
<p><b><a class="three" href="#nogo" target="_blank">culoarea backgroundului</a></b></p>
<p><b><a class="four" href="#nogo" target="_blank">schimba fontul</a></b></p>
<p><b><a class="five" href="#nogo" target="_blank">schimba decorarea textului</a></b></p>

</body>
</html>