CSS Mula sa Tuktok hanggang sa Ibabang – Kasamang CSS3

Pagbubunyag: Tumutulong ang iyong suporta na panatilihing tumatakbo ang site! Kumikita kami ng bayad sa referral para sa ilan sa mga serbisyong inirerekumenda namin sa pahinang ito.


Ang Cascading Style Sheets, o CSS, ay ang wika na nagpapaganda sa web. Kasama ng HTML at JavaScript, ito ay isa sa mga teknolohiyang dapat master sa bawat developer ng end end.

Habang ang web ay puno ng mga mapagkukunan upang matulungan kang malaman ang CSS, kung ikaw ay isang baguhan ay maaaring nahihirapan kang paghiwalayin ang mga mahusay na mapagkukunan sa mga ok lang.

Sa gabay na mapagkukunan na ito ay nagbibigay kami ng isang pangunahing pagpapakilala sa kung ano ang CSS, kung ano ang may kakayahang, pati na rin ang mga tampok na nakalabas sa pinakabagong bersyon: CSS3.

Pagsisimula Sa CSS

Kung handa kang tumalon, narito ang saklaw ng gabay na ito:

  • Panimula sa CSS: kung bago ka sa CSS, ito ang lugar upang magsimula. Ang seksyon na ito ay nagbibigay ng isang pangunahing pangkalahatang-ideya ng CSS, at itinuturo ka patungo sa iba pang mahusay na mga mapagkukunan.
  • Ano ang Bago sa CSS3: kung nais mong magsaliksik sa mga module na na-scroll sa CSS3, magtungo sa paksang ito kung saan mo malalaman ang tungkol sa mga query sa media, box-sizing, 3D na pagbabago, animasyon, maraming mga layout ng haligi, at marami pa.
  • Paglikha ng mga Nakikiramay na Website sa CSS: ang mga website ngayon ay dapat na nagbibigay ng magandang sa isang aparato ng anumang laki, at ang CSS ay ang wika na nagaganap.
  • Paano Gumawa ng Mga Slide Door na Puso: isang panimulang aklat sa pagsasama ng jQuery sa CSS upang lumikha ng mga talagang cool na epekto.
  • Lahat ng Tungkol sa Mga Kulay ng CSS: bumangon at sumama sa mga kulay ng CSS. Kasama sa seksyong ito ang isang mahusay na sanggunian ng kulay.
  • Pagsusulat ng Mahusay na CSS:: Ang pagkakaroon ng mabilis na pag-load ng mga pahina ay mas mahalaga kaysa dati. Ito ay magpapakita sa iyo kung paano sumulat ng CSS na maaaring maputol ang iyong mga beses sa pagkarga.
  • Master CSS Online: ang mga mapagkukunang ito ay nagbibigay ng landas sa CSS mastery. Kung mas gusto mo ang isang estilo ng pag-aaral na natututo, ang seksyon na ito ay para sa iyo.
  • Mga kamangha-manghang gawa ng CSS: naghahanap ng inspirasyon? Narito nakolekta namin ang ilan sa mga kamangha-manghang mga CSS na likha sa web.
  • Ang Opisyal na Salita sa CSS3: ngayon alam mo na ang ilang CSS, at nalaman mo kung aling mga module ang na-scroll sa CSS3, magandang ideya na maging pamilyar ka sa W3C, ang samahan na nagtutulak ng pag-unlad ng CSS.
  • Inirerekumenda na Pagbasa: kung mas gusto mong matuto sa tulong ng isang ebook o paperback, suriin ang aming listahan ng mga inirekumendang libro, kung saan sigurado ka na makahanap ng isang pamagat na umaakit sa iyong interes.

Panimula sa CSS

Contents

Panimula sa CSS

Ang CSS, o Cascading Style Sheets, ay ginagamit na wika upang matukoy ang estilo at hitsura ng isang website.

Ang nilalaman ng isang website, kabilang ang mga header, mga talata, at mga imahe, ay nai-load ayon sa mga tagubilin na nilalaman sa isang HTML na dokumento, at sinabi sa CSS sa iyong browser kung paano iharap ang bawat elemento sa dokumento na HTML.

Ginagamit ang CSS upang gawin ang mga bagay tulad ng mga item sa posisyon sa isang website, at upang matukoy ang mga bagay tulad ng kulay ng background, laki at hangganan, puwang sa pagitan ng isang item at sa susunod, pamilya ng font, at marami pa.

Ang pangunahing pakinabang ng CSS ay lumilikha ng isang paghihiwalay sa pagitan ng disenyo ng isang website, at ang mga nilalaman ng website. Sa pamamagitan ng paghihiwalay ng nilalaman mula sa disenyo ng mga pagbabago sa disenyo ng pag-aayos ay maaaring gawin sa isang buong website sa pamamagitan ng pag-aayos ng ilang mga panuntunan ng CSS sa isang solong CSS file.

Tatlong Lugar Upang Isulat ang Mga Batas ng CSS

Bago ka makapagsulat ng isang linya ng CSS kailangan mong malaman kung saan isusulat ito, at kung paano itali ito sa nilalaman ng HTML na nakakaapekto ito. Mayroong tatlong magkakaibang mga lugar na maaari mong isulat ang CSS:

  • Panlabas na sheet sheet: Ang isang dokumento na nilikha lamang upang maglaman ng mga patakaran ng CSS na maaaring mailapat sa maraming mga dokumento ng HTML gamit ang LINK element sa isang header ng HTML na dokumento..
  • Panloob na sheet sheet: Ang mga estilo ng CSS na naka-embed nang direkta sa isang header ng HTML na dokumento sa pagitan ng mga tag ng elemento ng elemento.
  • Mga istilo ng inline: Ang mga estilo ng CSS ay naidagdag sa isang solong elemento ng HTML gamit ang katangian ng estilo sa loob ng dokumento ng HTML.

Habang mayroong isang oras at lugar upang magamit ang mga panloob na mga sheet ng estilo at mga inline na estilo, ang karamihan sa Ang mga estilo ng CSS ay pinakamahusay na inilalapat gamit ang isang panlabas na style sheet.

Ang isang panlabas na style sheet ay maaaring maiugnay sa anumang bilang ng mga dokumento sa HTML na nagpapahintulot sa iyo na kontrolin ang hitsura ng isang buong website mula sa isang solong CSS file.

Mga Kaugnay na Mga Panuntunan ng CSS sa Tukoy na Mga Sangkap ng HTML

Ang mga panuntunan ng CSS ay itinayo ng dalawang bahagi: isang pumipili at isang pagpapahayag. Ang bawat pagpapahayag ay binubuo rin ng dalawang bahagi: isang pag-aari at isang halaga.

  • Mga pumipili kilalanin, o piliin, ang mga elemento ng HTML na ang panuntunang CSS ay mailalapat sa.
  • Ari-arian ay mga pangalan na naglalarawan sa tampok na tatalakayin ng patakaran. Ang ilang mga karaniwang ginagamit na katangian ng CSS ay ang margin, hangganan, kulay ng background, pag-align ng teksto, at estilo ng font.
  • Mga pagpapahalaga ilarawan kung paano dapat lumitaw ang isang pag-aari. Kung ang pag-aari na pinag-uusapan ay margin, ang isang karaniwang halaga ay maaaring 10 pixel.

Mga pumipili at Pagtukoy

Kadalasan beses ang isang style sheet ay maglalaman ng mga salungat na patakaran para sa isang solong elemento ng HTML. Ang konsepto ng pagtutukoy ng pumipili ay matukoy kung aling mga patakaran ang inilalapat sa bawat elemento ng HTML.

Halimbawa, kung ginagamit ang isang listahan ng mga link para sa pangunahing nabigasyon, at ang mga karagdagang listahan ay ipinakita sa pangunahing katawan ng isang pahina, ang listahan ng nabigasyon at ang mga listahan sa katawan ay kakailanganin ng iba’t ibang mga hanay ng mga patakaran ng CSS.

Kung hindi man, ang menu ng nabigasyon at ang listahan sa katawan ng pahina ay sasailalim sa parehong mga patakaran ng CSS.

Ang pag-unawa kung paano gumagana ang mga taga-CSS ng susi sa mga panuntunan sa pagsulat na nakakaapekto sa tamang mga elemento ng HTML.

Habang ang pinakasikat na CSS selectors ay ang id, klase, at tag o elemento selectors, ang iba pang mga tagapili tulad ng mga katangian, positional selectors, pseudo selectors, at mga kumbinasyon ng mga pumipili ay maaaring magamit upang lumikha ng mga patakaran na may higit na tiyak.

Mga Karaniwang Gumagamit ng CSS

Maraming mga katangian ng CSS na inilalapat sa halos bawat pahina ng HTML. Ang pagiging pamilyar sa mga karaniwang katangian ng CSS na ito ay magpapahintulot sa iyo na harapin ang karamihan sa mga estilo ng pag-istilo at pagpoposisyon.

Styling Font

