CSS Content

Proprietatea CSS content se foloseste pentru a genera continut intr-un element HTML direct din CSS. Poate fi utilizata cu pseudo-elementele :after si :before.

<style>
.cnt_ex1:before {
 content: '~> ';
 color: #0000d0;
}

.cnt_ex1:after {
 content: ' <~';
 color: #0000d0;
}
</style>

<div class='cnt_ex1'>CoursesWeb.net</div>
<div class='cnt_ex1'>MarPlo.net</div>

Elementul <style> din aceste exemple se adauga in sectiunea <head> din pagina.

Valori pentru CSS content

none - Pseudo-elementul nu e creat.
normal - Evalueza ca none (default).

counter(counter_index) - Seteaza valoarea ca un contor.
- Mai intai se creaza un index pentru contor, cu proprietatea counter-increment.

<style>
.cnt_ex2 {
 counter-increment: ex_index; /* Sets a counter to be increased */
}

.cnt_ex2:before {
/* Space is added to create a space between counter and rest of content */
 content: counter(ex_index) '. ';
 color: #0000d0;
}
</style>

<div class='cnt_ex2'>CoursesWeb.net</div>
<div class='cnt_ex2'>MarPlo.net</div>

Rezultat:

CoursesWeb.net

MarPlo.net

attr(attribute) - Un sir cu valoarea din atributul specificat.
- Vedeti exemplu de la: Tooltip Animat cu HTML si CSS.
string - Un text adaugat pt. continut. Se pot adauga si caractere speciale, folosind codul Hex, cu back-slash "\" la inceput ( content: '\Hex-code'; ).
```
content: '\27A4'; /* Displays: ➤ */
```
open-quote | close-quote - Valoarea este ghilimele de inceput | sfarsit.
- Pentru a fi generat "close-quote" e necesar si "open-quote".
no-open-quote | no-close-quote - Elimina ghilimele de inceput | sfarsit, daca au fost adaugate.

url('url') - Adauga continutul de la adresa "url" specificata (imagine, sunet, video, etc.).
- Exemplu:

<style>
.cnt_ex3:before {
 content: url('https://coursesweb.net/imgs/8.gif');
 margin-right: 10px;
}
</style>

<div class='cnt_ex3'>CoursesWeb.net</div>
<div class='cnt_ex3'>MarPlo.net</div>

Rezultat:

CoursesWeb.net

MarPlo.net

Alte exemple cu proprietatea content

Modificare marcator de la liste

- Urmatorul exemplu afisaza simbolul ( » ) ca marcator la listele din <ul> care are clasa 'li_mark1':

<style>
ul.li_mark1 { list-style: none; }
ul.li_mark1 li:before {
 content: '\00BB'; /* Escaped Hex code notation */
 padding-right: 8px;
}
</style>

<ul class='li_mark1'>
 <li>Free Courses and Tutorials</li>
 <li>HTML-CSS examples</li>
 <li>Today is a good day for "Doing" Nothing</li>
</ul>

Demo:

Free Courses and Tutorials
HTML-CSS examples
Today is a good day for "Doing" Nothing

Rand nou in css content

Ca sa adaugati un text cu mai multe linii in proprietatea "content", adaugati in textul respectiv: \a unde vreti crearea unui nou rand, si proprietatea white-space: pre;

<style>
#cnt_ex4:after {
 color:#0000e0;
 content: '- Text from content \a Another line.';
 white-space: pre;
}
</style>
<div id='cnt_ex4'>HTML Div.</div>

Demo:

HTML Div.

<<-Animatie elemente HTML cu ..

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.