ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML БОЛЬШЕ 🔍 КНИГИ УПРАЖНЕНИЯ СПРАВОЧНИКИ

Что такое CSS?

❮ Prev Next ❯

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

CSS является одной из основных технологий всемирной паутины, наряду с HTML и JavaScript.

Чаще всего CSS используют для визуальной презентации страниц, написанных на HTML и XHTML, но формат CSS может применяться к другим видам XML-документов.

Спецификации CSS были созданы и развиваются Консорциумом Всемирной паутины (W3C). По состоянию на 2020 год актуальной остаётся версия CSS3.

HTML

CSS расшифровывается как Cascading Style Sheets - каскадная таблица стилей

CSS описывает, как HTML элементы должны отображаться

CSS Пример

<style>

body {background-color:lightblue; text-align:center;}
h1 {color:blue; font-size:40px;}
p {font-family:verdana; font-size:20px;}

</style>
Попробуйте сами »

Нажмите на кнопку "Попробуйте сами", чтобы увидеть, как она работает.

CSS Синтаксис

CSS правило состоит из блока селектора и блока объявления (декларации):

CSS selector

Селектор указывает на HTML элемент для стилизации (h1).

Блок объявлений (в фигурных скобках) содержит одно или несколько объявлений, разделенных точками с запятой.

Каждое объявление включает имя CSS свойства и значение, разделенное двоеточием.

В следующем примере все элементы <p> будут шириной 32 пикселя, выровнены по центру и выделены красным:

Пример

<style>
p {font-size:32px; color:red; text-align:center;}
</style>

Этот же пример можно написать так:

<style>
p {
    font-size: 32px;
    color: red;
    text-align: center;
}
</style>
Попробуйте сами »

Внешняя таблица стилей

Таблица стилей CSS может храниться во внешнем файле с расширением .css:

mystyle.css

body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}

Внешние таблицы стилей связаны с HTML-страницами с помощью тегов <link>:

Пример

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>

<h1>Мой первый CSS пример</h1>
<p>Это параграф.</p>

</body>
</html>

Попробуйте сами »

Встроенный стиль

Пример

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>

<h1>Мой первый CSS пример</h1>
<p>Это параграф.</p>
<p style="font-size:25px">Это параграф.</p>
<p style="font-size:30px">Это параграф.</p>

</body>
</html>

Попробуйте сами »

Каскадный порядок

Если для элементов HTML указаны разные стили, то стили будут каскадироваться в новые стили со следующим приоритетом:

  • Приоритет 1: Встроенные стили
  • Приоритет 2: Внешние и внутренние таблицы стилей
  • Приоритет 3: Стиль браузера по умолчанию
  • Если разные стили определены на одном и том же уровне приоритета, последний имеет самый высокий приоритет.

Пример

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">

<style>
body {background-color: lightblue;}
</style>

<body style="background-color: olivedrab">
<h1>Несколько каскадных стилей в одном</h1>
<p>Попробуйте поэкспериментировать, удалив стили, чтобы увидеть, как работают каскадные таблицы стилей.</p>
<p>Попробуйте сначала удалить встроенный, затем внутренний, а затем внешний стиль.</p>
</body>

</html>

Попробуйте сами »

CSS Демо - Одна HTML страница - множество стилей!

Здесь мы покажем одну HTML-страницу с 4 различными таблицами стилей.

Нажмите на кнопки таблицы стилей (1-4), чтобы увидеть страницу, отображаемую в разных стилях.

Полный CSS Учебник

Это было краткое описание CSS.

Для полного онлайн-изучения CSS перейдите на CSS Учебник на нашем сайте.

Для полного ознакомления из CSS справочником, перейдите на CSS Справочник на нашем сайте.

❮ Prev Next ❯