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 HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?

<embed src="flash_game.swf" width="450" height="350" />

Ce pseudo-element adauga un anume stil la prima linie de text din element?

:first-letter :before :first-line

#id:first-line {
  font-weight: bold;
  color: blue;
}

Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.

window.location window.self window.status

var url = window.location;
alert(url);

Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.

fopen() file_put_contents() file_get_contents()

$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;

Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?

seven - eight ten - six three - five

This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.