Онлайн css учебник: что это и как работает — учебник CSS

оглавление. Учимся создавать стили — учебник CSS

Пожалуйста, включите JavaScript для просмотра этого сайта.

Блог Indigo | 17.05.2023

Выберите рубрику:

Выберите рубрику:

Наверх

Наверх

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

Содержание раздела

1. Работа с текстом:
   1. Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts
   2. Установка цвета для текста в CSS. Способы представления цветов
   3. Размер шрифта в CSS. Единицы измерения px, %, em
   4. Жирный шрифт и курсив CSS
   5. Прописные и строчные буквы в CSS: свойство text-transform
   6. Подчеркивание, зачеркивание текста в CSS: свойство text-decoration
   7. Тень для текста: свойство CSS text-shadow
   8. Межсимвольный, межстрочный интервал CSS. Расстояние между словами
   9. Выравнивание текста в CSS: свойство text-align
   10. CSS для списков: свойство list-style и его производные
2. Работа с блоками:
   1. Вступление. Блоки
   2. Поля и отступы CSS: отличия свойств margin и padding
   3. Блочные и строчные элементы
   4. Свойство border: границы для блоков
   5. Border-radius: закругленные углы в CSS
   6. Box-shadow: тень для элемента
   7. Width и height: определяем размеры элемента
   8. Box-sizing: управляем вычислением ширины и высоты
   9. Overflow: управление переполненными элементами
   10. Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента
   11. Поток документа. Свойства float и clear
   12. Практика: делаем адаптивную посадочную страницу
3. Работа с графикой:
   1. CSS для тега img
   2. Background-image: установка фонового изображения
   3. Относительный и абсолютный путь к файлу
   4. Background-repeat: повторение фоновой картинки
   5. Background-position: позиционирование фона
   6. Background-attachment: фиксация фона
   7. Свойства CSS3 background-origin и background-clip
   8. Background-size: масштабирование фонового рисунка
   9. Свойство background: все настройки фона в одном месте
   10. Несколько фоновых рисунков для одного элемента
   11. Linear-gradient(): линейный градиент в фоне
   12. Repeating-linear-gradient(): градиент с повторением
   13. Radial-gradient(): радиальный градиент
   14. Repeating-radial-gradient(): повторяющийся радиальный градиент
   15. Практика: создаем фотогалерею на CSS
   16. Практика: работаем с фоновыми рисунками
4. Ссылки и навигация:
   1. Состояния ссылок в CSS. Псевдоклассы
   2. Варианты стилизации ссылок в CSS
   3. Навигационные панели с помощью CSS
   4. Стили для особых ссылок
   5. CSS-спрайты
5. Трансформирование и анимация:
   1. Свойство transform: трансформация элементов
      1. Функция rotate()
      2. Функция scale()
      3. Функция skew()
      4. Функция translate()
      5. Несколько значений свойства transform
      6. 3D-трансформации в CSS
   2. CSS3 transition: плавные переходы
      1. Свойство transition-property
      2. Свойство transition-duration
      3. Свойство transition-timing-function
      4. Свойство transition-delay
      5. Сокращенная запись transition
   3. CSS3-анимация
      1. Правило @keyframes
      2. Запуск анимации: аnimation-name и animation-duration
      3. Свойства animation-timing-function и animation-delay
      4. Свойство animation-iteration-count
      5. Свойство animation-direction
      6. Свойство animation-fill-mode
      7. Свойство animation-play-state
      8. Сокращенная запись animation
   4. Практика: создание CSS-анимации
6. Таблицы и формы:
   1. Стилизация таблиц с помощью CSS
   2. CSS-стили для форм

Вернуться к полному содержанию

Самоучитель и справочник HTML, CSS, XML, JavaScript, jQuery

Создание сайта требует определенных знаний. Источником знаний всегда были книги. Однако в определенный момент сюда добавилась еще одна чрезвычайно обширная база данных – сеть Интернет. Данный сайт собирает в одном месте информацию, которая необходима или может оказаться интересной начинающему вебмастеру. Это своего рода самоучитель и справочник по тем или иным интернет-технологиям — HTML, CSS, XML, JavaScript, jQuery и др.

HTML

Язык для создания веб-страниц

Изучить HTMLСправочник по HTML

Пример HTML:

<!DOCTYPE html>
<html>
<title>Учебник HTML</title>
<body>
<h2>Это заголовок</h2>
<p>Это параграф или абзац.</p>
</body>
</html>

Пример CSS:

body {
  background-color: lightblue;
}
h2 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
  font-size: 20px;
}

CSS

Язык для оформления/стилизации веб-страниц

Изучить CSSСправочник по CSS

XML

Язык разметки для хранения и передачи данных

Изучить XML

Пример XML:

<?xml version="1. 0" encoding="UTF-8"?>
<note>
   <to>Tove</to>
   <from>Jani</from>
   <heading>Напоминание</heading>
   <body>Не забудь обо мне в эти выходные!</body>
</note>

Еще

60 классных кнопок на CSS с анимацией

14/04/2023, 10:26

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

Магические числа в CSS

06/04/2023, 8:50

Несмотря на сказочное название, магические числа — это плохо. Это термин старой школы программирования, обозначающий «неименованную числовую константу». В CSS магическими числами называют значения, которые при определенных обстоятельствах вполне работоспособны, но настолько хрупки, что при изменении этих обстоятельств склонны ломаться

Разные способы создать градиентную тень на CSS

29/03/2023, 17:50

Как сделать градиентную тень для элементов с прозрачным и непрозрачным фоном. На самом деле в CSS нет свойства, которое позволяет создавать градиентные тени. И все посты, которые посвящены этой теме, на самом деле рассматривают различные CSS-трюки для аппроксимации градиента. И мы в этой статье тоже рассмотрим пару таких трюков

Функции плавности в CSS переходах и анимации

24/02/2023, 9:25

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

Как создать сложную анимацию на CSS

30/01/2023, 9:24

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

Руководство по CSS анимации: Принципы и примеры

28/12/2022, 17:56

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

Простая адаптивная типографика при помощи clamp() — Используем возможности SASS

27/10/2022, 9:21

Адаптивная типографика становится все более популярной, тем более что CSS функция clamp() теперь доступна в каждом браузере. Но, если честно, для достижения нужного результата все еще требуется провести много вычислений. Поэтому вместо того, чтобы добавлять полную функцию clamp() непосредственно в код, мы можем облегчить нашу работу с помощью Sass.

Функции CSS, за которые мы благодарны, и функции CSS, которые нам нужны

10/10/2022, 10:08

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

Руководство по медиа-запросам определения типа устройства ввода

21/09/2022, 8:34

В этой статье мы поговорим о том, как адаптировать наши сайты в зависимости от типа устройства: есть ли у него указатель или нет, и насколько он точен. Чтобы адаптировать наш сайт к возможностям этих устройств, мы поговорим о том, как правильно использовать специальные медиа-запросы hover, pointer, any-hover и any-pointer

Раздел «Как сделать»

Сниппеты кода для HTML, CSS, JavaScript

Оригинальное изображение

Черно-белое изображение

Узнать Как сделать

Learn CSS: Display and Positioning Cheatsheet

CSS

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

Свойство z-index использует целые значения, которые могут быть положительными или отрицательными. Элемент с наибольшим значением z-index будет на переднем плане, а элемент с наименьшим z-index 9Значение 0004 будет сзади.

 
 //элемент 1 будет перекрывать элемент 2 
 
 . element1 { 
 
 position: absolute; 
 
 z-индекс: 1; 
 
 } 
 
 .element2 { 
 
 позиция: абсолютная; 
 
 Z-индекс: -1; 
 
 } 
 

Фиксированное позиционирование CSS

Позиционирование в CSS предоставляет дизайнерам и разработчикам возможности для позиционирования HTML-элементов на веб-странице. Позиция CSS может быть установлена ​​на статический , относительный , абсолютный или фиксированный . Когда позиция CSS имеет значение fixed , она устанавливается/прикрепляется к определенному месту на странице. Фиксированный элемент остается неизменным независимо от прокрутки. Панель навигации — отличный пример элемента, который часто имеет значение position: fixed; , что позволяет пользователю прокручивать веб-страницу и по-прежнему получать доступ к панели навигации.

 
 #navbar { 
 
 позиция: фиксированная; 
 
 } 
 

