JSFiddle - React, Tailwind, and code Playground

by Misko Y

HTML

<!DOCTYPE html>
<html>
	<head>
        <meta charset='utf-8'/>
        <meta name='author' content='Милош Утвић' />
        <meta name='description' content='Дефиниционе листе. Елемент div. CSS-својства display, visibility. CSS-псеудокласа :target' />
		<meta name='keywords' content='Дигитални текст 2, пример, CSS, display, visibility, :target' />
		<title>Дефиниционе листе. display, visibility, :target </title>
        
		<style>
		/* комбиновање селектора са истим својствима у једно правило: сваки наслов треба да буде центриран.
		*/
        h1, h2, h3, h4, h5, h6 {
		    text-align: center;
		}



        a.slovo {
		    text-decoration: none;
		}
		
		
		a.slovo:hover {
		    font-size: 200%;
		}
		a.slovo:active {
		    font-size: 200%;
		}
		
		/* заједничко форматирање блокова:
		   сакрићемо све блокове
		*/
		dl.odrednice {
		     display: none;
		}
		
		/* блок који је мета или циљ активираног линка се приказује као блоковски елемент, што је подразумевани приказ за листе 
		*/
		dl.odrednice:target {
		     display: block;
		}

        /* користимо наглашени фонт за појам који се дефинише*/
		dl.odrednice > dt {
		    font-weight: bold;
		}
		
		
		/* свака дефиниција почиње цртom (mdash). Пошто content не препознаје HTML, нити карактерске ентитете, користимо кодну позицију карактера у Unicode-у као хексадекадни број (испред мора да се наведе обрнута коса црта). Позиције се могу наћи, на пример, на адресиhttp://www.fileformat.info/info/unicode/char/search.htm	
        Ако потражимо mdash, добићемо као резултат страницу		https://www.fileformat.info/info/unicode/char/2014/index.htm
		Другу обрнуту косу црту смо употребили да би се приказао размак (хексадекадни код \0020), а могло је да се употреби и
		     content: "\2014\0020";
		односно
		     content: "\2014" " ";
		*/
        dl.odrednice > dd:before {
		    content: "\2014\ ";
		}

		
		/* украсни елементи, побољшавају читљивост текста, небитни за саму лекцију */

        p {
            text-align:...

CSS

/* комбиновање селектора са истим својствима у једно правило: сваки наслов треба да буде центриран.
*/
h1, h2, h3, h4, h5, h6 {
  text-align: center;
}



a.slovo {
  text-decoration: none;
}


a.slovo:hover {
  font-size: 200%;
}
a.slovo:active {
  font-size: 200%;
}

/* заједничко форматирање блокова:
сакрићемо све блокове
*/
dl.odrednice {
  display: none;
}

/* блок који је мета или циљ активираног линка се приказује као блоковски елемент, што је подразумевани приказ за листе 
*/
dl.odrednice:target {
  display: block;
}

/* користимо наглашени фонт за појам који се дефинише*/
dl.odrednice > dt {
  font-weight: bold;
}


/* свака дефиниција почиње цртom (mdash). Пошто content не препознаје HTML, нити карактерске ентитете, користимо кодну позицију карактера у Unicode-у као хексадекадни број (испред мора да се наведе обрнута коса црта). Позиције се могу наћи, на пример, на адресиhttp://www.fileformat.info/info/unicode/char/search.htm	
Ако потражимо mdash, добићемо као резултат страницу		https://www.fileformat.info/info/unicode/char/2014/index.htm
Другу обрнуту косу црту смо употребили да би се приказао размак (хексадекадни код \0020), а могло је да се употреби и
content: "\2014\0020";
односно
content: "\2014" " ";
*/
dl.odrednice > dd:before {
  content: "\2014\ ";
}


/* украсни елементи, побољшавају читљивост текста, небитни за саму лекцију */

p {
  text-align: justify;
  text-indent: 1.1cm;
}

.html-element {
  font-family: 'Courier New';
  font-weight: bold;
}
.html-atribut {
  font-family: 'Courier New';
  font-weight: bold;
}
.html-atribut-vrednost {
  font-family: 'Courier New', monospace;
  font-size: 1em;
  font-style: italic;
} 
.css-svojstvo {
  font-family: 'Courier New';
  font-weight: bold;
}
.css-fja {
  font-family: 'Courier New';
  font-weight: bold;
}
.css-vrednost  {
  font-family: 'Courier New', monospace;
  font-size: 1em;
}
.pseudoklasa  {
  font-family: 'Courier New', monospace;
  font-size: 1em;
}
.pseudoelement  {
  font-family:...