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

Care tag se foloseste in <table> pentru a crea celula de tip "header"?

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

Ce proprietate CSS seteaza distanta dintre randuri?

line-height word-spacing margin

.some_class {
  line-height: 150%;
}

Care functie deschide o noua fereastra.

alert() confirm() open()

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.

mkdir() scandir() readdir()

$ar_dir = scandir("dir_name");
var_export($ar_dir);

Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?

sleeping slept will sleep

He will sleep there.
- El va dormi acolo.

Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?

dormido dormirá durmiendo

Él dormirá allí.
- El va dormi acolo.