Maaaring magamit ang CSS upang lumikha ng anumang nais na estilo ng font. Kulay man, sukat, timbang, taas ng linya, pagkakahanay, kaso, ang uri ng font mismo, o mga dekorasyon tulad ng mga salungguhit at strikethrough na nais mong kontrolin, ang mga katangian ng CSS ay maaaring magamit upang lumikha ng nais na epekto.

Sa pamamagitan ng paglalapat ng mga prinsipyo ng pagtutukoy, ang isang iba’t ibang estilo ng font ay maaaring mailapat sa bawat elemento ng HTML sa isang pahina.

Ang Model Model

Ang puwang sa paligid ng bawat elemento ng HTML ay pinakamahusay na nauunawaan sa pamamagitan ng pag-iisip tungkol sa kung ano ang tinutukoy bilang modelo ng kahon:

Diagram ng Model Model

Ang modelo ng kahon ay binubuo ng tatlong mga katangian ng CSS: padding, border, at margin. Ang mga katangian na ito ay maaaring mailapat sa anumang elemento ng HTML. Ito ay pinakamadaling maunawaan ang tatlong mga pag-aari sa pamamagitan ng halimbawa.

Isaalang-alang ang sumusunod na elemento ng HTML talata:

Isang talata ng teksto.

Ano ang magiging epekto ng pagsulat ng sumusunod na panuntunan ng CSS?

p {
padding: 10px;
hangganan: solid 1px;
margin: 10px;
}

Ang talata ay lilitaw na napapaligiran ng:

  • Una, 10 mga piksel ng padding (walang laman na espasyo) sa lahat ng panig ng teksto ng talata,
  • Pangalawa, isang 1 pixel malawak na solidong hangganan sa paligid ng talata at padding,
  • Pangatlo, 10 mga piksel ng margin (walang laman na espasyo) sa pagitan ng hangganan at anumang katabing elemento.

Ito ang kilala bilang modelo ng kahon. Ang bawat elemento ay boxed muna sa pamamagitan ng walang laman na puwang na tinatawag na padding, kasunod ng isang hangganan, at sa wakas sa pamamagitan ng walang laman na puwang na tinatawag na margin.

Paggamit ng mga floats

Ang mga float ay ginagamit upang magpadala ng mga elemento ng HTML sa kaliwa o kanan ng kanilang elemento ng magulang nang hindi masira ang mga ito sa pangkalahatang daloy ng dokumento na HTML. Kasama ang malinaw na pag-aari ng kanilang kapatid, isa sila sa mga pinakamahusay na paraan upang lumikha ng mga layout ng website.

Habang hindi namin susubukan na takpan ang lahat doon upang malaman ang tungkol sa mga floats, kritikal na magkaroon ng isang pangunahing pag-unawa sa kung paano sila gumagana habang nagsisimula kang matuto ng CSS.

Ito ay pinakamadaling maunawaan ang mga lumulutang sa konteksto ng isang dokumento ng processor ng salita. Isaalang-alang ang isang imahe sa isang dokumento ng teksto.

Karaniwan ang bawat imahe ay matatagpuan alinman sa kanan, na may teksto na dumadaloy sa kaliwang bahagi ng imahe, o lahat ng paraan papunta sa kaliwa, na may teksto na dumadaloy sa kanang bahagi ng imahe. Sa website, ang hitsura na ito ay nakamit sa pamamagitan ng paggamit ng float na pag-aari.

Ang float property ay may apat na katanggap-tanggap na halaga: kaliwa, kanan, wala, at magmana. Sa kaso ng aming halimbawa sa itaas:

  • Kung ang imahe ay sumasailalim sa isang panuntunan ng CSS na may float ng pag-aari, at ang halaga ng kaliwa, ito ay nakaposisyon sa kaliwang bahagi ng elemento ng magulang, na may teksto na dumadaloy sa kanang bahagi.
  • Gagampanan ang tamang halaga tulad ng iyong inaasahan.
  • Walang pipigilan ang elemento mula sa paglulutang alinman sa direksyon.
  • Ang Inherit ay magiging sanhi ng sangkap na magmana ng float value na inilalapat sa elemento ng magulang.

Ang mga float ay karaniwang ginagamit upang lumikha ng mga menu ng pag-navigate sa site. Karaniwan ang isang menu ng pag-navigate sa site ay binubuo ng isang listahan na hindi nakaayos na HTML, na ang bawat item ng listahan ay lumulutang sa kaliwa o kanan, na nagreresulta sa mga item na listahan na lilitaw sa tabi ng bawat isa, sa halip na mai-up sa isang bullet style list.

Halimbawa, ang isang karaniwang menu ng pag-navigate ay maaaring ganito sa HTML:

  • Bahay

  • Ang aming Tindahan

  • Tungkol sa atin

  • Makipag-ugnayan sa amin.

Nang walang anumang mga panuntunan sa CSS, ang menu na ito ay lilitaw bilang isang bullet list, sa bawat item na lumilitaw sa isang bagong linya. Upang maipakita ang bawat item sa isang solong pahalang na linya na nagsisimula mula sa kaliwang bahagi ng pahina, maaaring gamitin ang sumusunod na panuntunan ng CSS.

li {
lumutang pakaliwa;
}

Tandaan na para sa pagpapagaan ng halimbawang ito ginamit namin ang listahan ng item ng tag bilang bilang taga-CSS. Sa katotohanan, hindi ito magagawa. Karaniwan ang isang klase ay itatalaga sa listahan mismo, o sa bawat item na listahan, at ang klase na iyon ay gagamitin bilang pumipili.

I-clear ang Float

Ang isa pang pag-aari na kadalasang ginagamit kasabay ng mga floats ay ang malinaw na pag-aari. Kapag ang isang elemento ay lumulutang, lahat ng kasunod na mga elemento ay lumulunsad at ihanay ang kanilang mga sarili sa tabi ng nakalutang na elemento.

Sa mga kaso kung saan mo nais ang kasunod na mga elemento upang magsimula sa ibaba ng nakalutang na item, sa halip na sa tabi nito, maaari mong gamitin ang malinaw na pag-aari upang pilitin silang magsimula sa isang bagong linya.

Nasusulat lang namin ang ibabaw ng kung ano ang maaaring gawin sa mga floats at ang malinaw na pag-aari, ngunit natagpuan namin ang mahusay na artikulo na ito mula sa CSS-Trick na nagbibigay ng isang malalim na pagtingin sa paksang ito.

Paggamit ng Posisyon Ari-arian

Ang pag-aari ng posisyon ng CSS ay isa pang pamamaraan na kadalasang ginagamit upang lumikha ng mga layout ng website. Hindi tulad ng float na ari-arian, ang posisyon ng pag-aari ay madalas na ginagamit upang masira ang mga elemento sa likas na daloy ng isang dokumento ng HTML, at upang idikta ang kanilang posisyon nang partikular.

Ang dalawang halaga ay maaaring magamit sa pag-aari ng posisyon: kamag-anak at ganap. Matapos mailapat ang isa sa mga halagang iyon, ang mga karagdagang pag-aari tulad ng tuktok, ibaba, kaliwa, at kanan ay maaaring magamit upang iposisyon ang apektadong elemento na partikular na.

Ang paggamit ng posisyon ng pag-aari upang lumikha ng mga layout ay hindi nang walang mga panganib. Hindi tulad ng float na pag-aari, ang mga elemento na nakaposisyon ng posisyon ng posisyon ay magbabalot ng iba pang mga item, na lumilikha ng potensyal para sa higit pang mga isyu sa laki ng cross-browser at viewport.

Gayunpaman, ito ay isang malawak na ginagamit na pag-aari sa loob ng mundo ng pag-unlad ng CSS, at magaling mong malaman ang mga pangunahing kaalaman sa paggamit ng posisyon ng posisyon.

Ano ang Bago sa CSS3

Ano ang Bago sa CSS3

Habang ang CSS2 ay isang solong pagtutukoy, ang CSS3 ay nahati sa higit sa limampung magkakaibang mga module, ang bawat isa sa ibang yugto ng pag-unlad at pagtanggap.

Ang patuloy na gawain sa CSS3 ay pinamamahalaan ng World Wide Web Consortium, o ang W3C, at nag-aalok sila ng isang sentralisadong lokasyon kung saan maaari mong subaybayan ang lahat ng patuloy na gawain sa pamantayan sa pamantayan ng CSS3.

