一、什么是css?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 中
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
html 在一个网页中负责的事情是一个页面的结构
css(层叠样式表) 在一个网页中主要负责了页面的数据样式。
数据样式一般有行内标签、内部样式与外部样式
二、选择器
1、标签选择器
对所有该标签均起作用
<!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" type="text/css" href="/css_外部样式.css"/>
<style>
/*内部样式*/
/* 标签选择器 ,对所有该标签均起作用*/
h2{
color: blue;
}
</style>
</head>
<body>
<h2>第二标题</h2>
<h2>第二标题2</h2>
</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>Document</title>
<link rel="stylesheet" type="text/css" href="/css_外部样式.css"/>
<style>
/* 类选择器 优先级高于标签选择器 会覆盖掉标签选择器的内容,但是类内没有的依旧按标签来*/
.a001{
color: rgb(86, 20, 20);
font-size: 33px;
}
/* 标签选择器 ,对所有该标签均起作用*/
p{
color: rgb(192, 161, 161);
font-size: 66px;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<p>北风卷地白草折</p>
<p>胡天八月即飞雪</p>
<p class="a001">忽如一夜春风来</p>
<p class="a001">千树万树梨花开</p>
</body>
</html>
3、id选择器
优先级更高,且唯一
<!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" type="text/css" href="/css_外部样式.css"/>
<style>
/* 类选择器 优先级高于标签选择器 会覆盖掉标签选择器的内容,但是类内没有的依旧按标签来*/
.a001{
color: rgb(86, 20, 20);
font-size: 33px;
}
/* id选择器 */
#san{
color: rgb(194, 19, 19);
}
#hu{
color: rgb(229, 120, 120);
}
/* 标签选择器 ,对所有该标签均起作用*/
p{
color: rgb(192, 161, 161);
font-size: 66px;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<p>北风卷地白草折</p>
<p>胡天八月即飞雪</p>
<p class="a001">忽如一夜春风来</p>
<p class="a001">千树万树梨花开</p>
<p class="a001" id="san">散入珠帘湿罗幕</p>
<p class="a001" id="hu">狐裘不暖锦衾薄</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>Document</title>
<style>
/* 选择的是ul中所有的a标签 */
ul a{
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="">aaa</a>
<ul>
<a href="">bbb</a>
<a href="">ccc</a>
<li><span><a href="">ddd</a></span></li>
<li><span><a href="">eee</a></span></li>
</ul>
</body>
</html>
5、子选择器
选择的是子内容中所含有的标签,即直接下级,而不选择孙,即间接下级
<!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>
/* 选择的是ul下直接连接的a标签,不包括更下级中的a标签 */
ul>a{
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="">aaa</a>
<ul>
<a href="">bbb</a>
<a href="">ccc</a>
<li><span><a href="">ddd</a></span></li>
<li><span><a href="">eee</a></span></li>
</ul>
</body>
</html>
6、直接相邻选择器
从上向下直接相邻的
<!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>
/* 直接相邻选择器,从上向下直接相邻的 */
#two+p{
color: rgb(194, 185, 212);
background-color: blue;
}
</style>
</head>
<body>
<span>
<p>1</p>
<p id="two">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</span>
</body>
</html>
6、间接相邻选择器
从上向下的所有同一级
<!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>
/* 间接相邻选择器,从选中之后所有的 */
#two~p{
color: rgb(194, 185, 212);
background-color: blue;
}
</style>
</head>
<body>
<span>
<p>1</p>
<p id="two">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</span>
</body>
</html>
7、属性选择器
根据标签的属性来选择
<!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>
/* 属性选择器,根据标签的属性来选择 */
input[type=text]{
width: 100px;
height: 100px;
border: 10px solid;
border-radius: 10%;
}
</style>
</head>
<body>
<form action="">
<input type="text" name="" id="" value="" placeholder="请输入账号">
<input type="password" name="" id="" value="" placeholder="请输入密码">
</form>
</body>
</html>
8、公共选择器
可以使相同的部分可以不用重复写
<!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],[type=password]{
width: 100px;
height: 100px;
}
[type=text]{
border: 10px solid rgb(56, 9, 242);
border-radius: 10%;
}
[type=password]{
border: 10px solid rgb(239, 11, 11);
border-radius: 10%;
}
</style>
</head>
<body>
<form action="">
<input type="text" name="" id="" value="" placeholder="请输入账号">
<input type="password" name="" id="" value="" placeholder="请输入密码">
</form>
</body>
</html>
9、通配符选择器
全局样式
<!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>
/* 通配符选择器,全局 */
*{
color: rgb(31, 209, 46);
font-size: 66px;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
</ul>
<a href="">333</a>
<p>444</p>
<span>555</span>
</body>
</html>
10、伪类选择器
伪类用于定义元素的特殊状态。
<!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>
/* 伪类选择器
什么是伪类?
伪类用于定义元素的特殊状态。
*/
a{
text-decoration: none;
font-size: 66px;
}
/*
未访问前
*/
a:link{
color: blue;
}
/* 已访问后 包含之前访问过 */
a:visited{
color: #000;
}
/* 悬停 */
a:hover{
color: rgb(194, 127, 28);
}
/* 已选中但还未访问 */
a:active{
color: blueviolet;
}
img:hover{
width: 300px;
cursor: pointer;
box-shadow: 100px 100px 100px 100px #ea3838;
}
/*
鼠标悬浮样式
这里我们要用cursor属性
cursor 属性规定要显示的光标的类型(形状)。
1、default 默认光标(通常是一个箭头)
2、auto 默认。浏览器设置的光标。
3、crosshair光标呈现为十字线。
4、pointer 光标呈现为指示链接的指针(-只手)
5、move 此光标指示某对象可被移动。
6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。
7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。
8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。
9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。
10、se-resize此光标指示矩形框的边缘可被向 下及向右移动(南东)。
11、sw-resize此光标指示矩形框的边缘可被向 下及向左移动(南西)。
12、s-resize 此光标指示矩形框的边缘可被向下移动(北西)。
13、w-resize 此光标指示矩形框的边缘可被向左移动(西)。
14、text 此光标指示文本。
15、wait 此光标指示程序正忙(通常是一只表或沙漏)。
16、help 此光标指示可用的帮助(通常是一个问号或-个气球)。
*/
img:active{
border-radius: 50%;
}
</style>
</head>
<body>
<a href="https://gitee.com/jiayinqijian/j357/blob/master/h5/css/14-css%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8.html">gitee</a>
<img src="/1 copy.png" alt="" width="200px" title="12345">
<a href="https://www.baidu.com/">baidu</a>
</body>
</html>
11、伪对象选择器
伪对象选择器
伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上伪对象应该用两个冒号来定义。
伪类和伪对象(元素)的区别
伪类一般反映无法在CSS 中轻松或者可靠检测到的某个元素的状态或者属性;
伪元素表示DOM 外部的某种文档结构
常用伪元素
1.E:before/E::before
2.E:after/E::after
伪元素是在元素内容的前面或后面定义的,必须要添加content:””这个属性,不然伪元素无法定义成功。
p::after{ content:"在P 标签元素内容前加了内容"; color: red;}
<!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>
/*
伪对象选择器
伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上伪对象应该用两个冒号来定义。
伪类和伪对象(元素)的区别
伪类一般反映无法在CSS 中轻松或者可靠检测到的某个元素的状态或者属性;
伪元素表示DOM 外部的某种文档结构
常用伪元素
1.E:before/E::before
2.E:after/E::after
伪元素是在元素内容的前面或后面定义的,必须要添加content:””这个属性,不然伪元素无法定义成功。
p::after{ content:"在P 标签元素内容前加了内容"; color: red;}
*/
input:checked+span {
background-color: #00FF00;
}
input:checked+span::after {
background-color: #FF0000;
content: '我结婚了';
}
input:checked+span::before {
background-color: #5100ff;
content: '我结婚了';
}
ul>li{
list-style: none;
}
</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>你过来呀</legend>
<ul>
<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>
</body>
</html>