10 jednostavnih primjera CSS koda koje možete naučiti za 10 minuta

10 jednostavnih primjera CSS koda koje možete naučiti za 10 minuta

Nakon što se počnete baviti HTML -om, vjerojatno ćete biti zainteresirani za dodavanje vizualnog udara vašim web stranicama. CSS je najbolji način za to. CSS vam omogućuje da primijenite promjene na cijelu stranicu bez oslanjanja na ugrađeni stil.





Evo nekoliko jednostavnih primjera CSS -a koji će vam pokazati kako napraviti neke osnovne promjene stila na svojoj web stranici.



1. Osnovni CSS kod za jednostavno oblikovanje odlomka

Stiliziranje s CSS -om znači da ne morate navesti stil svaki put kada kreirate element. Možete samo reći 'svi bi odlomci trebali imati ovaj stil' i spremni ste.





Recimo da želite svaki odlomak (

, jedna od HTML oznaka koje bi svi trebali znati) biti nešto veća nego inače. I s tamnosivim tekstom, umjesto crnim.

Povezano: HTML Cheat Sheet



CSS kod za ovo je:

p { font-size: 120%; color: dimgray; }

Jednostavan! Sada, kad god preglednik prikaže odlomak, tekst će naslijediti veličinu (120 posto normalnog) i boju ('tamno siva').



Ako vas zanima koje boje običnog teksta možete koristiti, pogledajte ovo CSS popis boja iz Mozille.

2. Primjer CSS -a za promjenu velikih slova

Želite li stvoriti oznaku za odlomke koji bi trebali biti malim slovima? Uzorak CSS -a za to bio bi:



p.smallcaps { font-variant: small-caps; }

Da biste odlomak napravili malim slovima, upotrijebite malo drugačiju HTML oznaku. Evo kako to izgleda:

Your paragraph here.

Dodavanjem točke i naziva klase elementu određuje se podvrsta tog elementa definirana klasom. To možete učiniti s tekstom, slikama, vezama i bilo čime drugim.

Ako želite promijeniti skup teksta u određeni slučaj, upotrijebite ove primjere CSS koda:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Posljednja velika početna slova svake rečenice.

Promjene stila nisu ograničene na odlomke. Postoje četiri različite boje kojima se može dodijeliti veza: njezina standardna boja, posjećena boja, boja lebdenja i aktivna boja (koju prikazuje dok kliknete na nju). Koristite ovaj primjer CSS koda:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Uz veze, iza svakog 'a' slijedi dvotočka, a ne točka.

Svaka od tih deklaracija mijenja boju veze u određenom kontekstu. Nema potrebe mijenjati klasu veze kako bi promijenila boju.

Iako podcrtani tekst jasno označava vezu, ponekad izgleda ljepše ukloniti to podcrtavanje. To se postiže atributom 'text-decoration'. Ovaj primjer CSS -a pokazuje kako ukloniti podcrtavanje na vezama:

a { text-decoration: none; }

Sve s oznakom veze ('a') neće ostati podcrtano. Želite li to podcrtati kada korisnik zadrži pokazivač iznad njega? Jednostavno dodajte:

a:hover { text-decoration: underline; }

Ovaj ukras teksta možete dodati i aktivnim vezama kako biste bili sigurni da podcrtavanje ne nestaje kada se klikne na vezu.

Želite li privući više pažnje na svoju vezu? Gumb za povezivanje izvrstan je način za to. Ovaj zahtijeva još nekoliko redaka:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Objasnimo ovaj primjer CSS koda.

Uključivanje sva četiri stanja veze osigurava da gumb ne nestane kada korisnik lebdi ili klikne na njega. Također možete postaviti različite parametre za lebdenje i aktivne veze, npr. Promjenu gumba ili boje teksta.

Boja pozadine postavljena je bojom pozadine, a boja teksta bojom. Padding definira veličinu okvira --- tekst je podstavljen 10px okomito i 25px vodoravno.

Poravnavanje teksta osigurava da se tekst prikazuje u sredini gumba, a ne isključeno s jedne strane. Dekoracija teksta, kao u posljednjem primjeru, uklanja podcrtavanje.

moj telefon se neće povezati s računalom

CSS kod 'display: inline-block' je malo kompliciraniji. Ukratko, omogućuje vam postavljanje visine i širine objekta. Također osigurava pokretanje novog retka kada se umetne.

6. Primjer koda CSS -a za stvaranje tekstualnog okvira

Običan odlomak nije baš uzbudljiv. Ako želite istaknuti element na svojoj stranici, možda biste htjeli dodati obrub. Evo kako to učiniti nizom jednostavnog CSS koda:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Ovaj je jednostavan. On stvara čvrstu ljubičastu granicu, široku pet piksela, oko bilo kojeg odlomka važne klase. Da bi odlomak naslijedio ova svojstva, samo ga deklarirajte ovako:

Your important paragraph here.

Ovo će funkcionirati bez obzira na to koliko veliki paragraf bio.

Možete primijeniti mnogo različitih stilova obruba; umjesto 'čvrsto', pokušajte 'točkasto' ili 'dvostruko'. U međuvremenu, širina može biti 'tanka', 'srednja' ili 'debela'. CSS kod može čak definirati debljinu svake ivice zasebno, na sljedeći način:

border-width: 5px 8px 3px 9px;

