本文介绍了CSS的三种引入方式：行内样式、内部样式和外部样式，重点讲解了外部样式表的创建与引入。此外，通过一个新闻页面的制作案例，展示了HTML结构和CSS样式的应用。最后，详细阐述了Chrome调试工具的使用，包括查看和修改CSS样式、元素结构等，帮助开发者更好地调试网页。
一、CSS引入方式
按照CSS书写的位置（或者引入方式）的不同，CSS样式表可以分为三类：
1.行内样式表（行内式）
行内样式表是在元素标签内部的style属性中设定CSS样式，适用于修改简单样式。
2.内部样式表（嵌入式）
内部样式表是写在html页面内部，将所有CSS代码提出来，放在<style>标签中。style标签通常放在<head>中，可以控制整个页面样式。前面4节的学习都是使用的内部样式表。
3.外部样式表（链接式）
实际开发都是使用的外部样式表，即在样式很多的时候，将样式单独写在CSS文件中，之后将CSS文件引入到HTML页面使用。
引入外部样式表步骤：
首先新建一个后缀名为.css的样式文件，把所有CSS代码放入此文件
然后在HTML页面中通过<link>标签引入这个CSS文件
link语法规范：
<link rel="stylesheet" href="css文件路径">rel：定义当前文档与被链接文档的关系，这里需要指定为"stylesheet"，表示为样式表文件。
二、综合案例——新闻界面
制作页面整体分为：1.搭建HTML结构页面 2.修改CSS样式
直接上代码
最低0.47元/天 解锁文章
扫一扫
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
