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 atribut poate fi utilizat pentru a adauga stiluri CSS direct in tag-ul HTML?

type style class

<div style="width: 80%; border: 3px solid #888888;">Continut</div>

Care din metodele proprietatii CSS transform distorsioneaza elementul HTML la un anumit unghi (inclusiv continutul lui)?

translate() scale() skew()

#un_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}

Clic pe functia care poate converti un obiect Date in Sir.

indexOf() toString() getDate()

var rightnow = new Date();
alert( rightnow.toString() );

Care functie aplica o alta functie la elementele unui array?

array_merge() array_search() array_map()

$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}

Cum se spune "sambata" in limba engleza?

Sunday Saturday Monday

On Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.

Cum se spune "sambata" in limba spaniola?

domingo lunes sábado

Sábado visito mis abuelos.
- Sambata imi vizitez bunicii.