1. 什么是CSS
CSS，层叠样式表（Cascading Style Sheets）是一种用于规定如何显示 HTML 元素的样式的语言。通过使用CSS，可以从HTML中分离出网页的样式，包括字体大小、颜色、背景、间距等。CSS可以被用于任何的HTML标记，也可以在一个HTML页面上使用多个CSS文件。
通常，CSS通常是在样式表文件中编写的，文件的扩展名通常为.css。然后，通过链接（link）HTML 文件和样式表文件（例如 link 元素）即可将CSS应用于HTML文档。CSS也可以直接在HTML内部编写，或作为元素的“内联样式”（inline style）直接应用于HTML元素。
2. 如何查看网页的CSS
2.1 利用浏览器的开发者工具
几乎所有现代的浏览器都具有一种称为“开发者工具”的功能，可以帮助你对页面的CSS进行查看和编辑。通过在浏览器中右键单击页面，然后选择“检查元素”或“开发者工具”，可以打开浏览器的开发人员工具。这个工具常常被用来进行调试和测试网站，通常会提供有关网站代码的深入信息，包括HTML、CSS和JavaScript。
在开发者工具中，通常会有一个或多个窗格，用于显示不同的信息，如网页的结构，网络的请求和响应，以及CSS规则的列表。您可以在这个面板中找到CSS规则，超链接和其他属性。您还可以通过单击、拖动和放大缩小等方法进行更改和测试（请注意，这将影响页面，但不会更改实际的代码）。
例如，假设我们打开了Chrome浏览器的开发者工具，然后在地址栏中输入了"https://www.baidu.com/"，可以看到以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
<link rel="stylesheet" href="//s1.bdstatic.com/r/www/cache/bdorz/baidu.min.css">
<script src="//s1.bdstatic.com/r/www/cache/static/wiseindexlauncher-fa7b9458.js"></script>
</head>
<body link="#0000cc">
<div id="wrapper" class="wrapper_l">
<div id="head">
<div class="head_wrapper">
<div class="s_top_wrap">
<div class="s-top-nav">
<a href="#" target="_blank" class="s-top-imgLink"></a>
<div class="s-top-right">
<ul id="s_nav">
<li class="s-nav-item s-item-active">
<a href="#" target="_blank">新闻</a>
</li>
<li class="s-nav-item">
<a href="#" target="_blank">hao123</a>
</li>
<li class="s-nav-item">
<a href="#" target="_blank">地图</a>
</li>
</ul>
...
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
可以看到，这是百度主页的 HTML 代码。将鼠标悬停在某个 HTML 元素上，可以看到该元素对应的 CSS 样式代码。例如，在开发工具的 Elements 面板中，选中标题 "新闻"的元素，可以看到它的CSS样式代码，如下所示：
.s-nav-item-active, .s-nav-item:hover{background-color:#f0f0f0;}
2.2 查看外部 CSS 文件
如果您已经知道网站使用的CSS文件的名称和位置，您可以通过直接访问该URL来查看CSS代码。例如，在浏览器的地址栏中输入"https://www.baidu.com/s=1024"，会看到如下代码：
...
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="dns-prefetch" href="//s1.bdstatic.com">
<link rel="dns-prefetch" href="//t1.baidu.com">
<link rel="dns-prefetch" href="//t2.baidu.com">
<link rel="dns-prefetch" href="//t3.baidu.com">
<link rel="dns-prefetch" href="//t10.baidu.com">
<link rel="dns-prefetch" href="//t11.baidu.com">
<link rel="dns-prefetch" href="//t12.baidu.com">
<link rel="dns-prefetch" href="//t20.baidu.com">
<link rel="dns-prefetch" href="//t21.baidu.com">
<link rel="dns-prefetch" href="//t22.baidu.com">
<link rel="dns-prefetch" href="//t23.baidu.com">
<link rel="dns-prefetch" href="//t24.baidu.com">
<link rel="dns-prefetch" href="//t31.baidu.com">
<link rel="dns-prefetch" href="//t32.baidu.com">
<link rel="dns-prefetch" href="//t33.baidu.com">
<link rel="dns-prefetch" href="//t34.baidu.com">
<link rel="dns-prefetch" href="//t35.baidu.com">
<link rel="dns-prefetch" href="//t36.baidu.com">
<link rel="stylesheet" href="//s1.bdstatic.com/r/www/cache/bdorz/baidu.min.css"> // CSS 样式文件位置
...
点击链接 "https://s1.bdstatic.com/r/www/cache/bdorz/baidu.min.css"可以查看CSS文件的内容。您也可以直接复制和粘贴该文件的完整代码到一个类似于Sublime Text的本地编辑器中查看。
2.3 使用浏览器扩展
还有一些浏览器扩展可以帮助您查看网页的CSS。例如，Firebug是一种扩展，可以帮助您查看HTML，CSS和JavaScript代码，并允许您实时修改它们。类似的扩展还有Web Developer，MeasureIt等。
3. 总结
通过使用开发者工具、查看外部 CSS 文件或使用浏览器扩展，您可以轻松地查看网页的CSS，并进行必要的调整和测试。当您开始使用它们时，您将迅速适应这些工具，并发现它们是提高您开发效率的重要工具。