学完HTML基础入门后，大致了解了网页布局的一些规则和属性。接下来学习了页面样式的表达程序-CSS。并且整理了一些常用且基础的表达，如下。
1、什么是CSS
1.1什么是CSS
全称：Cascading Style Sheets：层叠样式表，用来表现HTML等文件样式。
用大白话解释，就是用来写页面样式，定义页面长什么样子的。将CSS的代码和HTML代码整合到一起后，就能将页面本身的样式呈现出来。但这是的页面是静态，无法点击和产生交互动作的。
1.2HTML中的CSS
1.2.1 HTML中的CSS
在HTML中加入css的属性：style，来描述HTML的样式，包括名字和值，比如：
<p style="background-color:yellow">
我爱这个世界
</p>
p style="background-color:yellow"是指『我爱这个世界』这段文字的样式为：『背景颜色是黄色』。
当然，这里的值可以换成其他颜色。（在输入颜色值时，目前常规的做法是直接从一些设计工具或者吸色工具将颜色的值取出来，格式为#+颜色值，比如：#FFFFFF为白色，#000000为黑色；）
1.2.2 背景样式
在css中，背景可以加纯色或者图像2种，同时可以在整个页面或者某个段落中添加背景。
<b>颜色背景</b>
<body style="background-color:gray">
</body>
body style="background-color:gray"（整个页面的样式=背景颜色为灰色）
<b>图片背景</b>
<body style="background-color:#FFFFFF">
</body>
<p style="background-image:url(shouye.jpg);
background-repeat:no-repeat;
background-position:top right;
background-attachment:fixed">
</p>
<p style="background">
</p>
p style="background-image:url(shouye.jpg);（这一段内容的背景图片：地址是：shouye.jpg，这里的图片地址是保存在电脑的文件名）
background-repeat:no-repeat;（背景重复：不重复）
background-position:top right;（背景位置：顶部、右侧）
background-attachment:scroll/lfixed；（背景附加：滚动的/固定）
2、基础样式
2.1 段落样式
2.1.1 段落缩进
<p style="text-indent:2em">
</p>
<p style="text-indent:2em；
padding:2em;">
</p>
text-indent:2em;（首行缩进：2em/字符，-2em/反向缩进2个字符』）
padding:2em;"( 悬挂缩进:2个字符，是指除了首行不缩进以外，下方每行都缩进2个字符）
2.1.2 间距与对齐
<p style="text-indent:-2em;
line-hight:1.5/normal;">
</p>
<p style="text-indent:-2em;
text-align:center/justify;
word-spacing:10px ；
letter-spacing:10px；">
</p>
line-hight:1.5/normal;（行高：1.5倍/正常）
text-align:center/justify;（对齐方式为：居中对齐/两端对齐）
word-spacing；（英文单词间距：10个像素点）
letter-spacing:10px；（字间距：10个像素点）
2.2 文本样式
2.2.1 文字修饰与空格处理
<p style="text-indent:2em;
text-align:justify;
word-spacing:10px;
letter-spacing:10px;
text-transform:lowercase/capitalize;
text-decoration:underline overline line-through;
white-space:normal/pre/pre-wrap/no-wrap;
direction:rtl;">
</p>
text-transform:lowercase/capitalize;
text-decoration:underline overline line-through;（文本装饰：下划线/上划线/穿插线）
white-space:normal/pre/pre-wrap/no-wrap;（空白字符处理：默认（连续空格去除掉）/空格及回车字符都直接显示且不做自动卷绕/显示空格且自动卷绕/不做卷绕）
direction:rtl/ltr;（对齐方式：左对齐/右对齐）
2.2.2 字体
<p style="text-indent:2em;
font-family:serif/sans-serif/monospace/cursive/fantasy;">
</p>
font-family:（字体系列）；
serif/sans-serif/monospace/cursive/fantasy;（5种字体类型），这些字体类型都是大类，输入字体类型的情况下，系统会根据浏览器来显示具体的字体样式。比如sans-sarif是非衬线字体，但具体的样式，每个浏览器可能会不一样。
当然，也可以输入具体的字体类型，比如很常见的：Times
2.2.3 文字修饰
<p style="text-indent:2em;
font-family:serif/sans-serif/monospace/cursive/fantasy;
font-style:italic/obique；
font-variant:small-caps；
font-weight:900/bold;
font-size:2em;">
</p>
font-style:italic/obique；（字体样式：斜体。italic是指固定的斜体样式、obique是根据不同浏览器计算的斜体样式，显示上会有不同）
font-variant:small-caps；（字体变化：小的大写字母，出现字母时，均使用变小的大写字母）
font-weight:900/bold;（字体加粗；bold是一个可根据浏览器显示不同的加粗效果，输入数值时，比如900，则是显示固定的加粗样式；
font-size:2em;（字体大小：2个字符，不建议使用2px）
2.2.4 文字效果
<p style="text-indent:2em;
text-shadow:3px 5px 5px #000000">
</p>
<p style="text-indent:2em;
text-shadow:3px 5px 5px #000000, 0px 1px 3px #606060;
color:606060;
outline-color:red;
outline-style:solid/dotted/dashed/double/groove/inset;
outline-width：thin/10">
</p>
text-shadow（字体阴影效果）；
3px 5px 5px #000000（第一个3px是指：x轴方向从3个像素点后开始有阴影；第二个5px是指：y轴方向从5个像素点后开始有阴影；第三个5px是指：阴影扩散范围超过文字5个像素点；#000000是指：阴影颜色）；
以上是最简单的阴影效果，如果想要更炫酷的效果，可以再写入更多样式。比如，继续添加0px 1px 3px #606060;（是指第二种阴影效果）
color:#606060（字体本身的颜色：606060）；
outline-color:red（字四周的线框颜色：红色）；
outline-style:solid/dotted（线形：实线/点线）；
outline-width：thin/10（线框宽度：thin/10）；
以上是CSS最基础的一些语法，一共大致花了3个小时来了解，相对来说比较简单。这部分结束后，就开始做一些简单的页面啦~
