Русский

Учебник CSS

Учебник CSS3

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

Ссылки на CSS

CSS адаптивный

CSS3 Tutorial: A Beginner's Guide to Styling the Web

Что такое CSS?

CSS, что означает каскадные таблицы стилей, — это мощный язык стилизации, который используется для описания представления документа, написанного на HTML или XML. Это как fashion-дизайнер в мире интернета, определяющий, как элементы должны отображаться на экране, бумаге или в других медиа.

CSS3 - Tutorial

Представьте, что вы строите дом. HTML будет representировать структуру — стены, крышу и фундамент. CSS же — все, что делает дом красивым — краску, обои, шторы и мебель. Это то, что превращает голую веб-страницу в визуально привлекательное произведение искусства!

Кто должен учиться CSS?

Любой, кто хочет создавать красивые, адаптивные веб-сайты, должен учиться CSS. Это включает в себя:

  1. Веб-разработчиков
  2. Веб-дизайнеров
  3. Дизайнеров UI/UX
  4. Дigital-маркетологов
  5. Блогеров
  6. Кого угодно, кто интересуется веб-технологиями

Даже если вы completo parvus с нулевым опытом программирования, не волнуйтесь! CSS спроектирован быть интуитивно понятным и легким для изучения. С небольшим количеством практики вы будете стилизовать веб-сайты как профи в кратчайшие сроки.

Типы CSS

Существует три основных типа CSS:

  1. Внутристраничный CSS
  2. Внутренний CSS
  3. Внешний CSS

Давайте разберем их с примерами:

1. Внутристраничный CSS

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

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

Этот метод быстрый, но не рекомендуется для больших проектов, так как он смешивает контент с представлением.

2. Внутренний CSS

Внутренний CSS располагается внутри тега <style> в секции HTML <head>.

<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>Этот абзац будет зеленым с размером шрифта 18px.</p>
</body>

Этот метод полезен для стилизации отдельных страниц, но становится неэффективным для многостраничных веб-сайтов.

3. Внешний CSS

Внешний CSS хранится в отдельном файле .css и liên kếtается с HTML-документом.

<!-- В вашем HTML-файле -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* В вашем файле styles.css */
p {
color: red;
font-size: 20px;
}

Этот метод наиболее эффективен для больших проектов, так как он разделяет контент и представление и позволяет легко обслуживать.

Пример кода CSS

Давайте погрузимся в более comprehensive пример, чтобы увидеть CSS в действии:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Awesome Website</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.highlight {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Awesome Website</h1>
<p>This is a paragraph with some <span class="highlight">highlighted</span> text.</p>
</div>
</body>
</html>

В этом примере мы используем внутренний CSS для стилизации нашей веб-страницы. Давайте разберем, что делает каждая часть:

  • Мы устанавливаем шрифт body как Arial и даем ему светло-серый фон.
  • Класс .container создает centrified white box с отступами и легкой тенью.
  • Заголовок h1 выравнивается по центру и имеет темный серый цвет.
  • Класс .highlight создает желтое выделенное текст.

Причины использования CSS

  1. Разделение контента и представления
  2. Consistency across multiple pages
  3. Быстрее время загрузки страницы
  4. Легкость обслуживания и обновлений
  5. Возможности адаптивного дизайна
  6. Улучшенный пользовательский опыт

Предварительные условия для изучения CSS

Чтобы начать работу с CSS, вам потребуется:

  1. Основное понимание HTML
  2. Текстовый редактор (например, Visual Studio Code, Sublime Text или даже Notepad)
  3. Веб-браузер (Chrome, Firefox или Safari)
  4. Enthusiasm и willingness к experiment!

Начало работы с руководством по CSS

Теперь, когда мы рассмотрели основы, давайте начнем стилизовать! Мы создадим простую веб-страницу и будем стилизовать ее шаг за шагом.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Styled Page</title>
<style>
/* Мы добавим наш CSS здесь */
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h2>About Me</h2>
<p>Hi there! I'm learning CSS and it's awesome!</p>
</main>
<footer>
<p>&copy; 2023 My Website</p>
</footer>
</body>
</html>

Теперь добавим немного CSS, чтобы она выглядела великолепно!

body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

header {
background-color: #35424a;
color: white;
text-align: center;
padding: 1rem;
}

nav ul {
background-color: #2c3e50;
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline-block;
margin-right: 10px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
}

nav ul li a:hover {
background-color: #34495e;
}

main {
padding: 20px;
}

footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

Этот CSS делает следующее:

  • Устанавливает для всего сайта одинаковый шрифт и интерлиньяж.
  • Создает темный заголовок с выровненным по центру белым текстом.
  • Стилизует навигационное меню с темным фоном и вертикóлно выровненными элементами списка.
  • Добавляет эффект hover для навигационных ссылок.
  • Добавляет отступы к основной области содержимого.
  • Создает фиксированный footer в нижней части страницы.

Свойства CSS

CSS использует широкий спектр свойств для стилизации элементов. Вот таблица некоторых common свойств:

Свойство Описание Пример
color Устанавливает цвет текста color: blue;
background-color Устанавливает цвет фона background-color: #f0f0f0;
font-size Устанавливает размер шрифта font-size: 16px;
font-family Устанавливает тип шрифта font-family: Arial, sans-serif;
margin Устанавливает внешнее пространство margin: 10px;
padding Устанавливает внутреннее пространство padding: 5px;
border Устанавливает стиль borders border: 1px solid black;
text-align Устанавливает выравнивание текста text-align: center;
display Устанавливает тип отображения display: flex;

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

Пока вы будете чувствовать себя комфортно с CSS, вы можете explore advanced concepts, такие как:

  1. Flexbox и Grid layout
  2. Адаптивный дизайн с media queries
  3. CSS анимации и переходы
  4. CSS препроцессоры, такие как Sass или Less
  5. CSS фреймворки, такие как Bootstrap или Tailwind

Помните, ключ к maîtriser CSS — это практика. Не бойтесь experimentировать и совершать ошибки — так мы учимся! Счастливо стилизовать!

Credits: Image by storyset

Предыдущий учебник:
CSS - Типы данных
Следующий учебник:
CSS - Закругленные углы