10 preprostih primerov kode CSS, ki se jih lahko naučite v 10 minutah

10 preprostih primerov kode CSS, ki se jih lahko naučite v 10 minutah

Ko se boste začeli ukvarjati s HTML -jem, vas bo verjetno zanimalo, da svojim spletnim stranem dodate več vizualnega učinka. CSS je najboljši način za to. CSS vam omogoča, da spremembe uporabite na celotni strani, ne da bi se zanašali na vgrajen slog.





Tukaj je nekaj preprostih primerov CSS, ki vam pokažejo, kako narediti nekaj osnovnih sprememb stilov na svoji spletni strani.



1. Osnovna koda CSS za enostavno oblikovanje odstavkov

Slog s CSS pomeni, da vam ni treba določiti sloga vsakič, ko ustvarite element. Lahko rečete samo 'vsi odstavki morajo imeti ta poseben slog' in ste pripravljeni.





Recimo, da želite vsak odstavek (

, ena od oznak HTML, ki bi jo morali poznati vsi), da je nekoliko večja kot običajno. In s temno sivim besedilom, namesto črnim.

Povezano: Cheat Sheet HTML



Koda CSS za to je:

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

Enostavno! Zdaj, ko brskalnik upodobi odstavek, bo besedilo podedovalo velikost (120 odstotkov običajnega) in barvo ('dimgray').



Če vas zanima, katere barve navadnega besedila lahko uporabite, si oglejte to Seznam barv CSS iz Mozille.

2. Primer CSS za spremembo velike črke

Želite ustvariti oznako odstavkov, ki bi morala biti z malimi črkami? Vzorec CSS za to bi bil:



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

Če želite odstavek v celoti z malimi črkami, uporabite nekoliko drugačno oznako HTML. Takole izgleda:

Your paragraph here.

Če elementu dodate piko in ime razreda, podate podtip tega elementa, ki ga definira razred. To lahko storite z besedilom, slikami, povezavami in skoraj vsem drugim.

Če želite spremeniti niz besedila v določeno črko, uporabite te primere kode CSS:

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

Zadnja velika začetnica vsakega stavka.

Spremembe sloga niso omejene na odstavke. Povezavi je mogoče dodeliti štiri različne barve: standardno barvo, obiskano barvo, barvo lebdenja in aktivno barvo (ki jo prikaže, ko kliknete nanjo). Uporabite to vzorčno kodo CSS:

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

S povezavami vsakemu 'a' sledi dvopičje, ne pika.

Vsaka od teh izjav spremeni barvo povezave v določenem kontekstu. Za spremembo barve povezave ni treba spreminjati razreda.

Medtem ko podčrtano besedilo jasno označuje povezavo, je včasih lepše odstraniti to podčrtano. To dosežemo z atributom 'dekoracija besedila'. Ta primer CSS prikazuje, kako odstraniti podčrtaje na povezavah:

a { text-decoration: none; }

Vse, kar ima oznako povezave ('a'), bo ostalo podčrtano. Ali ga želite podčrtati, ko uporabnik lebdi nad njim? Preprosto dodajte:

a:hover { text-decoration: underline; }

To dekoracijo besedila lahko dodate tudi aktivnim povezavam, da zagotovite, da podčrtaj ne izgine, ko kliknete povezavo.

Želite pritegniti več pozornosti na svojo povezavo? Gumb za povezavo je odličen način za to. Ta zahteva še nekaj vrstic:

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; }

Razložimo to vzorčno kodo CSS.

Vključitev vseh štirih stanj povezave zagotavlja, da gumb ne izgine, ko uporabnik lebdi ali klikne nanj. Nastavite lahko tudi različne parametre za lebdenje in aktivne povezave, na primer spreminjanje gumba ali barve besedila.

Barva ozadja je nastavljena z barvo ozadja, barva besedila pa z barvo. Oblazinjenje določa velikost polja --- besedilo je obloženo za 10px navpično in 25px vodoravno.

Poravnava besedila zagotavlja, da je besedilo prikazano na sredini gumba, ne pa na eni strani. Dekoracija besedila, tako kot v zadnjem primeru, odstrani podčrtaj.

kako pridobiti več raziskav o Googlovih nagradah

Koda CSS 'display: inline-block' je nekoliko bolj zapletena. Skratka, omogoča nastavitev višine in širine predmeta. Zagotavlja tudi, da zažene novo vrstico, ko je vstavljena.

6. Primer kode CSS za ustvarjanje besedilnega polja

Navaden odstavek ni zelo razburljiv. Če želite označiti element na svoji strani, lahko dodate obrobo. Evo, kako to storite z nizom preproste kode CSS:

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

Ta je preprost. Ustvari trdno vijolično obrobo, široko pet pikslov, okoli vsakega odstavka pomembnega razreda. Če želite, da odstavek podeduje te lastnosti, ga razglasite takole:

Your important paragraph here.

To bo delovalo ne glede na to, kako velik je odstavek.

Uporabite lahko veliko različnih slogov obrobe; namesto 'trdno' poskusite 'pikčasto' ali 'dvojno'. Medtem je lahko širina 'tanka', 'srednja' ali 'debela'. Koda CSS lahko celo določi debelino vsake obrobe posebej, na primer:

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

