二、CSS是什么
2022-5-9
-
CSS 指层叠样式表 (Cascading Style Sheets)
-
样式定义如何显示 HTML 元素
-
样式通常存储在样式表中
-
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
-
外部样式表可以极大提高工作效率
-
外部样式表通常存储在 CSS 文件中
-
多个样式定义可层叠为一个
1、CSS 的 id 选择器与class选择器
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>
<font color="red">桃李不言</font>
</h3>
<h3>
<font color="red">下自成蹊</font>
</h3>
<h3>
<font color="red">作业正在做</font>
</h3>
</body>
</html>
这里的是属性
css中书写方式方法:
<h3 style=" color:#00FF00 ;">桃李不言</h3>
<h3 style=" color:#00FF00 ;">下自成蹊</h3>
<h3 style=" color:#00FF00 ;">桃李不言</h3>
区别在于:红色的用的是属性,绿色的用的是CSS样式,称之为行内样式(两个是写在一起的)
2、CSS内部样式
书写方式方法:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>css内部样式</title>
<style>
h3{
color: #00ff00;
}
</style>
</head>
<body>
<h3>桃李不言,下自成蹊</h3>
<h3>桃李不言,下自成蹊</h3>
<h3>桃李不言,下自成蹊</h3>
</body>
</html>
以 属性 加 值 的方式去写,注意 是在 head(头部)中写它的h3 的属性
3、CSS外部样式
首先,外部样式要写在外面(相当于重写一个文件,但是使用时要将两个文件关联起来)
做关联的外部样式,是 .css 的后缀
书写方式方法:
外部样式:
/*外部样式*/
h3 {
color: #00ff00;
}
关联:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>css内部样式</title>
<link rel="stylesheet" href="h1.css\03.css">
</head>
<body>
<h3>桃李不言,下自成蹊</h3>
</body>
</html>
使用 link 关联 href 写关联外部样式的路径
这样就可以直接输出 h3 。
4、CSS标签选择器
在 head(头部)中建立一个style 选择是 p 标签,与上面的样式差不多,使用花括号 里面写属性与值
书写的方式方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
p{
color: #eb1cbe;
font-size: 80px;
}
</style>
</head>
<body>
<p>桃李不言</p>
<p>下自成蹊</p>
</body>
</html>
这里的 使用了 font-size 修改字体的大小
字体单位选择的是 em ,但是还有很多单位 例如:px与rem
px 是像素
em 是相对父元素的字体大小,em是相对单位,没有一个固定的度量值。
rem 是标准的字体大小,根据标准字体大小来调整的。
5、CSS类选择器
类选择器可以被重复使用的
如果说,只想让某行起作用或者某行换一个字体大小、颜色 ,就可以使用类选择器。
书写方式方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
p{
color: #eb1cbe;
font-size: 80px;
}
.bzd{
font-size: 50px;
color: yellowgreen
}
</style>
</head>
<body>
<p class="bzd">桃李不言</p>
<p class="bzd">下自成蹊</p>
<p>++++++++++++此处做明显区分使用++++++++++++</p>
</body>
</html>
自我理解:在 style 里面做了另一个类,这个类(使用 .XXXX)做完以后在body(身体)中,p标签的后面跟上class(类)的名字即可
Q:为什么类选择器起作用了?
A:因为代码从上向下,从左往右执行,它会把上一个覆盖掉。重复的内容会覆盖,如果其中一个因素改变了,两个不相同他就不会变(个人理解)
6、CSSID选择器
在 style 中使用 # 加 自己的关键字,使用花括号,里面写属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
p {
color: #eb1cbe;
font-size: 80px;
}
.bzd {
font-size: 50px;
color: yellowgreen
}
#yrz {
color: #2bfb;
}
</style>
</head>
<body>
<p class="bzd">桃李不言</p>
<p class="bzd" id="yrz">下自成蹊</p>
<p>++++++++++++此处做明显区分使用++++++++++++</p>
</body>
</html>
跟面前笔记中 a 标签 锚点(页面导航)差不多
在body(身体)中写 id加关键字就可以使用
注意:id只能唯一的,不能重复,可以为某个元素设置特有的样式
7、CSS后代选择器
使用的是ul无序列表的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
ul a{
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="">00</a>
<ul>
<a href="">11</a>
<a href="">22</a>
<li><span><a href="">33</a></span></li>
<li><span><a href="">44</a></span></li>
</ul>
<a href="">55</a>
</body>
</html>
Q:为什么输出的是:
A:因为11 22 33 44 都是写进在了 ul 里面的,注意的是 11 22 在一行是因为 他们是行级元素,33 44 是因为 他们是包含在 ul 标签 里的所有都起作用(个人理解)
8、CSS子选择器
子选择器与后代选择器的区别不大,只是在 ul 后边加了一个大于号
书写:
ul>a{
text-decoration: line-through;
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
ul>a{
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="">00</a>
<ul>
<a href="">11</a>
<a href="">22</a>
<li><span><a href="">33</a></span></li>
<li><span><a href="">44</a></span></li>
</ul>
<a href="">55</a>
</body>
</html>
输出结果为:
Q:为什么 33 44 不起作用?
A:因为它是子选择器,ul里面有两个a标签,两个li标签,li里面又有一个a标签 , 对于ul来讲,li是下级 那 ul 的间接性下级基于是 a ,a标签相当于是ul的孙子,ul只能影响到下级也就是 ul里面的 a 标签 对于li里面的a标签是影响不到的,所以33 44 不起作用
9、CSS直接相邻选择器
使用的是 # 加 two+p 的方式,前面的只是一个定位让你去找相邻的那个单位
书写方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>直接相邻选择</title>
<style>
#two+p{
color: yellowgreen;
}
</style>
</head>
<body>
<span>
<p>第一</p>
<p id="two">第二</p>
<p>第三</p>
<p>第四</p>
<p>第五</p>
</span>
</body>
</html>
background-color: crimson;
这个是背后景色的代码
这里面只有 第三 会起作用,原因是 这个是直接相邻选择器,它会直接选择two相邻的单位,让它起作用,代码的规律,从上往下执行。
10、CSS间接相邻选择器
个人理解:除了自身与自身以上的代码都还起作用。
书写格式就是加了一个 波浪线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>间接相邻选择</title>
<style>
#two~p{
color: yellowgreen;
background-color: crimson;
}
</style>
</head>
<body>
<span>
<p>第一</p>
<p id="two">第二</p>
<p>第三</p>
<p>第四</p>
<p>第五</p>
</span>
</body>
</html>
11、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>属性选择器</title>
<style>
input[type=text]{
width: 300px;
height: 200px;
border-width: 30px;
border-radius: 15%;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号">
<input type="password" name="" id="" value="" placeholder="请输入密码">
</body>
</html>
12、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>公共选择器</title>
<style>
[type=text],
[type=password] {
width: 300px;
height: 200px;
}
[type=text] {
border: 30px solid #d7d402;
}
[type=password] {
border: 30px solid #6202d7;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号">
<input type="password" name="" id="" value="" placeholder="请输入密码">
</body>
</html>
这里的输出结果是:
因为他们两个 text 与 passwor 共同使用一个公共的选择器,所以表格的大小一致
但是又分开使用了自己的选择器,导致各自有各自边框的颜色
13、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>通配符选择器</title>
<style>
*{
color: violet;
background-color: rgba(86, 84, 84, 0.438);
font-size: 80px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="">超链接</a>
</li>
</ul>
<p>桃李不言</p>
<span>下自成蹊</span>
</body>
</html>
14、CSS伪类选择器
Q:是什么伪类选择器?
A:伪类选择器用于定义元素的特殊状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a {
text-decoration: none;
font-size: 66px;
}
/*未访问时的颜色*/
a:link {
color: yellowgreen;
}
/*以访问的颜色*/
a:visited {
color: tomato;
}
/*鼠标悬停链接*/
a:hover {
color: rgb(2, 2, 2);
}
/*已选择链接*/
a:active {
color: rgb(43, 0, 201);
}
/*鼠标经过图片以后会方大*/
img:hover {
width: 600px;
/*鼠标经过图片变成小手*/
cursor: pointer;
/*阴影的颜色*/
box-shadow:30px 30px 50px 50px gold;
}
</style>
</head>
<body>
<a href="http://www.deskcity.org/download/172019-0-1680x1050.html">我是EVA</a>
<img src="h1.css\QQ截图20220509093128.png" width="300px" title="我是图片">
<a href="http://www.deskcity.org/download/172019-0-1680x1050.html">我是B站官网</a>
</body>
</html>
就是标记某种状态,没有访问过是一个颜色,访问之后是一个颜色,鼠标悬停一个颜色,点击链接一个颜色
鼠标悬停各种样式:
鼠标悬浮样式 这里我们要用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此光标指示可用的帮助(通常是一个问号或-个气球)。
15、CSS伪对象选择器
伪对象选择器:
伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上伪对象应该用两个冒号来定义。伪类和伪对象(元素)的区别
伪类一般反映无法在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">
<title>伪对象选择器</title>
<style>
ul>li{
list-style:none;
}
input:checked+span{
background-color: #00ff00;
}
</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="0"><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group" value="0"><span>绿色</span></label></li>
</ul>
</fieldset>
</form>
</body>
</html>
写了content:
<style>
ul>li{
list-style:none;
}
input:checked+span{
background-color: #00ff00;
}
input:checked+span::after{
background-color: blue;
content:"为对象选择器";
}
</style>
就会变成点击设计的按钮后,会在后面出现 content 里面的内容
例如我这里写的输出后的样子:
背景色是给了content 内容的。
想让它在前面的话就把 after 改为 before
在这里→
改为→
输出结果: