Введение в Cheatsheet CSS3
Каскадная таблица стилей (CSS) - это в основном язык таблиц стилей, который используется для реализации внешнего вида и форматирования документа, разработанного на языке разметки. Спецификация CSS в основном поддерживается Консорциумом World Wide Web (W3C). Основным принципом реализации CSS является демонстрация разделения презентации и контента, который включает в себя фронты, форматы макетов. CSS3 является последней версией или стандартом для CSS после CSS2. CSS3 - это в основном смесь спецификаций CSS2 и некоторых новых функций.
Найдите ниже несколько важных модулей Cheatsheet CSS3:
- Модель коробки
- Селекторы
- Текстовые эффекты
- 2D трансформации
- 3D трансформации
- Представление изображения
- Интерфейс пользователя
- Расположение нескольких столбцов
- Анимации
- Настройка контента и перераспределение
В этой статье Cheatsheet CSS3 мы обсудим, что такое CSS3 и различные команды CSS3.
Команды и контент в Cheatsheet CSS3
CSS3 имеет обширную библиотеку, интерактивную, расширяемую и содержит множество встроенных методов для вычисления общих операций. Ниже перечислены CSS3-команды Cheatsheet, которые выполняют различные операции командной строки:
|
КОМАНДА |
ОПИСАНИЕ |
| : фокус | Чтобы сосредоточиться на элементе |
| : активный | Для отображения и выбора активного элемента |
| : включено | Для отображения элемента, который включен |
| : проверено | Чтобы отобразить элемент, который отмечен |
| : lang | Чтобы позволить разработчику указать язык для определенного элемента |
| : выбор | Для отображения элемента, который выделен и выбран |
| root | Чтобы отобразить корневой элемент в документе |
| :Первый ребенок | Для отображения первого родственного элемента |
| :последний ребенок | Для отображения последнего элемента родного брата |
| :единственный ребенок | Для отображения единственного дочернего элемента |
| : Во-первых, из-типа | Для отображения первого родственного элемента определенного типа |
| : Последний из типа | Чтобы отобразить последний элемент одного типа определенного типа |
| : Только-оф-типа | Чтобы отобразить единственный родственный элемент определенного типа |
| : пусто | Для отображения элемента, который не имеет дочерних элементов |
| ::первое письмо | Чтобы добавить определенный стиль к первой букве текста |
| ::первая строка | Чтобы добавить определенный стиль в первую строку текста |
| :: после | Чтобы вставить некоторый контент после текстового элемента |
| :: перед | Чтобы вставить некоторый контент перед текстовым элементом |
Операторы: - Различные типы операторов в CSS3 - это операторы сравнения (реляционные), операторы присваивания, логические операторы и операторы идентификации.
Шкалы измерений: Шпаргалка CSS3 измеряет следующие шкалы
|
МАСШТАБ / ПАРАМЕТР |
ОПИСАНИЕ |
| Эм | Размер шрифта текущего элемента |
| бывший | Высота шрифта элемента |
| ПВ | Пиксель устройства просмотра |
| рем | Размер шрифта корневого элемента |
| В.Х. | Высота окна просмотра |
| оч.сл. | Ширина области просмотра |
| % | процент |
| ПК | цицеро |
| пт | точка |
Цветовой код: название цвета = красный, синий, зеленый и темно-зеленый. Найдите ниже коды для того же
|
КОД |
ОПИСАНИЕ / ЗНАЧЕНИЕ |
| RGB (х, у, г) | Для красного = RGB (255, 0, 0) |
| RGB (х%, у%, г%) | Для красного = RGB (100%, 0, 0) |
| #rrggbb | Для красного = # ff000 |
| flabor | Выбранный пользователем цвет для настройки пользовательского интерфейса |
| RGBA (х, у, г, альфа) | Для красного = RGB (255, 0, 0) |
Свойства пользовательского интерфейса : CSS3 Пользовательский интерфейс пользователя имеет следующие свойства.
|
ЦЕННОСТИ ИМУЩЕСТВА |
ОПИСАНИЕ |
| икона | Предоставить иконку на область |
| изменение размера | Чтобы изменить размер указанных элементов области |
| коробчатого проклейки | Исправить указанную область элемента |
| внешность | Для реализации элементов в качестве элементов пользовательского интерфейса |
| нав вниз | Для перемещения элементов вниз в соответствии с клавиатурой стрелка вниз |
| нав налево | Для перемещения элементов влево в соответствии с клавиатурой, нажмите левую кнопку со стрелкой. |
| нав вверх | Для перемещения вверх элементов в соответствии с клавиатурой влево кнопку со стрелкой |
| нав-право | Для перемещения элементов вправо в соответствии с клавишей вправо на клавиатуре |
| план смещения | Чтобы нарисовать контур выделенной области текста |
Типы селекторов : Шпаргалка Типы селекторов CSS3 следующие.
|
НАИМЕНОВАНИЕ ТИПА |
ОПИСАНИЕ / ЗНАЧЕНИЕ |
| универсальный | Для отображения любого элемента |
| Тип | Для отображения любого конкретного элемента типа |
| Учебный класс | Для отображения нескольких элементов разных типов |
| Я бы | Для отображения и идентификации одного конкретного типа элемента, не влияя на других |
| ребенок | Чтобы отобразить элемент, который непосредственно попадает под другой элемент |
| Группировка | Для идентификации нескольких элементов разных типов |
| Соседний Брат | Извлечь все элементы, которые имеют одного и того же родителя и элементы и находятся в непосредственной последовательности |
| Генерал Сиблинг | Извлечь все элементы, которые имеют одного и того же родителя и элементы и не обязательно находятся в непосредственной последовательности |
Бесплатные советы и рекомендации по использованию Шпаргалки CSS3 Команды: -
- Режим смешивания CSS3 может использоваться для унификации внешнего вида указанного содержимого, а также позволяет пользователям устанавливать различные версии цветов изображения. В Шпаргалке CSS3 присутствует около 15 значений режима наложения. Это также добавляет дополнительное преимущество с точки зрения пользовательского межфазного представления.
- Отсечение - еще одна замечательная особенность CSS. Используя функцию отсечения, пользователь может определить видимость области изображения в соответствии с требованием. Таким образом, если какая-либо часть изображения выходит за пределы желаемой области, то может быть реализовано отсечение, чтобы скрыть эту дополнительную область изображения.
- В случае CSS могут быть реализованы свойства shape-inside и shape-outside, чтобы обернуть содержимое вокруг настраиваемого пути CSS, и его можно определить и выделить в соответствии с требованиями конечного пользователя. Это в основном позволяет пользователю проектировать интерфазу согласно определенным техническим требованиям.
- Использование SVG (масштабируемой векторной графики) анимации является еще одним преимуществом CSS3. Используя SVG с анимацией CSS3, интерфейс станет более интерактивным, и у SVG также будет собственный DOM API.
- Функция карты будет применена ко всем элементам в списке ввода.
- Функция Reduce используется для применения некоторых вычислений к списку и возвращает значение
- Эффекты наведения могут быть реализованы с помощью CSS3 Cheat Sheet
- Gooey меню может быть реализовано с использованием фильтров CSS3 и SVG, и это помогает новому репрезентативному подходу с точки зрения пользовательского интерфейса
- С точки зрения веб-дизайна, эффекты параллакса могут быть получены с использованием CSS3.
- Интерактивная 3d структура и пользовательский интерфейс могут быть созданы с использованием CSS3
- Используя различные селекторные комбинации, значок формата файла рядом со ссылкой на скачивание может быть создан с использованием CSS3.
Вывод
В этой статье о чит-листе CSS3 мы увидели, что CSS3 прост в использовании, а его синтаксис легче запомнить. CSS3 может использоваться для представления технологий веб-разработки с использованием различных подходов и технологий таблиц стилей, которые поддерживают CSS3. В зависимости от типа потребностей проекта, времени работы и всех других обсуждаемых аспектов, CSS3 должен использоваться для достижения желаемой цели.
Рекомендуемые статьи
Это было руководство к Шпаргалке CSS3, здесь мы обсудили содержание и команду, а также бесплатные советы и хитрости к шпаргалке CSS3, вы также можете посмотреть следующую статью, чтобы узнать больше -
- Шпаргалка CSS
- Шпаргалка HTML
- Удивительная шпаргалка для UNIX
- Шпаргалка JavaScript: Особенности