Habang ang trabaho sa iba’t ibang mga module ng CSS3 ay patuloy, maraming mga module ang mayroon nang malawak na pagtanggap, at malawak na ginagamit ng maraming mga website. Narito ang sampung pinakamahalagang mga katangian ng CSS3 na nakakuha ng malawak na pagtanggap, at suportado ng lahat ng mga modernong browser.

  • Habang ang kakayahang lumikha ng simple mga animation naging posible sa loob ng mahabang panahon sa JavaScript, ang mga animation ng CSS ay maaari na ngayong malikha gamit ang mas simpleng CSS syntax.
  • Ang pagkalkula ang pag-andar na magagamit na ngayon sa CSS3 ay lubos na kapaki-pakinabang para sa paglikha ng mga tumutugon na mga layout. Maaari itong magamit upang magdagdag, ibawas, dumami, o hatiin, at ang resulta ng pagkalkula ay ginamit bilang halaga ng pag-aari.
  • Iba’t ibang uri ng advanced selectors ay idinagdag sa CSS3, na nagpapahintulot sa isang pagtaas ng antas ng pagtitiyak kapag pumipili ng mga elemento para sa mga panuntunan ng CSS.
  • Ang pagdaragdag ng gradients bilang isang uri ng background ay binigyan ng kapangyarihan ang mga developer ng CSS na lumikha ng mga kahanga-hangang background na na-download at mabilis na ipinapakita.
  • Ang mga katangian ng lapad at taas na inilalapat sa isang elemento ay hindi naglalaman ng padding, hangganan, at margin. Bilang resulta, ang padding, margin, at border ay nagdaragdag ng laki ng isang elemento na lampas sa tinukoy na lapad at taas. Ito ay matagal na nabigo ang mga tagabuo ng CSS na gumagamit ng kumplikadong matematika upang maayos ang mga layout ng website. Gayunpaman, sa bagong pag-aari ng kahon, ang halaga ng border-box ay maaaring mailapat, pilitin ang padding, hangganan, at margin sa loob ng mga hadlang ng lapad at taas na tinukoy, sa gayon pinapadali ang disenyo ng mga layout ng web page..
  • Ang CSS ay maaaring magamit upang mag-aplay ng mga hangganan sa anumang elemento ng HTML, at sa pag-aari ng imahe ng hangganan, ang paglikha at paggamit ng isang pasadyang hangganan ay mas madali kaysa dati. Ang syntax ng ari-arian mismo ay medyo kumplikado, ngunit sa sandaling makuha mo ang hang nito, maaari kang mabilis na lumikha ng isa-of-a-kind border para sa anumang elemento sa isang website.
  • Mga query sa media matukoy kung ang viewport ng aparato na ginagamit upang ma-access ang isang site ay nakakatugon sa ilang mga tinukoy na katangian. Ang @media CSS3 module ay isa sa mga pangunahing tool na ginamit upang lumikha ng mga tumutugon na mga website. Gamit ang mga query sa media ang isang developer ng CSS ay maaaring lumikha ng mga panuntunan ng CSS na inilalapat lamang kapag ang ilang mga tampok ng media, tulad ng lapad ng viewport at taas, at mga kakayahan sa pagpapakita ng kulay, ay natutugunan. Sa ganitong paraan, maaaring mai-repost at baguhin ang laki ng mga developer ng CSS, o itago ang lahat ng mga ito, batay sa mga resulta ng query sa media.
  • Paggamit maraming mga background upang lumikha ng isang tiyak na background na epekto ay mas madali kaysa dati sa CSS3. Sa pamamagitan ng paggamit ng pag-aari ng background, maraming mga larawan sa background, kulay, at gradients ay maaaring mailapat sa anumang elemento.
  • Paggamit mga haligi ang paglikha ng layout ng inspirasyon sa pahayagan ay mas madali kaysa dati sa mga haligi ng mga haligi sa CSS3. Ang ari-arian ay maaaring magamit upang madaling itakda ang bilang ng mga haligi, at ang lapad, na lumilikha ng isang lalagyan kung saan madaling dumaloy ang nilalaman mula sa isang haligi hanggang sa susunod. Ang mga haligi ay kapaki-pakinabang din para sa paglikha ng nababaluktot na mga menu ng nabigasyon.
  • Mga pagbabagong 3D ay posible sa pamamagitan ng CSS3. Ito ay isang kumplikadong paksa sa master, at magaling kang magsimula sa pamamagitan ng pagbabasa tungkol sa mga pagbabago sa CSS, at pagkatapos ay gumagana ang iyong paraan sa pamamagitan ng ilang mga tutorial.

Paglikha ng mga Nakikiramay na Website sa CSS

Paglikha ng mga Nakikiramay na Website sa CSS

Mayroong daan-daang, kung hindi libu-libo, ng iba’t ibang mga laki ng pagpapakita ng aparato at resolusyon na ginagamit araw-araw upang ma-access ang web, at bilang isang resulta, hindi na sapat na magkaroon ng isang solong laki ng website, at isa o dalawang disenyo para sa mas maliit na aparato.

Ngayon, ang iyong website ay kailangang matingnan sa malalaking mga screen, maliit na aparato, at bawat laki ng viewport sa pagitan.

Upang magawa ito, ang iyong website CSS ay dapat sumunod sa tatlong mga prinsipyo sa pagmamaneho ng tumutugon sa disenyo ng web.

  • Una, ang gulugod, o grid, na tumutukoy sa iyong pangkalahatang layout ay dapat na likido.
  • Pangalawa, ang mga imahe ay dapat awtomatikong baguhin ang laki upang mag-render nang maganda sa anumang aparato.
  • Pangatlo, ang mga query sa media ay dapat gamitin upang matugunan ang mga punto kung saan bumagsak ang orihinal na disenyo ng likido.

Kapag papalapit sa isang bagong proyekto sa disenyo ng web, maraming mga may karanasan na taga-disenyo ang nagsisimula sa isang mobile muna pamamaraan. Ang isang site na idinisenyo gamit ang diskarteng ito ay nagsisimula sa pinakasimpleng disenyo na inilaan para sa pinakamaliit na viewport, at ang mga karagdagang estilo ay idinagdag habang lumalaki ang laki ng viewport.

Nag-aalok ang mobile na unang diskarte ng dalawang kapansin-pansin na mga benepisyo:

  • Una, pinipilit nito ang taga-disenyo upang makilala ang mga mahahalagang pag-andar ng website, at gamitin ang mga ito bilang pundasyon para sa disenyo ng website. Madalas, ang isang buong laki ng website ay naglalaman ng nilalaman, tulad ng mga widget, menu at iba pa, na hindi bahagi ng site kapag tiningnan sa isang mobile device. Ang isang mobile na unang diskarte ay tumutulong upang matiyak na ang pangunahing layunin at pag-andar ng site ay tumatagal ng entablado yugto sa lahat ng mga sukat ng viewport.
  • Pangalawa, ang mga bisita sa website na naka-access sa site mula sa isang mobile phone ay nag-download ng mas kaunting mga panuntunan sa CSS at mga mapagkukunan ng website. Kung ang buong site ay ang unang nag-load, ang isang mobile user ay mag-download ng higit pang mga mapagkukunan kaysa sa kinakailangan. Ang mobile-unang diskarte ay naglo-load lamang ng mga naaangkop na item sa isang mobile device, na-save ang ilan sa mahalagang data ng bisita, at lumikha ng isang snappier na karanasan sa paglo-load ng site.

Pagkatuto ng Disenyo ng Pagkatuto

Ang isa sa mga pinakamahusay na paraan upang malaman ang mga responsableng diskarte sa disenyo ay may isang simpleng hands-on na tumutugon sa disenyo ng proyekto. Sa pamamagitan ng paglikha ng iyong unang tumutugon disenyo ng site makakakuha ka ng isang mas mahusay na pag-unawa sa mga konsepto na napag-usapan namin.

Sa paglaki ng katanyagan ng mga layout ng estilo ng haligi, isang bagong hamon ang lumitaw para sa mga taga-disenyo ng site: ang hamon ng pag-adapt ng mga layout ng haligi sa mga aparato ng bawat laki.

Sa kabutihang palad, may mga mapagkukunan upang matulungan ang mga nagsisimula ng CSS at nakaranas ng mga developer na magkatuto malaman kung paano magtrabaho sa bagong pag-aari ng CSS sa isang tumutugon na kapaligiran.

Ang isa pang mahusay na paraan upang magsimulang maunawaan kung paano ang pinakamahusay na mga website ng mga developer ng CSS ay upang tumingin sa isang tumutugon na website, sa isang hanay ng mga sukat, magkatabi. Ang Mga Media Query ay isang site kung saan maaari mong makita ang daan-daang mga tumutugon sa mga disenyo ng website sa isang hanay ng mga sukat lahat sa isang screen.

Paano Gumawa ng Mga Slide Door Pindutan

Paano Gumawa ng Mga Slide Door Pindutan

Gamit lamang ang CSS, maaari kang lumikha ng mahusay na pagtingin – at malakas – mga pindutan. Maaari kang gumawa ng higit pa sa isang maliit na jQuery.

Sa ibaba, ipapakita namin sa iyo kung paano kumuha ng mga simpleng mga larawan ng pindutan at i-set up ang mga ito upang magamit bilang mga pindutan na maaaring i-on ang lahat ng mga laki sa iyong website. Sa huli, gagawa ka ng magagamit na pindutan ng code na maaari mong magamit upang makabuo ng mga pindutan na tulad nito.

Mag-click sa imahe upang i-toggle animation.

Mga slide sa Mga Pindutan ng Pintura Halimbawa 1

Paglikha ng Iyong Mga Larawan

