CSS 详细信息-js教程-PHP中文网

CSS 详细信息

WBOY

发布： 2024-08-21 06:11:06

原创

897 人浏览过

CSS In Details

HTML 如何在我们的页面中呈现

浏览器加载 HTML
将 HTML 转换为 DOM
获取链接资源
浏览器解析 CSS (CSSOM)
将 DOM 与 CSSOM 结合
UI 绘制（FCP）（First Contentful Paint）

元素的 HTML 类型

主要

块级
内联

CSS 选择器：-

类型/属性选择器
类选择器
ID 选择器
通用选择器 (*)

CSS 继承

当未直接在元素上设置继承 CSS 属性（即颜色）时，会遍历父链直到找到该属性的值。

<div class="body">
    <p>This is a Paragraph, but it will have the blue color due to inheritance</p>
</div>
<style>
.body{
    color: blue;
}
</style>

登录后复制

案例2

<div class="body">
    <p>This is a Paragraph, but it will have the red color due to direct Specification</p>
</div>
<style>
p {
color: red;
}
.body{
    color: blue;
}
</style>

登录后复制

案例3

<div class="body">
    <p>This is a Paragraph, but it will have the blue color due to strong Specification</p>
</div>
<style>
p {
color: red;
}
.body p{
    color: blue;
}
</style>

登录后复制

什么是 CSS 特异性

浏览器用来确定应应用哪个 CSS 声明的算法。
每个选择器都有一个计算出的权重。最具体的重量获胜。 id--类-类型 ID 选择器：1 - 0 - 0 类选择器：0- 1 -0 类型选择器：0-0-1

注意：- 内联 CSS 更具特异性，!import 具有更多特异性

CSS 特异性计算器

艾姆和雷姆

EM:- 相对于其父字体侧

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2em; //16px * 2 = 32px;
}

p {
font-size: 2em; // 32px * 2 = 64px
}
</style>

登录后复制

REM：- 相对于 Root 字体侧

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2rem; //16px * 2 = 32px;
}

p {
font-size: 2rem; // 16px * 2 = 32px
}
</style>

登录后复制

%:- % 计算

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 120%; //1.2*16 = 19.2px;
}

p {
font-size: 120%; // 1.2 * 19.2 = 23.04px
}
</style>

登录后复制

CSS 组合器

1.后代选择器 (ul li a)

<ul>
<li><a href='#'></a></li>
</ul>

登录后复制

2.子组合器（直接后代）(div.text > p)

<div>
<div class="text">
   <P>Here the CSS will apply<P>
</div>
<div>
  <p>No CSS will apply</p>
</div>
</div>

登录后复制

3.相邻兄弟组合 (h1 + p)

注意：-

h1 和 p 应该位于同一个父级中 p 应该紧接在 h1 标签之后

4.通用兄弟组合器 (p ~ 代码)

注意：-

他们不应该有像相邻兄弟姐妹那样的直系兄弟姐妹。但他们一定有兄弟姐妹
他们必须有同一个父母

块元素修改器架构（BEM）

有助于创建可重用组件和代码共享的设计方法

其他方法

OOCSS
SMACSS
SUITCVSS
原子
边界元法

封锁

标题
菜单
输入
复选框（独立含义）

元素（块的一部分）

菜单项
列出项目
标题标题

修饰符

已禁用
突出显示
已检查
黄色

.block__element--修饰符 语法

<form class=form>
   <input class='form__input'/>
   <input class="form__input form__input--disabled"/>
   <button class="form__button form__button--large"/>
</form>

登录后复制

盒子模型：-（W.I.P）

我们需要从详细信息中添加更多信息

注意：-

将有一篇单独的文章介绍网格布局与 Flex 布局。

以上是CSS 详细信息的详细内容。更多信息请关注PHP中文网其他相关文章！