html css trikovi css stilovi before after content


Besplatni online kurs web dizajna

Nastavna jedinica: Trick 23 - Stilovi: before, after, content


Nazad


Stilovi: before, after, content


Stilovi before, after i content omogućavaju da se definišu svojstva pre TAG-a (Before), posle TAG-a (After) i sadržaj (Content). Sa druge strane, svojstvo Content-a koje se javlja unutar stila definiše da li se pojavlje odredjeni sadržaj (na primer Tekst) na početku ili kraju TAG-a. Primer u nastavku najbolje kroz sintasku koda i vizeulno daje primer Heading-a 5 koji ima odredjenu formu na početku i kraju Tag-a (font, boju fonta, itd). Stil "before" i "atfer" ima formu tako što prvo ide naziv tag-a (klase), pa dve dvotačke (::) a potom opcija BEFORE ili AFTER. Unutar stila ide svojstvo content:' ';. Ukoliko unutar svojstva content ima neki tekst (u ovom slučaju ide znak navodnika) isti će biti prikazan na počektu ili kraju Tag-a u zavisnosti da li je za stil BEFORE ili AFTER. Primer u nastavku definiše da će svi Heading 5 tekstovi imati formu teksta pod navodnicima - citata.

U CSS fajl idu stilovi

    
    
  <style type="text/css">
        h5::before {
   content:'“';
   font-size:5em;
   color:#999999;
   display:block;   
   margin-right:20px;
   text-align:left;
   height:50px;
   font-family: "Times New Roman", Times, serif; 
  }
        h5::after {
   content:'”';
      font-size:5em;
   color:#999999;
   display:block;
   text-align:right;
   height:50px;
   font-family: "Times New Roman", Times, serif; 
  }
        </style>    
 
    
    

U odeljak BODY

     
        
     <h5> Ovo je Heading 5 gde na početku i na kraju se pojavljuju forme stilizovane odnosno šta se pojavljuje PRE (Before) i POSLE (AFTER) heading-a. U ovom slučaju pojavljuje se znak navoda koji predstavlja sadržaj unutar svojstva "Content". </h5>
        
    
    

Prikaz u Browseru

Ovo je Heading 5 gde na početku i na kraju se pojavljuju forme stilizovane odnosno šta se pojavljuje PRE (Before) i POSLE (AFTER) heading-a. U ovom slučaju pojavljuje se znak navoda koji predstavlja sadržaj unutar svojstva "Content".

NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke