css实现一个尖角_CSS基础语法(一)

内联式缺点：

a、内联式必须写在标签上，没有完全脱离 HTML 标签。

b、 css 样式代码让标签结构繁重，不利于 HTML 结构的解读。

c、⼀个内联式的 css 代码，只能给⼀个标签使⽤，如果多个标签有相同的样式，同样的css

代码需要书写多次，增加代码量。因此，实际⼯作中不会使⽤内联式（⾏内式）编写 css 代码。2.2.2 内嵌式• 书写位置：在 HTML ⽂件中， 标签内部有⼀个 内嵌式特点：

优点：

a、实现了结构和样式的初步分离， css 只负责样式，HTML 负责结构。

b、多个标签可以利⽤⼀段代码设置 相同的样式，节省代码量。

缺点：

a、结构和样式并没有完全分离，代码依旧书写在 HTML ⽂件的标签选择器特点

· 优点：可以选中所有的同名标签，设置所有同名标签的公共样式。

· 缺点：只能实现全选，不能对局部的标签添加特殊样式。3.2 id 选择器• 通过标签上的 id 属性去选择标签。

• 书写⽅式：#id 属性值

• 选择范围：只能选中⼀个标签。

• id 命名规则：必须以字母开头，后⾯可以有字母、数字、下划线、横线，严格区分 ⼤⼩写。 每个 id 属性值必须是唯⼀的，不能与其他的 id 同名。

• 注意：如果希望多个标签设置相同的样式，使⽤id选择器的话，必须给这多个标签 取不同的 id 名， 分别选中设置。#para1 {

color: red;}id 选择器特点

· 缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。3.3 类选择器• 通过标签的 class 属性去选择标签。

• 书写⽅式：.class属性值

• 选择范围：是页⾯中所有 class 属性值相同的标签。

• class 命名规则：必须以字母开头，后⾯可以有字母、数字、下划线、横线，严格 区分⼤⼩写。class 属性值可以与其他的class相同。类选择器特点• 特点 1：多个不同的标签，不区分标签类型，只要class属性值相同，都可以被同⼀个类选择器选中。

• 特点 2：⼀个标签的 class 属性可以有多个属性值，值之间⽤空格分隔，每个属性值组成的选择器， 都可以选中这⼀个标签，每个选择器后⾯的样式都会添加给同⼀ 个标签。类选择器的优点 ①通过⼀个类选择器进⾏多选，选中多个标签，添加公共样式。

②⼀个标签可以被多个类选择器选中，可以将所有样式进⾏分离，分别提取公共样式和

单独样式，节省代码量。

实际⼯作中，通常我们有⼀个使⽤规律：类上样式(CSS)，id 上⾏为(JavaScript)。3.4 通配符选择器• 通过⼀个特殊符号选择页⾯内所有的标签。

• 书写⽅式：*

• 选择范围：包含 标签在内的所有标签。通配符特点和应⽤

· 优点：可以实现全选，简化书写。

· 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使⽤

通配符选择，会让不需要的标签也加载⼀次样式，导致浏览器多做⽆⽤的⼯作。

· 注意：实际上线的⽹站不允许使⽤ * 去清除默认内外边距。

· 不过普通的案例，代码量较少时，为了节省书写，可以使⽤通配符。3.5 后代选择器• 通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。

• 后代选择器也叫包含选择器。

• 书写⽅式：空格表⽰后代，基础选择器中间使⽤空格分隔，空格前⾯的选择器选中的标签 必须是后⾯选择器选中标签的祖先级。

• 选择范围：通过后代选择器中前⾯的⼀系列基础选择器缩⼩选择范围，最终由最后⼀个选择器 确定选中的标签。• 注意：后代选择器必须满⾜所有的后代关系才能够被选中，后代关系不⼀定只能是⽗⼦关系。后代选择器特点

· 优点：减少 class 属性的定义使⽤，选择效率更⾼。3.6 交集选择器• 通过⼀个标签之上满⾜所有的基础选择器的需求去选择标签。

• 书写⽅式：基础选择器进⾏连续书写，如果有标签选择器参与交集，必须书写在开 头。

• 选择范围：选择的是满⾜所有基础选择器需求的标签，如果⼀个条件不满⾜都不能 被选中。

• ⽐较常见的是标签与类的交集。 表⽰既是p⼜是.haha交集选择器更多写法• 交集选择器可以进⾏ 类名 的连续交集，需要满⾜更多的条件才能选中标签。

• IE6 不⽀持 类名连续交集 写法。

• 交集选择器可以作为其他⾼级选择器的组成部分。3.7 并集选择器• 不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费， 可以将前⾯六种选择器可以进⾏并集书写，相当于⼀种简化写法。

• 书写⽅式：将多个选择器中间⽤逗号进⾏分隔，最后⼀个后⾯不能加逗号。

• 选择范围：是所有的单独选择器选中的标签的并集集合。并集选择器⽤途• ①如果多个标签具有公共样式，但是不能⽤⼀个选择器选中，可以使⽤并集写法。

• ②可以使⽤标签选择器的并集写法，进⾏默认样式的清除，替换通配符的功能。3.8 通配符*四、继承性和层叠性4.1 继承性• 如果⼀个标签没有设置过⼀些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了 这些样式，这些样式都是从祖先级继承⽽来，这种现象就是继承性。

• 能够被继承的样式是所有的⽂字相关样式属性，其他的属性都不能被继承。哪些属性能够继承呢？colortext-系列 ： ⽐如text-decoration:underline;font-系列： ⽐如font-size:30px;line-系列background-color不能继承！border不能继承！等等继承性应⽤• 继承性是⼀个很好的性质，可以将页⾯中出现最多的⽂字样式设置给⼀个较⼤的祖 先级标签 ⽐如 ，后期所有的后代标签都可以从 进⾏继承。

body {

font‐size: 14px;

font‐family: "微软雅⿊"; color: red;

}4.2 层叠性层叠性是什么？就是处理冲突的能⼒。就是当多个选择器都选择上了同⼀个标签，听谁的？• 解决⽅法：就是使⽤层叠性去解决冲突。多个选择器在进⾏对⽐的过程中， 最终只有⼀个属性会成功加载，它会层叠、覆盖掉其他的属性。

• 判断最终胜出的属性是谁，需要依赖判断优先级。判断⽅法选中⽬标标签• 第⼀步：⽐较多个选择器的权重，权重⾼的层叠权重低的。

• 基础选择器的权重：根据选择范围，范围越⼤权重越⼩，* < 标签选择器 < 类选择器 < id 选择器。

• ⾼级选择器权重⽐较⽅法：依次⽐较组成⾼级选择器的 id 的个数，类的个数，标签的个数， 如果前⾯能够⽐较出⼤⼩就不再⽐较后⾯，如果前⾯相等就往后⽐较， 直到⽐较出⼤⼩。• ⽐较顺序：( id 个数, 类的个数, 标签的个数 )

• 第⼆步：如果选择器权重都相同，需要⽐较 CSS 中代码的书写顺序，后写的层叠 先写的。选中⽬标标签的组先级• 如果选择器选中的是祖先元素，⽂字的样式可以被继承。

• 第⼀步：⽐较就近原则，⽐较选择器选中的祖先级在 HTML 结构中距离⽬标标签的远近， 近的层叠远的。

• 第⼆步：如果选中的祖先级距离⽬标⼀样近(同⼀个祖先级)，⽐较选择器权重，权重⼤的层叠⼩的。

• 第三步：如果距离⼀样近，权重也相同，最后⽐较 CSS 中的书写顺序，后⾯的层叠前⾯的。!important 关键字• 如果在⽐较选择器权重的过程中，遇见⼀个 !important 关键字，可以将某条 CSS 样式属性 的权重提升到最⼤。

• 书写位置：在某个css属性的属性值后⾯空格加 !important 。• 注意：

• ① 就近原则中，不需要⽐较选择器权重，所有 important 会失效。

• ② important 不能提升选择器的权重，只能提升某条属性的权重到最⼤。⾏内式权重• ⾏内式样式与内嵌式或外链式样式⽐较权重时，⾏内式的权重最⾼。

• 但是，与 !important 关键字相⽐权重要低。

2023年6月21日发(作者：)

css实现⼀个尖⾓_CSS基础语法（⼀）⼀、CSS整体感知⼀)：简介前端开发3层：HTML 结构层 语义、结构CSS 样式层 样式JS ⾏为层 交互、⾏为、动画CSS 全称 cascading style sheets，层叠式样式表，是⼀种⽤来表现 HTML 的⽂件样式的计算机语⾔作⽤：静态地修饰⽹页，并且可以配合各种脚本语⾔动态地对⽹页各元素进⾏格式化。CSS的维护者也是w3c，最新版本是CSS3，但是浏览器没有那么的兼容下图就是在Chrome和IE8中看机器猫：⼆)：产⽣背景• 从 HTML 被发明开始，样式就以各种形式存在，最初的 HTML 只包含很少的显⽰属性。• 随着 HTML 的成长，为了满⾜页⾯设计者的要求，HTML 添加了很多显⽰功能，例如⽂本格式化标签。• 但是随着这些功能的增加，HTML 变的越来越杂乱，⽽且 HTML页⾯也越来越臃肿。• 于是 CSS 便诞⽣了。三)：发展过程CSS 的出现，实现了⽹页的结构和样式分离，拯救了混乱的 HTML，更加拯救了我们 web 开发者。⼆、CSS语法2.1 CSS规则CSS 规则由两个主要的部分构成：选择器，以及⼀条或多条声明2.2 书写位置css 的代码根据书写位置不同分为四种书写⽅式：内联式、内嵌式、 外联式、导⼊式。2.2.1 内联式• 内联式，也被习惯叫做⾏内式。• 书写位置：在 HTML 标签之上的 style 属性中书写 css 样式

• 所有的 css 样式属性总体组成标签的 style 属性的属性值