Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Введение в CSS

CSS — этоКаскадные таблицы стилей(сокращение от «Каскадные таблицы стилей») используется для точного управления стилем HTML-страниц, чтобы лучше отображать графическую информацию или создавать интересный и удобный интерактивный интерфейс.

没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
1

Суффикс файла CSS: .css

Комментарий

/* 注释的内容 */
1

Три способа добавления стилей

1. стиль Встроенные стили

<span style="color: red">红色文字</span>
1

2. Добавить с помощью селектора стилей CSS

https://blog.csdn.net/weixin_41192489/article/details/140226382

3. Наследование

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

  <div style="color: red">
    <p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
  </div>
1
2
3

• Все атрибуты стиля текста наследуются. К этим атрибутам относятся: цвет, начинающийся с text-, начинающийся с линии и начинающийся с шрифта-.
• Атрибуты Box, Positioning и Layout не могут быть унаследованы.

Кто определяет окончательный стиль?

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

Приоритет стиля CSS

https://blog.csdn.net/weixin_41192489/article/details/139720467

Основные основы стиля

CSS-единица длины

https://blog.csdn.net/weixin_41192489/article/details/140236423

CSS-функции

https://blog.csdn.net/weixin_41192489/article/details/140318834

коробочная модель

https://blog.csdn.net/weixin_41192489/article/details/102411612

• И высота, и высота строки могут открыть окно, но фоновое изображение не может открыть окно.

Что следует знать о встроенных элементах

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

• После того как встроенные элементы будут обернуты, отображение границ будет беспорядочным и беспорядочным, поэтому не устанавливайте границы для встроенных элементов!

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

  display：inline-block
  1

Какие стили можно добавить?

Универсальный стиль

Стили можно добавлять практически к каждому элементу HTML.

Ширина высота

• ширина: по умолчанию используется ширина содержимого (а не ширина поля).
• высота: по умолчанию используется высота содержимого (а не высота поля).

С помощью следующего стиля вы можете изменить стандартную блочную модель элемента по умолчанию на блочную модель IE.

box-sizing:border-box;
1

в это время

• Ширина: ширина поля (левая граница + левое отступ + ширина содержимого + правое отступ + правая граница).
• height: высота поля (верхняя граница + верхнее отступ + высота содержимого + нижнее отступ + нижняя граница)

Заполнение

• Отрицательные значения не поддерживаются
• Процентное значение, горизонтальное или вертикальное, рассчитывается относительно ширины.

padding: 10px;
1

Отступы: 10 пикселей сверху, снизу, слева и справа.

padding:10px 5px;
1

Верхнее и нижнее отступы составляют 10 пикселей.

Отступы справа и слева составляют 5 пикселей.

padding:10px 5px 15px;
1

Верхнее отступы — 10 пикселей.

Отступы справа и слева составляют 5 пикселей.

Нижний отступ — 15 пикселей.

padding:10px 5px 15px 20px;
1

Верхнее отступы — 10 пикселей.

Отступ справа составляет 5 пикселей.

Нижний отступ — 15 пикселей.

Отступ слева — 20 пикселей.

граница границы

Родственные стили также

• граница с закругленным радиусом
• граница заполнения изображения границы
• наброски наброски

Смотрите подробности https://blog.csdn.net/weixin_41192489/article/details/140325106

допуск

https://blog.csdn.net/weixin_41192489/article/details/115140348

переполнениепереполнение

• видимый [Значение по умолчанию] Весь избыточный контент будет отображаться без обрезки или добавления полос прокрутки.
• скрыто: скрыть полосу прокрутки и не отображать содержимое, превышающее размер объекта, но его все равно можно прокручивать.
• авто: если содержимое не превышает, полоса прокрутки не будет отображаться; если содержимое превышает, будет отображаться полоса прокрутки;
• прокрутка: на платформе Windows полосы прокрутки отображаются всегда, независимо от того, превышает ли содержимое ограничение. На платформе Mac он аналогичен атрибуту auto.

Контейнеры со значениями переполнения auto и прокрутки являются перемещающимися контейнерами (контейнеры с полосами прокрутки). Из-за проблем совместимости для достижения этой цели можно использовать только отступы-нижние части дочерних элементов. нижнее поле контейнера прокрутки белое.

прозрачностьнепрозрачность

Значение атрибута находится в диапазоне от 0,0 (полностью прозрачно) до 1,0 (полностью непрозрачно). Если оно превышает предел диапазона от 0 до 1, окончательное рассчитанное значение является граничным значением.

    opacity: -1;    /* 解析为 0, 完全透明 */
    opacity: 2;     /* 解析为 1, 完全不透明 */
1
2

фон фон

https://blog.csdn.net/weixin_41192489/article/details/140301618

теневой ящик-тень

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

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值）  内/外阴影
1

• Горизонтальное смещение: положительное значение вправо, отрицательное значение влево.
• Вертикальное смещение: положительные значения вниз и отрицательные значения вверх.
• Уровень размытия: не может быть отрицательным.
• Внутренняя/внешняя тень — вставка — это внутренняя тень, а не внешняя тень.

box-shadow: 15px 21px 48px -2px #666;
1

Часто используемые тени

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
1

Посмотреть больше вариантов использования
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

• [Практично] Перезапись цвета фона автоматического заполнения поля ввода.

  input:-webkit-autofill {
      -webkit-box-shadow: inset 0 0 0 1000px #fff;
      background-color: transparent;
  }
  1
  2
  3
  4

• [Практично] Пакетное изменение цвета нажатия кнопок.

  button:active {
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
  }
  1
  2
  3

• 【Настоящий бой】Руководство для начинающих по эффекту маскировки

  .guide {
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
      border-radius: 50%;
  }
  1
  2
  3
  4

клип клип-путь

https://blog.csdn.net/weixin_41192489/article/details/121341551

• [Практично] clip-path реализует анимацию перехода, аналогичную PPT.
  https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation

трансформироватьтрансформировать

https://blog.csdn.net/weixin_41192489/article/details/140314866

зумзум

Браузер Firefox не поддерживает его. Он может иметь следующие значения атрибутов.

• Процентное значение.zoom:50%, что указывает на уменьшение половины исходного размера.
• численная величина.zoom:0.5, что указывает на уменьшение половины исходного размера.
• normalКлючевые слова.zoom:normalЭквивалентноzoom:1, является значением по умолчанию.
• resetКлючевые слова.zoom:reset , что указывает на то, что когда пользователь нажимает Ctrl и - или Ctrl и + для масштабирования документа, элементы не будут соответственно уменьшены или увеличены. Однако это ключевое слово имеет плохую совместимость и поддерживается только браузером Safari.

Сравнение функций масштабирования и масштабирования()

• zoomЦентральная координата масштабирования атрибута находится относительно верхнего левого угла элемента и не может быть изменена.transformпреобразованиеscale()Центральной координатой масштабирования функции по умолчанию является центральная точка элемента.
• Масштабирование атрибута масштабирования изменит размер пространства, занимаемого элементом, в реальном времени и вызовет перерисовку и перерасчет. Таким образом, производительность масштабирования атрибута масштабирования хуже, чем у функции Scale().
• Применение атрибута масштабирования к элементу не создаст каскадный контекст, не повлияет на позиционирование фиксированных элементов и скрытие переполнения абсолютно позиционированных элементов с помощью атрибута overflow, а также не изменит содержащий блок абсолютно позиционированных элементов.

маска маска

https://blog.csdn.net/weixin_41192489/article/details/121158821

градиентградиент

https://blog.csdn.net/weixin_41192489/article/details/140316024

Уникальные стили для разных типов элементов

текст

https://blog.csdn.net/weixin_41192489/article/details/140264311

Гиперссылка

Стили псевдоклассов — должны быть записаны в следующем фиксированном порядке:

• :link «Ссылка»: до щелчка по гиперссылке — применяется ко всем гиперссылкам с атрибутами href (за исключением якорей) — можно опустить, сократить до тега a.
• :visited «Посещено»: после посещения ссылки — ее можно опустить, сократить в теге
• :hover "hover": когда мышь находится на метке
• :active "Активировать": Когда мышкой щелкает по метке, но не отпускает.

    /*让超链接点击之前是红色*/
    a:link{
        color:red;
    }

    /*让超链接点击之后是绿色*/
    a:visited{
        color:orange;
    }

    /*鼠标悬停，放到标签上的时候*/
    a:hover{
        color:green;
    }

    /*鼠标点击链接，但是不松手的时候*/
    a:active{
        color:black;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

картина

Фильтр изображения фильтр

https://www.runoob.com/cssref/css3-pr-filter.html

икона

• Реализуйте адаптивные значки с настройкой шрифта.
  Если размер шрифта больше, шрифт значка становится более подробным, а если размер шрифта меньше, шрифт значка становится проще.
  https://demo.cssworld.cn/8/5-1.php

• Объединение значков CSS — технология ClipPath Sprites
  https://blog.csdn.net/weixin_41192489/article/details/121242735

лист

Выделение строк при наведении

/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
      background: #868686;
}
1
2
3
4

