{"id":333,"date":"2025-05-13T11:55:00","date_gmt":"2025-05-13T11:55:00","guid":{"rendered":"https:\/\/edu.govs.kz\/openedu\/?p=333"},"modified":"2025-07-31T06:29:37","modified_gmt":"2025-07-31T06:29:37","slug":"3-3-css-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd-%d0%b6%d0%b0%d1%81%d0%b0%d1%83-%d0%b6%d3%99%d0%bd%d0%b5-%d0%b1%d0%bb%d0%be%d0%b3%d1%82%d0%b0%d1%80","status":"publish","type":"post","link":"https:\/\/edu.govs.kz\/openedu\/?p=333","title":{"rendered":"3.3. CSS — \u0434\u0438\u0437\u0430\u0439\u043d \u0436\u0430\u0441\u0430\u0443 \u0436\u04d9\u043d\u0435 \u0431\u043b\u043e\u0433\u0442\u0430\u0440"},"content":{"rendered":"\n

1. CSS \u0434\u0435\u0433\u0435\u043d\u0456\u043c\u0456\u0437 \u043d\u0435?<\/h3>\n\n\n\n

CSS (Cascading Style Sheets)<\/strong> \u2014 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0442\u0435\u0440\u0456\u043d\u0456\u04a3 \u0441\u044b\u0440\u0442\u049b\u044b \u043a\u0435\u043b\u0431\u0435\u0442\u0456\u043d \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u04af\u0448\u0456\u043d \u049b\u043e\u043b\u0434\u0430\u043d\u044b\u043b\u0430\u0434\u044b: \u0442\u04af\u0441, \u049b\u0430\u0440\u0456\u043f, \u043e\u0440\u043d\u0430\u043b\u0430\u0441\u0443, \u04e9\u043b\u0448\u0435\u043c, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0436\u04d9\u043d\u0435 \u0442\u0430\u0493\u044b \u0431\u0430\u0441\u049b\u0430\u043b\u0430\u0440.<\/p>\n\n\n\n

\u041c\u044b\u0441\u0430\u043b:<\/p>\n\n\n\n

<p style=\"color: blue; font-size: 20px;\">\u0421\u04d9\u043b\u0435\u043c, \u04d9\u043b\u0435\u043c!<\/p>
<\/code><\/pre>\n\n\n\n
 \u041d\u04d9\u0442\u0438\u0436\u0435<\/strong>:
\u0411\u04b1\u043b \u0436\u0435\u0440\u0434\u0435 \u043c\u04d9\u0442\u0456\u043d \u0442\u04af\u0441\u0456 \u043a\u04e9\u043a(color: blue;<\/code>) <\/code>, \u049b\u0430\u0440\u0456\u043f \u04e9\u043b\u0448\u0435\u043c\u0456 20px (font-size: 20px;<\/code>) \u0431\u043e\u043b\u0430\u0434\u044b. <\/p>\n\n\n\n
\n\n\n\n
 2. CSS \u049a\u04b1\u0440\u044b\u043b\u044b\u043c\u044b<\/h3>\n\n\n\n
\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 {
  \u049b\u0430\u0441\u0438\u0435\u0442: \u043c\u04d9\u043d;
}<\/code>

p {
color: blue;<\/code><\/code>
}
<\/code><\/pre>\n\n\n\n
\u041c\u044b\u0441\u0430\u043b<\/strong>:<\/p>\n\n\n\n
h1 {
  color: darkgreen;
  text-align: center;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 3. CSS \u049a\u043e\u0441\u0443 \u04d8\u0434\u0456\u0441\u0442\u0435\u0440\u0456<\/h3>\n\n\n\n
\u04d8\u0434\u0456\u0441 \u0442\u04af\u0440\u0456<\/th>\u049a\u043e\u043b\u0434\u0430\u043d\u044b\u043b\u0443\u044b<\/th><\/tr><\/thead>
\u0406\u0448\u043a\u0456 (Inline)<\/td>html \u0444\u0430\u0439\u043b\u044b\u043d\u0434\u0430 <h1 style=\"color:red;\">\u041c\u04d9\u0442\u0456\u043d<\/h1><\/code><\/td><\/tr>
\u0415\u043d\u0433\u0456\u0437\u0456\u043b\u0433\u0435\u043d (Internal)<\/td>html \u0444\u0430\u0439\u043b\u044b\u043d\u044b\u04a3 <style> h1 {
  color: darkgreen;
  text-align: center;
}
<\/code><\/code> <\/style><\/code> \u0442\u0435\u0433\u0456 <head><\/code> \u0456\u0448\u0456\u043d\u0434\u0435<\/td><\/tr>
\u0421\u044b\u0440\u0442\u049b\u044b (External)<\/td>.css<\/code> \u0444\u0430\u0439\u043b\u0493\u0430 \u0436\u0430\u0437\u044b\u043f, HTML-\u0433\u0435 \u049b\u043e\u0441\u0443 
\u0442\u04e9\u043c\u0435\u043d\u0434\u0435\u0433\u0456 \u0442\u0435\u0433\u0442\u0456 html \u0444\u0430\u0439\u043b\u044b\u043d\u044b\u04a3 \u0436\u043e\u0493\u0430\u0440\u0493\u044b \u0431\u04e9\u043b\u0456\u0433\u0456\u043d\u0435 \u043e\u0440\u043d\u0430\u043b\u0430\u0441\u0442\u044b\u0440\u0430\u043c\u044b\u0437.
<link rel=»stylesheet» href=»style.css»> — (\u0431\u04b1\u043b \u0436\u0435\u0440\u0434\u0435 : style.css \u0444\u0430\u0439\u043b \u0430\u0442\u044b)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
 4. \u049a\u0430\u0440\u0430\u043f\u0430\u0439\u044b\u043c \u0411\u043b\u043e\u0433 \u0414\u0438\u0437\u0430\u0439\u043d\u044b<\/h3>\n\n\n\n
 HTML \u049a\u04b1\u0440\u044b\u043b\u044b\u043c\u044b:<\/h4>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
  <link rel=\"stylesheet\" href=\"style.css\">
<\/head>
<body>
  <header>
    <h1>\u041c\u0435\u043d\u0456\u04a3 \u0431\u043b\u043e\u0433\u044b\u043c<\/h1>
  <\/header>
  <main>
    <article>
      <h2>\u0410\u043b\u0493\u0430\u0448\u049b\u044b \u0436\u0430\u0437\u0431\u0430<\/h2>
      <p>\u0411\u04b1\u043b \u043c\u0435\u043d\u0456\u04a3 \u0430\u043b\u0493\u0430\u0448\u049b\u044b \u0431\u043b\u043e\u0433 \u0436\u0430\u0437\u0431\u0430\u043c...<\/p>
    <\/article>
  <\/main>
<\/body>
<\/html>
<\/code><\/pre>\n\n\n\n
 style.css:<\/h4>\n\n\n\n
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);
}<\/code><\/pre>\n\n\n\n
6. \u041f\u0430\u0439\u0434\u0430\u043b\u044b CSS \u049a\u0430\u0441\u0438\u0435\u0442\u0442\u0435\u0440<\/h3>\n\n\n\n
\u049a\u0430\u0441\u0438\u0435\u0442<\/th>\u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/th><\/tr><\/thead>
color<\/code><\/td>\u041c\u04d9\u0442\u0456\u043d\u043d\u0456\u04a3 \u0442\u04af\u0441\u0456\u043d \u043e\u0440\u043d\u0430\u0442\u0430\u0434\u044b<\/td><\/tr>
background-color<\/code><\/td>\u0424\u043e\u043d \u0442\u04af\u0441\u0456\u043d \u043e\u0440\u043d\u0430\u0442\u0430\u0434\u044b<\/td><\/tr>
padding<\/code><\/td>\u0406\u0448\u043a\u0456 \u0436\u0438\u0435\u043a\u0442\u0435\u0440<\/td><\/tr>
margin<\/code><\/td>\u0421\u044b\u0440\u0442\u049b\u044b \u0436\u0438\u0435\u043a\u0442\u0435\u0440<\/td><\/tr>
border<\/code><\/td>\u0416\u0430\u049b\u0442\u0430\u0443<\/td><\/tr>
box-shadow<\/code><\/td>\u041a\u04e9\u043b\u0435\u04a3\u043a\u0435<\/td><\/tr>
transition<\/code><\/td>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0442\u0435\u0440\u0456<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
CSS \u04ae\u0439\u0440\u0435\u043d\u0443\u0433\u0435 \u041f\u0430\u0439\u0434\u0430\u043b\u044b \u0420\u0435\u0441\u0443\u0440\u0441\u0442\u0430\u0440<\/h3>\n\n\n\n
\u0420\u0435\u0441\u0443\u0440\u0441<\/th>\u0421\u0438\u043f\u0430\u0442\u0442\u0430\u043c\u0430\u0441\u044b<\/th><\/tr><\/thead>
 https:\/\/w3schools.com\/css<\/a><\/td>CSS \u043d\u0435\u0433\u0456\u0437\u0434\u0435\u0440\u0456\u043d \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u0442\u04af\u0440\u0434\u0435 \u04af\u0439\u0440\u0435\u0442\u0435\u0442\u0456\u043d \u0441\u0430\u0439\u0442<\/td><\/tr>
 https:\/\/css-tricks.com<\/a><\/td>\u041a\u0435\u04a3\u0435\u0441\u0442\u0435\u0440 \u043c\u0435\u043d \u0448\u0430\u0431\u043b\u043e\u043d\u0434\u0430\u0440 \u0436\u0438\u043d\u0430\u0493\u044b<\/td><\/tr>
 https:\/\/flexboxfroggy.com<\/a><\/td>Flexbox \u0430\u0440\u049b\u044b\u043b\u044b \u043e\u0439\u044b\u043d \u0442\u04af\u0440\u0456\u043d\u0434\u0435 \u04af\u0439\u0440\u0435\u043d\u0443<\/td><\/tr>
 https:\/\/grid.malven.co<\/a><\/td>CSS Grid \u0432\u0438\u0437\u0443\u0430\u043b\u0434\u044b \u0433\u0438\u0434\u0456<\/td><\/tr>
 https:\/\/learn.shayhowe.com<\/a><\/td>\u041a\u04d9\u0441\u0456\u0431\u0438 CSS \u0436\u04d9\u043d\u0435 \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d \u0441\u0430\u0431\u0430\u049b\u0442\u0430\u0440\u044b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u041d\u0435\u0433\u0456\u0437\u0433\u0456 \u049a\u04b1\u0440\u0430\u043b\u0434\u0430\u0440:<\/h3>\n\n\n\n
\u0410\u0442\u0430\u0443\u044b<\/th>\u0421\u0438\u043f\u0430\u0442\u0442\u0430\u043c\u0430\u0441\u044b<\/th>\u0421\u0456\u043b\u0442\u0435\u043c\u0435<\/th><\/tr><\/thead>
 Google Fonts<\/strong><\/td>\u049a\u0430\u0440\u0456\u043f \u0442\u0430\u04a3\u0434\u0430\u0443<\/td>fonts.google.com<\/a><\/td><\/tr>
 CSS \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043b\u0430\u0440\u044b<\/strong><\/td>Box-shadow, gradient, border radius \u0442.\u0431.<\/td>cssmash.com<\/a>, css3generator.com<\/a><\/td><\/tr>
 HTML\/CSS \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440<\/strong><\/td>\u0412\u0438\u0437\u0443\u0430\u043b\u0434\u044b HTML\/CSS \u0436\u0430\u0437\u0443\u0493\u0430 \u0430\u0440\u043d\u0430\u043b\u0493\u0430\u043d<\/td>codepen.io<\/a>, jsfiddle.net<\/a><\/td><\/tr>
 CSS \u0430\u043d\u044b\u049b\u0442\u0430\u043c\u0430\u0441\u044b<\/strong><\/td>CSS \u049b\u0430\u0441\u0438\u0435\u0442\u0442\u0435\u0440\u0456 \u043c\u0435\u043d \u043c\u044b\u0441\u0430\u043b\u0434\u0430\u0440<\/td>w3schools.com\/css<\/a>, developer.mozilla.org<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
 \u0411\u043b\u043e\u0433 \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0456\u043d\u0456\u04a3 \u049a\u04b1\u0440\u044b\u043b\u044b\u043c\u044b<\/h3>\n\n\n\n
 \u041d\u0435\u0433\u0456\u0437\u0433\u0456 \u0431\u04e9\u043b\u0456\u043c\u0434\u0435\u0440:<\/h4>\n\n\n\n
<header>        \u2192 \u0436\u043e\u0493\u0430\u0440\u0493\u044b \u0442\u0430\u049b\u044b\u0440\u044b\u043f
<nav>           \u2192 \u043c\u04d9\u0437\u0456\u0440
<main>          \u2192 \u043d\u0435\u0433\u0456\u0437\u0433\u0456 \u043a\u043e\u043d\u0442\u0435\u043d\u0442
<article>       \u2192 \u04d9\u0440\u0431\u0456\u0440 \u0431\u043b\u043e\u0433 \u0436\u0430\u0437\u0431\u0430\u0441\u044b
<aside>         \u2192 \u049b\u043e\u0441\u044b\u043c\u0448\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 (\u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f, \u0456\u0437\u0434\u0435\u0443)
<footer>        \u2192 \u0441\u0430\u0439\u0442 \u0430\u0441\u0442\u044b
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 \u0414\u0438\u0437\u0430\u0439\u043d \u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439\u0456 <\/h3>\n\n\n\n
 index.html<\/code><\/h4>\n\n\n\n
<!DOCTYPE html>
<html lang=\"kk\">
<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <title>\u041c\u0435\u043d\u0456\u04a3 \u0431\u043b\u043e\u0433\u044b\u043c<\/title>
  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rubik&display=swap\" rel=\"stylesheet\">
  <link rel=\"stylesheet\" href=\"style.css\">
<\/head>
<body>
  <header>
    <h1> \u041c\u0435\u043d\u0456\u04a3 \u0432\u0435\u0431-\u0431\u043b\u043e\u0433\u044b\u043c<\/h1>
  <\/header>
  <main>
    <article>
      <h2> \u0411\u0456\u0440\u0456\u043d\u0448\u0456 \u0436\u0430\u0437\u0431\u0430<\/h2>
      <p>\u0411\u04af\u0433\u0456\u043d \u043c\u0435\u043d CSS \u0430\u0440\u049b\u044b\u043b\u044b \u04e9\u0437\u0456\u043c\u043d\u0456\u04a3 \u0430\u043b\u0493\u0430\u0448\u049b\u044b \u0431\u043b\u043e\u0433\u044b\u043c\u0434\u044b \u0436\u0430\u0441\u0430\u0434\u044b\u043c!<\/p>
    <\/article>
  <\/main>
  <footer>
    <p>&copy; 2025 Er Er \u0431\u043b\u043e\u0433\u044b<\/p>
  <\/footer>
<\/body>
<\/html>
<\/code><\/pre>\n\n\n\n
 style.css<\/code><\/h4>\n\n\n\n
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;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u049a\u043e\u0441\u044b\u043c\u0448\u0430 \u0421\u0442\u0438\u043b\u044c\u0434\u0435\u0440<\/h3>\n\n\n\n
 \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0421\u0442\u0438\u043b\u0456:<\/h4>\n\n\n\n
.card {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 8px;
  background: white;
}
<\/code><\/pre>\n\n\n\n
 \u0411\u0430\u0442\u044b\u0440\u043c\u0430:<\/h4>\n\n\n\n
button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}
button:hover {
  background: #0056b3;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u0422\u0430\u043f\u0441\u044b\u0440\u043c\u0430<\/h3>\n\n\n\n
\n
\u041c\u0430\u049b\u0441\u0430\u0442<\/strong>: \u0422\u04e9\u043c\u0435\u043d\u0434\u0435\u0433\u0456 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0442\u0435\u0440\u0434\u0456 \u04e9\u0437 \u0431\u0435\u0442\u0456\u04a3\u0456\u0437\u0434\u0435 \u0436\u0430\u0441\u0430\u04a3\u044b\u0437:<\/p>\n<\/blockquote>\n\n\n\n