To rezultira gornjim rubom od pet piksela, desnim rubom od osam, donjim od tri i veličinom lijevog ruba od devet piksela.

7. Elementi poravnati po sredini s osnovnim CSS kodom

Za zajednički zadatak, centriranje elemenata s CSS kodom je iznenađujuće neintuitivno. Kad to učinite nekoliko puta, bit će vam mnogo lakše. Imate nekoliko različitih načina da centrirate stvari.

Za blok element (obično sliku) upotrijebite atribut margin:

.center { display: block; margin: auto; }

To osigurava da se element prikazuje kao blok i da se margina sa svake strane automatski postavlja. Ako želite centrirati sve slike na određenoj stranici, čak možete dodati 'margin: auto' u oznaku img:

img { margin: auto; }

Da biste saznali zašto to funkcionira na ovaj način, provjerite Objašnjenje CSS modela kutije na W3C .

Ali što ako želite centrirati tekst pomoću CSS -a? Koristite ovaj primjer CSS -a:

.centertext { text-align: center; }

Želite li koristiti klasu 'centertext' za centriranje teksta u odlomku? Jednostavno dodajte tu klasu u

označiti:

This text will be centered.

8. CSS primjeri za podešavanje obloga

Padding elementa određuje koliko prostora treba imati sa svake strane. Na primjer, ako dodate 25 piksela razmaka na dno slike, sljedeći tekst bit će pomaknut 25 piksela prema dolje. Mnogi elementi mogu imati padding, ne samo slike.

Recimo da želite da svaka slika ima 20 piksela razmaka s lijeve i desne strane i 40 piksela s gornje i donje strane. Najosnovnije izvršavanje CSS koda za ovo je:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Međutim, postoji kraća CSS uputa koja prikazuje sve ove informacije u jednom retku:

img { padding: 40px 25px 40px 25px; }

Time se gornji, desni, donji i lijevi uložak postavlja na desni broj. Zahvaljujući samo dvije vrijednosti koje se koriste (40 i 25) možete je učiniti još kraćom:

img { padding: 40px 25px }

Kad koristite samo dvije vrijednosti, prva vrijednost postavlja se za gornju i donju stranu, dok će druga biti lijeva i desna.

9. Označite tablične redove s CSS kodiranjem

CSS kod čini da tablice izgledaju puno ljepše od zadanih rešetki. Dodavanje boja, podešavanje obruba i prilagođavanje vašeg stola mobilnim zaslonima jednostavno je. Ovaj jednostavan primjer CSS -a pokazuje vam kako označiti retke tablice kada ih prijeđete mišem.

tr:hover { background-color: #ddd; }

Svaki put kad prijeđete mišem preko ćelije tablice, taj će redak promijeniti boju. Da biste vidjeli neke druge cool stvari koje možete učiniti, pogledajte W3C stranica na fantastičnim CSS tablicama .

10. Primjer CSS -a za prebacivanje slika između prozirnog i neprozirnog

CSS kôd također vam može pomoći da napravite sjajne stvari sa slikama. Evo primjera CSS -a za prikaz slika s manje od potpune neprozirnosti, tako da izgledaju pomalo 'izblijedjele'. Kad prijeđete mišem preko slika, one postaju potpuno neprozirne:

img { opacity: 0.5; filter: alpha(opacity=50); }

Atribut 'filter' radi isto što i 'neprozirnost', ali Internet Explorer 8 i stariji ne prepoznaju mjerenje neprozirnosti. Za starije preglednike dobra je ideja uključiti ga.

Sada kada su slike malo prozirne, možete ih učiniti potpuno neprozirnima pri prelasku mišem:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 primjera CSS -a s izvornim kodom

S ovim primjerima CSS koda trebali biste imati mnogo bolju predodžbu o tome kako CSS funkcionira. CSS predlošci može pomoći, ali razumijevanje sirovih elemenata je od vitalnog značaja.

Ponovljeno je ovih 10 jednostavnih primjera CSS koda:

  1. Jednostavno oblikovanje odlomka
  2. Promijeni velika slova
  3. Promijenite boje veza
  4. Uklonite podcrtane veze
  5. Napravite gumb za povezivanje
  6. Napravite okvir za tekst
  7. Elementi poravnati po sredini
  8. Prilagodite padding
  9. Označite retke tablice
  10. Učinite slike neprozirnima

Kad ih ponovno pregledate, primijetit ćete nekoliko uzoraka koje možete primijeniti na budući kôd. I tada znate da ste doista počeli postati CSS majstor. Ali prisjetiti se toga može biti teško. Možda biste željeli označiti ovu stranicu za buduću upotrebu.

Udio Udio Cvrkut E -pošta Važna lista svojstava osnovnih svojstava CSS3

Ovladajte esencijalnom CSS sintaksom pomoću našeg lista s podacima o svojstvima CSS3.

Pročitajte Dalje Povezane teme
  • Programiranje
  • Web dizajn
  • CSS
  • Skriptiranje
O autoru Christian Cawley(1510 objavljenih članaka)

Zamjenik urednika za sigurnost, Linux, DIY, programiranje i objašnjenje tehnologije te zaista koristan proizvođač podcasta, s velikim iskustvom u podršci za stolna računala i softveru. Suradnik časopisa Linux Format, Christian je majstor za Raspberry Pi, ljubitelj Lega i ljubitelj retro igara.

Više od Christiana Cawleyja

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu