{"id":337,"date":"2025-05-12T12:03:00","date_gmt":"2025-05-12T12:03:00","guid":{"rendered":"https:\/\/edu.govs.kz\/openedu\/?p=337"},"modified":"2025-07-31T06:30:28","modified_gmt":"2025-07-31T06:30:28","slug":"3-4-%d1%81ss-%d0%b6%d2%b1%d0%bc%d1%8b%d1%81%d1%82%d0%b0%d1%80","status":"publish","type":"post","link":"https:\/\/edu.govs.kz\/openedu\/?p=337","title":{"rendered":"3.4. \u0421SS — \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440"},"content":{"rendered":"\n

CSS \u2013 \u0416\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\u0493\u0430 20 \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u041c\u044b\u0441\u0430\u043b<\/h2>\n\n\n\n
\n

\u041a\u0435\u04a3\u0435\u0441: \u04d9\u0440 \u043c\u044b\u0441\u0430\u043b\u0434\u044b \u04e9\u0437 \u0431\u0435\u0442\u0456\u04a3\u0456\u0437\u0434\u0435 \u049b\u043e\u043b\u0434\u0430\u043d\u044b\u043f, \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0436\u0430\u0441\u0430\u043f \u043a\u04e9\u0440\u0456\u04a3\u0456\u0437. \u041e\u0441\u044b\u043b\u0430\u0439\u0448\u0430 \u0442\u04d9\u0436\u0456\u0440\u0438\u0431\u0435\u04a3\u0456\u0437 \u0430\u0440\u0442\u0430\u0434\u044b.<\/p>\n<\/blockquote>\n\n\n\n

\n\n\n\n

1. \u0411\u0435\u0442\u0442\u0456\u04a3 \u0444\u043e\u043d\u044b\u043d \u04e9\u0437\u0433\u0435\u0440\u0442\u0443<\/h3>\n\n\n\n

\u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u049a\u0430\u0440\u0430\u043f\u0430\u0439\u044b\u043c \u0444\u043e\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443<\/p>\n\n\n\n

body {
  background-color: #f0f0f0;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 2. \u041c\u04d9\u0442\u0456\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0422\u0430\u049b\u044b\u0440\u044b\u043f \u0442\u04af\u0441\u0456\u043d \u049b\u043e\u044e<\/p>\n\n\n\n
h1 {
  color: #2c3e50;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 3. \u0428\u0440\u0438\u0444\u0442 \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 (Google Fonts)<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u049a\u0430\u0440\u0456\u043f \u0441\u0442\u0438\u043b\u0456\u043d \u0442\u0430\u04a3\u0434\u0430\u0443<\/p>\n\n\n\n
<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto&display=swap\" rel=\"stylesheet\">
<\/code><\/pre>\n\n\n\n
body {
  font-family: 'Roboto', sans-serif;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 4. \u041a\u04e9\u043b\u0435\u04a3\u043a\u0435 \u049b\u043e\u0441\u0443 (box-shadow)<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u043a\u0435 \u0442\u0435\u0440\u0435\u04a3\u0434\u0456\u043a \u0431\u0435\u0440\u0443<\/p>\n\n\n\n
.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 5. \u0411\u0430\u0442\u044b\u0440\u043c\u0430 \u0441\u0442\u0438\u043b\u0456<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u049a\u043e\u043b\u0434\u0430\u043d\u0443\u0448\u044b \u0431\u0430\u0442\u044b\u0440\u043c\u0430\u0441\u044b\u043d\u0430 \u0441\u0442\u0438\u043b\u044c \u0431\u0435\u0440\u0443<\/p>\n\n\n\n
button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 6. Hover \u044d\u0444\u0444\u0435\u043a\u0442\u0456<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0422\u0456\u043d\u0442\u0443\u0456\u0440\u043c\u0435\u043d \u04b1\u0441\u0442\u0430\u043b\u0493\u0430\u043d\u0434\u0430 \u0442\u04af\u0441 \u04e9\u0437\u0433\u0435\u0440\u0442\u0443<\/p>\n\n\n\n
button:hover {
  background-color: #0056b3;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 7. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f (keyframes)<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u049a\u043e\u0437\u0493\u0430\u043b\u044b\u0441 \u0436\u0430\u0441\u0430\u0443<\/p>\n\n\n\n
@keyframes slide {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}
div {
  animation: slide 0.5s ease-in-out;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 8. \u0416\u0430\u049b\u0442\u0430\u0443 (border)<\/h3>\n\n\n\n
\u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u041a\u043e\u043d\u0442\u0435\u043d\u0442\u043a\u0435 \u0448\u0435\u043a\u0430\u0440\u0430 \u043e\u0440\u043d\u0430\u0442\u0443<\/p>\n\n\n\n
img {
  border: 2px solid #000;
  border-radius: 8px;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
9. Flexbox \u049b\u043e\u043b\u0434\u0430\u043d\u0443<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u0442\u0435\u0440\u0434\u0456 \u049b\u0430\u0442\u0430\u0440\u0493\u0430 \u049b\u043e\u044e<\/p>\n\n\n\n
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
10. Grid \u0436\u04af\u0439\u0435\u0441\u0456<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u049a\u0430\u0442\u0430\u0440 \u043c\u0435\u043d \u0431\u0430\u0493\u0430\u043d\u0493\u0430 \u0431\u04e9\u043b\u0448\u0435\u043a\u0442\u0435\u0443<\/p>\n\n\n\n
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 11. \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u0442\u0456\u043b\u0456\u043a (Media Query)<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0422\u0435\u043b\u0435\u0444\u043e\u043d \u04af\u0448\u0456\u043d \u0436\u0435\u043a\u0435 \u0441\u0442\u0438\u043b\u044c<\/p>\n\n\n\n
@media (max-width: 600px) {
  body {
    background-color: #e0f7fa;
  }
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
12. \u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 :hover<\/code>, :active<\/code><\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0411\u0430\u0442\u044b\u0440\u043c\u0430 \u04b1\u0441\u0442\u0430\u043b\u0493\u0430\u043d \u0441\u04d9\u0442\u0442\u0456 \u043a\u04e9\u0440\u0441\u0435\u0442\u0443<\/p>\n\n\n\n
a:hover {
  text-decoration: underline;
}
a:active {
  color: red;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 13. z-index<\/code> \u0430\u0440\u049b\u044b\u043b\u044b \u049b\u0430\u0431\u0430\u0442\u0442\u0430\u0440<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0411\u0456\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0442\u0456 \u04af\u0441\u0442\u0456\u043d\u0435 \u0448\u044b\u0493\u0430\u0440\u0443<\/p>\n\n\n\n
.modal {
  position: absolute;
  z-index: 999;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 14. Fixed \u043c\u0435\u043d\u044e<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0416\u043e\u0493\u0430\u0440\u044b\u0434\u0430 \u0431\u0435\u043a\u0456\u0442\u0456\u043b\u0433\u0435\u043d \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/p>\n\n\n\n
nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
15. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0435\u043d \u0431\u0430\u0442\u044b\u0440\u043c\u0430 (hover scale)<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0422\u0456\u043d\u0442\u0443\u0456\u0440\u043c\u0435\u043d \u04b1\u0441\u0442\u0430\u043b\u0493\u0430\u043d\u0434\u0430 \u04af\u043b\u043a\u0435\u0439\u0442\u0443<\/p>\n\n\n\n
.card:hover {
  transform: scale(1.05);
  transition: 0.3s ease-in-out;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 16. \u0410\u0439\u043d\u0430\u043b\u043c\u0430\u043b\u044b \u0436\u04af\u043a\u0442\u0435\u0443 \u0431\u0435\u043b\u0433\u0456\u0441\u0456 (spinner)<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0441\u044b<\/p>\n\n\n\n
.loader {
  border: 4px solid #ccc;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 17. \u0422\u04af\u0441\u0442\u0456 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0416\u04b1\u043c\u0441\u0430\u049b \u0444\u043e\u043d \u0442\u04af\u0441\u0456<\/p>\n\n\n\n
body {
  background: linear-gradient(45deg, #6dd5ed, #2193b0);
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 18. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043b\u044b\u049b \u0436\u0430\u0437\u0443 (text-shadow<\/code> + hover<\/code>)<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0416\u044b\u043b\u0442\u044b\u0440\u0430\u043f \u0442\u04b1\u0440\u0493\u0430\u043d \u0436\u0430\u0437\u0443<\/p>\n\n\n\n
h1 {
  text-shadow: 2px 2px 5px #555;
}
h1:hover {
  color: #007bff;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
19. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u043a\u0435 \u0435\u0440\u0435\u043a\u0448\u0435 \u043a\u0443\u0440\u0441\u043e\u0440<\/p>\n\n\n\n
a {
  cursor: pointer;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 20. Scroll \u044d\u0444\u0444\u0435\u043a\u0442 (scroll-behavior)<\/h3>\n\n\n\n
 \u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/strong>: \u0411\u0435\u0442 \u0456\u0448\u0456\u043d\u0434\u0435 \u0442\u0435\u0433\u0456\u0441 \u0430\u0439\u043d\u0430\u043b\u0434\u044b\u0440\u0443<\/p>\n\n\n\n
html {
  scroll-behavior: smooth;
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 \u049a\u043e\u0441\u044b\u043c\u0448\u0430 \u0420\u0435\u0441\u0443\u0440\u0441\u0442\u0430\u0440:<\/h2>\n\n\n\n
\u0421\u0430\u0439\u0442<\/th>\u041c\u0430\u049b\u0441\u0430\u0442\u044b<\/th><\/tr><\/thead>
https:\/\/codepen.io<\/a><\/td>Live CSS \u043a\u043e\u0434\u0442\u0430\u0440\u0434\u044b \u0442\u0435\u043a\u0441\u0435\u0440\u0443<\/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<\/td><\/tr>
https:\/\/web.dev\/learn\/css\/<\/a><\/td>Google-\u0434\u0456\u04a3 \u0440\u0435\u0441\u043c\u0438 CSS \u043e\u049b\u0443 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0441\u044b<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
CSS \u2013 \u0416\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\u0493\u0430 20 \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u041c\u044b\u0441\u0430\u043b \u041a\u0435\u04a3\u0435\u0441: \u04d9\u0440 \u043c\u044b\u0441\u0430\u043b\u0434\u044b \u04e9\u0437 \u0431\u0435\u0442\u0456\u04a3\u0456\u0437\u0434\u0435 \u049b\u043e\u043b\u0434\u0430\u043d\u044b\u043f, \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0436\u0430\u0441\u0430\u043f \u043a\u04e9\u0440\u0456\u04a3\u0456\u0437. \u041e\u0441\u044b\u043b\u0430\u0439\u0448\u0430 \u0442\u04d9\u0436\u0456\u0440\u0438\u0431\u0435\u04a3\u0456\u0437 \u0430\u0440\u0442\u0430\u0434\u044b. 1. \u0411\u0435\u0442\u0442\u0456\u04a3 \u0444\u043e\u043d\u044b\u043d \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041c\u0430\u049b\u0441\u0430\u0442\u044b: \u049a\u0430\u0440\u0430\u043f\u0430\u0439\u044b\u043c \u0444\u043e\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443 body { background-color: #f0f0f0;} 2. \u041c\u04d9\u0442\u0456\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443\u0430\u0440\u044b \u049b\u0430\u0440\u0430\u0439 \u043e\u049b\u04433.4. \u0421SS — \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440<\/span><\/i><\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-337","post","type-post","status-publish","format-standard","hentry","category-html-css-php--java----"],"yoast_head":"\n3.4. \u0421SS - \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440 - edu.govs.kz<\/title>\n<meta name=\"description\" content=\"CSS \u2013 \u0416\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\u0493\u0430 20 \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u041c\u044b\u0441\u0430\u043b \u0411\u0435\u0442\u0442\u0456\u04a3 \u0444\u043e\u043d\u044b\u043d \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041c\u04d9\u0442\u0456\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443 \u0428\u0440\u0438\u0444\u0442 \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041a\u04e9\u043b\u0435\u04a3\u043a\u0435 \u049b\u043e\u0441\u0443 \u0411\u0430\u0442\u044b\u0440\u043c\u0430 \u0441\u0442\u0438\u043b\u0456 Hover \u044d\u0444\u0444\u0435\u043a\u0442\u0456 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/edu.govs.kz\/openedu\/?p=337\" \/>\n<meta property=\"og:locale\" content=\"ru_RU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3.4. \u0421SS - \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440 - edu.govs.kz\" \/>\n<meta property=\"og:description\" content=\"CSS \u2013 \u0416\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\u0493\u0430 20 \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u041c\u044b\u0441\u0430\u043b \u0411\u0435\u0442\u0442\u0456\u04a3 \u0444\u043e\u043d\u044b\u043d \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041c\u04d9\u0442\u0456\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443 \u0428\u0440\u0438\u0444\u0442 \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041a\u04e9\u043b\u0435\u04a3\u043a\u0435 \u049b\u043e\u0441\u0443 \u0411\u0430\u0442\u044b\u0440\u043c\u0430 \u0441\u0442\u0438\u043b\u0456 Hover \u044d\u0444\u0444\u0435\u043a\u0442\u0456 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f\" \/>\n<meta property=\"og:url\" content=\"https:\/\/edu.govs.kz\/openedu\/?p=337\" \/>\n<meta property=\"og:site_name\" content=\"edu.govs.kz\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-12T12:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T06:30:28+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u0440\u043e\u043c\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 \u043c\u0438\u043d\u0443\u0442\u0430\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/edu.govs.kz\/openedu\/?p=337#article\",\"isPartOf\":{\"@id\":\"https:\/\/edu.govs.kz\/openedu\/?p=337\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#\/schema\/person\/30b3909c7e9425abac8beb52cf125317\"},\"headline\":\"3.4. \u0421SS — \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\",\"datePublished\":\"2025-05-12T12:03:00+00:00\",\"dateModified\":\"2025-07-31T06:30:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/edu.govs.kz\/openedu\/?p=337\"},\"wordCount\":189,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#organization\"},\"articleSection\":[\"3. HTML, CSS, PHP \u0436\u04d9\u043d\u0435 Java \u0431\u0430\u0493\u0434\u0430\u0440\u043b\u0430\u043c\u0430\u043b\u0430\u0443 \u0442\u0456\u043b\u0434\u0435\u0440\u0456 - \u04e9\u0442\u0435 \u043e\u04a3\u0430\u0439\"],\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/edu.govs.kz\/openedu\/?p=337#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/edu.govs.kz\/openedu\/?p=337\",\"url\":\"https:\/\/edu.govs.kz\/openedu\/?p=337\",\"name\":\"3.4. \u0421SS - \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440 - edu.govs.kz\",\"isPartOf\":{\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#website\"},\"datePublished\":\"2025-05-12T12:03:00+00:00\",\"dateModified\":\"2025-07-31T06:30:28+00:00\",\"description\":\"CSS \u2013 \u0416\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\u0493\u0430 20 \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u041c\u044b\u0441\u0430\u043b \u0411\u0435\u0442\u0442\u0456\u04a3 \u0444\u043e\u043d\u044b\u043d \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041c\u04d9\u0442\u0456\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443 \u0428\u0440\u0438\u0444\u0442 \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041a\u04e9\u043b\u0435\u04a3\u043a\u0435 \u049b\u043e\u0441\u0443 \u0411\u0430\u0442\u044b\u0440\u043c\u0430 \u0441\u0442\u0438\u043b\u0456 Hover \u044d\u0444\u0444\u0435\u043a\u0442\u0456 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f\",\"breadcrumb\":{\"@id\":\"https:\/\/edu.govs.kz\/openedu\/?p=337#breadcrumb\"},\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/edu.govs.kz\/openedu\/?p=337\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/edu.govs.kz\/openedu\/?p=337#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\/\/edu.govs.kz\/openedu\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3.4. \u0421SS — \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#website\",\"url\":\"https:\/\/edu.govs.kz\/openedu\/\",\"name\":\"edu.govs.kz\",\"description\":\"\u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u049b\u04b1\u0440\u0443, \u0442\u0435\u0445\u043d\u0438\u043a\u0430\u043b\u044b\u049b \u049b\u043e\u043b\u0434\u0430\u0443 \u0436\u04d9\u043d\u0435 \u0441\u04af\u0439\u0435\u043c\u0435\u043b\u0434\u0435\u0443 \u0431\u0438\u0437\u0435\u0441\u0456\u043d\u0435 \u04af\u0439\u0440\u0435\u0442\u0443\",\"publisher\":{\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/edu.govs.kz\/openedu\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ru-RU\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#organization\",\"name\":\"edu.govs.kz\",\"url\":\"https:\/\/edu.govs.kz\/openedu\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/edu.govs.kz\/openedu\/wp-content\/uploads\/2025\/07\/favicon.png\",\"contentUrl\":\"https:\/\/edu.govs.kz\/openedu\/wp-content\/uploads\/2025\/07\/favicon.png\",\"width\":100,\"height\":72,\"caption\":\"edu.govs.kz\"},\"image\":{\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/instagram.com\/edu.govs.kz\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#\/schema\/person\/30b3909c7e9425abac8beb52cf125317\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\/\/edu.govs.kz\/openedu\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/34440583f58d1407a433ede550aaaca7dc32d9549192213b3a2097cb6bfb0c97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/34440583f58d1407a433ede550aaaca7dc32d9549192213b3a2097cb6bfb0c97?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/edu.govs.kz\/openedu\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3.4. \u0421SS - \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440 - edu.govs.kz","description":"CSS \u2013 \u0416\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\u0493\u0430 20 \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u041c\u044b\u0441\u0430\u043b \u0411\u0435\u0442\u0442\u0456\u04a3 \u0444\u043e\u043d\u044b\u043d \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041c\u04d9\u0442\u0456\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443 \u0428\u0440\u0438\u0444\u0442 \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041a\u04e9\u043b\u0435\u04a3\u043a\u0435 \u049b\u043e\u0441\u0443 \u0411\u0430\u0442\u044b\u0440\u043c\u0430 \u0441\u0442\u0438\u043b\u0456 Hover \u044d\u0444\u0444\u0435\u043a\u0442\u0456 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/edu.govs.kz\/openedu\/?p=337","og_locale":"ru_RU","og_type":"article","og_title":"3.4. \u0421SS - \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440 - edu.govs.kz","og_description":"CSS \u2013 \u0416\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\u0493\u0430 20 \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u041c\u044b\u0441\u0430\u043b \u0411\u0435\u0442\u0442\u0456\u04a3 \u0444\u043e\u043d\u044b\u043d \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041c\u04d9\u0442\u0456\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443 \u0428\u0440\u0438\u0444\u0442 \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041a\u04e9\u043b\u0435\u04a3\u043a\u0435 \u049b\u043e\u0441\u0443 \u0411\u0430\u0442\u044b\u0440\u043c\u0430 \u0441\u0442\u0438\u043b\u0456 Hover \u044d\u0444\u0444\u0435\u043a\u0442\u0456 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f","og_url":"https:\/\/edu.govs.kz\/openedu\/?p=337","og_site_name":"edu.govs.kz","article_published_time":"2025-05-12T12:03:00+00:00","article_modified_time":"2025-07-31T06:30:28+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u0440\u043e\u043c":"admin","\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f":"1 \u043c\u0438\u043d\u0443\u0442\u0430"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/edu.govs.kz\/openedu\/?p=337#article","isPartOf":{"@id":"https:\/\/edu.govs.kz\/openedu\/?p=337"},"author":{"name":"admin","@id":"https:\/\/edu.govs.kz\/openedu\/#\/schema\/person\/30b3909c7e9425abac8beb52cf125317"},"headline":"3.4. \u0421SS — \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440","datePublished":"2025-05-12T12:03:00+00:00","dateModified":"2025-07-31T06:30:28+00:00","mainEntityOfPage":{"@id":"https:\/\/edu.govs.kz\/openedu\/?p=337"},"wordCount":189,"commentCount":0,"publisher":{"@id":"https:\/\/edu.govs.kz\/openedu\/#organization"},"articleSection":["3. HTML, CSS, PHP \u0436\u04d9\u043d\u0435 Java \u0431\u0430\u0493\u0434\u0430\u0440\u043b\u0430\u043c\u0430\u043b\u0430\u0443 \u0442\u0456\u043b\u0434\u0435\u0440\u0456 - \u04e9\u0442\u0435 \u043e\u04a3\u0430\u0439"],"inLanguage":"ru-RU","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/edu.govs.kz\/openedu\/?p=337#respond"]}]},{"@type":"WebPage","@id":"https:\/\/edu.govs.kz\/openedu\/?p=337","url":"https:\/\/edu.govs.kz\/openedu\/?p=337","name":"3.4. \u0421SS - \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440 - edu.govs.kz","isPartOf":{"@id":"https:\/\/edu.govs.kz\/openedu\/#website"},"datePublished":"2025-05-12T12:03:00+00:00","dateModified":"2025-07-31T06:30:28+00:00","description":"CSS \u2013 \u0416\u04b1\u043c\u044b\u0441\u0442\u0430\u0440\u0493\u0430 20 \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043b\u044b\u049b \u041c\u044b\u0441\u0430\u043b \u0411\u0435\u0442\u0442\u0456\u04a3 \u0444\u043e\u043d\u044b\u043d \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041c\u04d9\u0442\u0456\u043d \u0442\u04af\u0441\u0456\u043d \u0431\u0435\u0440\u0443 \u0428\u0440\u0438\u0444\u0442 \u04e9\u0437\u0433\u0435\u0440\u0442\u0443 \u041a\u04e9\u043b\u0435\u04a3\u043a\u0435 \u049b\u043e\u0441\u0443 \u0411\u0430\u0442\u044b\u0440\u043c\u0430 \u0441\u0442\u0438\u043b\u0456 Hover \u044d\u0444\u0444\u0435\u043a\u0442\u0456 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f","breadcrumb":{"@id":"https:\/\/edu.govs.kz\/openedu\/?p=337#breadcrumb"},"inLanguage":"ru-RU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/edu.govs.kz\/openedu\/?p=337"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/edu.govs.kz\/openedu\/?p=337#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/edu.govs.kz\/openedu\/"},{"@type":"ListItem","position":2,"name":"3.4. \u0421SS — \u0436\u04b1\u043c\u044b\u0441\u0442\u0430\u0440"}]},{"@type":"WebSite","@id":"https:\/\/edu.govs.kz\/openedu\/#website","url":"https:\/\/edu.govs.kz\/openedu\/","name":"edu.govs.kz","description":"\u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u049b\u04b1\u0440\u0443, \u0442\u0435\u0445\u043d\u0438\u043a\u0430\u043b\u044b\u049b \u049b\u043e\u043b\u0434\u0430\u0443 \u0436\u04d9\u043d\u0435 \u0441\u04af\u0439\u0435\u043c\u0435\u043b\u0434\u0435\u0443 \u0431\u0438\u0437\u0435\u0441\u0456\u043d\u0435 \u04af\u0439\u0440\u0435\u0442\u0443","publisher":{"@id":"https:\/\/edu.govs.kz\/openedu\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/edu.govs.kz\/openedu\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ru-RU"},{"@type":"Organization","@id":"https:\/\/edu.govs.kz\/openedu\/#organization","name":"edu.govs.kz","url":"https:\/\/edu.govs.kz\/openedu\/","logo":{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/edu.govs.kz\/openedu\/#\/schema\/logo\/image\/","url":"https:\/\/edu.govs.kz\/openedu\/wp-content\/uploads\/2025\/07\/favicon.png","contentUrl":"https:\/\/edu.govs.kz\/openedu\/wp-content\/uploads\/2025\/07\/favicon.png","width":100,"height":72,"caption":"edu.govs.kz"},"image":{"@id":"https:\/\/edu.govs.kz\/openedu\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/instagram.com\/edu.govs.kz"]},{"@type":"Person","@id":"https:\/\/edu.govs.kz\/openedu\/#\/schema\/person\/30b3909c7e9425abac8beb52cf125317","name":"admin","image":{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/edu.govs.kz\/openedu\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/34440583f58d1407a433ede550aaaca7dc32d9549192213b3a2097cb6bfb0c97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/34440583f58d1407a433ede550aaaca7dc32d9549192213b3a2097cb6bfb0c97?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/edu.govs.kz\/openedu\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=\/wp\/v2\/posts\/337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=337"}],"version-history":[{"count":2,"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=\/wp\/v2\/posts\/337\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.govs.kz\/openedu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}