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

Clic pe tag-ul care creaza celula in tabel.

<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>

Indicati proprietatea CSS care adauga o imagine pentru fundal

background-color background-image color

h3 {
  background-image: url("image.jpg");
}

Ce instructiune se foloseste la parcugerea elementelor unui Array?

for() [) object()

var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };

Indicati functia PHP utilizata la parcurgerea elementelor unui Array asociativ.

for() foreach() if()

$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }

Care din urmatoarele cuvinte este sinonim cu "gentle" (bland)?

meek good beautiful

He is so kind and meek.
- El este atat de amabil si bland.

Care din urmatoarele cuvinte este sinonim cu "amable" (bland, prietenos)?

hermoso fuerte manso

Tu padre tiene un carácter muy manso.
- Tatal tau are un caracter foarte bland.