Ang pamamaraan na gagamitin namin upang lumikha ng mga pindutan na ito ay tinatawag na “sliding-door” CSS. Upang i-set up ang mga pindutan na ito kailangan namin ng dalawang mga imahe para sa bawat bersyon ng pindutan – sa aming kaso, dalawang itim na larawan ng pindutan at dalawang mga imahe ng asul na pindutan, apat na mga imahe sa kabuuan.

Upang lumikha ng mga larawang ito magsisimula kami sa mga imahe ng solid button.

Blue Button
Itim na Button

Ang kailangan nating gawin ay upang hatiin ang bawat pindutan sa dalawang larawan:

  • Ang imahe ng kaliwang kamay ay magiging makitid hangga’t maaari habang kinukuha pa rin ang buong radius ng mga sulok ng pindutan.
  • Ang kanang kamay na imahe ay magiging mas malawak hangga’t maaari, kung sa bagay, nais naming gumamit ng isang programa sa pagmamanipula ng imahe upang kopyahin ang katawan ng pindutan nang ilang beses upang maaari kaming lumikha ng mga mahahabang pindutan na may imahe.

Narito ang mga imahe na tatapusin namin matapos na maputol ang mga ito sa naaangkop na sukat:

Blue Button KaliwaTama ang Blue Button
Itim na Button KaliwaItim na Button na Kanan

Kapag mayroon kang lahat ng apat na mga imahe na nilikha, handa ka nang simulan ang pag-cod.

Button HTML

Ang aming pindutan na HTML ay binubuo ng tatlong sangkap: isang panlabas na div pembungkus, isang elemento ng angkla, at isang elemento ng span.

Teksto ng Pindutan

Sa block ng code sa itaas, ang lahat ng tatlong mga elemento ay nahati sa magkahiwalay na linya upang mas madali mong makita kung ano ang nangyayari.

Gayunpaman, sa pagsasagawa, marahil ay nais mong panatilihin ang lahat ng mga ito na inline, lalo na kung gumagamit ka ng isang sistema ng pamamahala ng nilalaman (CMS) tulad ng WordPress na magpasok ng mga tag ng talata pagkatapos ng bawat linya ng pahinga.

Pagdaragdag ng Mga Larawan ng Button

Sa ngayon, kung iginawad mo ang kaunting HTML mula sa halimbawa sa itaas, ang makukuha mo lamang ay isang link na nagsasabing “Button Text.” Ang susunod na hakbang na nais naming gawin ay upang idagdag ang imahe ng pindutan sa aming code.

Gayunpaman, bago natin gawin iyon, magdagdag tayo ng kaunting istilo sa panlabas na wrapper ng panlabas upang makita natin kung ano ang nangyayari nang mas malinaw.

.sliding-button {
display: inline-block;
lapad: auto;
margin: 20px;
}

Ang kaunting code na iyon ay magdagdag lamang ng ilang puwang sa paligid ng aming pindutan, at pilitin ang naglalaman ng div upang paliitin ang laki ng link at teksto. Ngayon handa na kaming idagdag ang aming mga larawan sa pindutan.

.sliding-link {
background-image: url (‘blue-button-right.png’);
laki ng background: auto 100%;
background-posisyon: tama;
background-ulitin: walang-ulit;
}
.sliding-text {
background-image: url (‘blue-button-left.png’);
laki ng background: auto 100%;
posisyon-background: kaliwa;
background-ulitin: walang-ulit;
}

Kaya ngayon naidagdag namin ang aming imahe ng pindutan. Sa kasamaang palad, hindi pa ito gaanong tingnan. Gayundin, kung mag-zoom in ka at tumingin ng mabuti, mapapansin mo na ang kaliwang imahe ay talagang nakaupo lamang sa tuktok ng kanang kamay. Hindi ang epekto na pupunta namin.

Masamang Button

Button Styling

Magdagdag ng kaunting padding sa paligid ng teksto. Makukuha nito ang aming pindutan na naghahanap ng katulad ng isang pindutan. Bilang karagdagan, kakailanganin nating baguhin ang pagpapakita ng mga elemento ng span at anchor upang mag-inline-block upang makuha ang pareho sa kanila upang tumugon sa padding at margin kung paano namin nais na.

.sliding-link {
display: inline-block;
}
.sliding-text {
padding: 20px;
display: inline-block;
}

Ibibigay ng code na iyon ang aming pindutan ng ilang laki. Gayunpaman, mayroon pa rin kaming nakakasagawang isyu ng overlap sa pagitan ng kaliwa at kanang mga imahe. Ang kailangan nating gawin ay ang paggamit ng margin upang ilipat ang kanang-kamay na imahe ng kaunti sa kanan, at pagkatapos ay ilapat ang eksaktong parehong negatibong margin sa kaliwang imahe.

.sliding-link {
margin-kaliwa: 17px;
}
.sliding-text {
margin-kaliwa: -17px;
}

Ang halaga ng 17-pixel ay naaangkop sa aming mga partikular na larawan ng pindutan. Kung gumagamit ka ng iba’t ibang mga imahe, kakailanganin mong i-tune ang halagang ito sa pamamagitan ng trial-and-error hanggang sa tama ang pindutan.

Bago magpatuloy, magpatuloy din at magdagdag ng ilang estilo sa aming pindutan ng pindutan.

.sliding-text {
kulay: #fff;
laki ng font: 14pt;
font-family: ‘Open-Sans’, Arial, sans-serif;
pagbabago ng teksto: malalaking titik;
bigat ng font: bold;
align ng teksto: gitna;
}

Sa puntong ito, ang aming pindutan ay talagang mukhang isang pindutan!

Magandang Button

Epekto ng Hover ng Pindutan

Sa ngayon, kung i-hover mo ang iyong mouse sa pindutan, walang visual na indikasyon na ang iyong mouse ay nasa ibabaw ng pindutan. Ayusin natin iyon sa pamamagitan ng pagdaragdag ng isang hover effect.

.slide-text: hover, .sliding-text: aktibo {
box-shade: inset 0 0 0 1000px rgba (255,255,255, .2);
}

Habang tiyak na gumagana ito, medyo magaspang. Una, ang paglulunsad ng epekto ng hover ay masyadong masidhi. Pangalawa, kung inilalagay mo ang pindutan sa isang madilim na background mapapansin mo na ang epekto ng hover ay umaabot sa kabila ng mga bilog na sulok ng pindutan.

Maaari naming ayusin ang parehong mga isyu na may ilang mga linya ng code na idinagdag sa span element.

.sliding-text {
-webkit-transition-ari-arian: box-shade; / * Safari * /
-webkit-transition-tagal: .2s; / * Safari * /
paglipat-ari-arian: box-shade;
tagal ng paglipat: .2s;
hangganan-radius: 12px;
}

Ngayon ang aming hover effect ay magbabalik sa loob ng dalawang daang daan ng isang segundo – isang maliit na easing, ngunit sapat upang maging maayos ang paglipat. Pangalawa, ang patakaran-radius na panuntunan ay bilog sa mga sulok ng epekto ng hover upang magkasya sa imahe.

Tandaan na ang halagang 12-pixel na inilalapat namin sa border-radius ay tiyak sa imahe ng aming pindutan. Kung gumagamit ka ng ibang imahe, kakailanganin mong maayos ang halaga na ito.

Pagpapalitan ng Mga Larawan ng Button

Sa ngayon, maaari kaming magdagdag ng isang URL sa katangian ng elemento ng href, at ang aming mga pindutan ay gagana nang mahusay bilang mga link. Gayunpaman, sa tuktok ng post na ito, mayroong isang gif na nagpakita ng isang toggle effect na nagbago sa imahe ng pindutan. Maglakad tayo sa proseso ng paglikha ng mga pindutan ng toggle ngayon.

Una, kailangan nating idagdag ang bagong imahe sa mga pindutan. Ang paraan na gagawin namin ay sa pamamagitan ng pagdaragdag ng mga larawan ng pindutan sa isang bagong klase, at pagkatapos ay gamit ang jQuery upang i-toggle ang klase at isara ang pindutan kapag ang pindutan ay nai-click.

Magsimula tayo sa CSS.

.kasalukuyang button na .sliding-link {
background-image: url (‘black-button-right.png’);
}
.kasalukuyang button na .sliding-text {
background-image: url (‘black-button-left.png’);
}

Sa ngayon, hindi gumagana ang toggle effect. Gayunpaman, kung mano-manong idagdag mo ang kasalukuyang kasalukuyang pindutan sa pindutan ng div ng lalagyan, makikita mo ang pangalawang bersyon ng iyong pindutan.

Upang lumipat sa pagitan ng dalawang bersyon ng pindutan sa pag-click, kakailanganin mong gumamit ng jQuery upang i-toggle ang kasalukuyang button na on at off para sa pindutan.

Gayunpaman, bago natin gawin iyon, kakailanganin nating magpasya kung aling mga pindutan ang nais nating maging mga pindutan ng toggle. Magagawa natin ito sa pamamagitan ng pagdaragdag ng isang klase sa anumang mga pindutan na nais naming gamitin bilang mga pindutan ng toggle. Gagamitin ang klase ng toggle-button para sa hangaring ito.

