文章详细介绍了CSS的三种引入方式：内部样式表、行内样式表和外部样式表，并提供了一个新闻页面的综合案例，展示了CSS在网页布局和样式设计中的应用。此外，还提到了Chrome调试工具的使用和emmet语法在快速生成HTML结构和CSS样式的便利性。最后，讲解了复合选择器的概念，包括后代选择器和子元素选择器，并给出了相关课堂练习。
一、CSS引入方式
CSS的三种样式表
1.内部样式表
示例
<title>内部样式表</title>
<style>
div {
color:pink;
}
</style>
</head>
<body>
<div>所谓内部样式表，就是在html页面内部写样式，但是是单独写到style标签内部。</div>
</body>
2.行内样式表
示例
<title>行内样式表</title>
</head>
<body>
<p>只希望你和我好，互不猜忌，也互不称誉，安如平日，你和我说话像对自己说话一样，我和你说话也像对自己说话一样。</p>
<p>永远要记得，被命运打趴下的时候，我们还是要爬起来，拍拍身上的土，说：“来，咱们三局两胜。”</p>
<p style="color: pink; font-size: 20px;">孩子的身上存在缺点并不可怕，可怕的是作为孩子人生领路人的父母缺乏正确的家教观念和教子方法。</p>
</body>
3.外部样式表
示例
<title>外部样式表</title>
<link rel="stylesheet" href="1.2style.css">
</head>
<body>
<div>山赶着山，山山漫漫结成关</div>
</body>
4.CSS引入方式总结
二、综合案例-新闻页面
示例
<title>新闻页面</title>
<style>
body {
font: 16px/28px 'Microsoft YaHei';
}
h1 {
/* 文字不加粗 */
font-weight: 400;
/* 让h1里面的文字水平居中对齐 */
text-align: center;
}
.gray {
color: #888888;
font-size: 12px;
text-align: center;
}
a {
text-decoration: none;
}
.search {
color: #666;
/* #666666 #666
#ff00ff #fof */
width: 170px;
}
.btn {
font-weight: 700;
}
p {
/* 首行缩进2个字的距离 */
text-indent: 2em;
}
.pic {
/* 想要图片居中对齐，则是让他的父亲 p标签添加水平居中的代码 */
text-align: center;
}
.footer {
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<h1>《自然》评选改变科学的10个计算机代码项目</h1>
<div class="gray">2021-01-26 来源：<a href="#">区科协</a>
<input type="text" value="请输入查询条件..." class="search"> <button class="btn ">搜索</button>
</div>
<hr>
<p>如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。
</p>
<h4>语言先驱：Fortran编译器（1957年）</h4>
<p class="pic">
<img src="../img/666.jpg" alt="">
</p>
<p> 最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。</p>
<p> 20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 +
5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
<h4>信号处理器：快速傅立叶变换（1965）</h4>
<p>当射电天文学家扫描天空时，他们捕捉到的是随时间变化的复杂信号杂音。为了理解这些无线电波的本质，他们需要看到这些信号作为频率的函数时是什么样的。一种名为“傅里叶变换”的数学过程可以帮到研究人员，但它的效率很低，对于一个大小为N的数据集需要N^2次计算。
</p>
<p>1965年，美国数学家詹姆斯·库利和约翰·杜基想出了一种加速该过程的方法。快速傅里叶变换（FFT）通过递归（一种通过重复将问题分解为同类的子问题而解决问题的编程方法）将计算傅里叶变换的问题简化为N
log2（N）步。随着N的增加，速度也会提高。对于1000个点，速度提升大约是100倍；100万个点则是5万倍。</p>
<h4>分子编目：生物数据库（1965年）</h4>
<p>数据库是当今科学研究中不可或缺的组成部分，以至于人们很容易忘记它们也是由软件驱动的。过去的几十年中，数据库资源的规模急剧膨胀，影响了许多领域，但或许没有哪个领域的变化会比生物学领域更引人注目。</p>
<p>今天，科学家所用的庞大基因组和蛋白质数据库源于美国物理化学家玛格丽特·戴霍夫的工作，她也是生物信息学领域的先驱。20世纪60年代初，当生物学家们致力于梳理蛋白质的氨基酸序列时，戴霍夫开始整理这些信息，以寻找不同物种之间进化关系的线索。她与三位合著者于1965年发表了《蛋白质序列和结构图谱》，描述了当时已知的65种蛋白质的序列、结构和相似性。历史学家布鲁诺·斯特拉瑟在2010年写道，这是第一个“与特定研究问题无关”的数据集，它将数据编码在打孔卡中，这使得扩展数据库和搜索成为可能。
</p>
<p class="footer">文本来源：瓯海区科学技术协会 责任编辑：捷点科技</p>
</body>
三、chrome调试工具使用
四、CSS
emmet语法
1.emmet语法快速生成html结构
2.emmet语法快速生成css样式
示例
<title>emmet语法快速生成html标签和样式</title>
<style>
.one {
/* tac */
text-align: center;
/* ti */
text-indent: 2em;
/* w */
width: 20px;
/* h */
height: 30px;
/* w100 */
width: 100px;
/* h200 */
height: 200px;
/* ti2em */
text-indent: 2em;
/* lh26px */
line-height: 26px;
/* tdn */
text-decoration: none;
}
</style>
</head>
<body>
<!-- div*3 -->
<div></div>
<div></div>
<div></div>
<!-- ul>span -->
<ul>
<li></li>
</ul>
<!-- div>span -->
<div><span></span></div>
<!-- div+p -->
<div></div>
<p></p>
<!-- .nav -->
<div class="nav"></div>
<!-- #banner -->
<div id="banner"></div>
<!-- p.one -->
<p class="one"></p>
<!-- span.gray -->
<span class="gray"></span>
<!-- ul>li#two -->
<ul>
<li id="two"></li>
</ul>
<!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!-- 我们想生成的标签里面默认显示几个文字 -->
<!-- div{} -->
<div>山茶花读不懂白玫瑰</div>
<!-- div{}*3 -->
<div>北山的风吹不到南山尾</div>
<div>北山的风吹不到南山尾</div>
<div>北山的风吹不到南山尾</div>
<!-- div{$}*3 -->
<div>1</div>
<div>2</div>
<div>3</div>
</body>
3.快速格式化代码
五、复合选择器
1.复合选择器简介
2.后代选择器
示例
<title>复合选择器之后代选择器</title>
<style>
/* 我想要把ol里面的小li选出来改为pink颜色 */
ol li {
color: pink;
}
ol li a {
color: skyblue;
}
.nav li a {
color: plum;
}
</style>
</head>
<body>
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">孙砸</a></li>
</ol>
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li><a href="#">赴约</a></li>
</ul>
<ul class="nav">
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li><a href="#">赴约</a></li>
<li><a href="#">赴约</a></li>
<li><a href="#">赴约</a></li>
<li><a href="#">赴约</a></li>
</ul>
</body>
3.子元素选择器
示例
<title>复合选择器之子元素选择器</title>
<style>
.nav>a {
color: aquamarine;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">儿子</a>
<p>
<a href="#">孙子</a>
</p>
</div>
</body>
4.课堂练习
（1）课堂练习1
<title>课堂练习1</title>
<style>
/* 请将下面的链接文字修改为粉色 */
/* 可以.nav ul a {} .nav a {}也是可以的 */
.nav ul li a {
color: pink;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">等风吹</a></li>
<li><a href="#">等风吹</a></li>
</ul>
</div>
</body>
（2）课堂练习2
<title>课堂练习2</title>
<!-- 请将下面的铃木文字修改为天蓝色 -->
<style>
.hot>a {
color: skyblue;
}
</style>
</head>
<body>
<div class="hot">
<a href="#">铃木</a>
<ul>
<li><a href="#">清风</a></li>
<li><a href="#">解忧</a></li>
</ul>
</div>
</body>
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
