CSS: это аббревиатура Cascading Style Sheet, переводится как [Каскадная таблица стилей], которая представляет собой набор правил форматирования. Это язык разметки, используемый для (расширенного) управления стилем веб-страниц и позволяющий отделить информацию о стиле от веб-контента.
Состав CSS: Определение CSS состоит из трех частей: селектор (Selector), свойства (properties) и значение свойства (value). Синтаксис: селектор{свойство:значение} (селектор{свойство:значение свойства})
Что следует отметить:
1. Блок объявления CSS состоит из: селектора + "{" + одного или нескольких атрибутов CSS + "}".
2. CSS не чувствителен к регистру, в синтаксисе CSS рекомендуется использовать строчные буквы.
1. CSS-селекторы
Это имя стиля CSS. Когда стиль CSS отображается в документе HTML, используется CSS. Как его использовать? В это время селектор CSS (имя CSS) используется для указания того, что этот HTML-тег использует этот стиль CSS.
2. Синтаксис селектора
Селектор CSS определяет стиль.
имя селектора {объявление;}
например:
p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}P, dreamdublue и dreamdured — все это селекторы.
3. Правила именования селекторов
Селекторы CSS могут использовать прописные и строчные английские буквы, цифры, дефисы, подчеркивания, двоеточия и точки.
(1) Английские буквы прописные и строчные AZ az
(2) Числа 0–9
(3) Дефис -
(4) Подчеркнуть_
(5) Двоеточие:
(6) Точка.
Примечание. Селекторы CSS могут начинаться только с букв.
4. Классификация селекторов
Селекторы CSS можно разделить на множество категорий, таких как: селектор типа, селектор идентификатора, селектор класса, универсальный селектор, селектор группы, селектор включения, селектор конкретного элемента, селектор подобъекта, селектор атрибута, связанный селектор. Селекторы соседей и т. д. будут представлены и проанализированы один за другим ниже.
1. Селектор типа. Селектор типа — это сам элемент веб-страницы, а имя элемента используется непосредственно при определении.
Body{/*Определить атрибуты страницы*/}Div{Width:774px;/*Определить ширину всех элементов div 774 пикселя*/}2. Селектор идентификаторов: он уникален. Значения идентификаторов разных элементов не могут повторяться. Селектор идентификаторов определяет разные стили для конкретных объектов каждого элемента, что облегчает пользователям более точное управление страницей. При использовании селектора id необходимо сначала определить атрибут id для каждого элемента.
<divid="top"></div>При использовании селектора идентификаторов необходимо использовать # для идентификации: #top{Width:774px;/*Определите, чтобы все элементы div имели ширину 774 пикселя*/}3. Селектор классов: одно и то же имя класса может быть определено для разных типов элементов в документе. Класс может объединять элементы одного стиля в одну категорию. При использовании селектора классов необходимо сначала определить атрибут класса для каждого элемента. :
<divclass="red"></div><spanclass="red"></span><pclass="red"></p>При использовании селектора классов для идентификации необходимо использовать английский язык (точка). : .красный{Цвет:красный;}4. Универсальный селектор. Это специальный селектор, обозначенный *. Этот селектор используется, но его легко игнорировать.
*{font-size:12pt;/*Определите размер всех шрифтов в документе равным 12pt*/}5. Селектор группы. Селектор группы — это не тип селектора, а метод селектора. Когда несколько объектов определяют один и тот же стиль, мы можем сгруппировать их в группу. Это может упростить чтение и запись кода, например:
.class1{размер шрифта:13 пикселей;цвет:красный;текст-декроатация:подчеркивание;}.class2{размер шрифта:13 пикселей;цвет:синий;текст-декроирование:подчеркивание;}Можно сгруппировать в:
.class1,class2{размер шрифта:13 пикселей;декроирование текста:подчеркивание;}.class1{цвет:красный;}.class2{цвет:синий;}Существует два принципа использования группировки: 1. Принцип аспекта 2. Принцип близости (если несколько элементов расположены рядом, можно рассмотреть возможность использования группирующих селекторов внутри модуля);
6. Содержит селекторы. Самый полезный тип селекторов, который позволяет упростить код и обеспечить широкий диапазон управления стилем. например:
.div1h2{/*Определите стиль заголовка для всех h2 в слое div1 класса*/font-size:18px;}.div1p{/*Определите стиль заголовка для всех p в слое div1 класса*/font-size:12px ;}7. Селекторы, определяемые элементом. Иногда нам нужно контролировать стиль определенного элемента в определенном диапазоне. В этом случае мы можем использовать селекторы класса или идентификатора в комбинации. например:
span.red{/*Определите цвет элемента с классом red в элементе span как red*/color:red;}div#top{/*Определите ширину элемента с id как top в элементе div как 100 %*/width:100% ;}например:<div><h2><h2><p></p><span></span></div>Очевидно, что в приведенном выше коде невозможно использовать селектор новостей. Не рекомендуется использовать селектор типа h2. Тогда вы можете использовать этот элемент для указания селектора.
p.news{} h2.news{} span.news{}
8. Селекторы подобъектов. Как и селекторы элементов, они являются селекторами ограничений, то есть стили элементов, которые удовлетворяют условиям ограничения, определяются в определенном диапазоне элементов. Селектор, специфичный для элемента, использует атрибуты class и id в качестве ограничений, тогда как sub. -селекторы объектов Селектор использует идентификатор и подобъект в качестве ограничений.
#main>table{/*Определите стиль таблицы подобъектов в основном модуле с идентификатором main*/width:788px;font-size:12px;}#main>.title{/*Определите подобъект в основном модуле с основным идентификатором. Класс объекта — это стиль заголовка*/color:red;font-style:italic;}9. Селектор атрибутов. Селектор атрибутов предназначен для добавления скобок после элемента, в скобках перечисляются различные атрибуты или выражения. Существует 7 конкретных форм селекторов атрибутов:
(1) Сопоставление атрибутов существования. Управляйте стилем элемента, сопоставляя существующие атрибуты. Как правило, совпадающие атрибуты следует заключать в скобки, а в списке следует указывать только имена без присвоения значений:
h1[class]{color:red;/*Применяется к любому элементу h1 с атрибутом class независимо от значения class*/img[alt]{border:none;/*Применяется к любому элементу img с атрибутом alt независимо от alt Каково значение*/a[href][title]{font-weight:bold;/*функционирует как элемент с атрибутами href и title*/}(2) Точное соответствие атрибута: стиль будет применен только в том случае, если значение атрибута полностью соответствует указанному значению атрибута. Селекторы id и class фактически являются точным выбором атрибута.
a[href=www.163.com][title=NetEase]{font-size:12px;/*Адрес функции указывает на www.163.com, а заголовок — это элемент NetEase*/}(3) Пробелы сопоставляются индивидуально: определив список строк для атрибутов, вы можете управлять стилем элемента, если он соответствует любой из строк.
<spanclass=abc>Кто контролирует мой стиль</span> Для управления вы можете использовать следующие стили: [class^=a]{color:red;} или: [class^=b]{color:red;} или: [класс^=c]{цвет:красный;} или: интервал[класс^=c]{цвет:красный;}(4) Сопоставление дефисов: функция и использование аналогичны сопоставлению пробелов, но список строк при сопоставлении дефисов разделяется дефисами.
<span>Кто будет контролировать мои стили</span>
Этим можно управлять с помощью следующих стилей:
[класс|=a]{цвет:красный;} или: [класс|=a]{цвет:красный;} или: [класс|=b]{цвет:красный;} или: [класс|=c]{цвет :красный;} или: интервал[класс|=c]{цвет:красный;}(5) Селектор префикса: если начальный символ значения атрибута соответствует указанной строке, стиль можно применить к элементу. Сопоставление префиксов реализовано с помощью формы [^=]:
<div>Соответствие префиксов</div>
Вы можете использовать следующие элементы управления стилем
[класс^=мой]{цвет:красный;}(6) Сопоставление суффикса: в отличие от префикса, если конечный символ атрибута соответствует указанному символу, используйте элемент управления формой [$=].
<div>Соответствие суффиксов</div>
Вы можете использовать следующие элементы управления стилем
[класс$=Тест]{цвет:красный;}(7) Сопоставление подстроки: стиль применяется до тех пор, пока указанная строка существует в атрибуте, и управляется в форме [*=].
<div>Сопоставление подстроки</div>
Вы можете использовать следующие элементы управления стилем
[класс*=est]{цвет:красный;}10. Селектор соседей: относится к следующему элементу, соседнему с элементом.
div+p{font-size:24px;/*Применяется ко всем элементам p сразу после элемента div, определяя размер шрифта элемента p как 14 пикселей*/}например:<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>Чтобы управлять нижним элементом p отдельно, если вы не определили для него атрибут class и id, вы можете сделать это, используя соседние селекторы.
#sub_wrap+p{размер шрифта:14px;}