CSS Osnove in Stili

CSS Osnove

• CSS je akronim za Cascading Style Sheets.
• style src="styles.css" nije ispravan način za primenu eksternog CSS fajla u HTML dokumentu.
• Ispravan način za primenu eksternog CSS fajla je <link rel="stylesheet" href="styles.css">.
• Za selektovanje svih <p> elemenata u CSS-u koristi se p { }.
• Svojstvo margin se koristi za postavljanje margina oko elementa.
• Za postavljanje plave boje pozadine na sve <h1> elemente koristi se h1 { background-color: blue; }.
• relative vrednost svojstva position postavlja element relativno u odnosu na njegov normalni položaj.
• Tekst se podebljava u CSS-u pomoću font-weight: bold;.
• Za promenu veličine fonta teksta koristi se svojstvo font-size.
• Element sa ID-jem "header" se selektuje pomoću #header { }.
• Razmak između redova teksta kontroliše svojstvo line-height.
• Element se može sakriti, ali tako da zadrži prostor koji zauzima, pomoću visibility: hidden;.

CSS Stilovi i Efekti

• Za dodavanje senke tekstu koristi se svojstvo text-shadow.
• Slika se postavlja kao pozadina elementa pomoću background-image: url('image.jpg');.
• Svojstvo border-collapse određuje da li su granice tabele spojene ili odvojene.
• Stil se primenjuje samo na prvi paragraf unutar <div> elementa pomoću div p:first-child { }.
• Oblik kursora miša definiše svojstvo cursor.
• Blok element se centrira horizontalno pomoću margin: auto;.
• CSS pravilo se primenjuje samo na hover elementa <button> pomoću button:hover { }.
• Kako će se elementi slagati kada dođe do preklapanja definiše svojstvo z-index.
• Svi elementi unutar <div> se biraju pomoću selektora div * { }.
• Širina elementa se postavlja na 50% ekrana pomoću width: 50%;.
• Border debljine 5px, crvene boje i pune linije se postavlja pomoću border: 5px red solid;.
• Uglovi elementa se zaokružuju pomoću border-radius: 10px;.
• Boja teksta se menja pomoću svojstva color.
• Razmak između slova kontroliše svojstvo letter-spacing.
• Jedinica em je relativna u odnosu na veličinu roditeljskog elementa.
• Inline element se centrira unutar roditelja pomoću text-align: center;.
• Unutrašnji razmak elementa kontroliše svojstvo padding.
• Da bi roditeljski element automatski obuhvatio plutajuće elemente unutar sebe, koristi se overflow: hidden;.
• Da slika ostane unutar granica kontejnera bez izobličenja, koristi se svojstvo object-fit: cover;.
• CSS svojstvo koje omogućava animacije se zove animation.
• Svaki drugi element se selektuje pomoću pseudoselektora :nth-child(2n).

CSS Tranzicije, Selektori i Liste

• Tranzicije pri promeni CSS vrednosti omogućava svojstvo transition.
• Selekcija teksta u HTML elementu se onemogućava pomoću user-select: none;.
• Transparentnost elementa omogućava svojstvo opacity.
• Promena veličine elementa zavisno od ekrana je omogućena pomoću media queries.
• Element se postavlja kao nevidljiv, ali tako da zadržava prostor, pomoću visibility: hidden;.
• Svaki treći <li> u listi se odabira pomoću li:nth-child(3n) { }.
• Izgled liste se definiše pomoću svojstva list-style-type.
• Animacija se postavlja na element pomoću pravila animation.
• Svi <a> linkovi koji su već posećeni se selektuju pomoću a:visited { }.
• Senka se dodaje celom elementu pomoću svojstva box-shadow.
• Prozirnost boje pozadine se određuje pomoću svojstva opacity.
• Maksimalna širina elementa se postavlja pomoću max-width.
• Vertikalno poravnanje teksta unutar elementa se omogućava pomoću vertical-align.
• Kako će višak sadržaja biti prikazan unutar elementa određuje overflow.
• Svaki treći element u listi se bira pomoću :nth-child(3n).
• Da bi se slika prilagodila širini roditelja bez distorzije, koristi se width: 100%; height: auto;.

CSS Dodatni Stilovi i Koncepti

• Spoljna senka elementu se dodaje pomoću box-shadow.
• Font "Arial" se primenjuje na sve tekstualne elemente pomoću body { font-family: Arial, sans-serif; }.
• Prvo slovo u paragrafu se stilizuje pomoću pseudoselektora p::first-letter.
• Klikovi na element se onemogućavaju pomoću pointer-events: none;.
• Svi linkovi u stanju hover se stilizuju pomoću selektora a:hover.
• Stil tačkica u neuređenoj listi se određuje pomoću svojstva list-style-type.
• Neprozirni sloj ispred slike se pravi pomoću background: rgba(0, 0, 0, 0.5);.
• Elastično raspoređivanje elemenata unutar kontejnera omogućava svojstvo justify-content.
• CSS pravilo za sve <p> elemente unutar <section> se postavlja pomoću section p { }.
• Širina <div class="box"> će biti 200px, jer kontejner ima širinu 200px, a box ima širinu auto
• Tekst će biti prikazan plavom bojom
• Širina <div class="box"> će biti 150px
• Ispravan komentar u CSS-u je /* Ovo je komentar */
• Boja linka kad predjete misem preko njega ce biti Crvena
• box ce biti 50% proziran
• padding ce biti primenjen 10px gore i dolje, 20px lijevo i desno
• Tekst se pretvara u velika slova pomocu text-transform: uppercase;
• opacity:0.5, osigurava da je providnost ispravno postavljena.
• vidljivost:hidden koristi sakrivanje elementa,ali element zauzima prostor.
• Heksadecimalni format boje je korišten u ovom CSS
• Oznaka boje koja slijedi RGB format je color: rgb(255, 0, 0)
• element sa ID-jem main-content se bira pomocu #main-content