✅ CSS команды - Базовая, средняя и продвинутая команда

Введение в CSS команды

Введение в CSS команды

CSS означает Каскадные таблицы стилей. Он используется для описания представления документа, написанного на языке разметки, например HTML. Он выполняет работу по разделению презентации и контента, которая включает в себя различные макеты, цвета и шрифты. Разделение обеспечивает гибкость, а также управление различными характеристиками, которые позволяют нескольким веб-страницам совместно использовать форматирование путем указания соответствующего CSS. Спецификации CSS поддерживаются World Web Consortium. В дополнение к этому, он также предоставляет специальные правила, которые помогают в альтернативном форматировании, если доступ к контенту осуществляется с мобильного устройства.

Основные команды CSS

1. Синтаксис CSS: существует набор правил, которым необходимо следовать в команде CSS. Набор правил CSS состоит из селектора и блока объявления. Селектор используется для указания элемента HTML, который пользователь хотел бы стилизовать. Блок объявлений может содержать одно или несколько объявлений, которые могут быть разделены точками с запятой. Каждое объявление должно содержать имя свойства с его значением, разделенное двоеточиями.

2. Селектор идентификатора : селектор идентификатора может использовать идентификатор атрибута элемента HTML и помочь в выборе конкретного элемента. Он используется для выбора одного уникального элемента, и этот элемент должен быть уникальным для этой страницы. Для выбора элемента с определенным идентификатором используется «#», за которым следует идентификатор этого элемента.

3. Селектор класса: чтобы выбрать определенный атрибут класса, селектор класса используется для выбора элементов этого класса. Для использования элементов в определенном классе используется символ точки (.). За ним следует название класса. При этом, если пользователь хочет, чтобы только определенные элементы использовались, тогда только те могут быть определены классом.

4. Группировка селекторов: бывают случаи, когда элементы имеют одинаковые определения стиля. Лучше всего объединить их вместе и минимизировать код. Для группы пользователь селектора может использовать запятую и отделять каждый селектор

5. Комментарии: Эти CSS-команды рекомендуется использовать при написании кода. Они дают ясность относительно того, что делает код, и помогают вам или кому-то еще, кто новичок в коде, работать над ним соответственно. Комментарии игнорируются браузерами. Комментарий CSS начинается и заканчивается на / * * /.

6. Display: Block - для многих элементов HTML установлен этот режим отображения. По умолчанию элементы уровня блока занимают столько же места, и их нельзя разместить на одной строке с любым другим режимом отображения. Можно получить возможность изменять высоту и ширину элемента по вашему желанию.

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

8. Цвет фона: свойство background-color определяет цвет, который должен быть установлен для фона элемента. Цвет можно легко определить, задав имя цвета, добавив значение Hex или установив значение RGB.

9. Фоновое изображение: Фоновое изображение может быть установлено на любое конкретное изображение по вашему выбору. Как только изображение установлено, оно повторяется и охватывает весь элемент.

10. CSS Margins: CSS Command имеет различные свойства полей, которые могут помочь в создании пространства вокруг различных элементов, а также определяет эти внешние границы. CSS может иметь такие свойства, как margin-top, margin-right, margin-bottom и margin-left.

Промежуточные команды CSS

1. Селекторы класса и идентификатора. В дополнение к тегу HTML пользователь может определить собственные селекторы, которые могут быть в форме класса или идентификатора. Основное их использование заключается в том, что вы можете иметь один и тот же элемент HTML и представлять его по-разному в зависимости от идентификатора или класса, который необходим.

2. Псевдокласс: эти классы используются для указания конкретного состояния или отношения к данному селектору. Эти классы также могут принимать форму селектора: pseudo_class (property: value; ). Этот класс определяется простой передачей двоеточия между селектором и псевдоклассом.

3. Форматирование текста: добавляемые тексты можно настраивать и форматировать, используя свойства форматирования. Цвет можно изменить с помощью ключевого слова «цвет». Так может выравнивание текста. С помощью текстовых украшений можно устанавливать и удалять украшения. Преобразования могут быть сделаны относительно случаев.

4. Шрифты CSS. Шрифты в CSS имеют разные семейства, такие как родовое семейство и семейство шрифтов. Семейство шрифтов - это семейство текстов. Общий, имеющий группу семейств, имеющих похожий вид и шрифт, имеющий определенный шрифт.

5. Значки. Используя библиотеку значков и добавляя имя заданного значка, значки классов можно легко использовать в CSS.

6. Таблицы: CSS также может отображать таблицы и помогать в настройке с границами, их шириной и высотой. Используя ключевые слова, такие как «граница», «ширина» и высота, пользователь может легко иметь таблицы на веб-странице.

7. Позиционирование: это свойство указывает тип метода позиционирования, который можно использовать для любого элемента. Эта позиция может быть статической, относительной, фиксированной, абсолютной или липкой.

8. Переполнение: это свойство помогает управлять содержимым, которое слишком велико для области.

9. Float: свойство float позволяет элементу знать, как он должен плавать. Он указывает, какие элементы могут плавать рядом с очищенными элементами.

10. Непрозрачность: это свойство определяет непрозрачность или прозрачность любого элемента.

Расширенные команды CSS

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

2. Граница изображений : Вы можете установить изображение в качестве границы вокруг любого элемента. Это возможно, используя свойство border-image. Он берет изображение и разрезает его на девять частей, а затем размещает углы по углам, а средние участки повторяются или растягиваются.

Советы и рекомендации по использованию команд CSS:

Используйте reset.css и сбросьте все основные стили.
Используйте сокращенный CSS, чтобы иметь более короткий способ написания кодов Command CSS.
Используйте инструменты отладки CSS, чтобы настраивать, понимать и отлаживать стили команд CSS.

Вывод

Команда CSS помогает вам отделить информационное содержимое документа и помогает отображать его. Это помогает избежать дублирования, легко поддерживать код и использовать один и тот же контент с разными стилями.

CSS команды - Базовая, средняя и продвинутая команда