3.3. CSS - дизайн жасау және блогтар

1. CSS дегеніміз не?

CSS (Cascading Style Sheets) — HTML элементтерінің сыртқы келбетін өзгерту үшін қолданылады: түс, қаріп, орналасу, өлшем, анимация және тағы басқалар.

Мысал:

<p style="color: blue; font-size: 20px;">Сәлем, әлем!</p>

Нәтиже:
Бұл жерде мәтін түсі көк(color: blue;) , қаріп өлшемі 20px (font-size: 20px;) болады.

2. CSS Құрылымы

селектор {
  қасиет: мән;
}

p {
color: blue;
}

Мысал:

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

3. CSS Қосу Әдістері

Әдіс түрі	Қолданылуы
Ішкі (Inline)	html файлында `<h1 style="color:red;">Мәтін</h1>`
Енгізілген (Internal)	html файлының `<style> h1 { color: darkgreen; text-align: center; } </style>` тегі `<head>` ішінде
Сыртқы (External)	`.css` файлға жазып, HTML-ге қосу төмендегі тегті html файлының жоғарғы бөлігіне орналастырамыз. <link rel=»stylesheet» href=»style.css»> — (бұл жерде : style.css файл аты)

4. Қарапайым Блог Дизайны

HTML Құрылымы:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Менің блогым</h1>
  </header>
  <main>
    <article>
      <h2>Алғашқы жазба</h2>
      <p>Бұл менің алғашқы блог жазбам...</p>
    </article>
  </main>
</body>
</html>

style.css:

body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  background: #f5f5f5;
}

header {
  background: #007bff;
  color: white;
  padding: 20px;
  text-align: center;
}

article {
  background: white;
  margin: 20px auto;
  padding: 20px;
  width: 80%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

6. Пайдалы CSS Қасиеттер

Қасиет	Мақсаты
`color`	Мәтіннің түсін орнатады
`background-color`	Фон түсін орнатады
`padding`	Ішкі жиектер
`margin`	Сыртқы жиектер
`border`	Жақтау
`box-shadow`	Көлеңке
`transition`	Анимация эффекттері

CSS Үйренуге Пайдалы Ресурстар

Ресурс	Сипаттамасы
https://w3schools.com/css	CSS негіздерін практикалық түрде үйрететін сайт
https://css-tricks.com	Кеңестер мен шаблондар жинағы
https://flexboxfroggy.com	Flexbox арқылы ойын түрінде үйрену
https://grid.malven.co	CSS Grid визуалды гиді
https://learn.shayhowe.com	Кәсіби CSS және веб-дизайн сабақтары

Негізгі Құралдар:

Атауы	Сипаттамасы	Сілтеме
Google Fonts	Қаріп таңдау	fonts.google.com
CSS генераторлары	Box-shadow, gradient, border radius т.б.	cssmash.com, css3generator.com
HTML/CSS редактор	Визуалды HTML/CSS жазуға арналған	codepen.io, jsfiddle.net
CSS анықтамасы	CSS қасиеттері мен мысалдар	w3schools.com/css, developer.mozilla.org

Блог Интерфейсінің Құрылымы

Негізгі бөлімдер:

<header>        → жоғарғы тақырып
<nav>           → мәзір
<main>          → негізгі контент
<article>       → әрбір блог жазбасы
<aside>         → қосымша контент (категория, іздеу)
<footer>        → сайт асты

Дизайн Сценарийі

`index.html`

<!DOCTYPE html>
<html lang="kk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Менің блогым</title>
  <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1> Менің веб-блогым</h1>
  </header>
  <main>
    <article>
      <h2> Бірінші жазба</h2>
      <p>Бүгін мен CSS арқылы өзімнің алғашқы блогымды жасадым!</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2025 Er Er блогы</p>
  </footer>
</body>
</html>

`style.css`

body {
  font-family: 'Rubik', sans-serif;
  background: #f0f2f5;
  margin: 0;
  padding: 0;
}

header {
  background-color: #0047ab;
  color: white;
  text-align: center;
  padding: 2rem;
}

article {
  background: white;
  margin: 2rem auto;
  padding: 1.5rem;
  max-width: 800px;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

article:hover {
  transform: scale(1.01);
}

footer {
  background-color: #222;
  color: #ccc;
  text-align: center;
  padding: 1rem;
}

Қосымша Стильдер

Карточка Стилі:

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 8px;
  background: white;
}

Батырма:

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}
button:hover {
  background: #0056b3;
}

Практикалық Тапсырма

Мақсат: Төмендегі элементтерді өз бетіңізде жасаңыз:

3 блог карточкасы
Мазмұнға сурет қосу (<img>)
Бөлімдер (<section>, <aside>)
Responsive дизайн (@media қолдану)

Бонус:

@media (max-width: 768px) {
  article {
    margin: 1rem;
    padding: 1rem;
  }
}

@media дегеніміз не?

@media — құрылғының өлшеміне (экран ені), типіне (баспа, экран), бағыттылығына (тігінен, көлденең), және басқа да параметрлеріне қарай CSS стильдерін бейімдеуге арналған.

Құрылымы:

@media only screen and (max-width: 768px) {
  /* Бұл стильдер тек 768px-тан кіші экрандарда жұмыс істейді */
  body {
    background-color: lightgray;
  }
}

Түсініктеме:

only screen — тек экран құрылғыларына арналған
(max-width: 768px) — ені 768 пикселден төмен болған жағдайда
Ішіндегі стильдер — тек сол шарт орындалса ғана қосылады

Мысал: Адаптивті Блог

/* ДК үшін стиль */
article {
  width: 800px;
  margin: 2rem auto;
}

/* Телефон үшін */
@media (max-width: 600px) {
  article {
    width: 95%;
    margin: 1rem;
  }
  h1 {
    font-size: 24px;
    text-align: center;
  }
}

Көрініс:

Құрылғы	Стиль
Desktop	800px, кең және ортасында
Phone	95% ен, мәтін кішірек және тығыз

Пайдалы кеңестер:

@media түрі	Қолданылуы
`(max-width: 768px)`	Планшет және телефон
`(max-width: 480px)`	Тек телефон үшін
`(min-width: 1024px)`	Тек үлкен экрандарға
`(orientation: portrait)`	Тік экран күйі (телефон)
`(orientation: landscape)`	Көлденең күй (таблет)

Кең таралған мысал:

/* Мобильді мәзір */
@media (max-width: 768px) {
  nav ul {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}

Live Demo (онлайн көріп үйрену):

Сайт	Мақсаты
https://responsivedesignchecker.com	Сайтыңызды түрлі құрылғыларда тексеру
https://codepen.io	@media қолданылып жасалған live код
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

3.3. CSS — дизайн жасау және блогтар