Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Введение в CSS


CSS — это язык, который мы используем для оформления веб-страницы.


Что такое CSS?

  • CSS расшифровывается как каскадные таблицы стилей.
  • CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или других носителях.
  • CSS экономит много работы. Он может одновременно управлять макетом нескольких веб-страниц.
  • Внешние таблицы стилей хранятся в файлах CSS.

Демонстрация CSS — одна HTML-страница — несколько стилей!

Здесь мы покажем одну HTML-страницу, отображаемую с четырьмя разными таблицами стилей. Щелкните ссылки «Таблица стилей 1», «Таблица стилей 2», «Таблица стилей 3», «Таблица стилей 4» ниже, чтобы просмотреть различные стили:



Зачем использовать CSS?

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

Пример CSS

body {
  background-color: lightblue;
}

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

p {
  font-family: verdana;
  font-size: 20px;
}

CSS решил большую проблему

HTML НИКОГДА не предназначался для содержания тегов для форматирования веб-страницы!

HTML был создан для описания содержимого веб-страницы, например:

<h1>Это заголовок</h1>

<p>Это абзац.</p>

Когда в спецификацию HTML 3.2 были добавлены такие теги, как <font> и цветовые атрибуты, для веб-разработчиков начался настоящий кошмар. Разработка крупных веб-сайтов, где информация о шрифтах и ​​цветах добавлялась к каждой отдельной странице, стала долгим и дорогостоящим процессом.

Чтобы решить эту проблему, Консорциум World Wide Web (W3C) создал CSS.

CSS удалил форматирование стилей со страницы HTML!

Если вы не знаете, что такое HTML, мы предлагаем вам прочитать наш учебник по HTML .


CSS экономит много работы!

Определения стилей обычно сохраняются во внешних файлах .css.

С помощью внешнего файла таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!