Kaya, upang maitalaga ang anumang pindutan bilang isang pindutan ng toggle, idagdag lamang namin ang klase sa panlabas na pambalot ng div:

Ngayon, maaari naming gamitin ang jQuery upang i-toggle ang kasalukuyang klase na pindutan at off para sa pindutan na iyon.

i-click ang (function na)) $ (‘. toggle-button’).
$ (ito) .toggleClass (‘kasalukuyang button’);
bumalik mali;
});

Mayroong ilang mga bagay na nangyayari sa code na iyon. Lakad natin ito.

Una, nag-load kami ng jQuery mula sa Mga Host ng Aklatan ng Google. Kung ang iyong website ay gumagamit na ng jQuery, pagkatapos maaari mong alisin ang unang elemento ng script.

Ang pangalawang elemento ng script ay naglalaman ng isang simpleng pag-andar ng jQuery.

Ang pag-andar ay nanonood ng anumang elemento na may pindutan ng toggle ng klase. Kapag ang anumang elemento na may klase na iyon ay nai-click, isang pagpapaandar ay pinaputok ang pagpindot sa klase ng kasalukuyang-pindutan o pag-click para sa nag-click na elemento.

Sa wakas, ang pag-andar ay nagbabalik ng maling halaga na pumipigil sa default na pag-uugali ng link, na kung saan ay upang mai-reload ang pahina dahil ang aming katangian ng angkla href ay walang laman sa isang pindutan ng toggle.

Sa mga idinagdag na mga piraso ng code, maaari nating i-toggle ang aming pindutan sa nilalaman ng aming puso.

Mag-click sa imahe upang i-toggle animation.

Pag-slide ng Pindutan ng Pintura Halimbawa 2

Ang Buong Code ng Pinagmulan

Kung sumunod ka, sunud-sunod, nakalikha ka na ng isang buong bersyon ng source code para sa mga pindutan na ito. Gayunpaman, kung hindi ka sumunod, maaari mong kunin ang buong source code para sa pindutan sa tutorial na ito sa pamamagitan ng pagkopya ng code sa ibaba sa isang dokumento ng HTML.

Mga slide ng Mga Pindutan na Pintuan

.sliding-button {
display: inline-block;
lapad: auto;
margin: 20px;
}
.sliding-link {
background-image: url (‘blue-button-right.png’);
laki ng background: auto 100%;
background-posisyon: tama;
background-ulitin: walang-ulit;
display: inline-block;
margin-kaliwa: 17px;
}
.sliding-text {
background-image: url (‘blue-button-left.png’);
laki ng background: auto 100%;
posisyon-background: kaliwa;
background-ulitin: walang-ulit;
display: inline-block;
padding: 20px;
margin-kaliwa: -17px;
kulay: #fff;
laki ng font: 14pt;
font-family: ‘Open-Sans’, Arial, sans-serif;
pagbabago ng teksto: malalaking titik;
bigat ng font: bold;
align ng teksto: gitna;
-webkit-transition-ari-arian: box-shade; / * Safari * /
-webkit-transition-tagal: .2s; / * Safari * /
paglipat-ari-arian: box-shade;
tagal ng paglipat: .2s;
hangganan-radius: 12px;
}
.slide-text: hover, .sliding-text: aktibo {
box-shade: inset 0 0 0 1000px rgba (255,255,255, .2);
}
.kasalukuyang button na .sliding-link {
background-image: url (‘black-button-right.png’);
}
.kasalukuyang button na .sliding-text {
background-image: url (‘black-button-left.png’);
}


I-togle ang Button

Button ng Link

i-click ang (function na)) $ (‘. toggle-button’).
$ (ito) .toggleClass (‘kasalukuyang button’);
bumalik mali;
});

Paglagay ng Iyong Button sa Magandang Paggamit

Ang huling piraso ng puzzle ay upang ilagay ang iyong mga bagong pindutan upang magamit nang mabuti. Narito ang ilang mga ideya upang makapagsimula ka:

  • Magdagdag ng isang URL sa elemento ng angkla href na katangian at gamitin ang pindutan upang mai-link sa anumang webpage. Tandaan na gawin ito ay nais mong talisin ang klase ng toggle-button mula sa button ng wrapper.
  • Gumamit ng karagdagang jQuery o JavaScript upang maipakita o itago ang karagdagang impormasyon kapag ang pindutan ay naka-toggle.
  • Kung talagang naramdaman mo ang mapaghangad, gamitin ang mga pindutan para sa pag-navigate sa site, at gamitin ang jQuery upang matukoy kung ang kasalukuyang pahina ay tumutugma sa pindutan ng URL at i-toggle ang kasalukuyang-button na klase kung ang dalawang tugma.

Lahat ng Tungkol sa Mga Kulay ng CSS

Lahat ng Tungkol sa Mga Kulay ng CSS

Ang isa sa pinakamahalaga – at potensyal na nakalilito – ang mga bagay na maaaring tinukoy sa CSS ay ang kulay. Halos lahat ng mga elemento sa isang web page ay maaaring kulayan gamit ang CSS.

Ang Mga Katangian ng Kulay ng CSS

Ang isang detalye na madalas na naglalakbay sa mga bagong front-end na developer ay ang kulay ng CSS na kulay. Ang nakalilito ay ang kulay ay hindi makontrol ang elemento mismo, ngunit ang teksto sa loob ng elemento.

Ang kulay ng isang elemento mismo (ang kahon) ay karaniwang kontrolado ng kulay ng background, kulay, hangganan, o ang mga katangian ng background ng shorthand at hangganan, na kasama ang impormasyon ng kulay. Maaari ka ring magtakda ng kulay sa isang box-shade.

Karaniwan, ang kulay ng background ng isang elemento ay sumasaklaw sa nilalaman, padding, at lugar ng hangganan ng elemento. Ito ang karaniwang pag-uugali na naisip ng mga tagalikha ng pamantayan ng CSS. Gayunpaman, may mga paraan ng paggawa ng padding at iba’t ibang kulay.

Mga Pahayag ng Kulay

Bukod sa iba’t ibang mga katangian ng CSS na maaaring magamit upang tukuyin ang isang kulay, mayroong tatlong magkakaibang paraan upang makilala ang isang kulay sa CSS: RGB, hex na halaga, o pangalan.

/ * Lahat ng tatlo sa mga ito ay magkaparehong kulay. * /

.pula-rgb {
kulay ng background: rgb (255, 0, 0);
}

.red-hex {
kulay ng background: # ff0000;
}

.pulang pangalan {
kulay ng background: pula;
}

Ang pangalawa (halaga ng hex) ay ang pinaka-karaniwan, ngunit magsisimula tayo sa RGB dahil hindi magkakaroon ng kahulugan ang mga halaga ng hex maliban kung naiintindihan mo kung paano gumagana ang RGB.

Mga Halaga ng RGB

Ang mga monitor ng computer, mga screen sa telebisyon, at iba pang katulad na mga display, ay may mga pixel. Sa mga display ng kulay, ang bawat pixel ay nahahati sa tatlong sub-pixel: pula, berde, at asul.

Ito ang tinatawag na “pangunahing kulay ng ilaw.” Ang isang kumbinasyon ng mga tatlong kulay na ito sa iba’t ibang mga intensidad ay maaaring magamit upang lumikha ng anumang kulay ng mata ng tao ay may kakayahang makita. Ito ay kilala bilang “additive na paghahalo ng kulay.”

(Ito ay nagkakahalaga ng pag-alam na ang lahat ay may kinalaman sa mata ng tao, at hindi sa mismong magaan.)

Ang iba’t ibang mga screen ng pagpapakita ay may iba’t ibang mga kakayahan sa mga tuntunin ng saklaw ng mga intensidad na maaaring makagawa ng bawat sub-piksel. Ang isang napaka-simpleng pagpapakita ay maaaring magkaroon lamang ng dalawang intensidad para sa bawat kulay (off o on), samantalang ang isang napakataas na kalidad ng display ay maaaring magkaroon ng maraming higit pang mga gradasyon.

Bilang isang pamantayan, ang mga computer ay gumagamit ng isang saklaw mula sa zero (0 – all the way off) hanggang 255 (all the way on) para sa bawat sub-pixel (halimbawa, 128 ay half-way on). Ito ay 256 posibleng intensidad para sa bawat sub-pixel, na nangangahulugang ang bawat halaga ng sub-pixel ay maaaring maiimbak bilang isang 8-bit byte (2 8 = 256).

Dahil mayroong tatlong kulay, ang bawat isa ay kinakatawan ng 8 bits, ang kabuuang bilang ng mga kulay na maaaring kinakatawan sa paraang ito ay higit sa 16 milyon (256 3 = 16,777,216).

Ang saklaw ng mga kulay na ito ay maaaring kinakatawan sa pamamagitan ng pagpapansin lamang sa halaga ng bawat sub-pixel, tulad nito:

rgb (0, 128, 255)

