10 Mga Simpleng Halimbawa ng CSS Code na Maaari Mong Malaman sa loob ng 10 Minuto

10 Mga Simpleng Halimbawa ng CSS Code na Maaari Mong Malaman sa loob ng 10 Minuto

Kapag nagsimula ka nang mag-dabble sa HTML, malamang na maging interesado ka sa pagdaragdag ng higit pang visual na suntok sa iyong mga web page. Ang CSS ang pinakamahusay na paraan upang magawa iyon. Hinahayaan ka ng CSS na maglapat ng mga pagbabago sa iyong buong pahina nang hindi umaasa sa estilo ng inline.





Narito ang ilang simpleng mga halimbawa ng CSS upang maipakita sa iyo kung paano gumawa ng ilang pangunahing mga pagbabago sa estilo sa iyong web page.



1. Pangunahing CSS Code para sa Madaling Pag-format ng Talata

Ang pag-istilo sa CSS ay nangangahulugang hindi mo kailangang tukuyin ang isang estilo sa tuwing lumilikha ka ng isang elemento. Maaari mo lamang sabihin na 'lahat ng mga talata ay dapat magkaroon ng partikular na estilo na' at mahusay kang pumunta.





Sabihin nating nais mo ang bawat talata (

, isa sa mga HTML tag na dapat malaman ng lahat) upang maging mas malaki nang bahagya kaysa sa dati. At may maitim na kulay-abo na teksto, sa halip na itim.

Kaugnay: Ang HTML Cheat Sheet



Ang CSS code para dito ay:

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

Simple! Ngayon, tuwing nagbibigay ang browser ng isang talata, ang teksto ay magmamana ng laki (120 porsyento ng normal) at kulay ('dimgray').



Kung gusto mong malaman kung aling mga kulay ng teksto na maaari mong gamitin, suriin ito Listahan ng kulay ng CSS mula sa Mozilla.

2. Halimbawa ng CSS upang Baguhin ang Kaso ng Character

Nais bang lumikha ng isang pagtatalaga para sa mga talata na dapat nasa maliit na takip? Ang isang sample ng CSS para doon ay:



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

Upang makagawa ng isang talata na ganap sa maliliit na takip, gumamit ng isang bahagyang naiibang HTML tag. Narito kung ano ang hitsura nito:

Your paragraph here.

Ang pagdaragdag ng isang tuldok at isang pangalan ng klase sa isang elemento ay tumutukoy sa isang sub-uri ng elementong iyon na tinukoy ng isang klase. Maaari mo itong gawin sa teksto, mga imahe, mga link, at anupaman sa anupaman.

Kung nais mong baguhin ang isang hanay ng teksto sa isang tukoy na kaso, gamitin ang mga halimbawang CSS code na ito:

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

Ang huli ay pinagsasama ang malaking titik ng bawat pangungusap.

Ang mga pagbabago sa istilo ay hindi limitado sa mga talata. Mayroong apat na magkakaibang kulay na maaaring italaga sa isang link: ang karaniwang kulay nito, ang binisita nitong kulay, ang kulay na hover nito, at ang aktibong kulay nito (na ipinapakita nito habang ini-click mo ito). Gamitin ang sample na CSS code na ito:

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

Sa mga link, ang bawat 'a' ay sinusundan ng isang colon, hindi isang tuldok.

Ang bawat isa sa mga deklarasyong iyon ay binabago ang kulay ng isang link sa isang tukoy na konteksto. Hindi na kailangang baguhin ang klase ng isang link upang makuha ito upang baguhin ang kulay.

Habang ang may salungguhit na teksto ay malinaw na nagpapahiwatig ng isang link, minsan mas maganda ang hitsura upang i-scrap ang salungguhit na iyon. Natapos ito sa katangiang 'text-decoration'. Ipinapakita ng halimbawang CSS kung paano alisin ang mga salungguhit sa mga link:

a { text-decoration: none; }

Anumang may link na 'link' ('a') ay mananatiling hindi salungguhit. Nais bang salungguhitan ito kapag isinara ito ng gumagamit? Idagdag lamang:

a:hover { text-decoration: underline; }

Maaari mo ring idagdag ang dekorasyong ito sa teksto sa mga aktibong link upang matiyak na ang underline ay hindi mawala kapag na-click ang link.

Nais na maakit ang higit na pansin sa iyong link? Ang isang pindutan ng link ay isang mahusay na paraan upang magawa ito. Ang isang ito ay nangangailangan ng ilan pang mga linya:

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

Ipaliwanag natin ang CSS code na sample na ito.

Ang pagsasama ng lahat ng apat na estado ng pag-link ay tinitiyak na ang pindutan ay hindi mawala kapag ang isang gumagamit ay mag-hover o mag-click dito. Maaari mo ring itakda ang iba't ibang mga parameter para sa hover at mga aktibong link, hal., Pagbabago ng pindutan o kulay ng teksto.

Ang kulay ng background ay itinakda sa background-kulay, at kulay ng teksto na may kulay. Tinutukoy ng padding ang laki ng kahon --- ang teksto ay naka-pad ng 10px patayo at 25px nang pahalang.

Tinitiyak ng pag-align ng teksto na ang teksto ay ipinapakita sa gitna ng pindutan, sa halip na sa isang tabi. Ang dekorasyong teksto, tulad ng sa huling halimbawa, ay inaalis ang salungguhit.

kung paano paikutin ang mga video sa windows media player

Ang CSS display 'display: inline-block' ay medyo kumplikado. Sa madaling sabi, hinahayaan kang magtakda ng taas at lapad ng object. Tinitiyak din nito na nagsisimula ito ng isang bagong linya kapag naipasok ito.

6. CSS Halimbawa Code para sa Paglikha ng isang Text Box

Ang isang payak na talata ay hindi masyadong kapana-panabik. Kung nais mong i-highlight ang isang elemento sa iyong pahina, baka gusto mong magdagdag ng isang hangganan. Narito kung paano gawin iyon sa isang string ng simpleng CSS code:

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

Ang isang ito ay prangka. Lumilikha ito ng isang solidong lilang hangganan, limang pixel ang lapad, sa paligid ng anumang mahalagang-klase na talata. Upang makagawa ng isang talata magmana ng mga katangiang ito, ideklara lamang ito tulad nito:

Your important paragraph here.

Gagana ito hindi alintana gayunpaman malaki ang talata ay.

Maraming iba't ibang mga istilo ng hangganan na maaari mong ilapat; sa halip na 'solid,' subukan ang 'tuldok' o 'doble.' Samantala, ang lapad ay maaaring 'manipis,' 'daluyan,' o 'makapal.' Maaari ring tukuyin ng CSS code ang kapal ng bawat hangganan nang paisa-isa, tulad nito:

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

Nagreresulta iyon sa isang nangungunang hangganan ng limang mga pixel, isang kanang hangganan ng walong, isang ilalim ng tatlo, at isang kaliwang laki ng hangganan na siyam na mga pixel.

7. Center-Align Mga Elemento Na May Pangunahing CSS Code

Para sa isang pangkaraniwang gawain, ang mga elemento na nakasentro sa CSS code ay nakakagulat na hindi naiintindihan. Sa sandaling nagawa mo ito ng ilang beses, nagiging madali. Mayroon kang isang pares ng iba't ibang mga paraan upang masentro ang mga bagay.

Para sa isang elemento ng pag-block (karaniwang isang imahe), gamitin ang katangiang margin:

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

Tinitiyak nito na ang elemento ay ipinapakita bilang isang bloke at ang margin sa bawat panig ay awtomatikong itinatakda. Kung nais mong isentro ang lahat ng mga imahe sa isang naibigay na pahina, maaari mo ring idagdag ang 'margin: auto' sa img tag:

img { margin: auto; }

Upang malaman kung bakit ito gumagana sa ganitong paraan, tingnan ang Pagpapaliwanag ng modelo ng kahon ng CSS sa W3C .

Ngunit paano kung nais mong isentro ang teksto sa CSS? Gamitin ang sample na CSS:

.centertext { text-align: center; }

Nais bang gamitin ang klase na 'centertext' upang isentro ang teksto sa isang talata? Idagdag lamang ang klaseng iyon sa

tag:

This text will be centered.

8. Mga Halimbawa ng CSS para sa Pagsasaayos ng Padding

Tinutukoy ng padding ng isang elemento kung magkano ang dapat na puwang sa bawat panig. Halimbawa, kung magdagdag ka ng 25 mga pixel ng padding sa ilalim ng isang imahe, ang sumusunod na teksto ay itutulak pababa ng 25 mga pixel. Maraming mga elemento ang maaaring magkaroon ng padding, hindi lamang mga imahe.

Sabihin nating nais mo ang bawat imahe na magkaroon ng 20 pixel ng padding sa kaliwa at kanang bahagi, at 40 pixel sa itaas at ibaba. Ang pinaka-pangunahing pagpapatupad ng CSS code para dito ay:

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

Mayroong isang mas maikling tagubilin sa CSS, gayunpaman, na nagpapakita ng lahat ng impormasyong ito sa isang solong linya:

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

Itinatakda nito ang tuktok, kanan, ibaba, at kaliwang paddings sa tamang numero. Salamat sa dalawang halagang ginagamit lamang (40 at 25) maaari mo itong gawing mas maikli pa:

img { padding: 40px 25px }

Kapag gumamit ka lamang ng dalawang halaga, ang unang halaga ay nakatakda para sa itaas at ibaba, habang ang pangalawa ay maiiwan at pakanan.

9. I-highlight ang Mga Rows ng Talahanayan Gamit ang CSS Coding

Ginagawa ng CSS code ang mga talahanayan na mas maganda kaysa sa mga default na grids. Ang pagdaragdag ng mga kulay, pag-aayos ng mga hangganan, at paggawa ng iyong talahanayan na tumutugon sa mga mobile screen ay madali. Ipinapakita sa iyo ng simpleng halimbawang CSS na ito kung paano i-highlight ang mga row ng talahanayan kapag na-mouse mo ito.

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

Ngayon sa tuwing mag-mouse ka sa isang table cell, ang hilera na iyon ay magbabago ng kulay. Upang makita ang ilan sa iba pang mga cool na bagay na maaari mong gawin, tingnan ang W3C na pahina sa magarbong mga talahanayan ng CSS .

10. Halimbawa ng CSS para sa Paglilipat ng Mga Larawan sa Pagitan ng Transparent at Opaque

Matutulungan ka ng CSS code na gumawa din ng mga cool na bagay sa mga imahe. Narito ang isang halimbawa ng CSS upang ipakita ang mga imahe nang mas mababa sa ganap na opacity, kaya't lilitaw itong bahagyang 'naputi'. Kapag na-mouse mo ang mga imahe, nadala nila sa ganap na opacity:

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

Ginagawa ng katangiang 'filter' ang parehong bagay tulad ng 'opacity,' ngunit hindi kinikilala ng Internet Explorer 8 at mas maaga ang pagsukat ng opacity. Para sa mas matandang mga browser, magandang ideya na isama ito.

Ngayon na ang mga imahe ay bahagyang transparent, maaari mo itong ganap na malabo sa isang mouseover:

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

10 Mga Halimbawa ng CSS Sa Source Code

Sa mga halimbawang CSS code, dapat magkaroon ka ng mas mahusay na ideya kung paano gumagana ang CSS. Mga template ng CSS maaaring makatulong, ngunit ang pag-unawa sa mga hilaw na elemento ay mahalaga.

Ang 10 madaling halimbawa ng CSS code na muling nakuha:

  1. Madaling pag-format ng talata
  2. Baguhin ang kaso ng sulat
  3. Baguhin ang mga kulay ng link
  4. Alisin ang mga underline ng link
  5. Gumawa ng isang pindutan ng link
  6. Lumikha ng isang text box
  7. Mga elemento ng center-align
  8. Ayusin ang padding
  9. I-highlight ang mga hilera ng talahanayan
  10. Gawing opaque ang mga imahe

Sinusuri muli ang mga ito, mapapansin mo ang maraming mga pattern na maaari mong mailapat sa hinaharap na code. At doon mo malalaman na nagsimula ka talagang maging isang master ng CSS. Ngunit ang pag-alala nito ay maaaring maging matigas. Maaaring gusto mong i-bookmark ang pahinang ito para sa sanggunian sa hinaharap.

Magbahagi Magbahagi Mag-tweet Email Ang Mahalagang CSS3 Properties Cheat Sheet

Mahalaga ang CSS CSS syntax sa aming sheet ng cheat ng mga katangian ng CSS3.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • Disenyo ng web
  • CSS
  • Pag-iskrip
Tungkol sa May-akda Christian Cawley(1510 Mga Artikulo Nai-publish)

Deputy Editor para sa Seguridad, Linux, DIY, Programming, at Tech Ipinaliwanag, at Tunay na Kapaki-pakinabang na tagagawa ng Podcast, na may malawak na karanasan sa suporta sa desktop at software. Isang nag-ambag sa magazine na Linux Format, si Christian ay isang Raspberry Pi tinkerer, Lego lover at retro gaming fan.

Higit pa Mula sa Christian Cawley

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe