前端 CSS CSS3 核心样式和属性

目录

总结：CSS4 种书写位置特点与区别

序号选择器:

属性选择器:

CSS3 新增伪类:​编辑

浮动

定位

 鼠标样式

 边框

 圆角

盒子阴影

 背景

2D/3D转换：

---

CSS简介：

CSS（Cascading Style Sheets）层叠样式表

• 给HTML 标签添加样式的标记语言
• 可以设置HTML页面中文字大小，颜色，对齐方式及元素的宽高，位置等样式。

CSS基础语法

     CSS规则集：

              

 

• CSS 规则集由两个主要的部分构成：选择器和声明块组成；
• 选择器：选择器指向需要改变样式的 HTML 元素，通过选择器，我们知道是给那个元素添加样式
• 声明块：包含一条或多条声明，每条声明用分号；结束，声明大括号{}括起来；
• 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

CSS引入方式

内联样式：

缺点：样式与结构冗余

优点：优先级较高

内联样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示：

 内部样式：

缺点：样式的复用率较低

优点：样式与结构分离

将样式表编写到head中的style标签中

 外部样式：

优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中。

1.将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

2.@import url()，还可通过import方式导入CSS文件

@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用；

引入方式的优先级：

行内样式>内部样式/外部引入

就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

总结：CSS4 种书写位置特点与区别

CSS选择器

标签选择器

标签选择器称之为：元素选择器、类型选择器

• 他直接使用元素的标签名当做选择器，将选择页面上所有该种标签
• 标签选择器将选择页面上所有该种标签，无论标签所处位置的深浅

id选择器： 

id 选择器是使用 HTML 元素的 id 属性来选择特定元素

• 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素
• 要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
• id 的名称只能由 字母、数字、下划线、短横线 构成，不能以数字开头，字母区分大小写，但习惯上一般为 小写字母
• 名称最好是：见名知意，多一个英文单词之间用 -分隔

class选择器：

class 属性表示 "类名"

• 类名的命名规范和 id 选择器相同
• 类选择器是以 .前缀开头的，并指向 class 的标签
• 多个标签可以定义相同的类名

同一个标签可以同时属于多个类，类名用空格隔开

复合选择器：

后代选择器：

• 在 CSS 中，使用 空格表示 “后代”
• 后代 并不一定是 “儿子”
• 后代选择器可以有很多空格，隔开好几代

 交集选择器：

• 并集选择器也叫作 分组选择器，逗号表示分组
• 如：选择有 .box 类的 h2 标签，此时应该使用 交集选择器

伪类选择器：

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

超链接拥有 4 个特殊状态

爱恨准则 

• a 标签的伪类书写，按照 “爱恨准则” 的顺序，否则会与伪类不生效
• LOVE HATE
• :link -> :visited -> :hover -> :active

元素关系选择器：

子选择器:

• 当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即：两个标签为父子关系
• 后代选择器：不一定限制是子元素

相邻兄弟选择器:

• 邻兄弟选择器（+）基于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都属于同一个父元素的子元素，则第二个元素将被选中
• a + b 即 选择 紧跟在 a 后面的第一个 b

通用兄弟选择器:

通用兄弟选择器 ~ 波浪线 a~b选择 a 元素之后所有同层级 b 元素

序号选择器:

属性选择器:

CSS3 新增伪类:

CSS三大特性：

继承性 层叠性 优先级

浮动

 

定位

 鼠标样式

 边框

 

 圆角

 

盒子阴影

 背景

2D/3D转换：

 

---