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

Nakon što započnete gomilanje u HTML-u 17 Jednostavni primjeri HTML koda možete naučiti u 10 minuta 17 Jednostavni primjeri HTML koda kojeg možete naučiti za 10 minuta Želite li stvoriti osnovnu web stranicu? Naučite ove primjere HTML-a i isprobajte ih u uređivaču teksta da biste vidjeli kako izgledaju u vašem pregledniku. , vjerojatno će vas zanimati kako dodati više snage svojim web stranicama. CSS je najbolji način za to. CSS vam omogućuje primjenu promjena na cijeloj stranici bez upotrebe puno ugrađenih HTML stilova. 9 Greške koje ne biste trebali napraviti prilikom izrade web stranice. 9 Pogreške koje ne biste trebali napraviti prilikom izrade web stranice. Ove sljedeće HTML kodirajuće pogreške lako su napravite, ali ako ih odbacite ranije, a ne kasnije, stranica će izgledati bolje, biti jednostavnija za održavanje i funkcionirati onako kako želite. .

Mi ćemo istražiti kako stvoriti unutarnju tablicu stilova kako biste mogli vježbati svoje CSS vještine, a zatim ćemo prijeći na 10 jednostavnih primjera koji će vam pokazati kako napraviti nekoliko osnovnih stvari. Odatle je vaša mašta granica!

Ako želite malo više tehničkog uvoda, svakako provjerite 5 Baby koraka do učenja CSS-a i postanite Kick-Ass CSS čarobnjakom 5 Dječjih koraka do učenja CSS-a i postanite Kick-Ass CSS čarobnjakom 5 dječjih koraka za učenje CSS-a i postati Kick-Ass CSS čarobnjak CSS jedina je najvažnija promjena web stranica koje su se vidjele u posljednjem desetljeću, a on je utro put za razdvajanje stila i sadržaja. Na moderni način XHTML definira semantičku strukturu ... .

Inline Stylesheet

Svaki HTML dokument sadrži oznaku. U tom odjeljku glave nalazi se vaš inline CSS tablica stilova. Evo kako će to izgledati:

 Sve vaše CSS deklaracije. 

Stavite to na vrh svog dokumenta, ispunite ga svojim CSS-om i vi ste spremni krenuti.

1. Jednostavno oblikovanje odlomka

Kladna stvar kod stilova s ​​CSS-om je ta što ne morate specificirati stil svaki put kada stvarate element. Možete samo reći “svi bi stavci trebali imati ovaj poseban stil” i dobro ideš. Evo primjera kako to možete učiniti.

Recimo da želite svaki odlomak (to je sve sa

HTML oznaka Top 11 HTML oznaka Svaki Blogger i Vlasnik web stranica mora znati Top 11 HTML tagova Svaki Blogger i Vlasnik web stranica moraju znati Svjetski web zna mnogo jezika, a šifriran je u nekoliko različitih. Međutim, jedan jezik koji se može pronaći diljem svijeta i postoji od pronalaska web stranica je ...) na vašoj stranici biti malo veći nego inače. I tamno sive, umjesto crne. Evo kako biste to učinili s CSS-om:

p font-size: 120%; boja: dimgray; 

To je sve. Sada, svaki put kad preglednik prikazuje a

stavka, tekst će naslijediti veličinu (120 posto normalne vrijednosti) i boju (“dimgray”).

Ako vas zanima koje boje u tekstu možete koristiti, pogledajte ovaj CSS popis boja s Mozille.

2. Promijenite slučaj slova

Ok, sada kada smo vidjeli kako mijenjati svaki odlomak, pogledajmo kako možemo biti malo selektivniji. Kreirajmo oznaku za odlomke koji bi trebali biti u malim slovima. Evo kako bismo to učinili:

p.smallcaps font-variant: small-caps; 

Da bismo odlomku koji je u cijelosti velikim slovima napisali malo drugačiju HTML oznaku. Evo kako to izgleda:

Vaš odlomak ovdje.

Kao što možete vidjeti, dodavanje točke i imena klase bilo kojem određenom elementu u CSS-u određuje podvrstu tog elementa definira klasu. To možete učiniti s tekstom, slikama, vezama i bilo što drugo.

Ako želite promijeniti velika i mala slova teksta u određeni slučaj, možete koristiti ove CSS retke:

pretvaranje teksta: velika slova; pretvaranje teksta: mala slova; pretvaranje teksta: velika i velika slova;

Posljednje tiska velika slova u svakoj rečenici.

3. Promjena boje veze

