一、css的引入方式
1、行内样式
是通过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>
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: red;font-size: 12px">这是我的第一个css文件</h1>
</body>
</html>
2、内嵌样式
是通过style标签实现的
style标签严格来说要写在head里面
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!-- 内嵌样式 -->
<!-- 严格来说要放在head里面 -->
<style type="text/css">
h1{
color: blue;
font-size: 15px;
}
</style>
</head>
<body>
<h1>这是我的第一个css文件</h1>
</body>
</html>
3、外链样式
通过link标签实现
link标签要写在head里面
href要引入地址
<!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>外链样式</title>
<!-- stylesheet该单词意思是样式表 -->
<link rel="stylesheet" type="text/css" href="D:\qianduan.css\1.css\层叠外链.css">
</head>
<body>
<!-- 外链样式 -->
<h1 >这是我的第一个css文件</h1>
</body>
</html>
4、导入样式
通过@import url(“此处填写地址”)实现
@import url(“此处填写地址”)要写在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">
@import url("1.css\层叠外链.css")
</style>
</head>
<body>
<!-- 导入样式 -->
<h1 >这是我的第一个css文件</h1>
</body>
</html>
5、样式优先级
就近原则,距离修饰的标签越近优先级越高
二、选择器
1、基本选择器
- a、标签选择器(根据标签的名称获取)
<!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> 选择器</title>
<style type="text/css">
div{
color: aqua;
}
</style>
</head>
<body>
<div id="one" class="two">这是第一个div</div>
<div>这是第一个div</div>
<div>这是第一个div</div>
<div>这是第一个div</div>
</body>
</html>
- b、ID选择器(获取的是ID属性)
注:one前面要加#号
<!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> 选择器</title>
<style type="text/css">
#one{
color: beige;
}
</style>
</head>
<body>
<div id="one" class="two">这是第一个div</div>
<div>这是第一个div</div>
<div>这是第一个div</div>
<div>这是第一个div</div>
</body>
</html>
- c、类选择器(class属性)
two前面要加小数点
<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> 选择器</title>
<style type="text/css">
.two{
color: #0a0ae2;
}
</style>
</head>
<body>
<div id="one" class="two">这是第一个div</div>
<div>这是第一个div</div>
<div>这是第一个div</div>
<div>这是第一个div</div>
</body>
</html>
- d、通用选择器(通配符)
不要忘了这个符号:*
<!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> 选择器</title>
<style type="text/css">
*{
color: darkmagenta;
}
</style>
</head>
<body>
<div id="one" class="two">这是第一个div</div>
<div>这是第一个div</div>
<div>这是第一个div</div>
<div>这是第一个div</div>
</body>
</html>
2、包含选择器
- 子代选择器(获取的是某个标签的第一级子标签)
<!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>选择器</title>
<style type="text/css">
/*子代选择器*/
div.list>ul{
border:1px solid red;
}
</style>
</head>
<body>
<div class="one">这是第一个div</div>
<div class="two">这是第一个div</div>
<p id="first">这是第一段落标签</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
</ul>
</div>
</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>选择器</title>
<style type="text/css">
/*后代选择器*/
div.list li{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="one">这是第一个div</div>
<div class="two">这是第一个div</div>
<p id="first">这是第一段落标签</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
</ul>
</div>
</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>选择器</title>
<style type="text/css">
/*逗号选择器*/
.one,.two,#first{
color: darkorange;
width: 100px;
height:200px ;
background: dimgray;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="one">这是第一个div</div>
<div class="two">这是第一个div</div>
<p id="first">这是第一段落标签</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
</ul>
</div>
</body>
</html>
3、属性选择器
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*选择选中的额标签中存在的某个属性*/
div[title]{
border: 1px solid black;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性值包含某个值*/
input[type *="e"]{
background: blue;
}
/*属性值以某个值开头*/
input[type ^="e"]{
background: green;
}
/*属性值以某个值结尾*/
input[type $="rl"]{
background: red;
}
/*+表示下一个标签*/
.msg +p{
border: 1px solid green;
}
/*属性等于某个属性值*/
[title="这是一个标题"]{
color: red;
}
</style>
</head>
<body>
<div class="container">
这是一个div容器
</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="李四">
<input type="url" name="" id="" value="王五">
<hr>
<div class="msg">我喜欢打游戏</div>
<p id="msg1" ">这是一个段落</p>
</body>
</html>
4、伪类选择器
- 同一个标签,根据不同的状态,有不同的样式,这就叫做伪类,通过:进行设置不同的样式(实现伪类选择器)
<!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>伪类选择器</title>
<style type="text/css">
/*点击 之前 的颜色 */
a:link{
color: aqua;
}
/*点击 之后 的颜色*/
a:visited{
color: pink;
}
/* 悬停 时的颜色*/
a:hover{
color: darkorchid;
}
/* 长按 时的颜色*/
a:active{
color: mediumseagreen;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点我</a>
</body>
</html>
5、伪元素选择器
对content里面的内容设置颜色
<!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">
p::before{
content: "zhangsan";
color: aquamarine;
}
p::after{
content: "lisi";
color: blueviolet;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>