Свойство CSS

 
 .container1 { 
 
 display: block; 
 
 } 
 
 .container2 { 
 
 display: inline; 
 
 } 
 
 .container3 { 
 
 display: inline-block; 
 
 } 
 

 
 .element { 
 
 позиция: абсолютная; 
 
 } 
 

Значение относительная свойства позиции CSS позволяет расположить элемент относительно того места, где он изначально находился на веб-странице. Свойства смещения можно использовать для определения фактического положения элемента относительно его исходного положения. Без свойств смещения это объявление не повлияет на его позиционирование, оно будет действовать как значение по умолчанию static свойства position .

  
 .element { 
 
 позиция: относительная; 
 
 } 
 

Свойство CSS

float

Свойство CSS float определяет, насколько далеко влево или вправо должен перемещаться элемент внутри своего родительского элемента. Значение left помещает элемент в левую часть его контейнера, а значение right перемещает элемент в правую сторону его контейнера. Для собственности float , необходимо указать ширину контейнера, иначе элемент примет полную ширину содержащего его элемента.

 
 /* Содержимое будет плавать в левой части контейнера. */ 
 
 .left { 
 
 float: left; 
 
 } 
 
 /* Содержимое будет перемещаться по правой стороне контейнера. */ 
 
 .right { 
 
 float: right; 
 
 } 
 

CSS

clear свойство

CSS 9Свойство 0003 clear указывает, как элемент должен вести себя, когда он сталкивается с другим элементом в том же содержащем элементе. clear обычно используется в сочетании с элементами, имеющими свойство CSS float . Это определяет, с каких сторон плавающие элементы могут плавать.

 
 /*Определяет, что никакие другие элементы внутри одного содержащего элемента не могут плавать слева от этого элемента. */ 
 
 .element { 
 очистить: слева; 
 
 } 
 
 /*Определяет, что никакие другие элементы внутри одного и того же содержащего элемента не могут располагаться справа от этого элемента.*/ 
 
 .element { 
 
 clear: right; 
 
 } 
 
 /*Определяет, что никакие элементы внутри одного и того же содержащего элемента не могут плавать по обе стороны от этого элемента.*/ 
 
 .element { 
 
 clear: Both; 
 
 } 
 
 /*Определяет, что другие элементы внутри одного и того же содержащего элемента могут плавать по обе стороны от этого элемента.*/ 
 
 .element { 
 
 очистить: нет; 
 
 } 
 

Значок со стрелкой влевоПредыдущий

Значок со стрелкой вправо

Бесплатный курс

Изучение CSS

В этом уроке по CSS вы узнаете, как добавить CSS для визуального преобразования HTML в привлекающие внимание сайты .

Checker DenseLevel Icon

Новичок Дружелюбный

8 Уроки

Путь навыков

Создание веб-сайта с помощью HTML, CSS и страниц GitHub

Изучите основы веб-разработки, чтобы создать свой собственный веб-сайт.

Checker Dense

Включает

9 курсов

Checker DenseCertificate Icon

С сертификатом

Checker DenseLevel Icon

Новичок 90 258 Дружелюбный

18 Уроки

Изучение CSS: Памятка по синтаксису и селекторам

< link> Элемент Link

Элемент используется для связывания документов HTML с внешними ресурсами, такими как файлы CSS. Обычно используется:

• атрибут href для указания URL внешнего ресурса
• rel атрибут для указания связи связанного документа с текущим документом
• тип атрибута для определения типа связанного контента

 
  
 
  /path/to/stylesheet/style.css" rel="stylesheet" type= "текст/CSS"> 
 

Назначение CSS

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

Запись CSS в отдельные файлы

Код CSS можно записывать в отдельные файлы, чтобы отделить его от кода HTML. Расширение файлов CSS — .css . Их можно связать с файлом HTML с помощью Тег в разделе .

Запись CSS в файл HTML

CSS-код можно записать в файл HTML, заключив код в тегов

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

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

 
 
Текст по центру
 
 
 
Синий, 18-точечный текст
 
 

Отделение кода HTML от кода CSS

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