Pokušajmo promijeniti stil nečega drugog osim cijelog stavka. Četiri su različite boje kojima se može dodijeliti veza: standardna boja, posjećena boja, boja lebdenja i aktivna boja (koja se prikazuje dok klikate na nju). Evo kako to možemo promijeniti:

a: veza boja: siva;  a: posjetio boja: zelena;  a: lebdeći color: rebeccapurple;  a: aktivno boja: teal; 

Imajte na umu da svaki “” slijedi dvotočka, a ne točka.

Svaka od tih deklaracija mijenja boju veze u određenom kontekstu. Ne morate mijenjati klasu veze da biste je promijenili u boji. Sve će to odrediti korisnik i stanje veze.

4. Uklonite podvlake veze

Iako podcrtani tekst prilično jasno ukazuje na vezu, ponekad izgleda ljepše da je podcrtate. To se postiže s “text-decoration” atribut. Evo kako bismo se riješili podvlačenja na vezama:

a ukras teksta: nijedan; 

Sve s vezom (“”) oznaka ostat će podcrtana. Želite li je podvući kad korisnik pređe preko pokazivača miša? Samo dodajte ovo u nastavku:

a: lebdite tekst-ukras: podcrtavanje; 

Ovaj tekstualni ukras možete dodati i aktivnim vezama kako biste bili sigurni da podcrtavanje ne nestaje kad se na njega klikne.

5. Napravite gumb za vezu

Ako želite da privučete više pozornosti na vašu vezu, korištenje gumba za link je sjajan način da se to riješi. Ovaj zahtijeva još nekoliko redaka, ali mi ćemo ih pregledati pojedinačno:

a: veza, a: posjećen, a: lebdeći, a: aktivan pozadinska boja: zelena; boja: bijela; padding: 10px 25px; poravnavanje teksta: središte; uređenje teksta: nema; zaslon: linijski blok; 

Uključivanjem sva četiri stanja veza, osiguravamo da gumb ne nestane kada korisnik lebdi ili klikne na njega. Također možete postaviti različite parametre za lebdeće i aktivne veze, poput promjene gumba ili boje teksta, kako biste dodali malo pop-a.

Boja pozadine je postavljena bojom pozadine, a boja teksta bojom. Padding definira veličinu okvira - tekst je podstavljen 10px okomito i 25px vodoravno. Poravnavanje teksta osigurava prikaz teksta u sredini gumba, a ne isključivanje na jednu stranu. Dekoracija teksta, kao što smo vidjeli u prošlom primjeru, uklanja podvlačenje.

“zaslon: linijski blok” je malo složenije. Ukratko, omogućuje vam postavljanje visine i širine objekta i osigurava da započne novi redak kad ga umetnete.

6. Napravite tekstni okvir

Običan odlomak nije baš uzbudljiv. Ako želite istaknuti vaš poziv na radnju ili neki drugi element na vašoj stranici, možda ćete htjeti baciti obrub oko nje. Evo kako to učiniti s nizom teksta:

p.bitno border-style: solid; širina obruba: 5px; boja obruba: ljubičasta; 

Ovaj je prilično izravan. Stvara čvrstu ljubičastu obrub, širinu od 5 piksela, oko bilo kojeg važnog stava. Da biste odlomku naslijedili ova svojstva, samo ga proglasite ovako:

Vaš važan odlomak ovdje.

Ovo će raditi bez obzira na veličinu stavka; jedan će redak dobiti obrub stranice, širinu stranice, jedan redak, a duži odlomak bit će okružen većom obrubom.

Postoji mnogo različitih stilova obruba koje možete primijeniti; umjesto “solidan,” probati “točkast” ili “dvostruko.” A širina može biti “tanak,” “srednji,” ili “gust.” Možete čak definirati i debljinu svake granice pojedinačno, poput ove:

širina obruba: 5px 8px 3px 9px;

To rezultira gornjom obrubom od 5 piksela, desnom obrubom od 8, dnom od 3 i lijevom obrubom veličine 9 piksela.

7. Elementi centriranja po sredini

Za vrlo čest zadatak, ovo je iznenađujuće neintuitivna stvar sa CSS-om. Jednom kada to učinite nekoliko puta, postaje mnogo lakše. Postoji nekoliko različitih načina za centriranje stvari.

Za element bloka (obično sliku), upotrijebit ćemo atribut margin:

.centar prikaz: blok; marža: auto; 

To osigurava da se element prikazuje kao blok i da se margine na svakoj strani postavljaju automatski (što ih čini jednakim). Ako želite centrirati sve slike na određenoj stranici, možete ih čak dodati “marža: auto” do oznake img:

img margin: auto; 

Da biste saznali zašto tako funkcionira, pogledajte objašnjenje modela CSS okvira na W3C. Evo kratke, grafičke verzije:

Ali što ako želimo usredotočiti tekst? CSS ima specifičnu metodu za to:

.središnji tekst poravnavanje teksta: središte; 

Ako želimo koristiti “centertext” klase da bismo centrirali tekst u određenom odlomku, sve što trebamo učiniti je dodati tu klasu u

označiti:

Ovaj tekst će biti centriran.

Sjećanje na te različite korake, međutim, druga je stvar. Možda želite označiti ovu stranicu.

8. Podešavanje paddinga

Umetanje elementa određuje koliko prostora treba biti na svakoj strani. Na primjer, ako dodate 25 piksela paddinga na dno slike, sljedeći će tekst biti gurnut 25 piksela dolje. Mnogi elementi mogu imati padding, ali ovdje ćemo upotrijebiti sliku za primjer.

Recimo da želite da svaka slika ima 20 piksela paddinga s lijeve i desne strane i 40 piksela na vrhu i na dnu. Postoji nekoliko načina na koje to možete učiniti. Najosnovnije:

img padding-top: 40px; padding-right: 25px; donji dio: 40px; padding-left: 25px; 

Postoji kratka ruka koju možemo upotrijebiti za prezentiranje svih ovih podataka:

img padding: 40px 25px 40px 25px; 

Ovo postavlja gornji, desni, donji i lijevi jastučić na desni broj. Ali to možemo učiniti i kraćim:

img padding: 40px 25px

Kada koristite samo dvije vrijednosti, prva se vrijednost postavlja za gornju i donju, a druga lijevu i desnu.

9. Označite redove tablica

CSS može puno učiniti da vaši stolovi izgledaju stvarno lijepo. Dodavanje boja, prilagođavanje obruba i prilagođavanje tablice mobilnim ekranima jednostavno su. Ovdje ćemo pogledati samo jedan sjajan efekt: isticanje redaka tablice kad mišem pređete preko njih.

Evo vam koda koji će vam biti potreban:

tr: lebdeći pozadinska boja: #ddd; 

Sada kad god mišem pređete preko ćelije tablice, taj će red promijeniti boju. Da biste vidjeli neke druge cool stvari koje možete učiniti, pogledajte stranicu W3C na maštovitim CSS tablicama.

10. Pomicanje slika između prozirnih i neprozirnih

CSS vam može pomoći i u radu s slikama. Na primjer, može prikazati slike s nižim stupnjem pune neprozirnosti (malo se pojavljuju “izblijedio”) i vratite ih u potpunu neprozirnost kada mišem pređete preko njih. Evo kako ćemo to učiniti:

img neprozirnost: 0,5; filter: alfa (neprozirnost = 50); 

“filtar” atribut čini isto što i “neprozirnost,” ali Internet Explorer 8 i stariji ne prepoznaju mjerenje neprozirnosti, pa je dobro uključiti ga.

Sad kad su slike pomalo prozirne, prelaskom miša dovest ćemo ih do potpuno neprozirnih:

img: lebdeći opacity: 1.0; filter: alfa (neprozirnost = 100); 

Postanite CSS Master

Uz ove primjere CSS koda, trebali biste imati puno bolju predodžbu o tome kako funkcionira CSS. Nakon što ste prošli kroz sve njih, primijetit ćete niz obrazaca koje možete primijeniti na daljnji CSS kôd Saznajte HTML i CSS s ovim Vodičima korak po korak Saznajte HTML i CSS s ovim Vodičima korak po korak, znatiželjni o HTML-u, CSS i JavaScript? Ako mislite da imate poteškoće za učenje izrade web stranica ispočetka - evo nekoliko sjajnih tutorijala koje treba isprobati. , I tada znate da ste stvarno počeli postati CSS master.

A ako sve ovo zvuči previše komplicirano, imajte na umu da jednostavno zgrabite neke CSS predloške. 11 CSS web stranice: ne počnite od nule! 11 CSS web stranice predloška: Ne počinjte od nule! Na mreži su dostupne tisuće besplatnih CSS predložaka, a sve obuhvaća moderne trendove dizajna i tehnologije. Možete ih koristiti u njihovom izvornom obliku ili ih prilagoditi tako da ih učine vlastitim. i modificirati ih.

Što radite s CSS-om? Koje biste primjere željeli vidjeti u budućnosti? Podijelite svoje misli u komentarima u nastavku!