Kodi Chiyanjano cha CSS Selector N'chiyani?

Chifukwa chophweka chophweka chimachepetsa kuwerengetsa

CSS, kapena Mapepala a Mtundu Wosaka, ndi njira yovomerezeka ya mafakitale a webusaiti yowonjezera mafayilo owonekera pa siteti. Ndi CSS, mungathe kusintha tsamba lamasamba, mitundu, zojambulajambula , chithunzi chakumbuyo, ndi zina zambiri. Kwenikweni, ngati chiwonetsero chowonetserako, ndiye CSS ndiyo njira yobweretsera mafashoni anu pa webusaiti yanu.

Pamene muwonjezera ma CSS pa pepala, mungazindikire kuti chikalatacho chimayamba kukhala ndi nthawi yaitali. Ngakhale malo ang'onoang'ono omwe ali ndi masamba angapo angathe kukhala ndi fayilo yaikulu ya CSS - ndipo malo aakulu kwambiri omwe ali ndi zambiri komanso masamba ambiri okhutira akhoza kukhala ndi ma foni akuluakulu a CSS. Izi zikuphatikizidwa ndi malo omvera omwe ali ndi mafunso ambiri a mauthenga omwe akuphatikizidwa mu mapepala a kalembedwe kuti asinthe momwe zithunzizo zikuwonekera ndipo tsamba likuyang'ana zojambula zosiyanasiyana.

Inde, maofesi a CSS akhoza kutenga nthawi yaitali. Izi si vuto lalikulu pokhudzana ndi zochitika pa webusaiti komanso kulandira liwiro, chifukwa ngakhale fayilo yaitali ya CSS ikhoza kukhala yochepa kwambiri (popeza ndizolemba chabe). Komabe, pang'ono pokha limawerengera pakubwera pa tsamba, kotero ngati mutha kupanga chojambula chanu chojambula, ndilo lingaliro labwino. Apa ndi pamene "comma" ikhoza kubwera mofulumira kwambiri mu pepala lanu la kalembedwe!

Makasitomala ndi CSS

Mwinamwake mumadabwa kuti choyimira chimasewera bwanji mu syntax ya CSS yosankha. Monga mamasulidwe, comma imabweretsa chidziwitso-osati code-kwa olekanitsa. Choyipa mu chosankha cha CSS chimasiyanitsa osankhidwa ambiri mumasewero omwewo.

Mwachitsanzo, tiyeni tiyang'ane CSS pansipa.

Mtundu: wofiira; }}
td {mtundu: wofiira; }}
p.red {mtundu: wofiira; }}
div # yoyamba {mtundu: wofiira; }}

Ndi mawu achidule awa, mukunena kuti mukufuna ma tepi, td tags, ma tags ndi akalasi ofiira, ndipo div tag ndi chidziwitso choyamba chokhala ndi mtundu wofiira.

Izi ndizovomerezeka kwambiri CSS, koma pali zovuta ziwiri zofunikira kuzilemba motere:

Kuti mutha kupeĊµa zosokonezazi, ndi kukhazikitsa ndondomeko yanu ya CSS, tidzayesa kugwiritsa ntchito makasitomala.

Kugwiritsira ntchito makasitomala kuti asankhe osiyana

M'malo molemba 4 osankhidwa a CSS ndi malamulo 4, mungathe kuphatikiza mafashoni onsewa kukhala chinthu chokhazikitsa malamulo mwa kulekanitsa osankhidwawo ndi chida. Apa ndi momwe izo zikanati zichitike:

th, td, p.red, div # yoyamba {mtundu: wofiira; }}

Munthu wotchuka kwambiri amakhala ngati mawu "ndi" mkati mwa wosankha. Kotero izi zikugwiritsidwa ntchito pa ma t h ndi ND ndi malemba ndi ndime ndi ofesi yofiira ndi div tag ndi ID yoyamba. Izi ndizo zomwe tinali nazo kale, koma m'malo mofuna malamulo 4 a CSS, tili ndi lamulo limodzi ndi osankhidwa ambiri. Izi ndi zomwe comma zimachita mu osankha, zimatithandiza kukhala ndi osankhidwa ambiri mu lamulo limodzi.

Sikuti kokha njirayi imapangidwira maofesi oyeretsa, oyeretsa CSS, komanso amapanga zosintha zamtsogolo mosavuta. Tsopano ngati mukufuna kusintha mtundu wofiira kupita ku buluu, muyenera kusintha malo amodzi m'malo mwa malamulo oyambirira 4 omwe timakhala nawo! Ganizirani za ndalama zomwe mumapeza pa fayilo yonse ya CSS ndipo mungathe kuona momwe izi zidzakupulumutsireni nthawi ndi malo nthawi yayitali!

Syntax Variation

Anthu ena amasankha kupanga CSS kukhala yovomerezeka kwambiri posiyanitsa aliyense wosankhidwa payekha, m'malo molemba zonse pa mzere umodzi monga pamwambapa. Umu ndi momwe zikanakhalira:

th,
td,
p.red,
div # yoyamba
{
mtundu: wofiira;
}}

Onetsetsani kuti mumaika chifuwa pambuyo pa wosankha aliyense ndikugwiritsa ntchito "lowetsani" kuti muthe kusankha chotsatira chotsatira pa mzere wawo. Simumapereka chiwonetsero pambuyo pa wosankha womaliza.

Pogwiritsira ntchito makasitomala pakati pa osankhidwa anu, mumapanga chipepala chophatikizira chosavuta kuti chikhale chosinthika m'tsogolomu ndipo zosavuta kuziwerenga lero!

Nkhani yoyamba ndi Jennifer Krynin. Yosinthidwa ndi Jeremy Girard pa 5/8/17