CSS
什么是css
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 中
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
html 在一个网页中负责的事情是一个页面的结构
css(层叠样式表) 在一个网页中主要负责了页面的数据样式。
行内样式
<!--第一种使用font-->
<h3>
<font color="green">老王头01</font>
</h3>
<h3>
<font color="green">老王头02</font>
</h3>
<h3>
<font color="green">老王头03</font>
</h3>
<!--第二种使用style-->
<h3 style="color: #00FF00;">老妹儿04</h3>
<h3 style="color: #00FF00;">老妹儿05</h3>
<h3 style="color: #00FF00;">老妹儿06</h3>
运行结果
内部样式
<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>css内部样式</title>
<style>
/* 内部样式 */
h3 {
color: #00FF00;
}
</style>
</head>
<body>
<h3>老王头01</h3>
<h3>老王头02</h3>
<h3>老王头03</h3>
</body>
运行结果
外部样式
<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>css内部样式</title>
<!--使用外部链接，创建一个css文件，并在内部设置样式-->
<link rel="stylesheet" href="./01.css">
</head>
<body>
<h3>老王头01</h3>
<h3>老王头02</h3>
<h3>老王头03</h3>
</body>
h3{
color=red
}
运行结果为
标签选择器
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
<head>
<style>
p{
color: #3f93d7;
font-size: 66px;
}
</style>
</head>
<body>
<p>天行健</p>
<p>君子</p>
<p>以自强不息</p>
</body>
运行结果为
类选择器
<!--
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
-->
<style>
p {
color: #3f93d7;
font-size: 66px;
}
<!--设置a类型样式-->
.a {
font-size: 33px;
color: crimson;
}
</style>
</head>
<body>
<!--使用a类型样式-->
<p class="a">天行健</p>
<p>君子</p>
<p class="a">以自强不息</p>
</body>
运行结果为
ID选择器
<!--
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="ll":
-->
<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>
p {
color: #5b9e4c;
font-size: 66px;
}
.a{
font-size: 33px;
color: #4054ea;
}
#ll{
color: #be82d1;
}
</style>
</head>
<body>
<p class="a">天行健</p>
<p class="a" id="ll">君子</p>
<p>以自强不息</p>
</body>
运行结果为
后代选择器
<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>
<!-- ul列表中的a标签的样式-->
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>
运行结果
子代选择器
<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>
<!--
ul相当于父代，a、li标签相当于自子代，而li中的a标签相当于是孙子代
-->
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>
直接相邻选择器
<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>
<!-如名字，按到从上到下执行的顺序，老三生效-->
#two+p {
color: #0df005;
background-color: #5B5BEB;
font-size: 66px;
}
</style>
</head>
<body>
<span>
<p>老大</p>
<p id="two">老二</p>
<p>老三</p>
<p>老四</p>
<p>老五</p>
</span>
</body>
运行结果
间接相邻选择器
<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>
<!--从id选择器往后的p标签，全部生效-->
#two~p {
color: #0df005;
background-color: #5B5BEB;
font-size: 66px;
}
</style>
</head>
<body>
<span>
<p>老大</p>
<p id="two">老二</p>
<p>老三</p>
<p>老四</p>
<p>老五</p>
</span>
</body>
运行结果为
属性选择器
<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]{
width: 300px;
height: 100px;
border-width: 10px;
border-radius: 15%;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号" />
<input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>
运行结果为
公共选择器
<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: 50px;
}
[type=text] {
border: 10px solid #123456;
}
[type=password] {
border: 10px solid #654321;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号" />
<input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>
运行结果为
通配符选择器
<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: #FF007F;
background-color: #DBDCDB;
font-size: 66px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="">超链接</a>
</li>
</ul>
<p>🍐</p>
<span>🍐</span>
</body>
运行结果为
伪类选择器
<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>
/*
什么是伪类？
伪类用于定义元素的特殊状态。
*/
a {
text-decoration: none;
font-size: 66px;
}
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
img:hover {
width: 600px;
cursor: pointer;
box-shadow: 30px 30px 30px 30px #FF0000;
}
/*
鼠标悬浮样式
这里我们要用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://www.baidu.com">百度</a>
<img src="./img/2.png" width="300px" title="点击进入婚礼">
<a href="https://www.runoob.com">菜鸟教程</a>
</body>
运行结果
伪对象选择器
<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>
/*
伪对象选择器
伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号来定义。
伪类和伪对象（元素）的区别
伪类一般反映无法在CSS 中轻松或者可靠检测到的某个元素的状态或者属性；
伪元素表示DOM 外部的某种文档结构
常用伪元素
1.E:before/E::before
2.E:after/E::after
伪元素是在元素内容的前面或后面定义的，必须要添加content:""这个属性，不然伪元素无法定义成功。
p::after{ content:"在P 标签元素内容前加了内容"; color: red;}
*/
ul > li{
list-style: none;
}
input:checked+span{
background-color: #00FF00;
}
input:checked+span::after{
background-color: #FF0000;
content: '我结婚了';
}
</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>
运行结果
扫一扫
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
