主要作用:修饰各种各样的标签
行内样式表(inline style)
<img width="300" src="/static/images/background.jpg">
<img src="/static/images/background.jpg" style="width: 300px;">
两种等价的写法,由于定义在标签上,我们只能改变一个标签的样式
style里面最好添加单位,因为有多种单位 vh,vm,px,图片的属性在html5里面默认是px,所以可以不用写
如果有不理解的地方,可以上MDN官网进行搜索
我们如果想要把所有的图片换成统一的格式,就需要使用内部样式表
我们需要在head里面,写一个 style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
img {
width: 300px;
height: 200px;
border-radius: 10%;
}
</style>
</head>
<img src="/static/images/background.jpg">
<img src="/static/images/background.jpg">
</body>
</html>
内部样式表配合选择器的一个使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
img {
width: 300px;
height: 200px;
border-radius: 10%;
}
p {
width: 50px;
height: 50px;
background-color: lightgreen;
}
.blue-p {
background-color: lightblue;
}
.big {
width: 70px;
}
</style>
</head>
<img src="/static/images/background.jpg">
<img src="/static/images/background.jpg">
<p class="blue-p">1</p>
<p class="big">2</p>
<p class="blue-p big">3</p>
<p>4</p>
</body>
</html>
额外补充
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 10px;
}
margin-bottom 表示下面预留的距离
并且内部样式表可以分开定义,不一定非要写到一个style里面
好处是定义一个,可以应用到多个标签上
如果想要让样式应用到多个页面就需要使用外部样式表
我们将原先的css样式放入一个css文件,然后动态链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
</head>
<img src="/static/images/background.jpg">
<img src="/static/images/background.jpg">
<p class="blue-p">1</p>
<p class="big">2</p>
<p class="blue-p big">3</p>
<p>4</p>
</body>
</html>
选择器
标签选择器(元素选择器)
额外补充
P标签与div标签的区别,一个自带行间距,一个没有行间距
id选择器
id的好处,同一个页面内的id是不重复的
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 10px;
}
p {
width: 50px;
height: 70px;
background-color: lightgreen;
}
#mydiv {
background-color: lightcoral;
}
类选择器
用的最多的选择器,每个标签都可以定义一个class属性
我们用空格隔开若干个class 属于很多类,这个是与id根本的区别(一般都只能具有唯一的ID)
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 10px;
}
p {
width: 50px;
height: 70px;
background-color: lightgreen;
}
#mydiv {
background-color: lightcoral;
}
.red-tag {
background-color: lightcoral;
}
.big-tag {
width: 150px;
height: 120px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
</head>
<body>
<div class="red-tag big-tag">div 1</div>
<div id="mydiv">div 2</div>
<div class="red-tag">div 3</div>
<div>div 4</div>
<p>p 1</p>
<p id="myp">p 2</p>
<p>p 3</p>
<p>p 4</p>
</body>
</html>
伪类选择器
用于定义特殊状态
.effect:hover {
transform: scale(1.1);
transition: 200ms;
}
#mydiv:hover {
background-color: lightcoral;
transition: 200ms;
}
/* 表示链接没有点击之前的状态 */
a:link {
color: red;
}
/* 点击之后的状态 */
a:visited {
color: green;
}
/* 鼠标悬浮状态 */
a:hover {
color: orange;
}
/* 鼠标点击的状态 */
a:active {
color: purple;
}
聚焦光标所在的元素
位置类的状态选择器
/* 看成一个函数返回一个bool值 ,判断每一个p是不是父节点的第二个儿子 把冒号后面的看作一个状态,遍历每一个p标签,看一下是否满足*/
p:nth-child(3n) {
background-color: lightblue;
}
目标选择器
自动定位到第六个标签
<a href="#myp">我的标签</a>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<p>p 4</p>
<p>p 5</p>
<p id="myp">p 6</p>
<p>p 7</p>
<p>p 8</p>
p:target {
transform: scale(1.2);
color: orange;
transition: 2s;
}
当我们的某个标签被链接到之后,链接后面跟一个#id,如果存在当前id的话,我们就会触发这个状态,也就是说只要这个元素被指向,就会出发这个状态
同级别首先看顺序,一般越具体,权重越高,权重高者优先,权重最高的是行内样式表
也可以用!important 覆盖所有(尚方宝剑)