文章目录
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、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;
}