css负责描述网页的表现，主要使用场景就是美化网页，布局页面的。在浏览器显示html时，会使用内置的默认样式表现，显然这样的网站是不够漂亮的。在需要页面更美观的要求下，css要发挥作用了。
css最大的价值就是：由HTML专注去做结构呈现，样式交给css，实现结构与样式分离。
css是层叠样式表（cascanding style sheets）的缩写，它提供了一种方法来告诉浏览器要怎么显示页面中的元素。
css规则有两个主要部分构成：选择器以及一条或多条声明。
选择器：作用是表明给哪一部分改样式
声明：表示所修改的样式，格式为{属性：值}，括号内可以写多条声明。
要增加样式，需要在页面里添加一个新的<style>元素。
<html>
<head>
<title>......</title>
<style type="text/css">
body {
background-color: #d2b48c;/*设置背景颜色为土黄色*/
margin-left: 20%;/*设置左外边距占页面的*/
border: 2px dotted black;/*定义页面主体周围的边框是虚线*/
padding: 10px 10px 10px 10px;/*在页面主体周围创建一些内边距*/
font-family: sans-serif;/*定义文本使用的字体*/
}
</style>
</head>
<body>
/*主体部分省略*/
</body>
</html>
- <style>元素放在html的首部
- <style>元素有开始标记与结束标记
- <style>标记有一个可选的属性，名为type，告诉浏览器这个页面使用了什么样式，示例中指定为css类型。（当初html的设计者认为以后可能会有其它样式，但就算不带type属性浏览器也是默认使用css样式）
良好的css格式书写
代码的书写风格并不是强制规范的，但是为了符合实际开发的书写方式，在学习的时候推荐了解一下。（在书写过程中，部分开发工具或者插件会有自动格式帮我们调整）
- 样式格式书写
body {
color: red;
font-size: 20px;
}- 样式大小写
在开发过程中一般都比较推荐用小写字母，看起来比较方便（特殊情况除外）。
- 空格规范
- 属性值前面，冒号后面，保留一个空格；
- 在选择器（标签）与大括号中间保留一个空格。
解决谷歌浏览器不显示css样式的方法
在将示例的css样式进行实际尝试的时候，我发现无论怎么刷新，我的谷歌浏览器都只会显示html默认的样式，无法显示我修改过的css样式。我在多次确认过编写的语言没有出错后，我换了edge浏览器运行该页面，显示成功了。
我试图找一下谷歌浏览器显示失败的原因。
在博客上找到了同样有过类似问题并已经成功解决的人，说是因为Chrome浏览器会缓存css样式，普通的刷新不起作用，需要清除缓存之后再尝试。
在按照方法试过之后，浏览器就显示成功了。