Sa halimbawang iyon, ang pulang sub-pixel ay pumanaw, ang berdeng sub-pixel ay kalahating daan, at ang asul na sub-pixel ay nasa lahat. Ang kulay na iyon ay ganito:

Sa sistemang ito, ang puti (lahat ng mga kulay sa lahat) ay rgb (255, 255, 255) at itim (lahat ng mga kulay off) ay rgb (0, 0, 0).

Ang mga kulay ng RGB ay maaari ring tinukoy bilang porsyento, gamit ang isang perpektong hindi sa isang solong trailing digit:

rgb (0.0, 50.0, 100.0)

Ang paggamit na ito ay hindi pangkaraniwan.

Mga halagang Hex

Ang isang mas compact na paraan ng pagsulat ng parehong eksaktong impormasyon ay ang paggamit ng mga halagang hex. Ang isang halaga ng kulay ng hex ay nakasulat na may isang hash (pound) sign, kasunod ng anim na hexadecimal character, sa tatlong pares, tulad nito:

# 0080ff

Ang unang pares ay kumakatawan sa pulang halaga, ang pangalawang pares ay kumakatawan sa berdeng halaga, at ang pangatlong pares ay kumakatawan sa asul na halaga. Sa halimbawang ito, ang 00 ay nangangahulugang walang pula, ang 80 ay nangangahulugang berde na kalahating daan, at ang ff ay nangangahulugang bughaw sa lahat ng paraan. Kaya ito ay ang parehong kulay ng rgb (0, 128, 255).

Ito ay maaaring tila isang maliit na nakalilito kung hindi ka gumagamit ng mga hexadecimal na numero. Sa aming normal na sistema ng desimal, ang bawat digit ay maaaring magkaroon ng 10 mga halaga (0-9). Sa hexadecimal numbering, ang bawat numero ay may 16 na posibleng mga halaga (0-9, a-f).

Ginagawa nitong posible na kumatawan sa lahat ng mga halaga mula 0-255 sa dalawang numero, 0-ff. Tingnan ang hexadecimal na tutorial para sa karagdagang impormasyon.

Sa sistemang ito, ang puti ay #ffffff at ang itim ay # 000000.

Ang mga halaga ng kulay ng Hex ay ang pinaka-karaniwang paraan upang tukuyin ang mga kulay sa CSS.

Mga Pangalan ng Kulay ng CSS

Ang pangwakas na paraan upang tukuyin ang isang partikular na kulay ay ang paggamit ng isa sa paunang natukoy na mga pangalan ng kulay. Ang W3C ay nagpapanatili, at paminsan-minsang pag-update, isang listahan ng mga opisyal na pangalan ng kulay na maaaring magamit sa lugar ng bilang ng mga code ng kulay. Halimbawa, maaaring itim ang itim sa halip na # 000000.

Sa mga unang araw ng web, ang mga pinangalanang kulay ay nakatulong na tukuyin ang isang maliit, hindi opisyal na hanay ng “mga ligtas na kulay ng web” na suportado nang maayos sa karamihan ng mga browser at mga display ng screen.

Ngayon, ang pinakamalaking bentahe ng pagkakaroon ng mga pangalan ng kulay ay mas madaling matandaan. Halimbawa, ang lightblue ay mas madaling matandaan (at tama nang tama) kaysa sa mga katumbas nito, # add8e6 o rgb (173, 216, 230).

Listahan ng Mga Pangalan ng Kulay ng CSS

Pangalan ng Kulay
Mga halagang Hex
Halimbawa ng Kulay
aliceblue# f0f8ff
antiquewhite# faebd7
aqua# 00ffff
aquamarine# 7fffd4
azure# f0ffff
murang kayumanggi# f5f5dc
bisque# ffe4c4
itim# 000000
blanchedalmond# ffe4c4
bughaw# 0000ff
Blue violet# 8a2be2
kayumanggi# a52a2a
burolina# deb887
cadetblue# 5f9ea0
tsart# 7fff00
tsokolate# d2691e
koral# ff7f50
cornflowerblue# 6495ed
mais# fff8dc
mapula-pula# dc143c
madilim na asul# 00008b
darkcyan# 008b8b
darkgoldenrod# b8860b
madilim na kulay-abo# a9a9a9
darkgreen# 006400
darkgrey# a9a9a9
darkkhaki# bdb76b
darkmagenta# 8b008b
darkolivegreen# 556b2f
darkorange# ff8c00
darkorchid# 9932cc
nagdidilim# 8b0000
darksalmon# e9967a
darkseagreen# 8fbc8f
darkslateblue# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
darkturquoise# 00ced1
darkviolet# 9400d3
deeppink# ff1493
deepskyblue# 00bfff
dimgray# 696969
dimgrey# 696969
dodgerblue# 1e90ff
firebrick# b22222
floralwhite# fffaf0
kagubatan# 228b22
fuchsia# ff00ff
gainsboro#dcdcdc
multo# f8f8ff
ginto# ffd700
goldenrod# daa520
kulay-abo# 808080
berde# 008000
berdeng dilaw# adff2f
kulay-abo# 808080
pulot-pukyutan# f0fff0
hotpink# ff69b4
indianred# cd5c5c
indigo# 4b0082
garing# fffff0
khaki# f0e68c
lavender# e6e6fa
lavenderblush# fff0f5
lawngreen# 7cfc00
lemonchiffon#fffacd
lightblue# add8e6
lightcoral# f08080
lightcyan# e0ffff
lightgoldenrodyellow# fafad2
lightgray# d3d3d3
lightgreen# 90ee90
lightgrey# d3d3d3
lightpink# ffb6c1
ilawalmon# ffa07a
lightseagreen# 20b2aa
mga ilaw# 87cefa
ilawlategray# 778899
ilawlategrey# 778899
lightsteelblue# b0c4de
magaan ang loob# ffffe0
dayap# 00ff00
limegreen# 32cd32
lino# faf0e6
Maroon# 800000
mediumaquamarine# 66cdaa
mediumblue# 0000cd
mediumorchid# ba55d3
mediumpurple# 9370db
mediumseagreen# 3cb371
mediumslateblue# 7b68ee
mediumspringgreen# 00fa9a
mediumturquoise# 48d1cc
mediumvioletred# c71585
hatinggabi# 191970
mintcream# f5fffa
pagkakamali# ffe4e1
moccasin# ffe4b5
navajowhite#ffdead
hukbong-dagat# 000080
oldlace# fdf5e6
oliba# 808000
oliba# 6b8e23
orange# ffa500
may dalandan# ff4500
orchid# da70d6
palegoldenrod# eee8aa
palegreen# 98fb98
paleturquoise#afeeee
palevioletred# db7093
papayawhip# ffefd5
peachpuff# ffdab9
peru# cd853f
kulay rosas# ffc0cb
plum# dda0dd
asul na pulbos# b0e0e6
lila# 800080
rebeccapurple# 663399
pula# ff0000
rosybrown# bc8f8f
royalblue# 4169e1
saddlebrown# 8b4513
salmon# fa8072
sandybrown# f4a460
seagreen# 2e8b57
pang-dagat# fff5ee
sienna# a0522d
pilak# c0c0c0
kalangitan# 87ceeb
slateblue# 6a5acd
slategray# 708090
slategrey# 708090
niyebe#fffafa
springgreen# 00ff7f
bakal# 4682b4
kulay-balat# d2b48c
teal# 008080
tinik# d8bfd8
kamatis# ff6347
turkesa# 40e0d0
lila# ee82ee
trigo# f5deb3
maputi#ffffff
puting usok# f5f5f5
dilaw# ffff00
dilaw na dilaw# 9acd32

Iba pang Mga Mapagkukunan ng Kulay ng CSS

  • Ang Tutorial ng Kulay ng CSS mula sa W3Schools ay isang mabilis na pangkalahatang-ideya ng paksa, na may mga karagdagang halimbawa.
  • Ang CSS Converter Converter ay isang online na tool na kumukuha ng anumang format ng kulay at ma-convert ito sa lahat ng iba pa, kasama ang nagbibigay ng posibleng mga pagpipilian sa palette ng kulay.
  • Ang sanggunian ng Kulay ng CSS mula sa Mozilla Developer Network ay isa sa mga pinakamahusay na lugar upang makakuha ng impormasyon tungkol sa iba’t ibang mga pamantayan ng kulay at pagtutukoy.
  • Mga Kulay, background, at Gradients: Pagdaragdag ng Indibidwalidad sa CSS (2015), ni Eric A Meyer, ay isang mahusay na libro na sumasaklaw sa mga kulay ng CSS nang detalyado.

Pagsulat ng Mahusay na CSS

Pagsulat ng Mahusay na CSS

Ang pagsusulat ng mahusay na CSS ay hindi mapaniniwalaan o kapani-paniwala mahalaga. Ang mga gumagamit ng internet ngayon ay may maikling maikling pansin, kaya mas mahaba ang iyong site na mai-load, mas mataas ang mga pagkakataon na matamaan nila ang back button.

