CSS总结
CSS简介
CSS全称叫做层叠样式表，属于前端三剑客之一。是控制网页样式的重要元素
CSS引入问题
CSS分为：外部样式表、内部样式表、内联样式
外部样式
外部样式就是在其他目录下写的css文件，引入到当前html页面上来
先建立一个css文件，叫做style.css
body{
background: #5e6074;
margin: 0;
padding: 0;
}
#p1{
font-family: "JetBrains Mono Light";
color: blue;
}
在具体的页面上引入这个css文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="p1">chy</p>
</body>
</html>
通常我们都是将css文件放入一个指定的目录下，方便使用，层次更加清晰，复用性更强
内部样式
内部样式就是在html内部<style></style>标签范围内写css代码，只对当前页面有效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>
#p1{
font-family: 华文楷体;
}
</style>
</head>
<body>
<p id="p1">重庆交通大学</p>
</body>
</html>
内联样式
内联样式是直接在标签上写具体的样式，如下：
<p style="color: #00acc1; font-size: larger">重庆交通大学</p>
级联的优先级
谁离这个元素最近，谁就生效，并且针对不同的样式属性，是可以叠加的
CSS选择器
基础选择器
id选择器
用法：
#p1{
font-family: 华文楷体;
}
上述css样式就是将id 为 p1的标签的字体类型改变为 华文楷体
<p id="p1">重庆交通大学</p>
就可以看到 重庆交通大学 这几个字的字体变化了
类选择器
.container{
text-align: center;
float: right;
}
.font{
font-family: 华文楷体;
}
.color{
color: #dc523d;
}
.otherColor{
color: blue;
}
<div class="container">
<p class="color">颜色变红了，而且向右浮动了</p>
<p class="otherColor">颜色变蓝了，而且向右浮动了</p>
<p class="color font">字体颜色变红且字体类型改变，而且向右浮动了</p>
</div>
class选择器的应用非常普遍，因为它可以拥有很多个class
标签选择器
就是对某一类型的标签起作用
p{
color: yellow;
}
这个的意思就是对所有的p标签让他的颜色变成黄色
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
可以看到p1、p2变成黄色了
复合选择器
后代选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*就是选择到class="box"的标签后面的所有p标签*/
.box p{
color: red;
font-size: larger;
}
</style>
</head>
<body>
<div class="box">
<p>会变色哦</p>
<div>
<p>我也是会变色的哦</p>
</div>
</div>
<div>
<p>我是不会变色的</p>
</div>
</body>
</html>
同时后代选择器还可以隔开好几代，如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box ul .ss p{
color: blue;
}
</style>
</head>
<body>
<div class="box">
<ul>
<span class="ss">
<p>我被选择到了</p>
</span>
</ul>
</div>
</body>
</html>
关系选择器
子代选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*选择class = "box"的子代p标签*/
.box>p{
color: blue;
}
</style>
</head>
<body>
<div class="box">
<p>我被选择到了</p>
<div>
<p>我是不会被选择到</p>
</div>
<p>我被选择到了</p>
</div>
</body>
</html>
相邻兄弟选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*选择与class = "box"相邻的p标签*/
.box+p{
color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<p>我将会被选择到</p>
</body>
</html>
序号选择器
.box p:nth-child(2){
color: yellow;
}
选择class = "box"的第二个p标签
<div class="box">
<p>p1</p>
<p>p2</p>
<span>span</span>
<p>p3</p>
</div>
但是，当把2换成3的时候会发现 p3并没有变颜色，这是因为有span阻挡了，可以换成如下表达式：
.box p:nth-of-type(3){
color: yellow;
}
这样第三个就会变色了
注意：nth-of-type()里面还可以是一个表达式，如果为an+b的形式，表示从b开始的每a个选择
然后还有一些常见的选择第一个或者最后一个的语句：
.box p:last-of-type{
color: yellow;
}
.box p:first-of-type{
color: yellow;
}
.box p:last-child{
color: yellow;
}
.box p:first-child{
color: yellow;
}
并集选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span,p{
color: blue;
}
</style>
</head>
<body>
<span>我会变成蓝色</span>
<p>我也会变成蓝色</p>
</body>
</html>
结构伪类选择器
伪类就是用于定于元素的特定状态或者位置的特定表现
比如，用户选择中的文本变色、鼠标移在元素上变色、点击输入框变色等等都是用伪类来实现的，具体如下：
1、选中文本变色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
::selection{
color: blue;
}
</style>
</head>
<body>
<p>
《离骚》是中国战国时代楚辞，作者为楚国人屈原，是楚辞中最著名最出色的作品，
共约2470字，属自传文学与抒情诗。在《离骚》中，屈原自述身世、才华与志向，
抨击他指称为“小人”的人诽谤中伤，抒发因被君王疏远而感到悲愤，申明择善固执，
宁死不悔，坚持初衷，绝不同流合污。 维基百科
</p>
</body>
</html>
2、鼠标放在某个元素上变色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a:hover{
color: red;
}
button:hover{
color: #00acc1;
}
</style>
</head>
<body>
<a href="#">把鼠标放上来试试！</a>
<button>把鼠标放上来试试！</button>
</body>
</html>
3、点击某个输入框变色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input:focus{
background-color: blue;
color: red;
border-radius: 5px;
}
</style>
</head>
<body>
<input type="text" placeholder="进来点一下试试">
</body>
</html>
关于选择器的权重
id选择器 > 类选择器 >标签选择器
文本
文本的属性大致能够分为：color、font、list、text、line等等这些开头的
color
.container{
color: #00b0ff;
}
<div class="container">
<p>重庆交通大学科学城校区</p>
</div>
font
.container{
font-size: 20px;/*设置字体的大小*/
font-weight: 700;/*加粗字体*/
font-style: italic;/*设置字体倾斜 换成normal就是取消倾斜*/
font-family: "JetBrains Mono", "华文楷体";/*设置字体,英文用前面的，汉字用后面的*/
}
<div class="container">
<p>重庆交通大学科学城校区 this is cqjtu university</p>
</div>
text
.container2{
text-decoration: underline blue;/*设置蓝色的下划线 line-through是删除线*/
text-indent: 3em ;/*缩进3个字符(em是字符单位)*/
text-align: center;/*设置文本居中*/
}
<div class="container2">
<p>重庆交通大学科学城校区 this is cqjtu university</p>
<p>重庆交通大学科学城校区 this is cqjtu university</p>
<p>重庆交通大学科学城校区 this is cqjtu university</p>
</div>
line
.container3{
line-height: 50px;/*设置行高 可以写成倍数的形式 1.5 或者百分数的形式 150%*/
}
<div class="container3">
<p>重庆交通大学科学城校区 this is cqjtu university</p>
<p>重庆交通大学科学城校区 this is cqjtu university</p>
<p>重庆交通大学科学城校区 this is cqjtu university</p>
</div>
盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
marign：外边距，也就是盒子和外界的边距
padding: 内边距，也就是盒子边框和盒子里面的内容之间的距离
所以在盒子模型下，一个元素的实际占地宽度 = 左右外边距+左右边框距+左右内边距+设定的width。而对应的元素实际占地高度 = 上下外边距+上下边框+上下的内边距+设定的height
外边距的基本使用：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
#center{
background-color: pink;
width: 10rem;
height: 10rem;
border: 5px solid red;
margin-top: 250px;/*距离顶部为250px*/
margin-left: 600px;/*距离左边为600px（当然也可以使用auto实现水平居中）*/
}
</style>
</head>
<body>
<!-- 让这个正方形居中 -->
<div id="center">
</div>
</body>
</html>
内边距的基本使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
#margin{
width: 200px;
height: 200px;
background-color: pink;
padding:30px;
}
#padding{
width: 50px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div id="margin">
<!-- 可以看到里面黑色的这个在粉色的这个大框里面位置变化了 -->
<div id="padding">
</div>
</div>
</body>
</html>
边框的使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
.example-1 {
border: 1px dotted black;
/* 上下左右都相同 */
}
.example-2 {
border-bottom: 1px solid blue;
/* 只设置底部边框 */
}
.example-3 {
border: 1px solid grey;
border-radius: 15px;
/* 边框圆角 */
}
.example-4 {
border-left: 5px solid purple;
}
</style>
</head>
<body>
<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>
</body>
</html>
浮动
浮动就是将元素进行水平的左移或者右移，直到碰到某个圆的边框为止，使用浮动能够使得文本与图像的内容排列更加整齐
浮动的使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
.float{
float: right;
width: 200px;
height: 200px;
background-color: blue;
margin: 100px;
}
</style>
</head>
<body>
<!-- 可以看到两个方框往右边移动了，但是由于设置的有边框，所以不会靠到最右边 -->
<div class="float"></div>
<div class="float"></div>
</body>
</html>
定位
定位 postion 用来设置元素的位置，分为：静态的static、相对的relative、固定的fixed、绝对的 absolute
注意：只有设定了postion属性，才能设置top、bottom等属性设置它的位置
static:是元素的默认定位方式，从上到下，从左到右依次排列.
relative：相对定位，是相对于它原本静态的位置进行偏移（也就是static时的位置进行偏移）
比如以下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
.float{
float: right;
width: 200px;
height: 200px;
background-color: blue;
margin: 100px;
}
.relative{
position: relative;
top: 2rem;/*向下进行偏移*/
left: 10rem;/*向右边进行偏移*/
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="relative"></div>
</body>
</html>
fixed：固定定位，就相当于固定浏览器的某个位置，即使拖动上下条栏，也不会变化
比如如下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
#fixedBtn{
position: fixed;
top: 600px;
}
</style>
</head>
<body>
<button id="fixedBtn">我在下面</button>
</body>
</html>
absolute：绝对定位，他是相对于它的父元素的位置进行偏移的，也就是相对于父元素进行相对偏移
2184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