Rezultat je zgornja meja petih slikovnih pik, desna meja osem, spodnja meja treh in velikost leve obrobe devet slikovnih pik.

7. Elementi, poravnani po sredini z osnovno kodo CSS

Za skupno nalogo je centriranje elementov s kodo CSS presenetljivo neintuitivno. Ko to storite nekajkrat, postane veliko lažje. Imate nekaj različnih načinov, kako osredotočiti stvari.

Za blokovni element (običajno sliko) uporabite atribut margin:

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

To zagotavlja, da je element prikazan kot blok in da se rob na vsaki strani samodejno nastavi. Če želite vse slike centrirati na dani strani, lahko oznaki img dodate celo 'margin: auto':

img { margin: auto; }

Če želite izvedeti, zakaj deluje na ta način, si oglejte Razlaga modela škatle CSS na W3C .

Kaj pa, če želite besedilo centrirati s CSS? Uporabite ta vzorčni CSS:

.centertext { text-align: center; }

Želite uporabiti razred 'centertext' za centriranje besedila v odstavku? Preprosto dodajte ta razred v

oznaka:

This text will be centered.

8. Primeri CSS za prilagajanje oblazinjenja

Oblazinjenje elementa določa, koliko prostora mora biti na vsaki strani. Če na primer na dno slike dodate 25 slikovnih pik oblazinjenja, bo naslednje besedilo potisnjeno 25 slikovnih pik navzdol. Veliko elementov ima lahko oblazinjenje, ne samo slike.

Recimo, da želite, da ima vsaka slika po 20 slikovnih pik na levi in ​​desni strani ter 40 slikovnih pik na zgornji in spodnji strani. Najosnovnejša izvedba kode CSS za to je:

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

Obstaja krajše navodilo CSS, ki vse te informacije predstavlja v eni vrstici:

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

To nastavi zgornje, desno, spodnje in levo oblazinjenje na desno številko. Z uporabo samo dveh vrednosti (40 in 25) lahko skrajšate:

img { padding: 40px 25px }

Ko uporabljate samo dve vrednosti, je prva vrednost nastavljena za zgornji in spodnji del, druga pa levo in desno.

9. Označite vrstice tabel s kodiranjem CSS

Zaradi kode CSS so tabele videti lepše od privzetih mrež. Dodajanje barv, prilagajanje robov in prilagoditev vaše mize na mobilne zaslone so enostavni. Ta preprost primer CSS vam pokaže, kako označite vrstice tabele, ko jih premaknete.

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

Zdaj, ko miško premaknete na celico tabele, bo ta vrstica spremenila barvo. Če si želite ogledati nekaj drugih kul stvari, ki jih lahko počnete, si oglejte W3C stran na domišljijskih tabelah CSS .

10. Primer CSS za prestavljanje slik med prosojno in neprozorno

Koda CSS vam lahko pomaga narediti kul stvari tudi s slikami. Tukaj je primer CSS za prikaz slik pri manj kot polni motnosti, zato so videti nekoliko 'pobeljene'. Ko premaknete miškin kazalec na slike, so popolnoma nejasne:

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

Atribut 'filter' počne isto kot 'motnost', vendar Internet Explorer 8 in starejši ne prepoznajo merjenja motnosti. Za starejše brskalnike je dobro, da ga vključite.

Zdaj, ko so slike rahlo prozorne, jih lahko z miško naredite popolnoma nepregledne:

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

10 primerov CSS z izvorno kodo

S temi primeri kode CSS bi morali imeti veliko boljšo predstavo o tem, kako deluje CSS. CSS predloge lahko pomaga, vendar je razumevanje surovih elementov ključnega pomena.

Povzetek teh 10 preprostih primerov kode CSS:

  1. Enostavno oblikovanje odstavkov
  2. Zamenjaj črke
  3. Spremenite barve povezav
  4. Odstranite podčrtane povezave
  5. Naredite gumb za povezavo
  6. Ustvarite besedilno polje
  7. Elementi po sredini
  8. Prilagodite oblazinjenje
  9. Označite vrstice tabele
  10. Naredite slike neprozorne

Če jih ponovno pregledate, boste opazili več vzorcev, ki jih lahko uporabite za prihodnjo kodo. In takrat veste, da ste res začeli postati mojster CSS. Toda zapomniti si je lahko težko. To stran boste morda želeli dodati med zaznamke za prihodnjo uporabo.

Deliti Deliti Cvrkutati E-naslov Osnovni list lastnosti CSS3 Lastnosti

Obvladajte bistveno skladnjo CSS z našo listo lastnosti za CSS3.

Preberite Naprej Sorodne teme
  • Programiranje
  • Oblikovanje spletnih strani
  • CSS
  • Skriptiranje
O avtorju Christian Cawley(1510 objavljenih člankov)

Namestnik urednika za varnost, Linux, DIY, programiranje in razlago tehnologije ter resnično uporaben podcast producent, z bogatimi izkušnjami s podporo za namizne računalnike in programsko opremo. Sodelujoč v reviji Linux Format, Christian je mačkar Raspberry Pi, ljubitelj Lega in ljubitelj retro iger.

Več od Christiana Cawleyja

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti