Ano ang Mga Cascading Style Sheet at Ano ang Ginagamit Para sa CSS?

Ang CSS ay kabilang sa isang triple ng pangunahing mga teknolohiya sa web sa tabi ng HTML at JavaScript. Sa maingat na pagpaplano, nag-aambag ang CSS sa isang paghihiwalay ng mga alalahanin. Kinokontrol ng mga independiyenteng mapagkukunan ang istraktura ng isang nilalaman, ang pagtatanghal nito, at ang pag-uugali nito.

Ang Mga Style Sheet ay may mahalagang papel sa kakayahang mai-access, kakayahang sumukat, at maging ang pagganap sa web. Bilang may-akda ng nilalaman o taga-disenyo ng web, bibigyan ka nila ng kontrol sa kung paano nag-render ng nilalaman ang mga aparato. Mula sa layout hanggang sa laki at kulay ng font, binago ng CSS ang nilalaman sa mga magagandang hitsura na pahina.

Ano ang Mukha ng CSS?

Ang CSS ay isang malaking wika — maraming iba't ibang mga bagay upang mai-istilo! Ngunit ang syntax nito ay prangka, na may kaunting mga panuntunan lamang upang malaman.

Ang mga elemento ng HTML ay may iba't ibang mga pag-aari na maaaring istilo ng CSS. Ang kulay itinatakda ng pag-aari ang kulay sa harapan (hal. teksto). Ang laki ng font ay nakasalalay sa laki ng font pag-aari

Ang bawat pag-aari ay maaaring itakda sa isang sinusuportahang halaga. Ang pagtatalaga ng isang halaga sa isang pag-aari ay isang 'deklarasyon.' Pangkalahatan, ganito ang hitsura nila:

property: value

Halimbawa:

kung paano gumawa ng isang bootable cd

color: red

Ang mga halaga para sa iba't ibang mga katangian ay maaaring magmukhang ibang-iba, kahit na ang mga halaga para sa parehong pag-aari. Halimbawa, narito ang dalawa pang paraan ng pagsulat ng nakaraang deklarasyon:

color: #ff0000  
color: rgb(255, 0, 0)

Paano Magkakasama ang mga HTML at Style Sheet

Maaari mong pagsamahin ang HTML at CSS sa ilang magkakaibang paraan, bawat isa ay may mga kalamangan.

Mga Estilo ng Pagsusulat Inline

Ang pinakasimpleng pamamaraan ay upang maglakip nang direkta ng mga deklarasyon ng estilo sa isang elemento sa HTML file. Maaari mo itong gawin gamit ang style katangian tulad ng kaya:

  
 Most of this text is red …
  
 … but this isn’t!

Habang ang mga elemento ng istilo ng linya na tulad nito ay maaaring maging maginhawa, mayroon itong maraming mga drawbacks. Bilang panimula, kumplikado nito ang HTML, na ginagawang mas mahirap basahin nang isang sulyap. Ito rin ay mahirap upang mapanatili: isipin ang isang mahabang dokumento kung saan nais naming itakda ang kulay ng bawat talata. Ito ang CSS, ngunit hindi ito 'Style Sheets.'

Pag-embed ng Mga Estilo sa Ulo

Maaari mong simulan upang makita kung ano ang hitsura ng isang Style Sheet sa pangalawang mekanismo, pag-embed . Gamit ang pamamaraang ito, pinagsasama-sama namin ang lahat ng mga estilo ng deklarasyon nang magkasama sa loob ng a style elemento sa ulo ng aming dokumento. Magmumukha ito ng ganito:

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

Ang aming mga tagubilin sa istilo ay nangangailangan ng kaunting detalye kaysa dati, bagaman. Dahil inilipat namin ang mga ito sa ulo, ang bawat panuntunan ay hindi na nauugnay sa isang elemento. Maaaring idineklara namin Kulay pula , ngunit ano ang dapat magkaroon ng kulay na iyon?

Dito pumapasok ang mga tagapili ng CSS. Pinapayagan nila kaming mag-target ng mga tukoy na bahagi ng pahina at tukuyin ang kanilang istilo sa isang lugar, gamit ang syntax na ito:

kung paano buksan ang isang playstation 4

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

Halimbawa, upang gawing asul ang teksto ng mga talata, maaari naming tukuyin ang sumusunod:

p {  
 color: blue;  
}

Sa halimbawang ito, ang tagapili ay simple p , na tumutugma sa lahat ng mga elemento ng talata sa aming dokumento. Kulay nito ang lahat ng teksto na asul, hangga't ito ay nasa

Pag-link ng isang Panlabas na Style Sheet

Ang pangwakas na pamamaraan upang masakop ang pag-uugnay. Ito ay, sa ngayon, ang pinaka kapaki-pakinabang na diskarte, at isa na dapat mong opt para sa karamihan ng oras. Sa halip na i-embed ang mga panuntunan sa CSS sa style elemento nang direkta sa iyong dokumento, maaari mong ilipat ang mga ito sa isang hiwalay na file.

Idikit ang code na ito sa loob ng mga tag ng iyong HTML file upang mai-link ang iyong panlabas na sheet ng estilo.

Ang Lakas ng CSS

Gamit ang naka-link na pamamaraan, gumagamit kami ng pangunahing lakas ng CSS: paghihiwalay ng mga alalahanin. Ang lahat ng impormasyong semantiko — kung ano ang ibig sabihin ng nilalaman — ay nakapaloob sa dokumento ng HTML. Ang estilo - kung ano ang hitsura nito - ay nasa isang hiwalay na file, ang sheet ng estilo.

Narito ang ilang mga pakinabang lamang sa paghihiwalay na ito:

Maaari mong palitan ang isang style sheet sa pamamagitan lamang ng pagbabago ng sanggunian ng file. Maaari rin itong mangyari nang pabagu-bago. Sa isang hakbang, maaari mong baguhin ang buong hitsura at pakiramdam ng isang pahina.

Maraming mga pahina ang maaaring magbahagi ng parehong mga sheet ng estilo tulad ng kinakailangan. Sa pamamagitan ng pagbabago ng isang solong file, maaari mong i-update ang hitsura at pakiramdam ng isang buong website.

Ang paghati sa isang pahina sa 'nilalaman' at 'istilo' ay may mga teknikal na pakinabang. Maaaring i-cache ng mga proxy at browser ang mga indibidwal na file nang magkahiwalay. Nangangahulugan ito na ang isang site ay maaaring magpadala ng impormasyon ng istilo nito isang beses, sa halip na isama ito sa bawat solong pahina.

Kapag nakikipagtulungan, ang iba't ibang mga koponan ay maaaring gumana sa kanilang lakas, lumilikha at mag-e-edit ng magkakahiwalay na mga file nang hindi nakakaapekto sa bawat isa.

Pagpapaliwanag sa Cascade

Marami kang natutunan tungkol sa mga istilo at style sheet, ngunit paano ang tungkol sa cascading na bahagi ng CSS?

Ang kaskad ay kung ano ang magpapasya kung aling mga istilo ang gagamitin kung naroroon ang maraming mga sheet ng estilo. Nakita mo kung paano maaaring tukuyin ng may-akda ang mga istilo para sa kanilang nilalaman. Ngunit ang isa pang tampok ng CSS ay binibigyan nito ang mga mambabasa at mga tagagawa ng browser na sinasabi din tungkol sa bagay na iyon.

Maaaring nagtaka ka tungkol sa mga default na istilo. Halimbawa, paano ang isang H1 Lumilitaw ang malaki at naka-bold na elemento, kahit na walang mga sheet ng istilo ng may-akda? Ito ay salamat sa isang hanay ng mga espesyal na patakaran na bumubuo sa sheet ng style ng ahente ng gumagamit. Ang mga patakarang ito ay paunang inilapat ng iyong web browser sa bawat pahina na iyong binibisita.

Tinukoy ng kaskad na nalalapat ang isang sheet ng istilo ng may-akda pagkatapos ng mga istilo ng user-agent. Kung sinabi ng aming browser na naka-bold ang mga heading ngunit idineklara ng may-akda ng pahina na ang mga heading sa pahinang ito ay magaan, pagkatapos ay magwawakas ang mga ito.

Mayroong isa pang mapagkukunan ng sheet ng estilo na nagbibigay ng ilang kontrol sa mambabasa. Ang sinumang gumagamit ng web ay maaaring, sa teorya, mapanatili ang isang sheet ng estilo ng gumagamit na may pasadyang mga patakaran. Ang mga ito ay nakaupo sa gitna: ang mga panuntunan ng gumagamit ay mag-o-override ng mga default na setting ng browser, ngunit mai-override ng mga istilo ng may-akda. Nakalulungkot, ang suporta para sa mga sheet ng estilo ng gumagamit ay hindi pa laganap.

Pag-target sa Iba't ibang Media

Maaari mong gamitin ang Mga Style Sheet sa iba't ibang mga konteksto, lampas sa screen. Ang kalahati katangian ng link Tinutukoy ng elemento kung aling mga uri ng media ang nalalapat sa sheet ng estilo. Halimbawa, maaari mong tukuyin ang a style sheet para sa print gumagamit ng markup tulad ng sumusunod:
Maaari kang mangalap ng mga karaniwang istilo sa isang pandaigdigang sheet ng istilo at mga istilong tukoy sa media sa magkakahiwalay na mga file. Mayroong kahit mga uri ng media upang magsilbi para sa aural o braille na pagtatanghal ng iyong nilalaman. Ang CSS ay isang mahalagang tool sa pagpapabuti ng kakayahang mai-access.

Kaugnay: Paano Mag-browse sa Web Kung Bulag ka o May Kapansanan sa Paningin
bumili ng maramihan at magbenta nang paisa-isa

Ang mga site tulad ng Wikipedia ay gumagamit ng CSS upang makontrol ang kanilang istilo ng pag-print, itago ang mga hindi nais na elemento, at gawing simple ang layout.

Ginawang Maganda ng CSS ang HTML

Ang Cascading Style Sheets ay sumasaklaw ng maraming: ang kaskad, mana, mga tagapili, mapagkukunan, media, atbp. Ngunit ang kanilang lakas ay nagbibigay-daan sa modernong web. Ito ay isang daluyan na nagbibigay ng built-in na mga tampok na kakayahang magamit muli, kakayahang umangkop, at kakayahang mai-access.

Upang makita ang buong lakas ng CSS at kung magkano ang inaalok nito, suriin ang aming cheat sheet na sumasaklaw sa lahat ng mahahalagang pag-aari ng CSS3.
Magbahagi Magbahagi Mag-tweet Email Ang Mahalagang CSS3 Properties Cheat Sheet
Mahusay na CSS syntax ng mahahalagang sa aming sheet ng cheat ng mga katangian ng CSS3.
Basahin Susunod Mga Kaugnay na Paksa

Programming

Pag-unlad sa Web

CSS

Tungkol sa May-akda Bobby Jack(58 Mga Artikulo Na-publish)
Si Bobby ay isang mahilig sa teknolohiya na nagtrabaho bilang isang developer ng software sa loob ng halos dalawang dekada. Masigasig siya sa paglalaro, nagtatrabaho bilang Review Editor sa Switch Player Magazine, at nahuhulog sa lahat ng aspeto ng online na pag-publish at pag-unlad sa web.
Higit pa Mula kay Bobby Jack
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