✅ Команди CSS - Основні, проміжні та розширені команди

Вступ до команд CSS

Вступ до команд CSS

CSS розшифровується як каскадні таблиці стилів. Він використовується для опису подання документа, який написаний мовою розмітки, як HTML. Це робить роботу розділення презентації та контенту, що включає різні компонування, кольори та шрифти. Розділення забезпечує гнучкість, а також контроль за різними характеристиками, які дозволяють багатьом веб-сторінкам обмінюватися форматуванням, вказуючи відповідний CSS. Специфікації CSS підтримує Всесвітній веб-консорціум. На додаток до цього, він також надає конкретні правила, які допомагають в альтернативному форматуванні, якщо до контенту звертається з мобільного пристрою.

Основні команди CSS

1. Синтаксис CSS: Існує набір правил, яких необхідно дотримуватися в команді CSS. Набір правил CSS складається з селектора та блоку декларацій. Селектор використовується для вказівки на елемент HTML, який користувач хотів би створити. Блок декларації може містити одну або більше декларацій, які можна розділити крапкою з комою. Кожна декларація повинна містити назву властивості зі своїм значенням та розділяти їх двокрапками.

2. Селектор ідентифікаторів : Селектор ідентифікатора може використовувати ідентифікатор атрибута елемента HTML і допомогти у виборі конкретного елемента. Він використовується для вибору одного унікального елемента, і цей елемент повинен бути унікальним для цієї сторінки. Для вибору елемента з певним ідентифікатором використовується "#", за яким слідує ідентифікатор цього елемента.

3. Селектор класів: для вибору конкретного атрибута класу використовується селектор класів для вибору елементів із цього класу. Для використання елементів у певному класі використовується символ (.). За ним слідує назва класу. При цьому, якщо користувач хоче, щоб використовувались лише конкретні елементи, то класом можуть бути визначені лише ті,

4. Групування селекторів: бувають випадки, коли елементи мають однакові стильові визначення. Згрупувати їх і звести до мінімуму код - це кращий варіант. Для групи користувач селектора може скористатися комою та розділити кожен селектор

5. Коментарі: Ці команди CSS доцільно використовувати під час написання коду. Вони надають зрозумілість того, що робить код, і допомагають вам або іншому, хто не є новим у коді, працювати над ним відповідно. Користувачі ігнорують коментарі. Коментар CSS починається і закінчується / * * /.

6. Дисплей: Блокування - Для цього режиму відображення встановлено багато елементів HTML. За замовчуванням елементи рівня блоку займають стільки місця, і вони не можуть бути розміщені на одній лінії з будь-яким іншим режимом відображення. Можна отримати можливість змінювати висоту та ширину елемента за вашим бажанням.

7. Кольори в CSS: У цій команді CSS кольори можна вказати у формулі RGB. Кожен параметр визначає інтенсивність цих кольорів і визначає новий колір. Наприклад, для відображення чорного кольору всі параметри кольору повинні бути встановлені на RGB (0, 0, 0).

8. Колір тла: Властивість кольору тла визначає колір, який слід встановити для фону елемента. Колір можна легко визначити, вказавши ім’я кольору, додавши значення Hex або встановивши значення RGB

9. Фонове зображення: фонове зображення можна встановити на будь-яке конкретне зображення на ваш вибір. Після встановлення зображення воно повторюється і охоплює весь елемент.

10. Поле CSS: Команда CSS має різні властивості поля, які можуть допомогти у створенні простору навколо різних елементів, а також визначає ці зовнішні межі. CSS може мати такі властивості, як margin-top, margin-right, margin-bottom та margin-left.

Проміжні команди CSS

1. Вибір класів та ідентифікаторів: Крім тегу HTML, користувач може визначати власні селектори, які можуть бути у вигляді класу чи ідентифікатора. Основне їх використання полягає в тому, що ви можете мати один і той же HTML-елемент і представляти його по-різному, залежно від ідентифікатора або класу, який необхідний.

2. Псевдоклас: Ці класи використовуються для визначення конкретного стану або відношення до даного селектора. Ці класи також можуть мати форму селектора: pseudo_class (властивість: значення; ). Цей клас визначається просто даванням двокрапки між селектором та псевдокласом.

3. Форматування тексту: Додані тексти можна налаштувати та відформатувати, використовуючи властивості форматування. Колір можна змінити, використовуючи ключове слово 'color'. Так може бути вирівнювання тексту. Використовуючи текстові прикраси, прикраси можна встановлювати та вилучати. Перетворення можуть бути зроблені стосовно справ.

4. Шрифти CSS: Шрифти в CSS мають різні сім'ї, як родина та сімейство шрифтів. Сімейство шрифтів - це сім'я текстів. Узагальнена група, що має групу сімей, що мають схожий вигляд, а шрифт - певний.

5. Піктограми: Використовуючи бібліотеку іконок та додаючи ім'я зазначених піктограм класу значків, можна легко використовувати в CSS.

6. Таблиці: CSS також може відображати таблиці та допомагати в налаштуванні меж, їх ширини та висоти. Використовуючи такі ключові слова, як "межа", "ширина" та висота, користувач може легко мати таблиці на веб-сторінці.

7. Позиціонування: Ця властивість визначає тип методу позиціонування, який можна використовувати для будь-якого елемента. Ця позиція може бути статичною, відносною, нерухомою, абсолютною або липкою.

8. Переповнення: ця властивість допомагає контролювати вміст, який занадто великий, щоб вміститись у певну область.

9. Float: властивість float дає елементу знати, як він повинен плавати. Він визначає, які елементи можуть плавати поруч із очищеними елементами.

10. Непрозорість: ця властивість визначає непрозорість або прозорість будь-якого елемента.

Розширені команди CSS

1. Закруглені кути CSS: Використовуючи властивість 'border-radius', елементу можна надати закруглені кути. Ви також можете вказати певний кут із чотирьох кутів та внести зміни відповідно до вашого вибору.

2. Гранічні зображення : Ви можете встановити зображення як рамку навколо будь-якого елемента. Це можливо завдяки використанню властивості рамкового зображення. Він знімає зображення і розрізає його на дев'ять секцій, а потім розміщує куточки по кутах, а середні ділянки повторюються або розтягуються.

Поради та поради щодо використання команд CSS:

Скористайтеся reset.css та скиньте всі основні стилі.
Використовуйте скорочений CSS, щоб мати коротший спосіб написання командних CSS-кодів.
Використовуйте інструменти налагодження CSS для налаштування, розуміння та налагодження стилів команд CSS.

Висновок

CSS Command допомагає зберігати інформаційний вміст документа окремо і допомагає в його відображенні. Це допомагає уникнути дублювання, легко підтримувати код і використовувати один і той же вміст з різними стилями.

Команди CSS - Основні, проміжні та розширені команди