чередующиеся ряды цветов

Чередование цветов между строками данных может снизить утомляемость пользователя при чтении.

table tr:nth-child(odd){
   background:#fff
}
table tr:nth-child(even){
   background:blue
}
1
2
3
4
5
6

прокрутка

курсор мыши

курсор

Цвет курсора
Установите цвет курсора вставки в поле ввода (пока не поддерживается браузерами IE и Edge)

input {
    caret-color: red;
}
1
2
3

Показать и скрыть связанные стили

Когда нет следующих стилей, которые могут скрывать элементы, элементы отображаются (некоторые не видны только потому, что каскад закрыт):

• display: none [Часто используется] Скрытые элементы не занимают места, загружают ресурсы, DOM доступен (добавление скрытых элементов в тег html изменит отображение тега на отсутствие)
• visibility: hidden Скрытые элементы займут позицию, ресурсы будут загружены, DOM доступен.
  • Если родительский элемент устанавливает видимость:скрытый, дочерние элементы также будут невидимыми (наследование).
  • Если для дочернего элемента установлена ​​видимость:visible, дочерний элемент будет отображаться снова.
• opacity: 0 Элемент невидим, занимает свою позицию, и его можно щелкнуть или выбрать.
• clip: rect(0 0 0 0) Элемент невидим, на него нельзя нажать, не занимает места, но доступен с клавиатуры.
• Отрицательные значения z-index скрывают элемент. Элемент невидим и на него нельзя нажать, но он занимает место и доступен с клавиатуры.

  .lower {
  　position: relative;
  　z-index: -1;
  }
  1
  2
  3
  4

Стили, зависящие от позиции

Положение элемента на странице определяется множеством стилей, включая позиционирование, отображение, плавание, поля и т. д.

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

https://blog.csdn.net/weixin_41192489/article/details/119009647

позиция позиция

https://blog.csdn.net/weixin_41192489/article/details/140242430

макет дисплея

https://blog.csdn.net/weixin_41192489/article/details/140250775

допуск

https://blog.csdn.net/weixin_41192489/article/details/115140348

Выравнивание

https://blog.csdn.net/weixin_41192489/article/details/140255028

Каскадный z-индекс

https://blog.csdn.net/weixin_41192489/article/details/140297366

Стили, связанные с взаимодействием

Плавная прокрутка: плавная прокрутка

https://blog.csdn.net/weixin_41192489/article/details/121365831

растянуть изменение размера

https://blog.csdn.net/weixin_41192489/article/details/121396794

Стили, связанные с адаптацией устройства

Запросы СМИ @media

https://blog.csdn.net/weixin_41192489/article/details/126028971

[Практическое] Решения по адаптации мобильных терминалов (три типа)

https://blog.csdn.net/weixin_41192489/article/details/120999355

Пользовательские стили CSS (переменные CSS/пользовательские свойства)

https://blog.csdn.net/weixin_41192489/article/details/140317369

Повысьте эффективность написания CSS

CSS-препроцессор

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

К основным препроцессорам CSS относятся Sass (Scss), Less и Stylus.
(Начиная с версии 3.0 SASS был переименован в SCSS)

• Практическое руководство по Scss
  https://blog.csdn.net/weixin_41192489/article/details/134313564

CSS-фреймворк

• Практическое руководство по UnoCSS
  https://blog.csdn.net/weixin_41192489/article/details/140034188

Соглашения по кодированию CSS

• Сбросить стили браузера по умолчанию
• Старайтесь избегать использования стиля
• Единицы измерения можно опустить, только если значение атрибута равно нулю.
• Значение обычно представляет собой четное число, например 6 пикселей вместо 5 пикселей (особенно высота строки и размер шрифта, чтобы их разница делилась на 2, чтобы шрифт располагался по центру строки).
• Имя класса должно быть семантическим, чтобы вы могли с первого взгляда определить, на какой элемент действует имя класса/эффект стиля, достигаемый именем класса.

/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
   display:flex
}
/* 设置颜色为红色 */
.red{
  color:red
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Рекомендуемые стили текста

• Используйте размер шрифта: средний для текстовых контейнеров (при изменении размера браузера по умолчанию текст можно соответственно увеличить или уменьшить)
• Текст внутри текстового контейнера в относительных единицах измерения — процентах или em.
• Используйте em как единицу измерения полей текста.

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

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