文章目录
css分类
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/1.css">
<style>
/* 我是内部样式表 */
div {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h1 style="color: red; font-size: 30px;">我是内联样式表</h1>
<div>我是内部样式表</div>
<h2>我是外部样式表</h2>
</body>
</html>css选择器
基础选择器
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 我是类选择器 */
.red {
color: red;
}
.sub-nav {
font-size: 16px;
}
</style>
</head>
<body>
<h1 class="red">我是类选择器</h1>
<ul>
<li class="sub-nav red">首页</li>
<li class="sub-nav">关于我们</li>
<li class="sub-nav">联系我们</li>
</ul>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 我是id选择器 */
#first {
color: red;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1 id="first">我是id选择器</h1>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 80px;
background-color: black;
}
.nav {
height: 50px;
width: 1000px;
background-color: blue;
}
.main {
height: 700px;
width: 1000px;
background-color: green;
}
.footer {
height: 100px;
background-color: purple;
}
.center {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav center"></div>
<div class="main center"></div>
<div class="footer"></div>
</body>
</html>关系选择器
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.black {
background-color: black;
}
.black li a {
color: red;
}
.green {
background-color: green;
}
.green a {
color: white;
}
div>span {
color: blue;
}
</style>
</head>
<body>
<ul class="black">
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="https://www.taobao.com">淘宝</a></li>
<li><a href="https://www.jd.com">京东</a></li>
</ul>
<div class="green">
<a href="https://www.baidu.com">百度</a>
<a href="https://www.taobao.com">淘宝</a>
<a href="https://www.jd.com">京东</a>
</div>
<div>
<span>我是儿子</span>
<p>
<span>我是孙子</span>
</p>
</div>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 我是相邻兄弟选择器 */
h2+li {
color: green;
}
.brother~p {
color: red;
}
</style>
</head>
<body>
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
<h2>我是h2</h2>
<li>我是第四个li</li>
<li>我是第五个li</li>
</ul>
<div>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<h2 class="brother">我是h2</h2>
<p>我是p</p>
<p>我是p</p>
</div>
</body>
</html>css文本样式
字体样式
文本布局
登高案例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 677px;
margin: 0 auto;
background-color: #badef5;
}
.content {
width: 610px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
}
.content img {
width: 100%;
}
.content>p {
line-height: 27px;
text-indent: 2em;
text-align: justify;
}
.shi {
text-align: center;
font-weight: bold;
font-size: 16px;
line-height: 27px;
}
.shi h5 {
font-size: 18px;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/img.jpg" alt="">
<div class="content">
<p>
杜甫是我国唐代伟大的现实主义诗人，他的诗具有丰富的社会内容、强烈的时代色彩，与李白合称"李杜"，对后世产生了深远的影响。今天让我们一起停下脚步，诵读被誉为"七律之冠"的《登高》，倾听诗圣杜甫的心声。
</p>
<div class="shi">
<h5>登高</h5>
<p>【唐】杜甫</p>
<p>风急天高猿啸哀，渚清沙白鸟飞回。</p>
<p>无边落木萧萧下，不尽长江滚滚来。</p>
<p>万里悲秋常作客，百年多病独登台。</p>
<p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
</div>
<img src="./img/d1.webp" alt="">
<p>
这是一首重阳登高感怀诗。此诗作于公元767年（唐代宗大历二年）秋天，杜甫时在夔州。这是他在五十六岁时写下的。一天他独自登上夔州白帝城外的高台，登高临眺，萧瑟的秋江景色，引发了他身世飘零的感慨，渗入了他老病孤愁的悲哀。于是，就有了这首被誉为"七律之冠"的《登高》。
</p>
<p>
诗意：天高风急，猿啸声声似乎蕴含着无限的悲哀，孤洲沙白的河洲上有鸟儿在盘旋。无边无际的落叶纷纷飘坠，望不到头的长江水滚滚奔腾而来。悲对秋景感慨万里漂泊常年为客，一生当中疾病缠身今日独上高台。历尽了艰难苦恨白发长满了双鬓，衰颓满心偏又暂停了浇愁的酒杯。诗中表达了诗人对时光易逝、生命短暂的悲叹，也揭示了诗人对国家兴衰、自身境遇的感慨和忧虑。诗人运用独特的意象和生动的语言，表达了生命的珍贵和对生活的热爱，具有深刻的思想内涵和艺术魅力。
</p>
<img src="./img/d2.webp" alt="">
<p>
如一般诗篇，《登高》首联写景，开门见山，渲染悲凉气氛。诗中如是写到：风急天高猿啸哀，渚清沙白鸟飞回。这两句都是动静结合，寓静于动中构造了一幅以冷色调着墨的绝妙的水墨画。而从整幅画的构造视角来说，这是一幅描画天地之一处的视野较窄的微观水墨画。
</p>
<p>
颔联进一步表现了秋天的特点。诗人通过描绘落叶和江水，表达了对生命和时间的感悟。落木萧萧和江水滚滚的形象，形象地表现了生命的短暂和时光的流逝。
</p>
<p>
颈联诗人通过对自身境遇的描写，表达了对生命的感悟。诗人漂泊异乡，孤独无助，面对秋天的景色，更加强化了对生命的思考。而"百年多病独登台"则表达了诗人对自身健康的担忧和对生命的敬畏。
</p>
<p>
尾联诗人通过描写自己的形象和饮酒的行为，表达了对生活的无奈和对生命的感慨。诗人满头白发、生活艰辛，面对秋天的景色，更加感到生活的艰难和苦恨。而"潦倒新停浊酒杯"则表达了诗人的失意和落寞，对生命的无奈和失望。
</p>
<img src="./img/d3.webp" alt="">
<p>
一首《登高》读下来，作者的内心的世界全部都展露在我们的面前，这就是诗圣的情怀，这也是当时诗圣眼中的世界。杜甫是衔接盛唐到中唐转变的伟大诗人，他忧国伤时，善于把时代的灾难，民生的涂炭和个人的不幸结合起来，他的诗歌是安史之乱前后的一部"诗史"。希望同学们和老师一起，追寻诗人伟大的足迹，开拓我们的人生视野，共读诗词，体味中华传统文化的魅力。
</p>
<video controls poster="./img/poster.jpg">
<source src="./img/video.mp4" type="video/mp4">
<p>您的浏览器不支持 video 标签。</p>
</video>
</div>
</div>
</body>
</html>分组选择器
伪类选择器
链接伪类
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
a:active {
color: green;
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.taobao.com">淘宝</a>
<a href="https://www.jd.com">京东</a>
</body>
</html>状态伪类
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
background-color: blue;
}
.search {
width: 100px;
height: 30px;
}
.search:focus {
background-color: pink;
width: 200px;
}
</style>
</head>
<body>
<div class="box">
</div>
<input type="text" class="search">
</body>
</html>结构伪类
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ul1 li:first-child {
background-color: red;
}
.ul1 li:last-child {
background-color: blue;
}
.ul1 li:nth-child(3) {
background-color: pink;
}
</style>
</head>
<body>
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>表单伪类
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
width: 150px;
height: 50px;
color: white;
background: #ff6900;
}
button:disabled {
opacity: 0.4;
}
input:checked+label {
color: red;
}
</style>
</head>
<body>
<button disabled>登录</button>
<br>
<input type="checkbox" id="agree">
<label for="agree">同意协议</label>
</body>
</html>伪元素选择器
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 我是伪元素选择器 */
p::first-letter {
font-size: 30px;
color: red;
}
p::first-line {
color: green;
}
input::placeholder {
color: red;
}
div::before {
content: "我是";
color: red;
}
div::after {
content: "老师";
color: red;
}
</style>
</head>
<body>
<p>三维人体姿态估计和网格恢复在计算机视觉、自动驾驶、机器人等诸多领域引起了广泛的研究兴趣。最近，
关于3D人体姿态估计和网格恢复的深度学习蓬勃发展，提出了许多方法来解决该领域的不同问题。在本
文中，为了激发未来的研究，我们通过深入研究200多篇参考文献，对过去五年该领域深度学习方法的最
新进展进行了全面回顾。据我们所知，这项调查可以说是第一个全面涵盖3D人体姿势估计的深度学习方
法，包括单人和多人方法，以及人体网格恢复，包括基于显式模型和隐式表示的方法。我们还在几个公开
可用的数据集上展示了比较结果，以及有见地的观察结果和鼓舞人心的未来研究方向</p>
<input type="text" placeholder="请输入内容">
<br>
<div>
pink
</div>
</body>
</html>属性选择器
CSS三大特性
继承的权重为0，标题和链接有自带样式。
所以继承父代需要注意。
