Stabilirea vizibilitatii unui element
Proprietatea visibility
poate controla faptul ca un element sa fie vizibil sau nu. Daca elementul este ascuns (hidden), in locul suprafetei pe care o ocupa va fi afisat un spatiu gol.
Sintaxa:
selector { visibility:valoare }
Unde "valoare" poate fi:
- hidden – ascunde elementul de la afisarea pe ecran;
- visible – afiseaza elementul;
- inherit – vizibilitatea elementului este mostenita de la elementul parinte.
Exemplu, elementul cu clasa "vi_hid" va fi ascuns:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
p {
border:1px solid #333;
}
.vi_hid {
visibility:hidden;
}
</style>
</head>
<body>
<p class='vi_hid'>Oricum nu se vede.</p>
<p>Paragraf dupa cel ascuns.</p>
</body>
</html>
Pentru a elimina complet afisarea unui element in pagina, se poate utiliza formula display:none;
Stabilirea suprafetei vizibile a unui element
La elementele care au position:absolute; (sau "fixed") se poate defini suprafata vizibila aplicand proprietatea:
clip: rect(v1 v2 v3 v4);
Aceasta stabileste portiunea din elementul respectiv care este vizibila in fereastra navigatorului. Restul continutului acelui element nu dispare, ci este invizibil pentru vizitator.
- Valorile de la
rect() construesc un patrulater, definesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile.
Daca se foloseste valoarea "auto", navigatorul calculeaza dimensiunea regiunii vizibile la 100%.
Exemplu, suprafata vizibila a unui element cu clasa '.viz_clip' va fi cea incadrata de valorile functiei
rect(), dar devine complet vizibila cand mouse-ul e deasupra acelui element:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.viz_clip {
background:#eeee11;
clip: rect(10px,150px, 45px, 1px);
position:absolute;
}
.viz_clip:hover {
clip:auto;
}
</style>
</head>
<body>
<p class='viz_clip'>Exemplu cu proprietatea css clip.<br>
Pozitionati mouse-ul peste acest continut.</p>
</body>
</html>
Afisare bara pentru derulare
Cu proprietatea overflow
se poate stabili tratarea continutului care depaseste dimensiunile elementului in care se afla, controland astfel afisarea (cu o bara de "scroll", derulare) sau nu al acestuia.
Forma generala:
selector { overflow:valoare; }
- Unde "valoare" stabileste unde va fi plasata bara de derulare, folosind una din valorile:
- visible – extinde caseta elementului astfel incat sa incapa tot continutul sau, ignorand delimitarea suprafetei vizibile. Este optiunea prestabilita.
- hidden – ascunde continutul care nu incape in caseta elementului, si impiedica aparitia barei de derulare.
- scroll – adauga intotdeauna bare de derulare elementului, pentru ca sa se poata accesa tot continutul.
- auto – barele de derulare apar doar atunci cand este necesar.
Iata un exemplu in care toate elementele cu clasa '.extradim' vor avea bare de scroll cand este necesar:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.extradim {
background:#e0e000;
overflow:auto;
height:80px;
width:250px;
}
</style>
</head>
<body>
<div class='extradim'>
<h2>Exemplu cu proprietatea css overflow</h2>
Afisare bara de scroll,<br>
Daca este continut care depaseste<br>
Dimensiunile elementului in care se afla.
</div>
</body>
</html>
Pentru definirea proprietatii "overflow" doar la una din directii: orizontala sau verticala; adica bara de derulare sa fie disponibila sau nu doar pentru una din aceste directii, se poate folosi o alta varianta a acestei proprietati, si anume:
- overflow-x:valoare - pentru orizontala
- overflow-y:valoare - pentru verticala
- Unde "valoare" poate fi una din valorile prezentate la "overflow".
Aspectul indicatorului de mouse
In mod implicit, aspectul indicatorului de mouse este determinat de browser. Navigatorul modifica indicatorul de mouse in functie de continutul deasupra caruia se afla acesta.
Proprietatea cursor
ajuta la stabilirea aspectului unui indicator de mouse.
Sintaxa:
selector { cursor:valoare; }
Unde "valoare" poate avea urmatoarele nume pentru indicatoarele de mouse:

Daca se foloseste valorea "auto", navigatorul decide asupra tipului de indicator folosit.
- Exemplu, cand mouse-ul este peste elementul cu clasa '.cs_point' va avea aspectul "pointer".
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
div {
background:#dbdbfb;
height:80px;
width:150px;
}
.cs_point {
cursor:pointer;
}
</style>
</head>
<body>
<div class='cs_point'>Pozitionati mouse-ul aici.</div>
</body>
</html>
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut poate fi utilizat pentru a adauga stiluri CSS direct in tag-ul HTML?
type style class<div style="width: 80%; border: 3px solid #888888;">Continut</div>
Care din metodele proprietatii CSS transform distorsioneaza elementul HTML la un anumit unghi (inclusiv continutul lui)?
translate() scale() skew()#un_id {
transform: skew(20deg, 25deg);
-ms-transform: skew(20deg, 25deg); /* IE 9 */
-webkit-transform: skew(20deg, 25deg); /* Safari and Chrome */
}
Clic pe functia care poate converti un obiect Date in Sir.
indexOf() toString() getDate()var rightnow = new Date();
alert( rightnow.toString() );
Care functie aplica o alta functie la elementele unui array?
array_merge() array_search() array_map()$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}
Cum se spune "sambata" in limba engleza?
Sunday Saturday MondayOn Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.
Cum se spune "sambata" in limba spaniola?
domingo lunes sábadoSábado visito mis abuelos.
- Sambata imi vizitez bunicii.