字体 ，文本，边框，列表，表格 的样式
字体样式
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>
图片样式
图片大小可以设置：width height 但不建议设置 ps需要多大图片就多大图片，如果图片无需太大却很大，会使页面加载速度变慢
图片边框：border:solid red 1px;
图片水平对齐：text-align:left / center / right 图片是在父元素中进行水平对齐的，所以在图片的父元素中进行定义
图片锤子对齐：vertical-align :top /middle / baseline / bottom 顶部对齐 / 中部对齐 / 基线对齐 / 底部对齐
<style>
img{
width: 60px;
height: 60px;
}
div{
width: 300px;
height: 80px;
border:solid 1px blue;
}
.div1{text-align:left;}
.div2{text-align:center;}
.div3{text-align:right;}
</style>
<div class="div1">
<img src="img/bg-1.png" alt=""/>
</div>
<div class="div2">
<img src="img/bg-1.png" alt=""/>
</div>
<div class="div3">
<img src="img/bg-1.png" alt=""/>
</div>
vertical-align 定义周围的行内元素或文本相对于该元素的垂直方式
img{
width: 60px;
height: 60px;
}
#img1{vertical-align: top;}
#img2{vertical-align: middle;}
#img3{vertical-align:bottom;}
#img4{vertical-align:baseline;}
</style>
旅游网<img id="img1" src="img/bg-1.png" alt=""/>旅游网top
<hr/>
旅游网<img id="img2" src="img/bg-1.png" alt=""/>旅游网middle
<hr/>
旅游网<img id="img3" src="img/bg-1.png" alt=""/>旅游网bottom
<hr/>
旅游网<img id="img4" src="img/bg-1.png" alt=""/>旅游网baseline
背景样式
background-image 定义背景图片地址
background-repeat 定义背景图片重复，如横向重复 纵向重复
background-position 定义背景图片的位置
background-attachment 定义背景图片固定
background-color：颜色值（关键字，16进制RGB值 HSL RGBA 都可以）
color与background-color的区别，前者是定义"文本颜色" 后者定义的是"背景颜色"
background-image ：url(图片路径); 他和引入图片(img标签）一样，引入背景图也需要给出图片路径才显示
背景图与图片是不一样的，前者是使用CSS来实现的，后者图片是使用HTML来实现的
两者场合也不一样，大多数情况下都是使用图片来实现的，如果图片无法使用 在考虑背景图片
background-repeat :repeat /repeat-x / repeat-y / no-repeat ；水平 垂直方向同时平铺（默认值）/ 水平方向（x轴)上平铺 / 垂直方向（y轴 )上平铺 / 不平铺
注：元素的宽度和高度必须大于背景图的宽度和高度 才会有重复的效果
background-position ：像素值 / 关键字 背景图片的位置
background-position :水平距离 垂直距离
当属性取值为 "像素值" 时候，要同时设置水平方向 和 垂直方向 ，两个数值之间用空格隔开
当属性取值为"关键字"时，也要同时设置水平方向和垂直方向 ，只不过这两值用关键字来代替而已
background-position 一般用于实现CSS Sprit (精灵图片）
background-attachment ：scroll / fixed
div{
background-image: url("img/bg-3.png");
border:solid red 1px;
width: 200px;
height: 100px;
}
#div2{background-repeat: repeat-x;}
#div3{background-repeat: repeat-y;}
#div4{background-repeat: no-repeat;}
<div id="div1"></div>
<hr/>
<div id="div2"></div>
<hr/>
<div id="div3"></div>
<hr/>
<div id="div4"></div>
div{
width: 300px;
height: 200px;
border:solid red 2px;
background-image: url("img/bg-3.png");
background-repeat: no-repeat;
background-position: 40px 20px;
background-position: center right;
}
<div></div>
超链接样式
默认情况下，字体为蓝色，带有下划线
鼠标点击时，字体为红色，带有下划线
鼠标点击后，字体为紫色，带有下划线
可以用text - decoration:non 可以去除超链接的默认样式下划线
a:link 定义a元素未访问时候的样式
a:visited 定义a元素访问后的样式
a:hover 定义鼠标经过a元素时的样式 记住
a:active 定义鼠标点击激活时的样式
实际用到2种状态：未访问时状态 和 鼠标经过状态
a{...}
a:hover{......}
：hover伪类可以定义任何一个元素在鼠标经过时的样式
鼠标样式：分两种，浏览器鼠标样式，自定义鼠标样式
cursor ：default pointer text 这三个比较常用
自定义鼠标样式
https://www.cnblogs.com/zimengxiyu/p/9868264.html
cursor : url (图片地址），属性值;
图片地址：是鼠标图片地址，图片的后缀一般都是 .cur 可用ps制作
属性值：一般为default pointer text这三种
浙公网安备 33010602011771号