 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:42 Titlul subiectului: Css 9 overflow zindex pseudoclase |
|
|
| 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 dimensiunea 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 mărimi 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 utilizând mai multe imagini. Aranjati-le ca de pildă cartile dintr-un pachet de carti de joc.
Pseudoclasele.
De regula vom utiliza 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. Pentru că dorim diverse comportamente in distincte 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 – momentul 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> |
|
|
| Sus » |
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
 |
|
|
 |
|