Селекторы классов и идентификаторов

Классы CSS можно многократно использовать и применять ко многим элементам. Селекторы классов обозначаются точкой . , за которым следует имя класса. Селекторы CSS ID должны быть уникальными и использоваться для стилизации только одного элемента. Селекторы идентификаторов обозначаются знаком решетки # , за которым следует имя идентификатора.

 
 /* Выбирает все элементы с */ 
 
 .column { 
 
 } 
 
 /* Выбирает элемент с */ 
 
 #first-item { 
 
 } 
 9003 7 
 
 Группы селекторов CSS 
 
 
 Соответствие несколько селекторов к одному и тому же правилу CSS, используя список, разделенный запятыми. В этом примере текст для  h2  и  h3  установлены в красный цвет. 
 
 
 h2, h3 { 
 
 цвет: красный; 
 
 } 
 
 Цепочка селекторов 
 Селекторы CSS   определяют набор элементов, к которым применяется набор правил CSS. Например, чтобы выбрать все элементы 
 , можно использовать селектор  p  для создания правил стиля.
 Цепочка селекторов 
 Селекторы CSS могут быть объединены в цепочку, чтобы наборы правил применялись только к элементам, которые соответствуют всем критериям. Например, чтобы выбрать 
 элементов, которые также имеют класс  section-heading , можно использовать селектор  h4.section-heading .
 
 /* Выберите элементы h4 с классом section-heading */ 
 
 h4.section-heading { 
 
 color: blue; 
 
 } 
 
 /* Выбрать элементы с заголовком раздела и классом кнопок */ 
 
 .section-heading.button { 
 
 cursor: pointer; 
 
 } 
 
 Селекторы типов CSS 
 Селекторы типов CSS   используются для сопоставления всех элементов данного типа или имени тега. В отличие от синтаксиса HTML, мы не включаем угловые скобки при использовании селекторов типов для имен тегов. При использовании селекторов типов элементы сопоставляются независимо от их уровня вложенности в HTML.
 
 /* Выбирает все теги 
 */ 
 
 p { 
 
 } 
 
 Селекторы классов CSS 
 Селекторы классов CSS сопоставляют элементы на основе содержимого их  атрибут класса . Для выбора элементов, имеющих  календаря-ячейки  в качестве значения атрибута  класса ,  .  должен быть добавлен в начале.
 
 .calendar-cell { 
 
 color: #fff; 
 
 } 
 
 Атрибуты HTML с несколькими значениями 
 Некоторые атрибуты HTML могут иметь несколько значений атрибутов. Несколько значений атрибутов разделяются пробелом между каждым атрибутом.
 
 <дел> 
 
 Специфичность селектора 
 Специфика — это система ранжирования, которая используется при наличии нескольких конфликтующих значений свойств, указывающих на один и тот же элемент. При определении того, какое правило применить, побеждает селектор с наивысшей специфичностью. Наиболее специфичным типом селектора является селектор идентификатора, за которым следуют селекторы класса, а затем селекторы типа. В этом примере будет реализован только цвет : синий , поскольку он имеет селектор идентификатора, тогда как цвет : красный  имеет селектор типа.
 
 h2#header { 
 
 цвет: синий; 
 
 } /* реализовано */ 
 
 h2 { 
 
 color: red; 
 
 } /* Не реализовано */ 
 
 Селекторы CSS ID 
 Селектор CSS ID сопоставляет элементы на основе содержимого их атрибута  id . Значения атрибута  id  должны быть уникальными во всей DOM. Для выбора элемента с  должностями  в качестве значения  id , необходимо добавить  # .
 
 #job-title { 
 
 вес шрифта: полужирный; 
 
 } 
 
 Селектор-потомок CSS 
 Комбинатор селектора-потомка CSS   используется для сопоставления элементов, происходящих от другого совпадающего селектора. Они обозначаются одним пробелом между каждым селектором и потомком селектора. Все соответствующие элементы выбираются независимо от уровня вложенности в HTML.
 
 div p { } 
 
 section ol li { } 
 
 NextMini Arrow Right Icon
 Бесплатный курс
 Изучение CSS: введение 
 Узнайте, как использовать стили и визуально организовывать HTML страницы.