CSS — это компьютерный язык, используемый для выражения стилей файлов, таких как HTML (приложение стандартного обобщенного языка разметки) или XML (подмножество стандартного обобщенного языка разметки).
CSS может не только статически изменять веб-страницы, но также может взаимодействовать с различными языками сценариев для динамического форматирования различных элементов веб-страниц.
CSS может осуществлять точный контроль на уровне пикселей над расположением элементов на веб-страницах, поддерживает практически все размеры и стили шрифтов, а также имеет возможность редактировать объекты веб-страницы и стили моделей. Для более глубокого изучения воспользуйтесь поиском «Видеоруководство по CSS для китайского веб-сайта PHP» на Baidu и обучайтесь онлайн бесплатно.
1. Общие атрибуты
name: имя, может повторяться, может быть одинаковым; class: имя класса, может повторяться или может иметь несколько значений, например
; идентификатор, не может Повторение обычно используется в JavaScript, правила именования такие же, как и правила именования меток в других языках; title: заголовок, который можно добавить в тег, например 
;/;
2. Отношения тегов
Отношения потомков: отношения родитель-ребенок (включая отношения);
Братские отношения: однородные отношения;
3. CSS-каскадные таблицы стилей
Комментарии CSS: /Содержимое комментария записывается здесь для просмотра программистом и не будет отображаться на странице/;
Правила грамматики CSS: все символы должны вводиться с использованием английского метода ввода, в нижнем регистре, а атрибуты должны быть записаны в фигурных скобках. Каждый оператор атрибута должен заканчиваться точкой с запятой, а значение атрибута должно иметь формат пикселей (пиксели); : атрибут: значение атрибута;
4. Как представить CSS
Встроенное введение: вводный метод добавления стилей в теги. Формат:
Введение внешней ссылки: создайте файл xx.css вне веб-страницы и используйте в заголовке веб-страницы; код легко поддерживать. Код CSS полностью отделен от структуры HTML, что влияет на все веб-страницы, на которых представлены файлы CSS, на всем веб-сайте;
5. Основной синтаксис CSS:
Структурный формат: селектор {атрибут: значение атрибута; атрибут: значение атрибута;...}; Пример: p{background:red;color:gray;size:20px;};Селектор: инструмент для выбора элементов страницы;
Фигурные скобки: содержимое стиля записывается внутри фигурных скобок;
6. Селектор
Базовый селектор:
Универсальный селектор: используется для инициализации стиля веб-страницы по умолчанию, записанного в начале таблицы стилей; формат: *{padding:0;margin:0;}; селектор метки: добавить стиль к указанной метке: p; {color:green; }; Селектор класса: выберите стиль селектора класса; Формат: .class name {background: Pink;}; Примечание. Имя класса определяется в теге, например class="one"; стили контента нескольких блоков одинаковы, тогда Просто придайте им одинаковый стиль;
селектор идентификатора: уникальный идентификатор, не может повторяться; формат: #id name{backgound-image:url(1.jpg);} Примечание: имя идентификатора определяется в теге id="one"; , сколько раз Если стиль содержимого каждого блока один и тот же, идентификаторы нескольких блоков должны быть разными;;
Разница между id и классом: Обратите внимание на предыдущий пункт — ID должен уметь однозначно определять узел DOM. Если вы используете селектор идентификаторов на протяжении всей статьи, даже если два стиля узла DOM абсолютно одинаковы, вам придется написать стиль узла дважды. Если вы хотите сохранить его позже, вы должны сохранить код в обоих местах! ! ! Значительно увеличивает затраты на техническое обслуживание;
Селектор псевдоклассов: принцип Sequential LoVe HAte, перепрыгивать можно, но порядок изменить нельзя: статус ссылки (ссылка), статус посещения (посещенный), активный статус (наведение) и статус клика (активный);
Класс рисования точек: a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} стиль при получении фокуса a:focus{}; Примечание. К атрибутам можно добавлять текстовые атрибуты, цвета фона и изображения; a{} и a:link{} дают тот же эффект; класс списка: li:link{color:yellow;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};Примечание: к атрибутам можно добавить атрибуты текстовой серии, цвет фона и изображения;
Составной селектор:
Селектор группы (селектор объединения, множественный селектор): используется для добавления одного и того же стиля к нескольким элементам, например: .one, #one, a, span{color:red;font-size:14px;} означает первый класс, #one. , тег и тег span имеют общие атрибуты; селектор потомков: добавьте атрибуты к элементам подкласса, пример: .one a{text-decoration:none;} означает содержимое, измененное тегом a потомка первого класса. Нет подчеркивания; селектор дочернего элемента (указанный селектор): добавить атрибуты к указанному дочернему элементу, например: #one>p{color:red;} означает добавление содержимого, находящегося в теге p сына одного свойства селектора id;
Селектор соседнего элемента:
1. Два соседних одноуровневых селектора добавляют атрибуты. Они не добавляют атрибуты себе, а только добавляют атрибуты следующему одноуровневому элементу. .one+p{background:red;} 2.one~p{background:green} означает "Это". добавить атрибуты ко всем элементам тега p после одного селектора, при условии, что у них есть родительский класс;
Селектор атрибутов:
1. Добавляем атрибуты к элементам с атрибутами img[id]{background:red;} Добавляем атрибуты к элементам с идентификатором;
Добавьте атрибуты к элементам с указанными значениями атрибутов: img[src="b.jpg"]{background:red;}Добавьте атрибуты к элементам с b.jpg;
3. Добавьте атрибуты к элементам, начинающимся с указанного символа: img[src^="b"]{background:red;} Добавьте атрибуты ко всем элементам, начинающимся с b; 4. В конце селектора указано указанное значение атрибута Elements. : img[src$="b"]{background:red;}Добавьте атрибуты ко всем элементам, заканчивающимся на b; 5. В селекторе есть элементы, содержащие указанное значение атрибута: img[src*="b" ]{background:red ;}Добавьте атрибуты ко всем элементам, содержащим b;
7. Включение элементов (классификация способов отображения)
Элементы блока: используются для верстки. К типичным структурам относятся: p, p, li, h1, dt;
Элемент отображается на отдельной строке (можно установить ширину и высоту);
Когда элемент уровня блока вложен, и если ширина дочернего элемента не установлена, ширина дочернего элемента будет равна ширине родительского элемента;
Встроенные элементы: используются для добавления стилей; интервал, a, шрифт, сильный; Примечание. Не указывайте верхние и нижние поля и отступы для строчных элементов. Верхние и нижние поля будут игнорироваться, а левое и правое будут работать (обычно не используются). );
Элементы отображаются в одну строку;
Ширина и высота не могут быть установлены напрямую;
Элементы встроенного блока: изображение, ввод;
Элементы отображаются в одну строку;
Ширину и высоту можно установить;
Отношения преобразования: встроенные элементы содержат встроенные элементы; блочные элементы содержат блочные элементы, а блочные элементы могут содержать строчные элементы;
Отображение: inline преобразует элементы в строчные элементы. Отображение: inline-block преобразует элементы в строчные блочные элементы.
Отображение: блок Преобразовать элемент в блочный элемент.
8.Свойства CSS
Свойства, связанные со шрифтом:
font-size: размер шрифта, сколько пикселей, пикселей; font-weight: толщина шрифта, жирный (700-900), нормальный, можно писать 100-900: шрифт-тильт, курсив, нормальный; : шрифт, Microsoft YaHei, HeiTi;
Объединение атрибутов: шрифт: шрифт-стиль шрифта-вес шрифта-размер/строка-высота семейство шрифтов Примечание. Объединение атрибутов шрифта должно включать размер шрифта и семейство шрифтов (остальные атрибуты можно опустить); -Порядок семьи не может быть изменен;
текст:
цвет: цвет; text-indent: отступ [единица измерения — em]; text-decoration: текстовая строка [подчеркивание, надчеркивание, зачеркивание строк, отсутствие отмены строки]; расстояние; text-align: горизонтальное выравнивание [по умолчанию слева, по центру, справа];
line-height: line height, высота строки, где расположен текст [когда высота строки равна высоте элемента, текст центрируется по вертикали];
Размер: это размер блочного элемента. Ширина и высота не могут быть установлены для встроенных элементов. Если вы хотите установить их, вы должны преобразовать их;
ширина: ширина;
высота: высота;
Атрибуты списков ul и li: list-style-type можно добавить в ul, но не обязательно добавлять в li;
list-style-type:none; Удалить символы, квадраты, круги, сплошные круги на диске. После добавления изображений их не нужно писать list-style-type:none;list-style-image:url(1.jpg) Граница изображения: 1 пиксель, сплошная красная граница для ул.
list-style-position:outside; позиционирование изображения в стиле: внутри, снаружи;
фон:
Цвет фона фон-цвет; фоновое изображение фоновое изображение. Примечание. При настройке фонового изображения обязательно задайте ширину и высоту фоновой плитки фон-повтор: повтор (значение по умолчанию) | x | (горизонтальное расположение) повтор-y (вертикальное расположение) фоновое положение: установите конкретное значение: left| top| cneter; при установке конкретного значения порядок не различается; число, первое значение представляет собой горизонтальное направление, второе значение представляет вертикальное направление, установите формат настройки переднего фонового изображения на фоновое изображение; установите, является ли фон фиксированным. Background-attachment: прокрутка (значение по умолчанию) фиксированная (; картинка исправлена);
Совместное написание атрибутов: без ограничений по количеству или заказу: фон:url("") красный без торфа 30px 40px;
line-height: блочная модель: используется для макета веб-страницы, ширина должна быть установлена.
Свойства границы поля: компоненты:
Ширина и высота границы: ширина границы: 1 пиксель; Цвет границы: цвет границы: красный; Стиль границы: стиль границы: сплошная сплошная линия/пунктирная пунктирная линия/нет записи атрибута: граница: сплошная красная линия 1 пиксель; ; Примечание. При совместном написании атрибутов нет ограничений по порядку. Не нужно записывать цвет границы и указывать ширину границы. Отдельные методы записи: граница: заполнение внутреннего поля: установите расстояние между. содержимое и граница поля
Маржа: установите расстояние между ящиками.
p{ширина:300 пикселей;высота:200 пикселей;border-top:1px сплошной красный;border-left:1px сплошной красный;border-right:1px сплошной красный;border-bottom:1px сплошной красный;}
Чтобы установить свойства индивидуально:
border-top-color:красный;border-top-style:solid;border-top-width:1px;
Размер коробки:
На что влияет размер поля: унаследованный блок находится в пределах ширины родительского блока, и значение заполнения не влияет на размер поля. Расчет размера поля: ширина = ширина содержимого + левая и правая границы + левое и правое отступы.
Граница может влиять на размер поля, а отступы могут влиять на размер поля.
В дальнейшем при реализации макета страничного блока, если для блока установлены внутренние поля, соответствующее значение необходимо вычесть из ширины или высоты содержимого.
Маржа: установите расстояние между ящиками.
Центрируйте рамку: Совместное написание атрибутов:
Поле под стандартным потоком центрируется: поле: 0 пикселей автоматически; позиционированное поле центрируется: сначала берется половина родительского поля, а затем возвращается половина его собственной ширины. Поля: 10 пикселей, сверху, справа, снизу, слева. 10pxMargin: 10px, 20px, сверху, снизу, 10px, слева и справа, 20pxMargin: 10px 20px 30px 10px сверху, 20px слева и справа, 30px снизу
Поле: 10 пикселей 20 пикселей 30 пикселей 40 пикселей вверху справа внизу слева
Уведомление:
Атрибут совместного написания:
Отступ: 10 пикселей; расстояние между верхом, правом, низом и левым — 10 пикселей. Отступ: 10 пикселей, верх и низ, 10 пикселей слева и справа. 20 пикселей. Отступ: 10 пикселей, 20 пикселей, 30 пикселей.
Отступы: 10 пикселей, 20 пикселей, 30 пикселей, 40 пикселей сверху, справа, снизу, слева;
Когда два поля отображаются вертикально, поля подлежат установленному максимальному значению (первый случай слияния полей). Когда два поля отображаются горизонтально, поля перекрываются и поля схлопываются (сложная проблема), чтобы решить шаг:
отступ: установите расстояние между содержимым и границей поля.
Установите границу родительского поля
Установите переполнение: скрыто для родительского поля;
Очистить поля:
Метод 1: *{padding: 0; маржа: 0;}
Метод 2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9.Три основные характеристики CSS
Наследование:
Наследуемые: цвет, выравнивание текста, отступ текста, размер шрифта, вес шрифта, семейство шрифтов. Ненаследуемые: оформление текста, граница, отображение, поля, плавание, отступ. Предпосылкой для наследования является принадлежность между тегами. для вложенных отношений можно унаследовать цвет текста; можно унаследовать размер текста; можно унаследовать атрибуты, связанные с текстом;
Особые возможности:
Цвет текста в родительском элементе не может быть унаследован (каскадный).
Теги заголовков не могут наследовать размер текста родительского элемента.
Перекрытие: перекрытие относится к охвату стилей.
Каскадная природа стилей не имеет ничего общего с порядком их вызова, а связана с порядком их определения.
Предпосылка возникновения каскадирования: конфликт стилей
Приоритет:
Вес: встроенное введение (1000) > идентификатор (100) > класс (10) > метка (1) > общее (0). Чем больше значение, тем выше приоритет.
Вес одинаковый, и следующие стили будут работать
10. Дополнительные примечания.
Написание оптимизации формы:
видимый: значение по умолчанию. Содержимое не будет обрезано и будет представлено за пределами поля элемента. Скрыто: содержимое будет обрезано, а оставшееся содержимое станет невидимым. Когда изображение изменит положение, родительский элемент также изменит свое положение. Добавление этого значения атрибута. родительский элемент может заставить родительский элемент изменить свое положение. Положение элемента остается неизменным. Прокрутка: содержимое будет обрезано, но браузер отобразит полосы прокрутки для просмотра оставшегося содержимого.
авто: если содержимое обрезано, браузер отображает полосы прокрутки для просмотра остального содержимого.
11. Стандартный поток: элементы уровня блока отображаются в одну строку. Стандартный режим отображения: режим отображения элементов по умолчанию;
12. Плавающее: Плавающее используется для решения проблемы переноса текста и изображений, используемых для создания панелей навигации и макетов веб-страниц;
Использование: Плавающее:влево|вправо. Особенности: Плавайте все, что захотите.
Плавающие элементы не занимают свое исходное положение (вне сценария), что позволяет отображать элементы уровня блока в виде плавающих элементов в одной строке. Встроенные элементы можно преобразовать во встроенные блочные элементы.
В процессе преобразования режима по возможности используйте дисплей.
Очистить поплавок:
Определение: Очистка float не означает удаление float; очистка float относится к влиянию очистки float. Обратите внимание на время использования: когда для дочернего элемента установлено значение float, а родительский элемент не имеет высоты, макет страницы будет перепутан. ; в этом случае очистите поплавок.
Метод очистки с плавающей запятой: [x] Примечание. Добавьте пустой блочный элемент (
, тег) после очищаемого элемента и добавьтеclear:both left |right к добавленному пустому элементу.13. Позиционирование: Ориентация: слева, справа, сверху, снизу (подробную информацию можно найти на обучающем канале CSS на китайском веб-сайте PHP)
Статическое позиционирование. Статическое позиционирование — это метод отображения стандартного потока элементов. Position:static — позиционирование по умолчанию.
Абсолютное позиционирование: позиционирование относительно родительского элемента или элемента-предка позиционируемого элемента не существует, будет найден исходный содержащий его слой, который не занимает предыдущую позицию: абсолютное;
При настройке абсолютного позиционирования для одного элемента позиционирование задается на основе левого верхнего угла браузера (тела). Когда блоки вложены, и если родительский блок не задает расположение, дочерний блок устанавливает расположение на основе левого верхнего угла браузера. Когда блоки вложены, если родительский блок позиционируется, дочерний блок размещается относительно верхнего левого угла родительского блока. Для блока установлено абсолютное позиционирование, и блок не занимает никакой позиции (вне сценария). После того, как для встроенного элемента установлено абсолютное позиционирование, элемент преобразуется во встроенный блочный элемент.
Примечание. После того, как для элемента установлено абсолютное позиционирование, положение элемента можно задать произвольно с помощью конкретного имени ориентации.
Относительное позиционирование: относительно исходного положения элемента он займет предыдущее положение: относительное;
После того, как элемент настроен на относительное позиционирование, он занимает исходное положение. Установите относительное позиционирование со своим собственным положением в качестве ссылки. При относительном позиционировании невозможно выполнить преобразование режима элемента.
Дочерний элемент должен находиться в той же позиции, что и родительский (дочерний элемент настроен на абсолютное позиционирование, а родительский элемент — на относительное).
Фиксированное позиционирование: относительно всей стабильной позиции; фиксированное позиционирование не занимает позицию (вне метки); преобразование строчных элементов в строчные блочные элементы: фиксированное;
Проблемы с иерархией:
Иерархические проблемы будут возникать только при заданном позиционировании. Между родственными элементами существует относительное, абсолютное и другое позиционирование, структура HTML-документа которого находится сзади, а которое находится на самом внешнем уровне (более высокий уровень).
Z-индекс: установите уровень. Значение представляет собой число. Пока существует позиционирование, будет использоваться настройка позиционирования.
14. CSS Elf Rabbit: выберите прозрачные документы
Точка системы координат в браузере имеет правильное направление как положительное направление, а направление под точкой является положительным. CSS-спрайт — это способ обработки фонового изображения веб-страницы; спрайт также является своего рода фоновым изображением.
Использование спрайтов
При использовании fw необходимо открыть карту спрайтов в открытом режиме. При использовании карты спрайтов в качестве фонового изображения она часто используется вместе с фоновой позицией для измерения координат элементов на карте спрайтов. селектор.
Или используйте сокращенную букву: k
15. Видимость CSS
переполнение: скрыто Скрыть лишнюю часть display: none Скрыть элемент напрямую display: block Отобразить элемент (лучше соответствует js) видимость: скрыто Скрыть элемент display: none Скрыть элемент и не занимать позицию;
видимость: скрыт; скрыть элемент и занять исходное положение.
16. Центрируйте изображения и текст
Каждый элемент inlne-block имеет значение по умолчаниювертикальное-выравнивание:базовая линия.
вертикальное выравнивание: среднее вертикальное выравнивание и встроенный блок лучше совпадают;
17. Избегайте нестандартного потока
В процессе верстки веб-страницы используйте стандартный поток, если можете. Стандартный поток не может решить проблему с плавающим расположением.
Используйте поля слева/справа и установите значение auto, чтобы автоматически сдвинуть поле к двум внешним сторонам.
18. Характеристики включения этикетки
p может содержать любой тег стандартного потока. Тег p не может содержать тег p, тег заголовка и тег списка. Примечание заголовка может содержать другие теги.
Встроенные элементы не должны содержать другие теги.
19. Краткое описание настройки ширины и высоты
После плавающего элемента можно установить ширину и высоту. После абсолютного позиционирования элемент может установить ширину и высоту.
После фиксированного позиционирования элемент может установить ширину и высоту.
20. Обновление до CSS3
CSS3 и CSS2: CSS мощный, а код краткий.
Селектор псевдокласса:
Первый дочерний элемент: first-child Лучший элемент: последний-child n-й дочерний элемент: nth-child (n); n — нечетное число для дочернего элемента: nth-child (odd); 2n+1))
Элемент с четным номером: nth-child(even) или (nth-child(2n))
text-shadow: text-shadow: горизонтальная, вертикальная, тень box-shadow: box-shadow: горизонтальная, вертикальная, тень
фон: фон