字体 ，文本，边框，列表，表格 的样式
字体样式
font-family 字体类型 字体类型只有一个英文单词无需加引号，如果是多个英文单词或是中文 则需要加上引号
中文比较美观的字体 微软雅黑和宋体，英文有Times New Roman ,Arial，Verdana
可以设置多种类型 p{font-family:Arial,Verdana,Goorgia;},
这是因为每个人电脑安装的字体都不一样，字体以此类推 如果都没有设置的字体，就默认宋体字体显示
font-size 字体大小 font-size=像素值 ，属性取值有2种，关键字和像素值 ，在实际中关键字基本不会用，像素值常用
px:像素是一张图片中最小的点，或是计算机屏幕中最小的点，如图表放大n倍后就会变成一个一个小方点
一台计算机的分辨率是800px *600px 指的是计算机宽是800个小方点，高是600个小方点
px是相对单位，因为屏幕分辨率的不同，1px的大小也是不同的, 如果不考虑分辨率，就可以把px看成是绝对单位
初学：可把1px看成一个小点，多少px就可以看成由多少个小点组成
font-weight 字体粗细 bold值经常用到
font-style 字体风格 默认normal ，italic 和oblique 后面两个都是斜体，有的字体有斜体italic属性，有些字体没有斜体italic属性，没有斜体属性的可以用oblique来实现斜体效果
color 字体颜色 关键字，和16进制RGB值（用在线工具，调色板） #FFFFFF 白色 #000000 黑色
浏览器解析css是有一定顺序的，在下面这个例子中 第二个p元素 一开始就使用元素选择器定义了一次color:red ,
然后用id选择器定义了一次color:blue ,后面的会覆盖前面的，最终显示蓝色
<style> /* 元素选择器，定义所有的p元素 字体颜色为红色 */ p{ font-weight: bold; font-family: "微软雅黑"; font-size: 14px; color:red; } /* id选择器，定义个别样式，字体变为蓝色，后面的蓝覆盖前面的红，其他不变 */ #p2{color:blue;} </style> <p id="p1">HTML控制网页的结构</p> <p id="p2">CSS控制网页的外观</p> <p id="p3">JavaScript控制网页的行为</p>
css注释 和html一样，是为了提高代码的可读性和可维护性
文本样式
字体样式注重个体，文本样式注重整体
首行缩进 text-index ：像素值
中文段落首行缩进需缩进2个字符，实现这效果text-indent值应该是font-size值的2倍
水平对齐 text-align：取值； left right center
实际中常会用到center
这个属性不仅对文本有效，对图片img也有效 图片的水平对齐
文本修饰 text-decoration:取值；
none:去除所有的划线效果(默认值）
underline:下划线
line-through:中划线
实际中的用途
1, text-decoration:none 去除a元素的下划线
2，text-decoration:underline ,下划线，强调文章中的重点
4，text-decoration:line-through 中划线，在电商网站 一般用于促销
大小写 text-transform：取值；
none:无转换（默认值）
uppercase 转为大写
lowercase 转为小写
capitalize 只把每个英文单词首字母转换为大写
行高line-height
控制每行文本的高度，（行高，顾名思义：一行的高度）而行间距指：两行文本之间的距离 这两个是完全不一样的概念
间距 letter-spacing 和 word-spacing （一般这两个只会用于英文 网页）
letter-spacing :像素值 调整两个字之间的距离
注：每一个中文汉字都被当成一个 “字” ，而每一个英文字母也当做一个 "字"
word-spacing：像素值 定义两个单词之间的距离
单词间距，这个属性只针对英文单词而言的
<style> div{ border:solid red 1px; } .p1,.p2{ font-family: Arial, Helvetica, sans-serif; font-size: 18px; } .p1,.p2{ text-indent: 36px;/* 首行缩进 */ line-height: 28px;/* 行高 */ letter-spacing:2px;/* 词间距 */ } .p1 span{/* 给span里的元素,加上自重 下划线 */ font-weight: bold; text-decoration: underline; } .p2{/* 英文字母全部转为大写 */ text-transform: uppercase; } </style> <div> <p class="p1"> 上边这个定义中“形成或表达特定主题”这个修饰性成分绝不可省，因为它揭示了材料的自身 规定性——与主题的相对性或相互依存关系。材料，<span>特定主题</span>的材料。换言之，只是在与 特定主题的对立联系中，特定的“信息”（感知和理念）才称之为材料。因此，在此篇为材料者 在彼篇可以是主题；在此篇为主题者，也可以是另一篇另一主题的 </p> <p class="p2">Remember:no pain ,no gain!</p> </div>
边框样式
border-width:1px;
border-style:solid;
border-color:red;
简写形式 :border:1px solid red;
边框局部设置样式
上边框：border-top
下边框：border-bottom
左边框: border-left
右边框: border-right
不管整体样式还是局部样式，都需要设置3个方面：边框宽度，边框外观，和边框颜色
把某一局部边框去除样式，如border-bottom:0px; 下边框就去除了
border-bottom:0px; border-bottom:0; 和border-bottom:none 这三个是等价的
div{ width: 100px; height: 60px; border:solid red 2px; border-bottom:0px; } <div></div>
列表样式
不管是有序列表还是无序列表都是使用 list-style-type:取值；来定义列表项目符号
如无序列表的取值有，disc实心圆 circle空心圆 square正方形
记住：list-style-type:none；是去除列表项目符号，自带的丑或无需项目符号的 就去除掉
列表项图片 （来代替列表项目符号）
list-style-image:url(图片路径）；实际就是列表项目符号改为图片，
实际中不会用list-style-image 来实现，而是用字体图标技术来实现
表格样式
表格标题位置 caption-side:top / bottom ,在table或caption这两个元素定义这个属性都是可以的，一般都在table里定义即可
表格边框合并 border-collapse:separate / collapse 边框分开有空隙 / 边框合并无空隙 这个属性也在table元素中定义
表格边框间距 border-spacing:像素值；这个属性也在table元素中定义
<style> table{ caption-side: bottom; border-collapse: collapse;/* 合并边框 */ /* border-spacing: 10px; *//* 设置边框间距 */ } table,tr,td,th{ border:solid red 2px; } </style> </head><body> <table> <caption>成绩表</caption> <!--表头 --> <thead> <tr> <th>姓名</th> <th>数学</th> <th>语文</th> <th>总成绩</th> </tr> </thead> <!-- 表身 --> <tbody> <tr> <td>小小</td> <td>60</td> <td>60</td> <td>120</td> </tr> <tr> <td>小小</td> <td>60</td> <td>60</td> <td>120</td> </tr> <tr> <td>小小</td> <td>60</td> <td>60</td> <td>120</td> </tr> </tbody> </table>
图片样式