CSS (Cascading Style Sheets) waa luuqad loogu talagalay in lagu maareeyo naqshadda iyo muuqaalka bogagga HTML. Waxay kaa caawineysaa in aad beddesho habka uu u egyahay boggaaga adigoo isticmaalaya hal dukumeenti oo CSS ah. Tani waxay sahlaysaa in si fudud loogu habeeyo naqshadda bogag badan oo HTML ah hal mar.
Maxay qabataa CSS?
Maxay qabataa CSS? |
CSS waxay ku siinaysaa awoodda aad ku bedeli karto:
- Midabada qoraalka iyo asalka
- Font-yada iyo habka loo dhigayo qoraalka
- Booska iyo cabirka walxaha
- Xuduudaha iyo qaybaha kala soocida
- Walxaha ku yaalla meelo gaar ah oo bogga ah
Sida CSS loogu daro HTML
Waxaa jira saddex siyaabood oo waaweyn oo CSS loogu dari karo HTML:
- Inline CSS: Xeerarka CSS waxaa lagu qoraa toos ahaan gudaha waxyaabaha HTML.
- Internal CSS: Xeerarka CSS waxaa lagu qoraa gudaha qaybta
<head>
ee dukumeentiga HTML. - External CSS: Xeerarka CSS waxaa lagu qoraa dukumeenti gaar ah oo .css ah, ka dibna waxaa lagu xiraa dukumeentiga HTML iyadoo la isticmaalayo tagga
<link>
.
Tusaalooyin Kooban
Inline CSS |
Inline CSS
html
<p style="color: blue; font-size: 20px;">Qoraalkan wuxuu leeyahay midab buluug ah oo cabbirka font-ka waa 20px.</p>
Internal CSS
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
color: green;
font-size: 18px;
}
</style>
<title>Hordhac CSS</title>
</head>
<body>
<p>Qoraalkan wuxuu leeyahay midab cagaaran oo cabbirka font-ka waa 18px.</p>
</body>
</html>
External CSS
style.css
css
p { color: red;
font-size: 16px;
}
index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Hordhac CSS</title>
</head>
<body>
<p>Qoraalkan wuxuu leeyahay midab casaan ah oo cabbirka font-ka waa 16px.</p>
</body>
</html>
Faa'iidooyinka Isticmaalka CSS
- Muuqaal Joogto ah: Waxaad ku samayn kartaa isbeddel muuqaal ah hal dukumeenti oo CSS ah oo saameyn ku yeesha bogag badan oo HTML ah.
- Habeynta fudud: Isbeddelka naqshaddu waa sahlan yahay marka loo eego in la beddelo hal dukumeenti CSS ah halkii laga beddeli lahaa dhammaan bogagga HTML.
- Kala Soocidda Naqshadda iyo Mawduuca: CSS waxay kaa caawinaysaa in aad kala soocdo naqshadda iyo qoraalka, taas oo fududeysa dayactirka iyo cusbooneysiinta labadaba.
Gabagabo
CSS waa aalad muhiim ah oo loogu talagalay horumariyayaasha webka si ay u habeeyaan oo u qurxiyaan bogaggooda. Iyadoo la adeegsanayo CSS, waxaad si fudud ugu beddeli kartaa muuqaalka boggaaga si waafaqsan naqshadda aad rabto. Waxaa jira siyaabo kala duwan oo CSS loogu dari karo HTML, waxaana muhiim ah in la fahmo faa'iidooyinka iyo hababka kala duwan ee lagu isticmaalo CSS.