Informatica
Programare - Software - Web Design
|
Nou pe simpatie:
Alexandra21 Profile
 | Femeie
24 ani
Calarasi
cauta Barbat
24 - 53 ani |
|
|
InformaticaInregistrareLoginPozeNu sunteti logat. Lista Forumurilor Pe Tematici
|
| #1 |
 AdminAdministrator
Postari: 315
|
|
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 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 ajutorul 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 multe imagini. Aranjati-le precum 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. Deoarece dorim diverse comportamente in diferite 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> |
|
|
| |
|
