CSS基础

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS样式表

默认最后优先 行内样式优先级最高

• 行内样式

<h2 style="color: lightpink;">ax</h2>

• 内嵌样式

<style type="text/css">
			h1{
				color: aquamarine;
			}
		</style>
		<h1>123</h1>

• 外链样式

<link rel=stylesheet type="text/css" href="css/my.css">
		<h3></h3>

二、CSS选择器

1.通配符选择器 所有元素

*{
		background-color: lavenderblush;
		}

2. tag标签选择器

h1{
			color: chartreuse;	
			}

3. 类选择器 用于选择相同类名

.li_{
				color: black;			   
			}

4.id选择器 用于选择页面唯一元素

#li_3{
			color: cadetblue;}

		/* !important>行内>id>class>标签>通配符 */
		/* !important 最高的 */

优先级：
!important>行内>id>class>标签>通配符

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

5. 后代

.box1 .li_{
	background-color: azure;
}

6. 【>】直接子集

7. 【，】群组

该处使用的url网络请求的数据。

---

三、css长度

<style type="text/css">
			.box1{
				/* 1。像素单位 绝对单位 */
				width: auto;
				height: 100px;
				background-color: #5F9EA0;
				font-size: 20px;
			}
			.box2{
				/* 2.相对父节点的百分比 */
				width: 30%;
				height: 5cm;
				background-color: #FFF0F5;
			}
			/* 3.相对浏览器视口的百分比 */
			.box3{
				width: 10vw;
				height: 10vh;
				background-color: cornflowerblue;
			}
			/* 4.相对于父节点的字体大小 */
			.box4{
				width: 10em;
				height: 10em;
				background-color: coral;
				
			}
			/* 5.根结点的 */
			.box5{
				width: 10rem;
				height: 10rem;
				background-color: grey;
			}
		</style>

四、CSS颜色

<h1 style="color: #5F9EA0" >字体颜色</h1>
		<h1 style="background-color: #7FFF00" >字体背景</h1>
		<h1 style="font-size: 70px" >字体大小</h1>
		<h1 style="font-family: 30px" >字体类型</h1>
		<h1 style="font-style: italic" >字体倾斜</h1>
		<h1 style="font-weight: 100">字体粗细</h1>
		<h1 style="text-decoration: underline" ;>字体下划线</h1>
		<h1 style="text-decoration: overline" ;>字体上划线</h1>
		<h1 style="text-decoration: line-through" ;>字体删除线</h1>
		<h1 style="text-align: right" ;>字体对齐右</h1>
		<h1 style="font-size:12px;line-height: 4opx; left" ;>行高</h1>
		<h1 style="text-indent: 60px;line-height: 4opx; left" ;>首行缩进</h1>
		<h1 style="letter-spacing: 20px;" ;>字符间距</h1>
		<h1 style="word-spacing: 20px;" ;>单词间距</h1>
		<h1 style="text-transform: lowercase;" ;>大小写转换</h1>
		
		<div class="box2" style="overflow: hidden;">

五、CSS文本

<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				background-color: #6495ED;
				/* 空白处理 */
				white-space: nowrap;
				/* 溢出处理 */
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: #FF7F04;
				font-size: 20px;
				/* 两端对齐 */
				text-align: justify;
				/* 最后一行两端对齐 */
				text-align-last:justify ;
			}
			.box3{
				width: 800px;
				height: 800px;
				background-color: #FFF0F5;
				font-size: 20px;
				/* 垂直对齐 */
				vertical-align: middle;
			}
			.box3 img{
				float: left;
			}
			.box3 span{
				/* 基线对齐 */
				vertical-align: baseline;
			}