CSS系列之（一）概述

概述

层叠样式表（Cascading Style Sheet，简称：CSS），样式语言，解决页面显示效果的问题。CSS将网页内容和显示样式进行分离，降低了耦合性

CSS与HTML的结合方式

1. 每一个HTML标签中都有一个style属性，通过该属性设置CSS样式
   
2. 使用style标签，一般放在head标签中，预先加载样式，用于解决页面内多个标签需要设置同样样式的问题，避免重复进行设置
   注：此处需要了解HTML页面加载的过程（顺序）
   
3. @import语句，CSS代码，用于解决多个页面需要设置同样样式的问题，避免重复进行设置
   1.css

@import url("div.css");
@import url("p.css");

div.css

div{
	background-color: aqua;
	color: black;
}

p.css

p{
	background-color: red;
	color: black;
}

1. link标签，HTML标签，用于解决多个页面需要设置同样样式的问题，避免重复进行设置
   

样式优先级

由上到下，由外到内，优先级由低到高，一般情况下，是以后加载的为主，特殊情况下可能出现其他情况
标签选择器 < 类选择器 < id选择器 < style属性

代码格式

选择器名称 {
	属性名:属性值1 属性值2 属性值3 ...;
	属性名:属性值;
}

CSS的布局

1. 漂浮

float属性

2. 定位

position属性，其他属性（top，left，right，bottom），如果父元素存在定位属性，则子元素的定位属性是相对于父元素进行定位，如果父元素不存在定位属性，则子元素的定位属性是相对于body元素进行定位。

2.1 absolute

脱离文档流

2.2 relative

不脱离文档流，占着坑

div+CSS布局

1. 使用div元素封装数据，参考结构如下
   

注释

/* */
官方文档：Web 入门
术语表：术语表

FAQ

1. a:visited部分属性不生效（未解决）

添加删除线和调整字体大小未生效

2. float浮动效果文本位置（未解决）

3. 方形图片圆形展示

border-radius: 50%;

参考网站：https://www.w3cschool.cn/article/43016788.html

应用场景

1. HTML表格内字体竖向排列

<td rowspan="4" class="firstcol font-weight" style="color: #FFFFFF;color: #FFFFFF;background-image: linear-gradient(to right, #0056c3, #4cbefa);">调度员值班</td>

.firstcol{
	writing-mode: tb-rl;
}

参考网站：https://blog.csdn.net/weixin_44904239/article/details/122122249

2. 表格铺满整个父容器

<table class="table" border="1" bordercolor="#ffc702">

.table{
	min-height: 100%; 
	width: 100%;
}

参考网站：https://www.it1352.com/2729962.html

3. 两个字和三个字对齐

3.1 全角空格

参考网站：https://blog.csdn.net/wyl_2365/article/details/13289739

3.2 两端对齐

参考网站：http://www.javashuo.com/article/p-teldrktv-dv.html

参考网站：https://www.php.cn/css-tutorial-471811.html

4. 渐变

<td rowspan="5" class="font-weight firstcol" style="color: #FFFFFF;background-image: linear-gradient(to right, #ff8712, #ffc801);">领导值班</td>

参考网站：https://www.w3school.com.cn/css/css3_gradients.asp