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
:绝对定位,他是相对于它的父元素的位置进行偏移的,也就是相对于父元素进行相对偏移