В последнее время я делаю обзор системы знаний, и стараюсь максимально заполнить пробелы во время обзора. В Интернете есть много мнений о разнице между @import и стилями импорта ссылок. Есть примерно следующие типы, но есть места, где у меня есть сомнения, и мы можем обсудить их вместе.
разница
1. Разница принадлежности
@importЭто грамматическое правило, предоставляемое CSS, и оно имеет только функцию импорта таблиц стилей;linkЭто тег, предоставленный HTML, который может не только загружать файлы CSS, но также определять RSS, атрибуты соединения rel и т. д.
2. Разница в порядке загрузки
Когда страница загружается,linkCSS, представленный тегом, загружается одновременно;@importИмпортированный CSS будет загружен после загрузки страницы.
3. Различия совместимости
@importЭтот синтаксис доступен только в CSS2.1, поэтому его можно распознать только в IE5+;linkВ качестве HTML-элементов проблем с совместимостью нет.
4. Разница в управляемости DOM
DOM можно манипулировать через JS, вставляяlinkтеги для изменения стилей; не могут использоваться, поскольку методы DOM основаны на документах@importспособ вставки стилей.
5. Разница в весе
linkВведен вес стилей больше, чем@importПредставленный стиль. (???)
Когда мы ищем в Интернете разницу между ними, мы обычно видим утверждение, подобное статье 5. Действительно ли это относится к статье 5? Это для обсуждения.
Итак, здесь мы используем несколько демонстраций для проверки пятого
Перед проверкой поговорим оcss权重родственные понятия:
Вес CSS относится к приоритету селектора, вес селектора CSS высокий, то есть приоритет селектора высокий.
Приоритет css заключается в том, что при установке элементов для одного и того же html-элемента разные селекторы имеют разные приоритеты, и стили с низким приоритетом будут перезаписываться стилями с очень высоким приоритетом.
Приоритет веса css следующий:
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符
Чтобы облегчить понимание того, как рассчитываются веса, мы проводим численный анализ «что, если» следующим образом:
Селектор
Веса
подстановочный знак
0
Этикетка
1
класс/псевдокласс/свойство
10
ID
100
Встроенные стили
1000
important
гигантский
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#myid { /* id选择器权重为100 */
background-color: pink;
}
#divid .myspan input { /* 权重为 100 + 10 + 1 = 111 */
background-color: yellow;
}
input[type="button"] { /* 权重为 10 */
color: white !important; /* !important权重为无穷大 */
}
input.myclass { /* 此为标签指定式选择器，权重为 1 + 10 = 11 */
color: black;
}
</style>
</head>
<body>
<div id="divid">
<span class="myspan">
<input type="button" id="myid" class="myclass" name="myname"
value="点我" style=" color: green;">
<!-- style样式的权重为1000 -->
</span>
</div>
</body>
</html>
Согласно приведенному выше расчету: эта кнопка должна иметь желтый фон и белый шрифт.
Вернемся к нашей теме здесь:Действительно ли вес стиля, введенный ссылкой, больше, чем @import?
Способ введения css тоже имеет вес?
На демо:
/* green.css */
div {
background-color: green;
border: 3px solid red;
}
/* yellow.css */
div {
background-color: yellow;
border: 3px solid black;
}
/* blue.css */
@import url("green.css");
div{
background-color: blue;
}
EG1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例1. link标签引入yellow.css，内联样式引入green.css -->
<link rel="stylesheet" href="yellow.css">
<style type="text/css">
@import url("green.css");
</style>
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为，绿色背景，红色边框，即green.css生效 -->
</body>
</html>
Эффект:
например2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例2. 内联样式引入green.css，link标签引入yellow.css -->
<style type="text/css">
@import url("green.css");
</style>
<link rel="stylesheet" href="yellow.css">
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为黄色背景，黑色边框，即yellow.css生效 -->
</body>
</html>
Эффект:
Сравнивая два примера 1 и 2, мы обнаруживаем, что два метода импорта css, link и @import, не имеют понятия веса, а просто показывают каскадные строки css. То есть стили, написанные сзади, перезапишут предыдущие стили.
например3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例3. 内联样式引入green.css，内联样式中设置粉色背景 -->
<style type="text/css">
@import url("green.css");
div {
background-color: pink;
}
</style>
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为粉色背景，红色边框，即green.css已生效，但背景色被内联样式层叠为粉色 -->
</body>
</html>
Эффект:
EG4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例4. link标签引入blue.css，blue.css中引入green.css -->
<link rel="stylesheet" href="blue.css">
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为蓝色背景，红色边框，即green.css已生效，但背景色被blue.css层叠为蓝色 -->
</body>
</html>
Эффект:
Анализ результатов Примера 3 и Примера 4 показывает, что:
В примере 3 мы видим красную рамку, которая доказывает, что green.css, представленный @import во встроенном стиле, вступил в силу, но его фоновый стиль перекрывается розовым фоном во встроенном стиле.Это явление показывает, что @ импорт не просто как Как мы видим, в верхней части встроенного стиля введенный стиль действительно помещается перед встроенным стилем в структуре, поэтому встроенный стиль может каскадировать его.
Точно так же в примере 4 в файле blue.css, представленном тегом link, есть также green.css, введенный @import вверху, и красная рамка все еще может свидетельствовать о том, что green.css вступил в силу, но его фон стиль изменяется самим blue.css Синий фон удаляется каскадом, а стиль, введенный @import, также помещается перед своим собственным стилем в blue.css.
Так это доказывает приведенный выше примерlinkВведен вес стилей больше, чем@importВведенные стили не имеют смысла так говорить.
Сомнительно?
Мы также говорили выше оlinkа также@importРазница в том, что при загрузке страницы, а не приlinkИмпортированному стилю css будет предшествовать@importнагрузка? ЗачемlinkИмпортированный стиль будет снова перезаписан.@importИмпортный стиль?
Сначала давайте рассмотрим некоторые концепции выполнения в браузере:
нагрузка:Выполните разрешение доменного имени в соответствии с запрошенным URL-адресом, затем отправьте запрос на сервер и получите файлы ответов (такие как HTML, CSS, JS, изображения и т. д.).
Разобрать:Проанализируйте загруженные ресурсы (HTML, CSS, JS и т. д.) и создайте внутреннюю структуру данных ответа (например, дерево HTML DOM, лист свойств объекта JS, правила стиля CSS и т. д.).
Оказывать:Постройте дерево рендеринга, выполните расчет положения, расчет стиля и т. д. для каждого элемента, а затем завершите процесс макета страницы и отрисовки (генерация элементов страницы) в соответствии с книгой рендеринга.
Итак, основываясь на нашем понимании описанного выше процесса выполнения браузера, мы продолжаем задавать вопросы:
ссылка загружается до @import, она также отображается до @import?
На практике действия, отображаемые в браузере, обычно выполняются несколько раз. Последний рендеринг должен быть основан на дереве рендеринга после того, как все ранее загруженные стили будут интегрированы для отрисовки страницы, и элементы страницы, которые были визуализированы, также будут повторно визуализированы.
Затем мы можем понять метод импорта файлов CSS как @import в качестве замены.Когда механизм синтаксического анализа CSS анализирует файл CSS, если он встречает @import в верхней части файла, он будет заменен CSS, импортированным с помощью @ импортировать все стили в файл.
Наконец-то я понял, почему стили, введенные @import, складываются. Несмотря на то, что он загружается позже, он будет помещен вверху таблицы стилей после загрузки и, естественно, будет сложен стилем с тем же именем ниже, когда он будет окончательно отрендерен.