Вступ до 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 має велику бібліотеку, інтерактивну, розширювану і містить безліч вбудованих методів для обчислення загальних операцій. Нижче наведені команди CSats3 Cheatsheet, які виконують різні операції командного рядка:
|
КОМАНДА |
ОПИС |
| : фокус | Щоб зосередити увагу на елементі |
| : активний | Для відображення та вибору активного елемента |
| : увімкнено | Відображення включеного елемента |
| : перевірено | Для відображення перевіреного елемента |
| : lang | Щоб дозволити розробнику вказати мову для конкретного елемента |
| : вибір | Для відображення виділеного та вибраного елемента |
| : корінь | Для відображення кореневого елемента в документі |
| : первістка | Відображення першого елемента брати |
| : остання дитина | Для відображення останнього елемента брати |
| :тільки дитина | Відображення єдиного дочірнього елемента |
| : перший тип | Відображення першого елемента рідного брата певного типу |
| : останній тип | Відображення останнього елемента рідного брата певного типу |
| : тільки-типу | Відображення єдиного елемента з певним братом певного типу |
| : порожній | Відображення елемента, у якого немає дітей |
| :: перша буква | Щоб додати певний стиль до першої літери тексту |
| ::перша лінія | Щоб додати певний стиль до першого рядка тексту |
| :: після | Щоб вставити деякий вміст після текстового елемента |
| :: раніше | Щоб вставити деякий вміст перед текстовим елементом |
Оператори: - Різні типи операторів у CSS3 - це оператори порівняння (реляційні), оператори призначення, оператори логіки та оператори ідентичності.
Вимірювальні шкали: Шпалери вимірювальних шкал CSS3 вимірюють наступним чином
|
СКАЛА / ПАРАМЕТР |
ОПИС |
| ем | Розмір шрифту поточного елемента |
| колишній | Висота шрифту елемента |
| px | Перегляд пікселя пристрою |
| рем | Розмір шрифту кореневого елемента |
| вх | Висота Viewport |
| vw | Ширина огляду |
| % | Процент |
| шт | Піка |
| пт | Точка |
Код кольору: Назва кольору = червоний, синій, зелений і темно-зелений. Знайдіть нижче коди для тих же
|
КОД |
ОПИС / ЗНАЧЕННЯ |
| rgb (x, y, z) | Для червоного = rgb (255, 0, 0) |
| rgb (x%, y%, z%) | Для червоного = rgb (100%, 0, 0) |
| #rrggbb | Для червоного = # ff000 |
| в’ялість | Вибраний користувачем колір, щоб налаштувати інтерфаз користувача |
| rgba (x, y, z, alpha) | Для червоного = rgb (255, 0, 0) |
Властивості користувальницької інтерфази : CSS3 Інтерфазні властивості користувацького аркуша шпаргалки виглядають наступним чином.
|
ЦІННОСТІ ВЛАСНОСТІ |
ОПИС |
| значок | Надати піктограму на площі |
| змінити розмір | Для зміни розміру елементів області |
| розмір коробки | Для фіксації зазначеної області елемента |
| зовнішній вигляд | Для реалізації елементів як елементів інтерфейсу |
| наві-вниз | Для переміщення елементів вниз відповідно до клавіші зі стрілкою вниз клавіатурою |
| наві-ліворуч | Для переміщення лівих елементів відповідно до клавіші зі стрілкою вліво на клавіатурі |
| навігація | Для переміщення елементів вгору відповідно до клавіші зі стрілкою вліво на клавіатурі |
| нав-право | Для переміщення елементів праворуч відповідно до кнопки зі стрілкою праворуч на клавіатурі |
| контур-зміщення | Намалювати контур обраної області тексту |
Типи селекторів : Чит-лист CSS3-вибір селекторів є наступним.
|
ТИП ІМ’Я |
ОПИС / ЗНАЧЕННЯ |
| Універсальний | Для відображення будь-якого елемента |
| Тип | Відображення будь-якого елемента конкретного типу |
| Клас | Відображення декількох елементів різних типів |
| Id | Відображення та ідентифікація одного конкретного типу елементів, не впливаючи на інших |
| Дитина | Відображення елемента, який безпосередньо потрапляє під падіння під інший елемент |
| Групування | Для ідентифікації декількох елементів різних типів |
| Суміжний брат | Отримати всі елементи, які мають один і той же батьків і елементи, що знаходяться в безпосередній послідовності |
| Генеральний брат | Отримати всі елементи, які мають однакові батьківські елементи та елементи, які не обов'язково перебувають у безпосередній послідовності |
Безкоштовні поради та підказки щодо використання шпаргалок CSS3 команд:
- Режим суміші CSS3 можна використовувати для уніфікації вигляду зазначеного вмісту, а також дозволяє користувачам встановлювати різні версії кольорів зображення. У CSS3 Cheat Sheet є близько 15 значень режиму змішування. Це також додає додаткову перевагу з точки зору інтерфазного представлення користувача.
- Відсікання - ще одна чудова особливість CSS. Використовуючи функцію відсікання, користувач може визначити видимість області зображення відповідно до вимоги. Отже, якщо будь-яка частина зображення потрапляє за межі потрібної області, тоді може бути реалізовано відсікання, щоб приховати додаткову область зображення.
- У випадку CSS можна встановити властивості форми всередині та зовні, щоб обернути вміст навколо налаштованого шляху CSS, і його можна визначити та розподілити відповідно до вимог кінцевого користувача. Це, в основному, дозволяє користувачеві проектувати інтерфази відповідно до визначених специфікацій.
- Використання анімації SVG (масштабована векторна графіка) - ще одна перевага для CSS3. Використовуючи SVG з анімацією CSS3, інтерфаза стане більш інтерактивною, і SVG також має власний API DOM.
- Функція карти буде застосована до всіх елементів списку введення.
- Функція зменшення використовується для застосування деяких обчислень до списку та повертає значення
- Ефекти наближення можна реалізувати за допомогою чіт-листа CSS3
- Функція gooey може бути реалізована за допомогою фільтрів CSS3 та SVG, що сприяє новому репрезентативному підходу з точки зору інтерфази користувача
- З точки зору веб-дизайну, паралакс-ефекти можуть бути створені за допомогою CSS3.
- Інтерактивна 3d структура та інтерфаза користувача можуть бути створені за допомогою CSS3
- Використовуючи різні комбінації селекторів, піктограму формату файлу поруч із посиланням для завантаження можна створити за допомогою CSS3.
Висновок
У цій статті CSS3 з шпаргалки ми побачили, що CSS3 простий у використанні, а його синтаксис легше запам’ятати. CSS3 можна використовувати в представленні технологій веб-розробки, використовуючи різні підходи та технології таблиць стилів, які підтримують CSS3. Виходячи з типу потреб у проекті, часу роботи та всіх інших аспектів, що обговорюються, для досягнення бажаної мети слід використовувати CSS3.
Рекомендовані статті
Це керівництво по шпаргалці CSS3, тут ми обговорили зміст та команду, а також безкоштовні поради та підказки шпаргалки CSS3. Ви також можете переглянути наступну статтю, щоб дізнатися більше -
- Шпаргалка CSS
- Шпаргалка HTML
- Дивовижна шпаргалка для UNIX
- Чит-лист JavaScript: Особливості