Оглавление
Блочные элементы и встроенные элементы
Группировка селекторов (объединительные селекторы)
Селектор пересечения (комбинированный селектор)
селектор подстановочных знаков
Синтаксис CSS
комментарий css: функция похожа на комментарий HTML, за исключением того, что он должен быть записан в теге стиля или в файле css.
синтаксис css:
блок объявления селектора
Селектор: указанный элемент на странице можно выбрать с помощью селектора, а стиль в блоке объявления применяется к элементу, соответствующему селектору. (элементы — это теги, теги — это элементы)
Блок объявлений: Блок объявлений следует сразу за селектором и заключен в пару фигурных скобок. Блок операторов фактически представляет собой набор пар имя-значение, и этот набор пар имя-значение называется оператором. Несколько объявлений могут быть записаны в блок объявлений, и несколько объявлений разделены точкой с запятой;
Используйте двоеточие между объявленным именем стиля и значением стиля: для подключения
Инструменты разработки
Инструменты разработки: hbuilder
Причина, по которой я выбираю его, заключается в том, что он бесплатный, разработан китайцами и полностью поддерживает китайский режим.
Блочные элементы и встроенные элементы
<дел>
блочный элемент:
По сути, дива — это блочный элемент, а так называемый блочный элемент — это элемент, занимающий исключительно одну строку.
Тег div не имеет никакого значения, это чисто блочный элемент, и он не будет устанавливать какие-либо стили по умолчанию для элементов внутри него.
Элемент div в основном используется для разметки страницы.
Обычно используемые блочные элементы: p/h1/h2/h3 и т. д.
Встроенные элементы:
span — это встроенный элемент (inline element). Так называемый встроенный элемент относится к элементу, который занимает только собственный размер и не занимает всю строку. Когда строка не помещается, она автоматически переносится
Часто используемые встроенные элементы: a/img/iframe/span.
span не имеет значения, span специально используется для выбора текста, а затем для установки стилей для текста
Блочные элементы в основном используются для макета страницы. Встроенные элементы в основном используются для установки стиля для выделенного текста. Как правило, только блочные элементы используются для содержания встроенных элементов, а встроенные элементы не используются для содержания блочных элементов.
Элемент a может содержать любой элемент, кроме самого себя
Элемент p не может содержать никаких других блочных элементов.
Селектор
селектор элементов
Все указанные элементы можно выбрать с помощью селектора элементов.
Синтаксис: Имя тега: { }
Пример: p{ цвет:красный;
h1 {цвет: красный; }
селектор идентификатора
Выберите единственный элемент через атрибут id элемента
Синтаксис: значение атрибута #id {}
Пример: #idp{размер шрифта:20px;}
селектор класса
Выберите элемент по его значению атрибута класса
Атрибут класса аналогичен атрибуту id, за исключением того, что атрибут класса может повторяться. Элементы с одинаковым значением атрибута класса называются группой элементов. Для элемента в одно и то же время можно установить несколько значений атрибута класса. время и пробелы используются между несколькими значениями, разделенными
Синтаксис: .класс{}
Группировка селекторов (объединительные селекторы)
При выборе группы атмосферы элементы, соответствующие нескольким селекторам, могут быть выбраны одновременно.
Синтаксис: селектор 1, селектор 2, селектор N { }
Пример:#p1,.p2,h1{ background-color:red;}
Селектор пересечения (комбинированный селектор)
Элементы, удовлетворяющие нескольким селекторам, могут быть выбраны одновременно. Не рекомендуется использовать этот селектор пересечения для селекторов id.
Синтаксис: селектор 1 селектор 2 селектор N { }
例:span.p3{цвет фона:красный;}
селектор подстановочных знаков
Выделить все элементы на странице
грамматика:*{ }
Пример: *{цвет:желтый;}
взаимосвязь между элементами
Родительский элемент: относится к элементу, который непосредственно содержит дочерние элементы.
Дочерний элемент: относится к элементу, непосредственно содержащемуся в родительском элементе.
Элементы-предки: относится к элементам, которые прямо или косвенно содержат элементы-потомки. Таким образом, родительский элемент также является элементом-предком
Элементы-потомки: Относится к элементам, которые прямо или косвенно содержатся в элементах-предках. Таким образом, дочерние элементы также являются дочерними элементами.
Родственные элементы: относятся к элементам, имеющим один и тот же родительский элемент, которые называются родственными элементами.
селектор элементов-потомков
Выберите элементы-потомки указанного элемента
Синтаксис: элемент-предок элемент-потомок {}
Примечание. Отличием от селектора пересечения является пространство между элементом-предком и элементом-потомком.
селектор дочерних элементов
Выберите указанный дочерний элемент указанного родительского элемента
Синтаксис: родительский элемент > дочерний элемент {}
Примечание: разные браузеры поддерживают разные