Эта статья поднимает интересную и важную тему, известную как Селекторы и сопровождает их вспомогательной практической демонстрацией. Следующие указатели будут рассмотрены в этой статье,
- Стилизация HTML-элементов
- Селекторы CSS
- Селектор идентификатора CSS
- Селектор классов CSS
- Универсальный селектор CSS
- Селекторы групп CSS
Итак, давайте тогда приступим,
Стилизация HTML-элементов
Прежде чем перейти к селекторам CSS, давайте разберемся, что такое CSS. Если HTML следует рассматривать как скелет, то CSS (каскадные таблицы стилей) подобны мускулам и коже. Мозг - это JavaScript. Итак, для веб-страницы стили CSS - это, по сути, макет и дизайн. Сразу от размещения изображений и текста до размера шрифта и цвета фона CSS контролирует внешний вид HTML-элементов в браузере.
Вы сможете лучше понять CSS, если хорошо разбираетесь в том, что такое селекторы CSS. Эти селекторы позволяют настраивать таргетинг на определенные элементы HTML, чтобы вы могли применить к ним правильный стиль.
Давайте разберемся, как можно выбирать элементы HTML,
фибоначчи в c ++
Как выбрать элементы?
Скажем, вы хотите, чтобы стиль определенного заголовка отличался от остального содержимого веб-страницы. Теперь, используя селекторы CSS, вы можете настроить таргетинг на этот HTML-элемент, чтобы изменить его стиль. Селекторы CSS помогают определить элементы, к которым применяется определенный набор правил CSS. Существуют различные типы селекторов CSS, которые позволяют точно выбирать элементы, которые вы хотите стилизовать. Вы можете придать всей веб-странице общий стиль, а затем поработать над стилями других элементов страницы.
Селекторы являются частью правила CSS, и эти селекторы появляются непосредственно перед объявлением блоков CSS. Для лучшего понимания вы можете обратиться к изображению ниже.
Продолжаем статью о селекторах CSS
Селекторы CSS
Этот селектор позволяет вам выбирать HTML-элемент по его имени.
Рассмотрим код ниже:
p {text-align: center color: magenta}Этот стиль будет применяться к каждому абзацу.
Пункт 1
Пункт 2
Этот код даст вам следующий результат:
Этот стиль будет применяться к каждому абзацу
Пункт 1
Пункт 2
В приведенном выше коде элементы HTML выровнены по центру и имеют цвет «пурпурный».
Продолжаем статью о селекторах CSS
Селектор идентификатора CSS
Выбрав атрибут id элемента HTML, вы можете выбрать этот конкретный элемент. Поскольку идентификатор уникален для страницы, вы можете выбрать правильный элемент с помощью атрибута id.
Вы можете выбрать элемент HTML с помощью символа «#», за которым следует идентификатор этого элемента. Например, «#firstname» выбирает элемент, идентификатор которого равен «firstname».
Рассмотрим следующий код:
# para1 {text-align: center color: оранжевый}Привет мир
Этот абзац не будет затронут.
Вывод для приведенного выше кода:
Привет мир
Этот абзац не будет затронут.
Как вы можете видеть в приведенном выше выводе, включив id = ”para1 ″, мы смогли изменить цвет этого элемента на оранжевый. Другой элемент, у которого этого нет, остается неизменным.
Продолжаем статью о селекторах CSS
Селектор классов CSS
Используя селектор классов, вы можете выбирать элементы HTML, которые имеют определенный атрибут класса. Вы можете определить селектор, используя точку (символ точки), за которой следует имя класса. Например, .intro выбирает элементы, в которых класс является «интро». Следует иметь в виду, что имя класса нельзя начинать с числа.
Рассмотрим следующий код:
.center {выравнивание текста: цвет центра: розовый}Этот заголовок выделен розовым цветом и выровнен по центру.
Этот абзац розовый и выровнен по центру.
Вывод приведенного выше кода:
Этот заголовок выделен розовым цветом и выровнен по центру.
Этот абзац розовый и выровнен по центру.
Вы можете использовать селекторы классов CSS для определенного элемента. Если вы хотите, чтобы был стилизован только один конкретный элемент, вы можете использовать имя элемента вместе с селектором класса.
Например, рассмотрим следующий код:
p.center {выравнивание текста: цвет центра: розовый}На этот заголовок не влияет
Этот абзац розовый и выровнен по центру.
Вывод приведенного выше кода:
На этот заголовок не влияет
Этот абзац розовый и выровнен по центру.
Как видно из выходных данных, стиль не влияет на заголовок h2. Поскольку мы указали «p.center», стиль влияет только на абзац.
Продолжая эту статью о CSS-селекторах,
Универсальный селектор CSS
Этот тип селектора можно рассматривать как подстановочный знак, который выбирает все элементы на странице. Он выбирает все элементы на странице и обозначается знаком «*».
Например, рассмотрим приведенный ниже код:
* {color: darkgreen font-size: 30px}Это тест (мелкий шрифт)
Это абзац.
Вывод для приведенного выше кода:
Привет мир
Это тест (мелкий шрифт)
Это абзац.
Как видно из выходных данных, все элементы, определенные с помощью селектора групп, имеют одинаковое определение стиля - они выровнены по центру, а цвет шрифта - голубой.
На этом мы подошли к концу статьи.
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение позволит вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
число фибоначчи c ++
Есть вопрос к нам? Пожалуйста, укажите это в комментариях к статье, и мы свяжемся с вами.