Основы CSS - Основы CSS (Часть 1)

Оглавление

Синтаксис CSS

Инструменты разработки

Блочные элементы и встроенные элементы

Селектор

селектор элементов

селектор идентификатора

селектор класса

Группировка селекторов (объединительные селекторы)

Селектор пересечения (комбинированный селектор)

селектор подстановочных знаков

взаимосвязь между элементами

селектор элементов-потомков

селектор дочерних элементов


Синтаксис 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{цвет фона:красный;}

селектор подстановочных знаков

Выделить все элементы на странице

грамматика:*{ }

Пример: *{цвет:желтый;}

взаимосвязь между элементами

Родительский элемент: относится к элементу, который непосредственно содержит дочерние элементы.

Дочерний элемент: относится к элементу, непосредственно содержащемуся в родительском элементе.

Элементы-предки: относится к элементам, которые прямо или косвенно содержат элементы-потомки. Таким образом, родительский элемент также является элементом-предком

Элементы-потомки: Относится к элементам, которые прямо или косвенно содержатся в элементах-предках. Таким образом, дочерние элементы также являются дочерними элементами.

Родственные элементы: относятся к элементам, имеющим один и тот же родительский элемент, которые называются родственными элементами.

селектор элементов-потомков

Выберите элементы-потомки указанного элемента

Синтаксис: элемент-предок элемент-потомок {}

Примечание. Отличием от селектора пересечения является пространство между элементом-предком и элементом-потомком.

селектор дочерних элементов

Выберите указанный дочерний элемент указанного родительского элемента

Синтаксис: родительский элемент > дочерний элемент {}

Примечание: разные браузеры поддерживают разные

Guess you like

Origin blog.csdn.net/ybb_ymm/article/details/130187795
css