Башкы бетке

Сабак 2 CSS кантип колдонуу керек?

HTML документтерине стилдерди туташтыруунун 3 жолу

Киришүү

CSSти HTML документине туташтыруунун үч негизги жолу бар. Ар биринин өзүнчө артыкчылыктары жана кемчиликтери бар, аларды биз бул сабакта толук талкуулайбыз.

💡 Маанилүү: CSS HTMLден өзүнчө боло албайт. Ал ар кандай учурда төмөндө сүрөттөлгөн жолдордун бири менен HTML-документке байланыштуу.

CSSти туташтыруу жолдору

Inline CSS
Internal CSS
External CSS

📝 Inline CSS (Киргизилген стилдер)

Стилдер туруктуу түрдө HTML-элементин style атрибутунда жазылат.

<h1 style="color: blue; font-size: 24px;">
    Кок наама
</h1>

<p style="background: yellow; padding: 15px; border-radius: 5px;">
    Сары фондогу текст
</p>

<button style="background: #4CAF50; color: white; padding: 10px 20px; border: none;">
    Стилдери бар баскыч
</button>

Артыкчылыктары:

  • Тез жана жөнөкөй
  • Стилдер бир гана элементке колдонулат
  • Тез сыноолор үчүн пайдалуу
  • Жогорку асылдуулук (башка стилдерди алмаштырат)

Кемчиликтери:

  • Кодду бөлүү принцибин бузат
  • Колдоо кыйын
  • Коддун көчүрмөсү
  • Кайра колдонуу мүмкүн эмес

📄 Internal CSS (Ички стилдер)

Стилдер HTML-документин <head> бөлүгүндөгү <style> тегинин ичинде жазылат.

<!DOCTYPE html>
<html>
<head>
    <style>
    /* Бүт барак үчүн стилдер */
    body {
        background-color: lightgray;
        font-family: Arial, sans-serif;
    }

    h1 {
        color: red;
        text-align: center;
    }

    .button {
        background: blue;
        color: white;
        padding: 10px 20px;
    }
    </style>
</head>
<body>
    <h1>Кызыл наама</h1>
    <button class="button">Баскыч</button>
</body>
</html>

Артыкчылыктары:

  • Бардык стилдер бир файлда
  • Кичинекей долбоорлор үчүн ылайыктуу
  • Башкаруунун жөнөкөйлүгү
  • Өзүнчө файлдар түзүүнүн кереги жок

Кемчиликтери:

  • Бир нече барактарда колдонуу мүмкүн эмес
  • HTML-файлдын көлөмүн чоңойтот
  • Түзүлүш жана кооздоону аралаштырат
  • Чоң стилдер менен жай жүктөлөт

📁 External CSS (Сырткы стилдер)

Стилдер өзүнчө .css кеңейтмеси менен файлда жазылат жана <link> теги аркылуу туташтырылат.

HTML файлы (index.html):

<!DOCTYPE html>
<html>
<head>
    <!-- Сырткы CSS файлын туташтыруу -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Стилдери бар наама</h1>
</body>
</html>

CSS файлы (style.css):

/* style.css - өзүнчө стилдер файлы */

/* Стандарттык боштуктарды баштапкы абалга келтирүү */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Барактын негизги стилдери */
body {
    font-family: 'Segoe UI', sans-serif;
    background: #f5f5f5;
    color: #333;
}

/* Наамдар үчүн стилдер */
h1 {
    color: #264de4;
    font-size: 2.5rem;
    margin-bottom: 30px;
}

/* Баскычтар үчүн стилдер */
.btn {
    background: linear-gradient(45deg, #264de4, #2965f1);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(38, 77, 228, 0.3);
}

Артыкчылыктары:

  • Чоң долбоорлор үчүн мыкты жол
  • Көптөгөн HTML-барактар үчүн бир CSS-файл
  • HTML жана CSSди таза бөлүү
  • Браузердин кэштөөсү
  • Колдоо жана жаңыртуу жеңилдиги

Кемчиликтери:

  • Өзүнчө файл түзүү керек
  • Кошумча HTTP-сураныч
  • Туура жол менен камсыз кылуу керек
  • Кэштөө менен көйгөй чыгышы мүмкүн

Методдорду салыштыруу

Критерий Inline CSS Internal CSS External CSS
Асылдуулук Эң жогорку Орточо Төмөн
Кайра колдонуу ❌ Мүмкүн эмес ⚠ Бир гана файлда ✅ Бардык барактарда
Өндүрүмдүүлүк ⚠ Көп сандагы учурларда жай ⚠ Орточо ✅ Тез (кэштөө)
Кодду колдоо ❌ Кыйын ⚠ Орточо ✅ Жеңил
Сунуш Сыноолор үчүн гана колдонуу Кичинекей бир барактуу долбоорлор үчүн Бардык олуттуу долбоорлор үчүн

Биздин сунуш

External CSSти эң жөнөкөй бир барактуу сайттардан башка бардык долбоорлор үчүн колдонуңуз. Бул профессионалдуу мамиле:

  • Жоопкерчиликти бөлүү принцибин сактайт
  • Кодду колдоо жана жаңыртууну жеңилдетет
  • Бир нече барактарда бир стилдерди колдонууга мүмкүндүк берет
  • Кэштөө аркылуу өндүрүмдүүлүктү жакшыртат
  • Кодду таза жана окууга ыңгайлуу кылат

Биздин курста биз так External CSSти колдонобуз.

Практикалык мисал

Бир папкада index.html жана style.css файлдарын түзүңүз:

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Салам, CSS!</h1>
  <p>Бул сырткы стилдердин мисалы.</p>
</body>
</html>

style.css

h1 {
  color: #264de4;
  text-align: center;
}

p {
  font-size: 18px;
  color: #666;
}
⚠️ Маанилүү: style.css файлы index.html менен бир папкада экенин текшериңиз. Эгер файл кошумча папкада болсо, туура жолду көрсөтүңүз: href="css/style.css".

Сабакты аяктоо

Сиз CSSти HTMLге туташтыруунун үч жолун тең ийгиликтүү үйрөндүңүз! Азыр сиз билесиз:

  • Inline, Internal жана External CSSти кантип колдонуу керек
  • Ар бир методдун артыкчылыктары жана кемчиликтери
  • Ар түрдүү жагдайларда кайсы метод эң жакшы
  • Сырткы стилдерди туура кантип туташтыруу керек
Мурунку сабак Башкы бетке CSS боюнча тесттен өтүү