CSS知识总结

最新推荐文章于 2024-08-10 22:43:21 发布

wyh2001ok

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量28

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/wyh2001ok/article/details/131344190

版权

CSS知识总结

一、基础认识

1.1 CSS介绍

CSS：层样式表
CSS的作用：

给页面中的HTML标签设置样式

1.2 CSS语法规则

写在哪里：

一般写在style标签中，style标签一般写在和蔼的标签里面，title标签下面

1.3 CSS的使用

常见属性：

css常见属性	作用
color	文字颜色
font-size	字体大小
background-color	背景颜色
width	宽度
height	高度

代码如下图：
在这里插入图片描述

2.1 CSS引入方式

内嵌式：CSS写在style标签中

提示：style标签虽然可以写在页面的任意位置，但通常约定在head标签中

外联式：CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入
行内式：CSS写在标签的style属性中

二、选择器

1.1 选择器的作用

选择页面中对应的标签，方便后续设置样式

1.2 标签选择器

结构：标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：

标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到队以哦那个的标签

2. 类选择器

结构：.类名{ css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：

所有标签上都有class属性，class属性的属性值称为类名
类名可以由是数字、字母、下划线、中划线组成，但不能一数字或者
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

3.id选择器

结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：

所有标签上都挺有id属性值
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

4.类与id的区别

class类名与id属性值的区别

class类名相当于姓名，可以重复，Uighur标签可以同时有多个class类名
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
类选择器与id选择器的区别
类选择器以.开头
id选择器以#开头
实际开发情况：
类选择器用的最多
id一般配合js使用，除非特殊情况，否则不要使用id设置样式
实际开发中会遇到冗余代码的抽取

5.通配选择器

结构：*{css属性名：属性值；}
作用：找到页面中所有标签，设置样式
注意点：

正常只会在特殊情况下使用
在基础小页面中可能会用于去除标签默认的margin和padding，如下图:

三、选择器进阶

1.1后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2{ css }
结果：

在选择器1所找到标签后代（儿子、孙子…）中，找到满足选择器2的标签，设置样式
注意点：
后代包括：儿子、孙子、重孙…
后代选择器中，选择器与选择器之间通过空格隔开

1.2子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1 > 选择器2{ css }
结果：

在选择器1所找到标签的子代中，找到满足选择器2的标签，设置样式
注意点：
子代之包括：儿子

2.1 并集选择器：，

作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ，选择器2{ css }
注意点：

并集选择器中的魅族选择器可以是基础选择器或者符合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性

3.1 交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2{ css }
结果：

（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
交集选择器中如果有标签选择器，标签选择器必须写在最前面

4.1 hover伪类选择器

作用：选中鼠标悬停在元素上的状态、设置样式
语法：选择器:hover{ css }
注意点：

伪类选择器选中的元素的某种状态

选择器小结：

选择器	作用	格式	示例
后代选择器	找后代	选择器之间通过空格分隔	.father .son {css}
子代选择器	找儿子	选择器之间通过 > 分割	.father > .son {css}
并集选择器	找到多类元素	选择器通过，分割	div,p,span {css}
交集选择器	找同时满足多个选择器的元素	选择器之间紧挨着	p.red {css}
hover伪类选择器	选中鼠标悬停在元素上的状态	:hover	a:hover {css}

emmentt语法

作用：通过简写语法，快速生成代码
语法：

类似与选择器的写法：

记忆	示例	效果
标签名	div	`<div></div>`
类选择器	.red	`<div class="red"></div>`
id选择器	#one	`<div id="one"></div>`
交集选择器	p.red#one	`<p class="red" id="one"></div>`
子代选择器	ul>li	`<ul><li></li></ul>`
内部文件	ul>li{我是li的内容}	`<ul><li>我是li的内容</li></ul>`
创建多个	ul>li*3	`<ul><li><li><li></li></li></li></ul>`

四、字体和文本样式

1.1字体大小

属性名：font-size
取值：数字+px
注意点：

谷歌浏览器默认文字大小是16px
单位需要设置，否则无效

1.2 字体粗细

属性名：font-weight
取值：

关键字：

效果	取值
正常	normal
加粗	bold

纯数字：
|效果|取值|
|–|–|
| 正常 | 400 |
| 加粗 | 700 |

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常、、加粗两种取值使用最多

1.3字体样式（是否倾斜）

属性名：font-style
取值：

正常（默认值）：normal
倾斜：italic

2.1 文本缩进

属性名：text-indent
取值：

数字+px
数字+em（推荐：1em = 当前标签的font-size的大小）

2.2文本水平对齐方式

属性名：text-align
取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：

如果需要让文本水平居中，text-align属性给文本所有标签设置

2.3 颜色常见取值

属性名：

如：文本颜色：color
如：背景颜色：background-color
属性值：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red\green\blue\yellow…
rgb表示法	红绿蓝三原色。每项取值范围：0~255	如：rgb(0,0,0)
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	如：rgba(255,255,0.5)
十六进制表示法	#开头，将数字转换成十六进制表示	如：#000000

五、盒子模型

1.1盒子模型的介绍

1.盒子的概念

页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）页面时，会将网页中的元素看做一个个的矩形区域，我们也形象的称之为盒子

2.盒子模型

css中规定每个盒子分别由：内容区域、内边距区域、边框区域、边距区域构成

2.1内容的宽度和高度

作用：利用width和height属性默认设置时盒子内容区域的大小
属性：width/height
常见取值：数字+px

3.1边框（border）-单个属性

作用：给设置边框粗细、边框样式、边框颜色效果
单个属性：

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实现 solid、虚线 dashed、点线 dotted
边框颜色	border-color	颜色取值

4.1内边距-取值

作用：设置边框与内容区域之间的距离
属性名：padding
常见取值：

取值	示例	含义
一个值	`pdding: 10px`	上下左右都设置为10px
二个值	`pdding: 10px 20px`	上下设置为10px、左右设置为20px
三个值	`pdding: 10px 20px 30px`	上设置为10px、左右设置为20px、下设置为30px
四个值	`pdding: 10px 20px 30px 40px`	上设置为10px、右设置为20px、下设置为30px、左设置为40px