Русский

Учебник CSS

Учебник CSS3

CSS Продвинутый

Ссылки на CSS

CSS адаптивный

RU (Русский) Перевод

Добро пожаловать,野心勃勃ые веб-разработчики! Сегодня мы погружаемся в красочный мир CSS. Затяните ремни, потому что мы собираемся отправиться в путешеcтвие, которое навсегда изменит ваше представление о веб-сайтах!

CSS - Quick Guide

Что такое CSS?

CSS, или каскадные таблицы стилей, можно сравнить с fashion-дизайнером в мире веба. Если HTML - это скелет веб-сайта, то CSS - это кожа, одежда и макияж. Это то, что делает веб-сайты красивыми и уникальными.

Представьте, что вы строите дом. HTML будет кирпичами и раствором, а CSS - краской, обоями и мебелью. Это то, что превращаетplain структуру в дом.

Давайте начнем с простого примера:

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

Этот маленький фрагмент CSS instructs tells браузер окрасить весь页面 в светло-серый цвет (#f0f0f0) и использовать шрифт Arial по умолчанию. Если Arial недоступен, он будет использовать любой sans-serif шрифт.

CSS - Синтаксис

Синтаксис CSS похож на рецепт. Он имеет две основные части: селектор и блок объявления.

selector {
  property: value;
}

Селектор указывает на HTML-элемент, который вы хотите стилизовать. Блок объявления содержит одно или несколько объявлений, разделенных точками с запятой. Каждое объявление включает имя свойства CSS и значение, разделенные двоеточием.

Давайте рассмотрим более сложный пример:

h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

Здесь мы целимся во все <h1> элементы. Мы делаем текст синим, устанавливаем его размер в 24 пикселя и выравниваем по центру страницы.

Включение CSS

Существует три способа включения CSS в ваш HTML:

  1. Внутренний CSS
  2. Внутренний CSS
  3. Внешний CSS

Внутренний CSS

Внутренний CSS применяется напрямую к HTML-элементу с помощью атрибута style. Это как дать fashion-совет одному человеку.

<p style="color: red; font-size: 16px;">Этот абзац красного цвета.</p>

Внутренний CSS

Внутренний CSS размещается в секции <head> HTML-страницы, внутри тегов <style>. Это как установление dress code правил для всех на вечеринке.

<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      margin-left: 20px;
    }
  </style>
</head>

Внешний CSS

Внешний CSS хранится в отдельном файле с расширением .css. Он связан с HTML-файлом с помощью тега <link>. Это как создание fashion-журнала, к которому могут обращаться все.

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

Единицы измерения в CSS

CSS имеет несколько единиц для выражения длины. Давайте рассмотрим самые распространенные:

Единица Описание
px Пиксели (1px = 1/96 часть 1 дюйма)
% Процент
em Относительно размера шрифта элемента (2em означает в 2 раза больше текущего размера шрифта)
rem Относительно размера шрифта корневого элемента
vw Относительно 1% ширины окна просмотра
vh Относительно 1% высоты окна просмотра

Вот пример использования разных единиц:

div {
  width: 300px;
  height: 50%;
  font-size: 1.5em;
  padding: 2rem;
  margin-top: 10vh;
}

Цвета в CSS

Цвета в CSS можно указывать несколькими способами:

  1. По имени: red, blue, green и т.д.
  2. По RGB значениям: rgb(255, 0, 0) для красного
  3. По шестнадцатеричным кодам: #FF0000 для красного

Давайте посмотрим, как это работает:

h1 {
  color: blue;
}

p {
  color: rgb(255, 0, 0);
}

div {
  background-color: #00FF00;
}

Фоны в CSS

Фоны могут сделать ваш веб-сайт более выразительным. Вы можете установить фоновый цвет, изображение или и то, и другое!

body {
  background-color: #f0f0f0;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Этот CSS устанавливает светло-серый фоновый цвет, добавляет изображение, centered по странице, ensures что изображение не повторяется и делает его covering весь viewport.

Шрифты в CSS

Шрифты имеют решающее значение для читаемости и стиля. Вот как вы можете устанавливать шрифты:

body {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}

Этот CSS устанавливает Helvetica в качестве предпочитаемого шрифта, с Arial и любым sans-serif шрифтом в качестве резервных. Он также устанавливает размер в 16 пикселей, вес по умолчанию и стиль курсив.

Текст в CSS

Свойства текста контролируют, как отображается текст:

p {
  color: #333;
  text-align: justify;
  text-decoration: underline;
  text-transform: uppercase;
  line-height: 1.5;
}

Этот CSS делает текст dark gray, выровненным по ширине, подчеркивает его, делает все буквы прописными и устанавливает высоту строки в 1.5 раза больше нормы.

Использование изображений

Изображения можно стилизовать так же, как и любой другой элемент:

img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 50%;
}

Это делает изображение responsive (100% ширины до 500px), maintains его aspect ratio и даёт ему circular shape.

Ссылки в CSS

Ссылки можно стилизовать differently в зависимости от их состояния:

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:visited {
  color: purple;
}

Этот CSS изменяет цвет ссылки на синий, удаляет подчеркивание, делает её красной и подчеркивает при наведении, и делает visited ссылки фиолетовыми.

Помните, CSS - это все о creativity и experimentation. Не бойтесь экспериментировать с разными свойствами и значениями. Чем больше вы практикуетесь, тем лучше станете создавать красивые, responsive веб-дизайны. Удачи в кодировании!

Credits: Image by storyset

Предыдущий учебник:
CSS - Вопросы и ответы
Следующий учебник:
CSS - Ссылки