Wondershare EdrawMind
Галерея диаграмм связей HTML CSS
- 4
HTML CSS
Общая основа HTML и CSS: CSS — каскадные таблицы стилей, html — язык разметки гипертекста.
Отредактировано в 2023-08-22 15:01:32
- Рекомендовано вам
- Структура
HTML CSS
Концепции CSS
каскадные таблицы стилей
Каскадные таблицы стилей
Синтаксис CSS
Комментарий
/* */
Селектор {свойство:значение свойства;свойство:значение свойства;свойство:значение свойства;...свойство:значение свойства;}
Общие селекторы CSS
Базовый
Этикетка
название тэга{}
ИДЕНТИФИКАТОР
Функции
уникальность
#коробка{}
сорт
Функции
один ко многим
многие к одному
.красный{}
Псевдокласс
:наведите курсор
:связь
:активный
:посетил
подстановочный знак
*
сложный
группа
Селектор 1, Селектор 2,....{}
Включать
Селектор 1 Селектор 2 ...{}
Указать
Селектор 1 Селектор 2...{}
Общие свойства CSS
текст
размер шрифта
цвет
высота линии
выравнивание текста
вес шрифта
смелый
нормальный
более легкий
смелее
стиль шрифта
нормальный
курсив
семейство шрифтов
вариант шрифта
нормальный
малая капитализация
отступ текста
текст-оформление
подчеркнуть
зачеркнуть
Линия, проходящая через
никто
преобразование текста
верхний регистр
строчные буквы
капитализировать
переполнение текста
Межбуквенное расстояние
межсловный интервал
коробочная модель
допуск
Поддержка метода четырех значений
Поддержка определения одного направления
Поддерживает отрицательные значения
Фоновые изображения не поддерживаются.
Вертикально смежное слияние
Переполнение родительского поля: скрыто
подокно с плавающей запятой
граница
Функции
Поддержка фонового изображения
Поддерживает одно направление
Метод четырех значений не поддерживается.
пограничный клин
треугольник
граница: 100 пикселей, сплошная прозрачная;
цвет границы: красный;
высота: 0;
ширина: 0;
Атрибуты
ширина рамки
бордюрный стиль
твердый
Сплошная линия
пунктирная
пунктир
пунктирный
пунктирная линия
двойной
Двойная линия
цвет границы
прокладка
Поддержка метода четырех значений
Поддерживает одно направление
Поддержка фонового изображения
Отрицательные значения не поддерживаются
Соответствующую ширину и высоту нужно уменьшить (странному ящику это не нужно)
содержание
ширина
высота
плавать
плавать
левый
верно
никто
прозрачный
левый
верно
никто
оба
Поместите его в коробку, на которую вы не хотите, чтобы на него влияло плавание.
позиция
относительно
родственник
Функции
Никакого занятия места не по назначению
позиция по отношению к себе
Может использоваться для небольших движений позиций.
Справочные объекты, которые можно использовать для абсолютного позиционирования.
абсолютный
абсолютный
Функции
Не по этикетке и не занимает места
Расположение относительно содержащего блока
Не пишите координаты и оставьте их на месте
Сын совершенно не похож на отца
зафиксированный
зафиксированный
Функции
Относительное расположение окон
Не по этикетке и не занимает места
Не пишите координаты и оставьте их на месте
вязкость
липкий
Функции
Необходимо использовать в сочетании с координатами.
Эквивалент комбинации относительного позиционирования и фиксированного позиционирования.
Никакого занятия места не по назначению
статический
статический
Функции
Никакого занятия места не по назначению
Атрибуты координат не поддерживаются
Иерархические атрибуты не поддерживаются.
тип элемента
Классификация
уровень блока
эксклюзивная линия
Настраиваемая ширина и высота
Высота строки может поддерживать высоту
После плавания он будет расположен горизонтально.
в соответствии
отображение в одну строку
Невозможно установить ширину и высоту
Высота строки не может поддерживать высоту
Вы можете установить ширину и высоту после плавания
текстовый отступ не поддерживается
Атрибуты, связанные с блочной моделью, не поддерживаются и недопустимы в вертикальном направлении.
Конвертировать
отображать
блокировать
встроенный блок
в соответствии
никто
скрытый элемент
Элемент списка
тип списка
ячейка таблицы
тип ячейки
приложение
Навигация переменной ширины по горизонтали по центру
ul{text-align:center}
ли {дисплей: встроенный блок;}
Одна строка по центру, несколько строк слева
.all {text-align:center;}
.all p {display:inline-block;text-align-left};
разрыв изображения
img {дисплей: блок;
img {вертикальное выравнивание: верх/средний/низ;}
.all{размер шрифта:0;}
Центрировать изображение по вертикали
метод 1
.all {высота: 400 пикселей; высота строки: 400 пикселей;}
img {вертикальное выравнивание: средний;}
Способ 2
img {вертикальное выравнивание: средний;}
диапазон {вертикальное выравнивание: средний; ширина: 0; высота: 100%; дисплей: встроенный блок}
Связанные с таблицей
расстояние между границами
зазор безеля
свернуть границу
слияние границ
раскладка таблицы
Исправлено расположение таблиц
ценить
зафиксированный
Исправлено расположение таблиц
авто
Автоматическая раскладка таблицы
пустые ячейки
Ячейки без отображаемого содержимого
ценить
скрывать
Скрыть ячейки без содержимого
показывать
Ни одна ячейка за этот день не отображается.
Связанные с прошлым
фоновый цвет
изображение на заднем плане
URL();
фоновое повторение
повторить
не повторяющийся
повторить-х
повторение
фоновая позиция
Горизонтальный и вертикальный
пикселей
%
вверху справа внизу слева
фоновое вложение
прокрутка
относительная коробка
зафиксированный
относительное окно
Список связанных
стиль списка: нет
css3
селектор
Базовый
Этикетка
ИДЕНТИФИКАТОР
сорт
*
Иерархия
Потомки
(космос)
потомство
>
братья-соседи
Универсальный
~
Псевдокласс
Динамический псевдокласс
:наведите курсор
:связь
:активный
:посетил
:фокус
Структурный псевдокласс
детская серия
:nth-child()
:Первый ребенок
:последний ребенок
:единственный ребенок
:nth-последний-ребёнок()
Сын серии
:n-типа()
:первый в своем роде
: последний тип
:только тип
:nth-последний-типа()
:корень
:пустой
:нет()
отрицать псевдокласс
:нет
Псевдокласс языка
: язык
Целевой псевдокласс
:цель
Необходимо использовать вместе с якорными ссылками.
поставить на цель
Тот, у кого есть идентификатор, является целью
Псевдокласс состояния элемента пользовательского интерфейса
:неполноценный
:включено
:только для чтения
:читай пиши
:проверено
Атрибуты
[атрибут]
[атр=значение]
[атр^=значение]
[attr$=значение]
[атрибут*=значение]
[атрибут~=значение]
[атрибут|=значение]
Псевдоэлементы (встроенные)
::после {content:""}
::перед {content:""}
::первая линия
::первое письмо
::выбор
Веса
*
0,1
Этикетка
1
сорт
10
Псевдокласс
10
Атрибуты
10
ИДЕНТИФИКАТОР
100
в соответствии
1000
!важный
10000
Атрибуты
угловой радиус
граница-радиус
тень коробки
коробка-тень
вставка
Внутренняя тень
Направо
вниз
степень двусмысленности
Степень расширения
цвет тени
тень текста
тень текста
Направо
вниз
степень двусмысленности
деформация
трансформировать (2D)
переводить()
вращать()
шкала()
перекос()
трансформировать (3D)
Определить глубину резкости
перспектива
Определить тип деформации
стиль преобразования: сохранение-3d;
3D-деформация
перевести3d
ротатекс
вращающийся
ротация
масштаб3d
Определите начальную точку деформации
преобразование-начало
переход
переход
Градиент
линейный градиент
фон: линейный градиент (0град, #000, #000)
радиальный градиент
фон: радиальный градиент (радиус в позиции, #000, #000)
Радиус: большой/малый
Позиция: х/у
Мозаика с линейным градиентом
фон: повторяющийся линейный градиент (0 градусов, # 000 5 пикселей, # 000 10 пикселей)
Радиальная градиентная плитка
фон: повторяющийся радиальный градиент (радиус в позиции, #000 5 пикселей, #000 10 пикселей)
анимация
заявление об анимации
@имя ключевого кадра{}
анимационный вызов
анимация: имя .5s линейный 0s бесконечный alertnate forwords
Макет
флексбокс-макет
контейнер
дисплей: гибкий
гибкое направление
столбец
ряд
обратная колонка
обратная строка
гибкая упаковка
сворачивать
без упаковки
обратная упаковка
оправдание-содержание
гибкий старт
гибкий конец
центр
пространство-между
пространство вокруг
равномерно по пространству
выравнивание элементов
потягиваться
гибкий старт
гибкий конец
центр
базовый уровень
выравнивание-контент
потягиваться
гибкий старт
гибкий конец
центр
пространство-между
пространство вокруг
равномерно по пространству
проект
гибкий
гибкая термоусадка
гибкий рост
гибкая база
выровнять-самостоятельно
потягиваться
гибкий старт
гибкий конец
центр
базовый уровень
заказ
Макет сетки
контейнер
дисплей: сетка
столбцы-шаблона сетки
200 пикселей 200 пикселей 200 пикселей
20% 50% 30%
повторить (3200 пикселей)
повторить(автозаполнение, 20%)
1 фр 1 фр 1 фр
1фр 1фрр 1минмакс(200px,1фр)
строки-шаблона сетки
200 пикселей 200 пикселей 200 пикселей
20% 50% 30%
повторить (3200 пикселей)
повторить(автозаполнение, 20%)
разрыв в энергосистеме
междурядье
разрыв столбца
области шаблонов сетки
оправдание-содержание
выравнивание-контент
оправдание-элементы
выравнивание элементов
проект
область сетки
столбец сетки
начало сетки-столбца
конец столбца сетки
строка сетки
начало строки сетки
конец строки сетки
многоколоночный макет
столбцы
столбцы: 5 200 пикселей;
количество столбцов
ширина колонки
разрыв столбца
правило столбца
пролет столбца
заполнение столбца
Запросы средств массовой информации
<link mate="экран и (минимальная ширина: 960 пикселей) и (максимальная ширина: 1200 пикселей)">
Экран @media и (минимальная ширина: 960 пикселей) и (максимальная ширина: 1200 пикселей)
коробочная модель
калибровка коробки
граница
странная модель коробки
Функции
заполнение границы в пределах ширины и высоты
поле содержимого
стандартная коробочная модель
Функции
ширина-высота не включает границу отступа
совместимый
содержание
Трезубец
Геккон
Вебкит
Мигать
Престо
префикс
-моз-
-РС-
-webkit-
-о-
термин
прогрессивное улучшение
Сначала низкий, а затем высокий, уделяя особое внимание реализации функций низкой версии и добавляя крутые эффекты в высокую версию.
Плавное понижение версии
Сначала высокая, а затем низкая, фокусируясь на эффектах функций высокой версии, и необходимо разобраться с совместимостью низких версий.
другой
Значок шрифта
http://www.iconfont.cn
якорная ссылка
<a href="#one"></a>
Прыгать
<a name="one"></a>
<div id="one"></div>
Метод центрирования
позиция
метод 1
родительский ящик
положение: родственник;
дополнительный ящик
позиция: абсолютная;
верх:50%;
осталось: 50%;
поле слева: половина ширины;
маржа-верх:-половина высоты;
маржа:авто
Способ 2
родительский ящик
положение: родственник;
дополнительный ящик
позиция: абсолютная;
верх: 0;
внизу: 0;
осталось: 0;
правильно: 0;
маржа:авто
Способ 3
родительский ящик
положение: родственник;
дополнительный ящик
позиция: абсолютная;
top:calc(50% - половина выше);
left:calc(50% — половина ширины);
Способ 4
родительский ящик
положение: родственник;
дополнительный ящик
позиция: абсолютная;
верх:50%;
осталось: 50%;
перевести(-50%,-50%);
Флексбокс
метод 1
родительский ящик
дисплей: гибкий;
дополнительный ящик
маржа: авто;
Способ 2
родительский ящик
дисплейфлекс;
оправдание-содержание: центр;
выровнять-элементы: по центру;
Способ 3
родительский ящик
дисплей: гибкий;
оправдание-содержание: центр;
дополнительный ящик
выровнять-сам: центр
сетка
метод 1
родительский ящик
дисплей: сетка;
оправдание-содержание: центр;
выровнять-контент: центр;
Способ 2
родительский ящик
дисплей: сетка;
дополнительный ящик
маржа: авто;
блок внутрилинейного перевода
метод 1
родительский ящик
высота строки: высокая;
выравнивание текста: по центру;
родительский ящик
дисплей: встроенный блок;
вертикальное выравнивание: по середине;
высота строки: высокая;
Способ 2
родительский ящик
выравнивание текста: по центру;
дополнительный ящик
дисплей: встроенный блок;
вертикальное выравнивание: по середине;
Псевдоэлемент родительского блока::after
содержание:"";
дисплей: встроенный блок;
вертикальное выравнивание: по середине;
ширина: 0;
высота: 100%;
Способ 3
родительский ящик
выравнивание текста: по центру;
вертикальное выравнивание: по середине;
дисплей: таблица-ячейка;
дополнительный ящик
дисплей: встроенный блок;
Многострочный текст по центру по вертикали
родительский ящик
вертикальное выравнивание: по середине;
дисплей: таблица-ячейка;
сегмент кода
Эллипсис
фиксированная ширина
ширина
Никаких разрывов строк
пробел:nowrap;
переполнение скрыто
переполнение: скрыто
Эллипсис
переполнение текста: многоточие
Мобильная верстка
область просмотра
Область просмотра, по умолчанию для мобильных устройств — 980.
ДНР
Соотношение пикселей устройства
Макет
Процентная раскладка
Масштабный макет
единица
Эм
Кратное число самого себя или размера шрифта родительского поля.
рем
Размер шрифта, кратный корневому (html)
Фольксваген
Один процент ширины области просмотра
вх
Один процент высоты области просмотра
вмин
один процент короткой стороны
vмакс
Один процент длинной стороны
БФК
Триггерные свойства
плавать
левый
верно
переполнение
скрытый
прокрутка
авто
позиция
абсолютный
зафиксированный
отображать
встроенный блок
ячейка таблицы
заголовок таблицы
гибкий
приложение
проблема проникновения на верхнюю границу маржи
проблема с падением высоты
Адаптивная ширина и высота
Адаптивный по ширине контент
плавать
позиция
встроенный блок
Высокоадаптивный контент
сильно разрушенный
Дочерний блок является плавающим, а высота родительского блока равна 0.
решать
фиксированная высота
преимущество
Простой
недостаток
Невозможно адаптироваться
Добавить переполнение: скрыто в родительском поле
преимущество
Адаптируемый
недостаток
переполнение скрыто
Добавьте пустое поле под плавающей точкой и установитеclear:both;
преимущество
Может быть адаптивным
Скрыть без переполнения
недостаток
Нужно загрузить еще одну коробку
Универсальный метод очистки плавающего числа, добавьте::after{content:"";display:block;clear:both;} в родительский блок
преимущество
Адаптируемый
проблема с переполнением скрыта
Нет необходимости загружать дополнительную коробку
адаптивное окно по высоте
HTML,body{высота:100%;}
HTML5
Функции
Базовая структура проще
грамматическая релаксация
Семантика меток
Даже без стилей можно представить четкую структуру
Легко для SEO
Облегчает командную работу и модификацию кода после обслуживания.
доступность
будущие функции
Добавьте семантические теги
большая семантика
заголовок
нижний колонтитул
основной
навигация
раздел
статья
в стороне
маленькая семантика
фигура
рисунок
отметка
холст
видео
Атрибуты
элементы управления
Автовоспроизведение
приглушенный
петля
источник
Поддерживаемые форматы
mp4
огг
вебм
ширина
высота
аудио
Атрибуты
элементы управления
Автовоспроизведение
приглушенный
петля
источник
Поддерживаемые форматы
mp3
огг
вав
подробности
краткое содержание
источник
умная форма
Добавить новые атрибуты
необходимый
Обязательные поля
автофокус
автофокус
заполнитель
Заполнитель
автозаполнение
Включить ли запись истории
ценить
на
выключенный
шаблон
Регулярная проверка
Добавить новый элемент управления
тел.
электронная почта
URL
число
мин
Макс
шаг
диапазон
мин
Макс
шаг
цвет
поиск
дата
месяц
неделя
время
datatime-локальный
общие теги HTML
Текстовый класс
заголовок
ч1
Обычно используется для размещения логотипов
ч2
Обычно используется для размещения заголовков столбцов.
h3
h4
h5
h6
параграф
п
Класс модификации
Смелый
б
сильный
Сильная семантика
наклон
я
Эм
Сильная семантика
Подчеркнуть
ты
входы
Сильная семантика
зачеркивание
с
дель
Сильная семантика
верхний индекс и нижний индекс
Как дела
надстрочный индекс
суб
нижний индекс
Класс таблицы
Этикетка
стол
тр
ТД
й
Заголовок столбца
подпись
заголовок таблицы
группировка строк
голова
тело
фут
группировка столбцов
коллегия
Атрибуты
правила
Разделительная линия группы
ценить
все
столбцы
ряды
никто
группы
ширина
высота
граница
фоновый цвет
выровнять
горизонтальное выравнивание
ценить
левый
верно
центр
значимый
вертикальное выравнивание
ценить
вершина
середина
нижний
базовый уровень
Colspan
размах строк
расстояние между ячейками
заполнение ячейки
Класс формы
поля формы
форма
метод
Способ отправки
ценить
получать
не безопасно
Общий доступ
Обработка данных размером менее 2 КБ
Зависит от длины адресной строки
эффективный
Процесс получения данных
почта
Процесс передачи данных
Нет ограничений по размеру
относительно безопасный
низкая эффективность
Недоступно для совместного использования
действие
целевой адрес
ценить
(пропущенный адрес)
имя
цель
Открытый метод
ценить
_пустой
открыть в новом окне
_себя
Текущее окно открыто
элемент управления формой (тип)
текст
текст
пароль
пароль
Единый выбор
радио
Каждая группа должна иметь одинаковое значение атрибута имени.
Большой выбор
флажок
падать
выберите>опция
текстовое поле
текстовая область
кнопка
изображение
кнопка
представлять на рассмотрение
перезагрузить
файл
Связанные свойства
имя
имя
ценить
ценить
несколько
Большой выбор
проверено
Проверено по умолчанию
выбрано
Раскрывающееся меню отмечено по умолчанию
только для чтения
только чтение
неполноценный
Запрещать
Список классов
упорядоченный
ол>ли
Атрибуты
тип
ценить
1
а
А
я
я
начинать
беспорядок
ул>ли
Атрибуты
тип
ценить
круг
диск
квадрат
никто
настроить
дл>дт дд
зависит от пути
картина
изображение
Атрибуты
скр
заголовок
альтернативный вариант
ширина
высота
Гиперссылка
а
Атрибуты
href
заголовок
цель
путь
относительно
Тот же уровень
./
Пишите напрямую
Верхний уровень
../
следующий уровень
папка
документ
абсолютный
Начиная с буквы диска
Д:\......
используется с веб-страниц
https://img….
разница
относительно
Есть ссылка
Невозможно перечеркнуть буквы дисков
абсолютный
нет ссылки
Локальные не могут охватывать компьютеры (если пути на компьютерах не совпадают).
другой
бр
разрыв линии силы
час
горизонтальная линия
div
охватывать
сущность персонажа
>
<
©
®
грамматика
двойная этикетка
<имя тега атрибут="значение атрибута"></имя тега>
одна этикетка
<имя тега атрибут="значение атрибута" />
метка, знак, элемент
базовая структура HTML
Заголовок декларации документа
Сообщите браузеру, что мой тип документа — html.
Кодировка символов
набор символов="utf-8"
Заголовок страницы
заголовок
HTML-концепция
Язык гипертекстовой разметки
Язык гипертекстовой разметки