Configurari pentru vizibilitate si mouse

CSS ofera posibilitatea de a afisa sau ascunde unele elemente sau parti ale unor elemente.

1. Stabilirea vizibilitatii unui element

Proprietatea visibility poate controla faptul ca un element sa fie vizibil sau nu. Chiar daca elementul este invizibil, el va ocupa un spatiu liber in pagina, acolo unde ar fi trebuit sa fie afisat.
Sintaxa pentru folosirea acestei proprietati este urmatoarea:

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.

Iata un exemplu in urma caruia textul din interiorul etichetei <h1> va fi invizibil:

h1 { visibility:hidden; }

Pentru a ascunde complet afisarea unui element in pagina, se poate utiliza formula display:none;

2. Stabilirea suprafetei vizibile a unui element

Definirea suprafetei vizibile a unui element stabileste portiunea din elementul respectiv care este vizibila in fereastra navigatorului. Restul continutului acelui element nu dispare, ci este invizibil pentru vizitator.
Pentru a defini forma regiunii vizibile se foloseste proprietatea clip cu valoarea rect (definita prin patru valori separate prin spatii si incadrate de paranteze rotunde)
Forma generala este:

selector {clip:rect(val1 val2 val3 val4); }

- Valorile construesc un patrulater, definesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile.
Iata un exemplu de cod CSS in care suprafata vizibila a unui element cu id="viz" va fi cea incadrata de valorile atributului rect:

#viz { clip: rect(25 300 125 100); }

Daca se foloseste valoarea "auto", navigatorul calculeaza dimensiunea regiunii vizibile la 100%. Regiunile de vizibilitate pot avea doar forma dreptunghiulara.

3. Definirea pozitiei depasirii

Uneori elementele nu sunt in totalitate continute in casetele lor, caseta nefiind suficient de mare, astfel ca o parte a continutului nu este afisata sau depaseste marginea stabilita.
Proprietatea overflow permite tratarea continutului in exces, controland astfel modul de afisare sau nu al acesuia.
Forma generala a proprietatii overflow este:

selector { overflow:valoare; }

- Unde "valoare" stabileste unde va fi plasata depasirea, 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 elementului.
auto – barele de derulare apar doar atunci cand este necesar.

Iata un exemplu in care toate elementele cu class="extradim" vor avea bare de scroll:

.extradim { overflow:scroll; }

Pentru definirea proprietatii "overflow" doar pentru 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 mai sus.

4. Aspectul indicatorului de mouse

In mod normal, aspectul indicatorului de mouse este determinat de browser. Navigatorul modifica indicatorul de mouse in functie de continutul deasupra caruia se afla acesta.
Uneori este dorita anularea sau completarea preferintelor navigatorului si configurarea unor aspecte personalizate.
Proprietatea cursor ajuta la stabilirea aspectului unui indicator de mouse.
Sintaxa este urmatoarea:

selector { cursor:valoare; }

Unde "valoare" poate avea urmatoarele nume pentru indicatoarele de mouse:
Indicatoare de mouse

- Daca se foloseste valorea "auto", navigatorul decide asupra tipului de indicator folosit.

<<-Controale de pozitionare -- Pseudo-clase->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag afiseaza textul oblic?

<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>

Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?

margin padding position

h3 {
  padding: 2px 0.2em;
}

Clic pe metoda ce returneaza primul element indicat de selectorii specificati.

getElementsByName() querySelector() querySelectorAll()

// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

Indicati variabila PHP ce contine datele din formular trimise cu method="post".

$_SESSION $_GET $_POST

if(isset($_POST["field"])) {
  echo $_POST["field"];
}

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".

I They We

We speak english.
- Noi vorbim engleza.

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".

Ellos Vosotros Nosotros

Nosotros hablamos español.
- Noi vorbim spaniola.