Kedu ihe bụ akwụkwọ mpempe akwụkwọ Cascading Style (CSS)?
Gụọ n'okpuru ebe a maka nkọwa zuru ezu nke ka akwụkwọ mpempe akwụkwọ cascading si arụ ọrụ. Anyị na-egosipụta ngwa anyị n'elu ibe ka ọ dị mfe ịchọta na iji. Ọ bụrụ na ị na-agụ akụkọ a site na email ma ọ bụ ndepụta, pịa na mpikota onu CSS gị.
Ọ gwụla ma ị na-emepe saịtị, ị nwere ike ọ gaghị aghọta nke ọma mpempe akwụkwọ ụdị cascading (CSS). CSS bụ ụdị mpempe akwụkwọ eji akọwa ọdịdị na nhazi nke akwụkwọ edere na ya HTML or XML. Enwere ike iji CSS kọwapụta ụdịdị maka ihe dị iche iche dị ka font, agba, oghere, na okirikiri nhọrọ ukwuu. CSS na-enye gị ohere ikewapụta ihe ngosi nke akwụkwọ HTML gị na ọdịnaya ya, na-eme ka ọ dịkwuo mfe idowe na imelite ụdị anya nke weebụsaịtị gị.
Nhazi Asụsụ CSS
The ihe nhoputa bụ HTML element ị chọrọ ịke, na onwunwe na uru kọwapụta ụdị nke ịchọrọ itinye na mmewere ahụ:
selector {
property: value;
}Dịka ọmụmaatụ, CSS na-esote ga-eme ihe niile <h1> ihe ndị dị na ibe nwere agba uhie na nha font nke 32px:
CSS
h1 {
color: red;
font-size: 32px;
}mmepụta
aga
Ị nwekwara ike izipụta CSS maka ID pụrụ iche na mmewere:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}mmepụta
Ma ọ bụ tinye klas n'ofe ọtụtụ ihe:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}mmepụta
Achọrọ m Ihe pụtara ìhè otu okwu na mkpado span.
Ị nwere ike tinye CSS na akwụkwọ HTML gị n'ụzọ atọ:
- Inline CSS, na-eji
styleàgwà na ihe HTML element - CSS dị n'ime, na-eji a
<style>mmewere na<head>nke HTML akwụkwọ gị - CSS nke mpụga, na-eji faịlụ .css dị iche jikọtara na akwụkwọ HTML gị site na iji
<link>mmewere na<head>nke HTML akwụkwọ gị
CSS na-anabata
CSS na-agbanwe agbanwe nke ukwuu ma enwere ike iji ya dozie ngosipụta nke ihe dabere na mkpebi ihuenyo, yabụ ị nwere ike ịnwe otu HTML mana wuo ya. anabata na mkpebi ngwaọrụ:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}CSS mkpakọ
Ị nwere ike ịhụ n'ihe atụ dị n'elu na enwere nkọwa, ajụjụ mgbasa ozi, yana ọtụtụ ụdị na-eji oghere na akara ahịrị iji hazie echiche nke CSS. Ọ bụ ezigbo omume iwetulata ma ọ bụ mpikota onu CSS gị na saịtị gị iji belata nha faịlụ yana, emesia, oge ọ na-ewe iji rịọ na imepụta ụdị gị. Ọ bụghị obere ego… ị nwere ike ịhụ ihe karịrị 50% ego na ụfọdụ n'ime ihe atụ ndị dị n'elu.
Ọtụtụ nhazi ihe nkesa na-enye ngwaọrụ ndị ga-akpakọ CSS na-akpaghị aka na ofufe wee chekwaa faịlụ dị ntakịrị ka ị ghara iji aka mee ya.
Kedu ihe bụ SCSS?
Sassy CSS (SCSS) bụ CSS preprocessor nke na-agbakwunye arụmọrụ na syntax na asụsụ CSS. Ọ na-agbatị ike nke CSS site n'ikwe ka iji mgbanwe, mixins, ọrụ, na njirimara ndị ọzọ na-adịghị na ọkọlọtọ CSS.
Uru SCSS
- Ikwado nke ọma: Site n'iji mgbanwe, ị nwere ike ịchekwa ụkpụrụ n'otu ebe wee jiri ya mee ihe n'oge niile ụdị gị, na-eme ka ọ dịkwuo mfe idowe na imelite ụdị gị.
- Nhazi ka mma: Site na mixins, ị nwere ike ịchịkọta ma jigharịa usoro nke ụdị, na-eme ka mpempe akwụkwọ gị bụrụ nke ahaziri ma dị mfe ịgụ.
- Ọrụ abawanyela: SCSS gụnyere ọtụtụ atụmatụ adịghị na ọkọlọtọ CSS, dị ka ọrụ, nhazi njikwa (dịka ma ọ bụrụ/ọzọ), na arụ ọrụ mgbakọ. Nke a na-enye ohere maka ịkepụta ike na nkwuputa.
- Ịrụ ọrụ ka mma: A na-achịkọta faịlụ SCSS n'ime CSS, nke nwere ike imeziwanye arụmọrụ site na ibelata ọnụọgụ koodu nke ihe nchọgharị ahụ kwesịrị ịtụgharị.
Ọdịmma SCSS
- Usoro mmụta: SCSS nwere syntax dị iche na ọkọlọtọ CSS, ma ị ga-achọ ịmụta syntax ọhụrụ a tupu ị nwee ike iji ya nke ọma.
- Mgbakwụnye agbakwunyere: Ọ bụ ezie na SCSS nwere ike ime ka mpempe akwụkwọ gị dị mfe ịhazi yana dị mfe idowe, ọ nwekwara ike iwebata mgbagwoju anya n'ime codebase gị, ọkachasị ma ọ bụrụ na ịmabeghị njirimara ọhụrụ na syntax.
- Ngwá ọrụ: Iji jiri SCSS, ị ga-achọ onye nchịkọta iji tụgharịa asụsụ koodu SCSS gị ka ọ bụrụ CSS. Nke a na-achọ nhazi ọzọ na ngwá ọrụ, nke nwere ike bụrụ ihe mgbochi na ntinye maka ụfọdụ ndị mmepe.
N'ihe atụ a dị n'okpuru, koodu SCSS na-eji mgbanwe iji chekwaa ụkpụrụ ($primary-color na $font-size) nke enwere ike ijikwa ya n'ime akwụkwọ niile. Koodu CSS nke sitere na koodu SCSS a bụ otu, mana ọ naghị agụnye mgbanwe ndị ahụ. Kama, a na-eji ụkpụrụ nke mgbanwe ndị ahụ eme ihe ozugbo na CSS.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}Akụkụ ọzọ nke SCSS nke egosiri na ihe atụ a bụ ụdị akwụrụ. Na koodu SCSS, a h1 ụdị na-akwu n'ime body ụdị, nke na-agaghị ekwe omume na ọkọlọtọ CSS. Mgbe a chịkọtara koodu SCSS, a na-agbasa ụdị akwụ a ka ọ bụrụ ụdị dị iche iche na koodu CSS.
N'ozuzu, SCSS na-enye ọtụtụ uru karịa ọkọlọtọ CSS, mana ọ dị mkpa ịtụle ahia-offs wee họrọ ngwá ọrụ ziri ezi maka ọrụ gị dabere na mkpa na mgbochi gị.
njikọ Martech Zone content