Kung nagtatayo ka ng isang simpleng website, hindi mahalaga ang mahalaga sa CSS. Ngunit ang mga naturang website ay higit pa at mas bihirang. Kung nagtatayo ka ng isang malaki at kumplikadong site, dapat kang mag-alala sa kahusayan ng iyong CSS.

Nasa ibaba namin kung bakit mahalaga ang mahusay na CSS, kung paano sumulat ng mas mahusay na mga pumipili, at mag-alok ng ilang mga tool na makakatulong sa iyo na ma-optimize ang iyong code..

Bakit Mahusay na CSS Matters

Hindi isinasaalang-alang ang kahusayan ng CSS kapag isinulat ang iyong code ay maaaring sineseryoso ang pinsala sa pangkalahatang pagganap ng iyong pahina. At ang huling bagay na nais mo ay ang magkaroon ng isang mabagal na website ng pag-load.

Ang iyong layunin ay gawin itong mas madali hangga’t maaari para sa browser na maibigay ang iyong code – kahit na ang mga browser na hindi gaanong mahusay.

May mga argumento na ginawa na hindi ito gawain ng may-akda na mag-alala tungkol sa pag-optimize ng mga piling piling, dapat itong maging trabaho ng engine na pinagsama ang code. Bagaman totoo ito sa isang tiyak na lawak, hindi lahat ng gumagamit ay gumagamit ng isang modernong browser.

Mayroong mga gumagamit pa rin sa buong mundo na may access lamang sa mga matatandang computer at browser. Gustung-gusto mong parusahan ang mga gumagamit na iyon, dahil hindi nila ma-access ang pinakabagong teknolohiya. Siguro sa oras, magbabago ito.

Ngunit, ang pag-iisip sa iyong mga gumagamit kapag nagsusulat ka ng code ay palaging isang magandang ideya.

Ang Mga Pumipili Ang Pinaka Mahalaga

Ang isa sa mga pinakamahalagang aspeto ng pagsusulat ng CSS ay ang pag-unawa kung paano basahin at isama ang mga browser. Ang malaking bagay na maiintindihan ay ang pagbasa nila mula kanan hanggang kaliwa.

Nagsisimula ito sa pangunahing tagapili at lumilipat sa kaliwa upang hanapin ang mga ninuno sa piniling panuntunan. Pagkatapos, patuloy itong gumagalaw pakaliwa hanggang sa makumpleto ang panuntunan, o nagreresulta ito sa isang pagkakamali.

Kaya, kung ang iyong code ay nagbabasa ng ul > Oo, ang unang bagay na naisasalin ay isang img.

Ang pangunahing tagapili ay ang huling bahagi na aming itinalaga sa pagtatapos ng tagapili.

Apat na Uri ng Cors Selectors

Mayroong apat na pangunahing uri ng mga Cors selectors na kailangan mong magkaroon ng kamalayan at gamitin ang tamang paraan para maging epektibo ang iyong CSS code. Ang mga pinili sa ibaba ay inutusan ayon sa kanilang kahusayan. Ang mga nasa tuktok ay ang pinaka-mahusay, at sa ilalim ng hindi bababa sa.

Tagapili ng ID

Ang tagapili ng ID ay tumutukoy sa isang tukoy na elemento ng HTML gamit ang katangian ng ID, at mukhang sumusunod:

# pangunahing-nabigasyon

Sa HTML, ito ay gagamitin tulad ng mga sumusunod:

Pinili ng Klase

Ang pipili ng klase ay pipiliin ang mga elemento sa loob ng isang tiyak na katangian ng klase, at mukhang ang mga sumusunod:

.gitna

Sa HTML, ito ay gagamitin tulad ng mga sumusunod:

Tagapili ng Tag

Ang mga tag ng mga tag ay hindi gaanong mahusay kaysa sa mga ID at klase, kaya dapat silang magamit nang matiwasay. Ngunit maaari pa rin silang maging epektibo sa tamang mga kalagayan. Kadalasang ganito ang hitsura ng mga tag ng tag:

ul

Sa HTML, ang tag ay simpleng istilong bilang dikta ng CSS tuwing ginagamit ang tag (ul sa kasong ito).

Universal Selector

Ang unibersal na tagapili ay maaaring mailapat sa anumang elemento sa loob ng iyong dokumento. Upang magsulat ng mahusay na CSS dapat mong iwasan ang paggamit ng unibersal na pumipili hangga’t maaari. Ang unibersal na tagapili ay itinalaga ng mga sumusunod:

*

Mahusay na Panuntunan ng CSS na Dapat Tandaan

Mayroong ilang mga pangunahing patakaran na dapat tandaan na makakatulong sa iyo na magsulat ng mas mahusay na CSS. Sa pamamagitan ng pagsunod sa mga patakarang ito sa puso ng iyong CSS code ay mag-load nang mas mabilis at gagampanan ng mas mahusay sa bawat web browser sa paligid.

Huwag Gumamit ng mga Descendant Selectors

Ang isang tagapili ng inapo ay alinman sa dalawang pumipili na hindi nahihiwalay ng isang kombinador. Ang tagapili ng supling ay ang hindi bababa sa mahusay na tagapili, at maaaring magkaroon ng negatibong epekto sa pagganap.

Ang ilang mga halimbawa ng mga tagapili ng supling na hindi mo ginagamit, kasama ang:

header h3

footer p

.body div

Huwag I-Tag-Qualify ID

Dahil ang mga ID ay maaaring sumangguni sa isang solong elemento lamang, walang katuturan na kwalipikado ang mga ito sa tukoy na tag na gagamitin nila. Halimbawa,

li # kaliwa-nabigasyon

Hindi kinakailangang sabihin sa browser kung ano ang mai-tag sa pumipili. Sa halip, ito ay mas mahusay:

# left-nabigasyon

Tandaan na ang parehong bagay ay totoo sa mga klase, ngunit sa isang mas maliit na lawak. Kaya hindi rin kwalipikado ang mga klase.

Gumamit ng Panahin sa CSS hangga’t Posibleng

Ang mana na pag-aari ay isang mahalagang bagay na dapat i-master. Alamin kung aling mga pag-aari ang maipasa mula sa elemento hanggang elemento, at hayaan silang gawin ang kanilang trabaho.

Halimbawa, ang laki ng font ay minana. Kaya kung itinakda mo ito para sa katawan ng dokumento, hindi kinakailangan na itakda ito para sa mga p at li tag.

Limitahan ang Iyong Mga Batas

Ang pagdaragdag ng napakaraming mga patakaran sa iyong mga tag ay babagal ang iyong CSS code, at lubos na kumplikado ang proseso ng pagtutugma.

Halimbawa

katawan .widget-kaliwang #widget

Ito ay hindi magandang code. Mayroong masyadong maraming nangyayari. Sa kabilang kamay:

#widget

.widget-kaliwa

Ang mga ito ay mas mahusay.

Ang pagpapatupad ng mga tip sa itaas ay makakatulong upang mas mahusay ang iyong CSS code. Kung nais mong subukan ang iyong code o makahanap ng higit pang mga paraan upang maging mahusay ito, pagkatapos suriin ang ilan sa mga tool na naka-highlight sa ibaba.

Mga tool upang Mapabuti ang Iyong CSS

Kung tandaan mo ang mga patakaran sa itaas ay magiging mas mahusay ang iyong CSS code.

Ngunit, kung nais mong i-optimize ang iyong CSS code nang higit pa, mayroong mga tool na makakatulong sa iyong makarating doon. Sa ibaba ay binibigyan namin ng profile ang ilang mga tool na makakatulong upang i-compress ang iyong CSS, tukuyin ang mga pumili, at lumikha ng iyong mga ID para sa iyo.

  • Pagsubok sa Stress ng CSS: cool ito sa paggawa ng micro-adjustment sa iyong site, tulad ng pag-scroll, pag-zoom, pag-laki, at marami pa. Dagdag pa, ginagawa nito ang lahat sa ilalim ng 30 segundo. Pagkatapos ay nagpapadala ka sa iyo ng isang ulat tungkol sa pagiging epektibo ng iyong CSS.
  • Tukuyin ang CSS ID: ang web pack CSS loader ay isang napaka-kapaki-pakinabang na tool. Makakatulong ito upang tukuyin ang mga klase at ID, at maaaring gawin ang ilang pag-optimize ng CSS para sa iyo.
  • Bawasan ang Iyong Mga Pinili ng CSS: ipinapakita nito ang lahat ng mga CSS selectors na kasalukuyang nasa lugar kasama ang mga elemento ng gumagamit na ginagamit. Pinapayagan ka nitong bawasan ang bilang ng mga pumipili na ginagamit mo, upang mabawasan mo ang iyong pangkalahatang pag-load ng memorya. Sa tool na ito maaari kang mag-plug sa anumang URL, kaya maaari mo ring pag-aralan ang iba pang mga site.
  • Paliitin ang Iyong CSS Code: pag-urong ng iyong umiiral na CSS code. Ang mas kaunting code na kailangan mong iipon ang mas mahusay. Nagbibigay ito ng isang “bago” at “pagkatapos” na screenshot, upang makita mo ang mga pagbabago na ginawa ng tool na ito.
  • I-compress ang Iyong Mga CSS Files: ang pag-gzipping ng iyong mga file ng CSS ay makakatulong upang malinis ito. Kaya, makakatulong ito upang mabawasan ang pangkalahatang sukat ng tugon ng HTTP at sa gayon ang oras ng pagtugon sa server.

