Основные понятия CSS шаттл — основная часть

внешний интерфейс CSS
Основные понятия CSS шаттл — основная часть

封面图片来自Google

1. Основная грамматика

2. Селектор

2.1, тип селектора

по типу элементаtagName,*,.classили#idСопоставьте один или несколько элементов.

(2),селектор атрибутов

Сопоставьте один или несколько элементов по атрибуту/значению атрибута.

Presence

Типы результат матча
[ attr ] матч содержитattrВсе элементы атрибута
[ attr = val ] соответствоватьattrСтоимость свойстваvalвсе элементы
[ attr ~= val ] соответствоватьattrсвойство содержитvalсловарь(space-separated) все элементы

Substring

Типы результат матча
[ attr ^= val ] соответствоватьattrатрибут сvalвсе элементы, начинающиеся с
[ attr |= val ] соответствоватьattrатрибут сvalилиval-все элементы, начинающиеся с
[ attr $= val ] соответствоватьattrатрибут сval
[ attr *= val ] соответствоватьattrсвойство содержитvalвсе элементы
(3),Псевдо- и псевдоэлемент

Псевдокласс: соответствует соответствующему состоянию и атрибутам элемента, например:hover :first-child :nth-child(), одно двоеточие.
Псевдоэлементы: относительные позиции совпадающих элементов, таких как::after ::first-letter ::selection, двойное двоеточие.

(4),Селектор комбинации

Объединить селекторы: объединить несколько селекторов.

Типы комбинация результат матча
группа выбора A , B соответствует правилу селектора A или B
селектор потомков A B соответствует правилу селектора B, а B является потомком (потомком) A
дочерний селектор A > B Соответствует правилу селектора B, и B является потомком A (должен быть прямым потомком)
селектор соседнего брата A + B Соответствует правилу селектора B, и B является младшим братом A (AB принадлежит тому же родителю, а B следует за A)
либо родственный селектор A - B Селектор правил сопоставления B и A, B — любой брат (AB принадлежит одному и тому же родителю, после A и B, не обязательно сразу)

Приоритет увеличивается следующими правилами:

  • подстановочный знак*, Селектор комбинации (, > + - '') И отрицать псевдо:not()Не влияет на приоритет (в:not()Селектор внутреннего объявления по-прежнему будет зависеть от правил)
  • Стиль по умолчанию браузера
  • селектор типа элементаtagName, селектор псевдоэлементов::
  • Селектор класса.class, селектор атрибутов[ attr ], селектор псевдокласса:
  • селектор идентификатора#id
  • встроенный стиль< tagName style="" >
  • !important

3. Ценности и единицы

3.1 Стоимость

- 数值
- 百分比
- 颜色：背景颜色 background-color 文字颜色 color  边框颜色 border
    - colorName
    - HEX
    - RGB
    - HSL
    - RGBA HSLA
    - Opacity
- 函数
    - rgb() rgba() hsla() linear-gradient()
    - rotate() translate()
    - calc()
    - url()

3,2 единицы

-   px
-   em em are the most common **relative** unit you'll use in web development.
-   rem
-   ex ch
-   vw vh
-   无单位值
-   动画 s deg

  • margin: поле, цвет прозрачный
  • border:Рамка
  • padding: набивка, цвет прозрачный
  • content: Содержимое коробки
    • widthа такжеheight : Contentширина и высота, по умолчаниюauto, который автоматически рассчитывается браузером.
    • max-width/min-width min-height/max-height

Уведомление! Опять же, установка элементаwidthа такжеheight, который фактически установленcontentрегиональныйwidthа такжеheight.реальный размер элементанадо еще посчитатьpadding,borderа такжеmargin. 有几种计算模型需要了解：

  • W3C стандартная коробка модели
Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
  • блочная модель IE

5.4, ​​контур контура

OUTSIDE the borders, to make the element "stand out".

контурОтносится к области за пределами границы, цель состоит в том, чтобы настроить отображение элемента.высовыватьсяСтиль

5.2, перелив перелив

переполнениеoverflowуправляет областью содержимогоcontentСлишком большая и переполненная зона.

стоимость результат матча
visible Значение по умолчанию, часть переполнения не будет обрезана, содержимое областьcontentбудет отображаться за пределами поля элемента
hidden Часть переполнения будет обрезана и не видна
scroll Переполнение обрезается, но появляются полосы прокрутки для просмотра содержимого (вертикальные и горизонтальные полосы прокрутки всегда присутствуют)
auto а такжеscrollАналогично, но только при необходимости появится полоса прокрутки (только в направлении переполнения)

5.3, отсечение фона background-Clip

background-clip: border-box|padding-box|content-box|initial|inherit;

5.5, коробчатый дисплей

5.6 Маржинальное слияние

контекст форматирования на уровне блокаBFC

BFC ( block-formatting contexts )

6. Настройка CSS

Руководство пользователя инструментов разработчика Chrome | Google Developer

7, Media queries@media 

@media not|only mediatype and (expressions) {
  CSS-Code;
}

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Ссылаться на:

Категории