Qaabeynta Aasaasiga ah ee CSS

 Qaabeynta Aasaasiga ah ee CSS

CSS (Cascading Style Sheets) waa luqad loo isticmaalo in lagu qurxiyo oo lagu maareeyo muuqaalka HTML. Waa hab aad u fiican oo lagu sameeyo boggaga internetka kuwo soo jiidasho leh oo isticmaale-saaxiibtinimo leh. Qaabeynta aasaasiga ah ee CSS waxay diiradda saareysaa sidii aad u dari lahayd qaabab aasaasi ah oo boggaaga HTML ah.

Qaabeynta Aasaasiga ah ee CSS
 Qaabeynta Aasaasiga ah ee CSS

1. Fahamka CSS Syntax

CSS waxay isticmaashaa syntax gaar ah oo ka kooban qaybo dhowr ah:

  • Selector: Waxay tilmaamaysaa qeybta HTML ee aad rabto inaad u isticmaasho qaabka. Tusaale ahaan, h1 { color: blue; } halkan "h1" waa selector.
  • Property: Waxay qeexeysaa sifooyinka aad rabto inaad beddesho. Tusaale ahaan, "color" waa property.
  • Value: Waxay bixisaa qiimaha sifada. Tusaale ahaan, "blue" waa value.

2. Ku darida CSS HTML

Waxaa jira saddex siyaabood oo CSS loogu dari karo HTML:

  • Inline CSS: Waxaa lagu qoraa gudaha tag-ga HTML ee la xiriira. Tusaale: <h1 style="color: blue;">Heading</h1>
  • Internal CSS: Waxaa lagu qoraa gudaha <style> tag ee madaxa HTML. Tusaale:
    html

    <head>
  <style>
    h1 { color: blue; }
  </style>
</head>
  • External CSS: Waxaa lagu qoraa feyl gaar ah oo CSS ah, ka dibna waxaa lagu xiriiriyaa HTML iyadoo la adeegsanayo <link> tag. Tusaale:
    html

    <head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

3. Qaabeynta Aasaasiga ah ee Element-yada

  • Color: Midabaynta qoraalka. Tusaale: color: red;
  • Font: Bedelida nooca, cabbirka, iyo qaabka font-ka. Tusaale: font-family: Arial; font-size: 20px; font-weight: bold;
  • Text Alignment: Meelaynta qoraalka. Tusaale: text-align: center;
  • Background: Bedelida midabka asalka ama sawirka asalka. Tusaale: background-color: yellow; ama background-image: url('background.jpg');

4. Box Model

CSS waxay isticmaashaa "box model" si ay u maamusho boosaska iyo cabbirrada element-yada:

  • Content: Qoraalka ama sawirka gudaha element-ka.
  • Padding: Meesha u dhaxeysa content-ka iyo border-ka.
  • Border: Xariiqda ku wareegsan element-ka.
  • Margin: Meesha banaan ee u dhaxeysa border-ka iyo element-yada kale.

Tusaale:

css

div {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

5. Responsive Design

Qaabeynta responsive waxay xaqiijineysaa in boggaaga uu si fiican uga muuqdo qalabyo kala duwan (desktop, tablet, mobile). Waxaad isticmaali kartaa media queries si aad u beddesho qaabka bogga marka cabbirka shaashadda uu beddelo. Tusaale:

css

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Gabagabo

Tags
Previous Post Next Post