Introduction to CSS Styling

Fahamka Xulashada Class iyo ID

CSS waxay bixisaa laba hab oo muhiim ah oo loo xusho qaybo gaar ah oo HTML ah: class iyo id. Fahamka farqiga u dhexeeya iyo sida loo isticmaalo waxay muhiim u tahay qorista CSS hufan oo la ilaalin karo.

Xulashada Class

Class waxaa loo isticmaalaa in lagu xusho koox qaybo ah oo wadaaga qaab isku mid ah. Waxaad ku dari kartaa hal ama in ka badan class hal qayb.

<p class="qoraal-caadi ah">Qoraalkan wuxuu leeyahay class 'qoraal-caadi ah'.</p><p class="qoraal-caadi ah midab-buluug">Qoraalkan wuxuu leeyahay laba classes.</p>

Si aad u xusho element leh class, waxaad isticmaashaa dhibic (.) ka hor magaca class-ka CSS:

.qoraal-caadi ah {  font-size: 16px;  line-height: 1.5;} .midab-buluug {  color: blue;}

Xulashada ID

ID waxaa loo isticmaalaa in lagu xusho hal qayb oo gaar ah. ID waa inuu ka duwanaadaa dhammaan ID-yada kale ee ku jira dokumentiga HTML.

<div id="madaxa-bogga">  <h1>Cinwaanka Bogga</h1></div>

Si aad u xusho element leh ID, waxaad isticmaashaa hash (#) ka hor magaca ID-ga CSS:

#madaxa-bogga {  background-color: #f0f0f0;  padding: 20px;}

Goorma la Isticmaalaa Class iyo ID

  • Class: Isticmaal markaad rabto inaad qaabayso koox qaybo ah oo leh qaab isku mid ah.
  • ID: Isticmaal markaad rabto inaad qaabayso hal qayb oo gaar ah oo ku taal bogga.

Tusaale Buuxa

Tusaalahan, waxaan ku qaabayn doonaa dhowr qaybood oo qoraal ah anagoo isticmaalayna class iyo qayb madax ah anagoo isticmaalayna id.

<!DOCTYPE html><html><head>  <title>Tusaale Class iyo ID</title>  <style>    .qoraal-caadi ah {      font-size: 16px;      line-height: 1.5;    }    .midab-cagaaran {      color: green;    }    #footer {      background-color: #e0e0e0;      padding: 10px;      text-align: center;    }  </style></head><body>  <p class="qoraal-caadi ah">Kani waa qoraal caadi ah.</p>  <p class="qoraal-caadi ah midab-cagaaran">Kani waa qoraal cagaaran.</p>  <div id="footer">    <p>Xuquuqda daabacaadda 2023</p>  </div></body></html>

Tusaalahan, class-ka qoraal-caadi ah wuxuu dejiyaa cabbirka font-ka iyo dhererka sadarka qoraalka, halka class-ka midab-cagaaran uu qoraalka ka dhigayo midab cagaaran. ID-ga footer wuxuu qaabeeyaa qaybta footer-ka hoose ee bogga.