Ang Pagsusulat ng Mahusay na CSS ay Isang Magandang ideya

Pipili ka man o hindi upang mai-optimize ang iyong CSS ay nasa iyo. Hindi ito ganap na kinakailangan sa mga modernong browser. Gayunpaman, kung lumilikha ka ng isang komplikadong site, mahusay na gawin ito.

Ano pa, maaari ka pa ring magkaroon ng mga gumagamit na may mas matandang pag-setup at ito ay isang matalinong ideya upang matugunan din ang kanilang mga pangangailangan. Sana, ang seksyon na ito ay makakatulong sa iyo na gawin lamang iyon at magsulat ng mas mahusay na CSS.

Master CSS Online

Master CSS Online

Maraming mga lugar sa online kung saan maaari kang manood ng mga video, kumpletong mga tutorial, at kahit na code sa loob ng isang browser habang natututo ka sa CSS. Habang may mga dose-dosenang, kung hindi daan-daang, ng mga mapagkukunan na magagamit, narito ang ilan sa aming mga paboritong libreng lugar upang malaman ang tungkol sa CSS.

Kung talagang tatak ka sa CSS, Huwag matakot sa Internet ay isang serye ng video na nagsisimula sa friendly na nagpapakilala sa parehong CSS at HTML. Kung nagsisimula ka pa mula sa simula, ito ay isang mahusay na seryeng ginawa na hindi takutin ang mga nagsisimula pa lamang sa kanilang paglalakbay upang malaman ang CSS.

Kung hindi ka pa nakasulat ng isang style sheet, isang magandang lugar upang isulat ang una mo ay CSS Tutorial na ibinigay ng World Wide Web Consortium (W3C). Ang tutorial na ito ay hindi nagbibigay ng maraming paliwanag, kaya kung ikaw ay isang mag-aaral na hands-on, maaaring ito ay isang mainam na lugar upang magsimula.

Ang pagsulat ng HTML at CSS ay nangangailangan na gumamit ka ng isang text editor, i-save ang mga file na may tamang pag-format at header, at gumamit ng isang browser upang matingnan ang iyong trabaho. Kung mas pipiliin mo ang isang programa na nagbibigay-daan sa iyo na mag-edit ng mga file nang direkta sa iyong browser, Codecademy ang eksaktong hinahanap mo.

Ang isa pang mapagkukunan na sumasaklaw sa halos lahat ng parehong lupa tulad ng Codecademy, ngunit ang isa na kakailanganin mong malaman kung paano gumamit ng isang text editor at kung paano i-save ang mga file sa tamang format, ay Alamin sa Code HTML at CSS ni Shay Howe. Kapag na-master mo na ang mga pangunahing kaalaman, magagamit din ang isang advanced na programa.

Ang pagkontrol sa mga layout ng pahina ay isa sa mga nakakalito at pinakamahalagang gawain na nagawa sa CSS. Kung nagkakaproblema ka sa pagkuha ng hang ng pagkontrol sa mga layout, ang tutorial mula sa Alamin ang Layout ang kailangan mo lang.

Ang Mozilla Developer Network nag-aalok ng isang CSS tutorial na sumasaklaw sa lahat ng mga pangunahing pag-andar ng CSS sa isang paraan na ihahanda ka upang magpatuloy sa mas mapaghamong mga paksa.

Kung nais mo ang isang matibay na pundasyon mula sa kung saan maaari kang lumaki sa isang buong CSS developer, maaari mong gawin ang mas masahol kaysa sa MDN CSS tutorial.

Panghuli, walang listahan ng mga mapagkukunan na magiging kumpleto nang hindi binabanggit ang samahan na nagtutulak ng pag-unlad ng CSS.

Habang tiyak na hindi ang pinakamadaling tutorial sa listahang ito, ito ay kumpleto at detalyado. Kung ang iyong layunin ay matuto ng isang maliit na CSS, hindi ito ang tutorial para sa iyo, ngunit kung ikaw ay nagsisimula sa paglalakbay upang maging isang ganap na tagabuo ng CSS, ito ay isang magandang tutorial upang makakuha sa ilalim ng iyong sinturon.

Inspirasyon ng Disenyo

Mga kamangha-manghang gawa ng CSS

Kung naghahanap ka ng inspirasyon sa disenyo, o nais na makakuha ng isang mas mahusay na kahulugan sa kung ano ang magagawa ng CSS, narito ang ilang mga lugar upang suriin ang mga ipinakitang mga gawa ng CSS.

  • Pinagsama ng Creative Bloq ang curated list na ito ng dalawampu’t dalawang kamangha-manghang mga animation ng CSS. Habang tinitingnan mo ang mga ito, tandaan na marami sa mga animasyong ito ang gumagamit din ng JavaScript bilang karagdagan sa CSS.
  • Ang CSS Design Awards ay nilikha ang listahang ito ng sampung mga animation na kumpleto sa mga demo at mga tutorial upang maaari mong ilapat ang mga konsepto sa iyong sariling mga proyekto.
  • Ang MDN DemoStudio ay isang lugar kung saan maaari mong tingnan ang daan-daang mga demo ng CSS na pinagsunod-sunod sa pamamagitan ng pagiging popular, bilang ng mga tanawin, katayuan ng trending, o sa pamamagitan ng pagtingin sa pinakabagong mga demo.
  • Marami sa mga animasyon na napili para sa mga nakaraang listahan ay naka-host sa Code Pen, at ang direktang patungo sa mga pen ay magbibigay sa iyo ng access sa isang malaking bilang ng mga kahanga-hangang mga animation na binuo gamit ang HTML, CSS, at JavaScript.
  • Kung nakita mo ang lahat ng mga magagandang animation na pinapahalagahan mong makita, at sa halip nais mong makita kung paano magamit ang CSS upang ganap na baguhin ang isang buong website nang hindi gumagawa ng isang solong pagbabago sa HTML, suriin ang mga ito ng mga eleganteng disenyo ng website na binibigyang diin ang kapangyarihan ng CSS.

Ang Opisyal na Salita sa CSS3

Ang Opisyal na Salita sa CSS3

Ang W3C ay ang samahan na nagtutulak ng pag-unlad ng mga pamantayan sa web, kabilang ang mga module ng CSS3. Habang natututo ka sa CSS at level-up ang iyong skillset, dapat mong pamilyar ang W3C, at ang teknikal na dokumentasyon na kanilang inaalok.

Ang W3C CSS homepage ay ang launching pad para sa lahat ng mga bagay CSS sa W3C. Mula sa pahinang ito makakahanap ka ng impormasyon tungkol sa patuloy na pamantayang gawain sa pag-unlad.

Inirerekumendang Pagbasa

Inirerekumendang Pagbasa

Ang isa sa mga pinaka-epektibong paraan upang makabuo ng isang mas malalim na pag-unawa at kadalubhasaan sa CSS3 ay ang paggamit ng maraming mapagkukunan at pamamaraan ng pagtuturo.

Kung sinubukan mo ang isang tutorial o dalawa at nais mong subukan ang isang karagdagang pamamaraan, o kung gusto mo lamang na gumana mula sa isang nakasulat na teksto, narito ang ilan sa mga pinakamahusay na teksto ng CSS sa merkado:

  • Ang CSS3 Para sa Mga Disenyo ng Web (2010), ni Dan Cedarholm: Gamit ang isang paunang salaysay ni Jeffrey Zeldman, ang tagapagtatag ng A List Apart, at mga pagrekomenda mula kay Chris Coyier ng CSS-Tricks, at Eric Meyer, may-akda ng maraming mga libro tungkol sa CSS, ang tekstong ito ni Si Dan Cedarholm, co-founder ng Dribbble, ay ang pamantayang ginto para sa mga teksto ng CSS3.
  • HTML at CSS: Disenyo at Bumuo ng mga Website (2011), ni Jon Duckett: Kasama sa teksto na ito ang parehong HTML at CSS, at ito ay isa sa pinakatanyag at respetong pagpapakilala sa parehong mga paksa.
  • Alamin ang CSS sa Isang Araw at Alamin Ito nang maayos (2015), ni Jamie Chan: Kung ikaw ay isang nagsisimula sa CSS, at nais mong mabilis na mabitin ang mga pangunahing kaalaman, ang aklat na ito ay para sa iyo.
  • CSS: Ang Nawawalang Manwal (2015), ni David Sawyer McFarland: Ang teksto na ito ay hindi naglalayong pulos sa mga nagsisimula, ngunit sa halip ay sumasaklaw sa mga advanced na paksa tulad ng Flexbox at ang paggamit ng Sass. Kung handa ka nang mag-level-up mula sa katayuan ng nagsisimula, tutulungan ka ng tekstong ito na makarating roon.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me