pink老师html5+css3day02
文章目录
- css分类
- css选择器
- 基础选择器
- 关系选择器
- css文本样式
- 字体样式
- 文本布局
- 分组选择器
- 伪类选择器
- 链接伪类
- 状态伪类
- 结构伪类
- 表单伪类
- 伪元素选择器
- 属性选择器
- CSS三大特性
css分类
<!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选择器
基础选择器
<!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>
<!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>
<!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>
关系选择器
<!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>
<!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文本样式
字体样式
文本布局
登高案例：
<!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>
分组选择器
伪类选择器
链接伪类
<!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>
状态伪类
<!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>
结构伪类
<!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>
表单伪类
<!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>
伪元素选择器
<!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，标题和链接有自带样式。
所以继承父代需要注意。
