Curs Css

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


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:

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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut e folosit in tag-ul <a> pentru adresa link-ului?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Ce proprietate CSS seteaza tipul fontului utilizat?
font-family text-decoration font-size
h2 {
  font-family:"Calibri", sans-serif;
}
Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // numar elemente selectate
alert(nr_elms);
Indicati functia care returneaza suma valorilor dintr-un array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."
studyed studys studied
We studied English.
- Noi am studiat engleza.
Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."
digas digo decir
Yo digo siempre la verdad.
- Eu spun mereu adevarul.
CSS Content

Last accessed pages

  1. Configurare text (3446)
  2. CSS3 - Border proprietati noi (1023)
  3. createElement si insertBefore (700)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (180145)
  5. PHP OOP - Clase, Obiecte, constructor (3784)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2875)
  2. Curs HTML gratuit Tutoriale HTML5 (2213)
  3. Curs si Tutoriale JavaScript (2124)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (2064)
  5. Curs CSS Online Tutoriale CSS3 (1900)