四、页基础样式添加
1、背景
1.背景色
背景色：background-color 属性用纯色来填充背景。
语法格式：background-color:颜色值;
2.背景图片
背景图片： background-image 属性允许指定一个图片展示在背景中，同时可以和background-color连用，在图片覆盖不到的地方都会被背景色填充。
语法格式：background-image:url(图片路径)|none;
3.背景图平铺
背景图平铺：background-repeat 因为在设置背景图时会默认把整个屏幕铺满所以需要添加属性来控制图片添加的方向以及大小。
语法格式：background-repeat:属性值;
- repeat：沿水平和垂直两个方向平铺。
- no-repeat：不平铺，即背景图像只显示一次。
- repeat-x：只沿水平方向平铺。
- repeat-y：只沿垂直方向平铺。
- round：自动缩放直到适应整个屏幕。
- space：以相同的间距平铺，并填充整个容器或某个方向。
4.背景图滚动
背景图滚动：background-attachment 此属性决定了用户在滚动页面时图片的状态。
语法格式:background-attachment:属性值;
- scroll：随页面滚动背景图片移动。
- fixed：随页面滚动背景图片不会移动。
- inherit：他的父元素。
5、背景图定位
背景图定位：background-position 这个属性用来控制背景图片在元素中的位置。
语法格式：background-position:x y;
-
Xpx Ypx: 用像素大小体现时，第一个值表示水平位置起点参考页面左端，第二个值表示垂直位置起点参考页面的顶端。
-
X% Y%:使用百分比表示背景的位置，第一个值表示水平位置起点参考页面左端，第二个值表示垂直位置起点参考页面的顶端.
-
X、Y方向关键词：使用关键词表示背景的位置，水平方向关键词有left（居左）、center（居中）、right（居右），
垂直方向关键词top（顶端）、center（居中)、bottom（底部）。
6、背景复合属性
background 这是其他背景属性的复合属性，可以由一个或多个值组成，值与值之间用空格隔开，属性之间没有顺序要求。
2、文本
1.文本颜色
color属性不仅可以设置文本颜色，还可以设置网页中其他元素的前景色。
语法格式：color:颜色值;
2、水平对齐方式
语法格式：text-align:属性值:
- left:把文本排列到左边，这个值是浏览器的默认值。
- right：把文本排列到右边。
- center：将文本居中。
- justify：实现两端对齐文本效果。
3、文本缩进
text-indent 属性设定文本的缩进
text-indent:缩进长度;
4、行高
line-height 属性来设置行高
line-height:属性值;
- normal:表示默认行高；
- 长度值：用长度表示行高，例如：20px
- 百分比：用百分比表示行高，例如：line-hright:150%;相当于1.5倍行距。
- 数值：用乘积因子表示行高，例如：line-hreght:1.5; 也表示1.5倍行距。
5、垂直对齐
在网页中是使用 vertical-align 设置垂直方向对齐方式，但在浏览器中只对表格单元格有用，而一般标签 h1~h6、p、div标签都是不起作用的。
vertical-align:属性值;
middle（中间）、top（顶部）、bottom（底部）、justify（对齐）
6、文本装饰
text-decoration:none:
- none：默认值，定义的标准文本。
- underline：设置文本的下划线。
- overline：设置文本的上划线。
- line-through：设置文本的删除线。
- blink：设置文本闪烁。此值只在 火狐 浏览器中有效，IE浏览器中无效。
3、字体
1、字体类型
font-family:字体1，字体2... 例如：font-family:隶书,黑体,宋体; 用逗号隔开
2、字体大小
font-size:值;
字体大小常用单位是px，还有其他单位，如in、cm、mm、pt、pc,
3、字体风格
font-style:normal 标准的字体样式 italic 斜体字体样式 oblique倾斜的字体样式;
4、字体粗细
font-weight:属性值;
- normal：默认值，定义标准的字体。
- bold:粗体字体。
- bolder：更粗的字体。
- lighter：更细的字体。
- 也可以使用100~900。
5、字体复合属性
字体费用和属性 再利用font属性一次设置字体的所有属性时，要用英文空格分开。
注意集中字体属性的顺序依次为：“字体风格——字体粗细——字体大小——字体类型”
font：font-style font-weight font-size font-family;
例如：font:normal bold 20px 隶书;
4、超链接样式
伪类样式的基本语法为“标签名：伪类名{声明;}”。
- a: link:未单机访问时超链接样式。
- a:visited:单机访问后超链接样式。
- a:hover：鼠标悬浮其上的超链接样式。
- a:active:鼠标单击未释放的超链接样式。
详情可参考第一篇 css样式总结 伪类选择器那一小结。在此就先不过多赘述。
5、列表
1、列表符号
list-style-type 属性设置列表项标记符号的类型，
语法格式如下：
list-style-type:属性值;
常用属性值如下：
- none:无标记符号。
- disc：实心圆，默认类型。
- cricle：空心圆。
- square：实心正方形。
- decimal：数字。
2、图片符号
list-style-image属性是使用图像来替换列表项的标记，当使用了图片符号后，列表符号属性都将不起作用。
语法格式如下：
list-style-image:|url(图片路径)
3、列表位置
list-style-position属性设置在何处放置列表项标记，有两个值，
inside：将标记放在文本以内，环绕文本根据标记对齐。
outside：默认值，位于文本左侧，环绕文本部根据标记对齐。
4、列表综合设置
liat-style与背景属性一样也有简写属性。
简写形式： list-style：image position type 根据顺序进行设置。
语法格式如下：
list-style：属性值 属性值 属性值;
因为综合设置是将三种属性结合就不放图片了，嘿嘿😊
5、表格
1、边框
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。
- separete：默认值。边框会分开。不会忽略border-spacing 和 empty-cells属性。
- collapse：边框可能会合并为一个单一边框。会忽略border-spacing 和 empty-cells属性。
- inherit：规定应该从父元素继承border-collapse。
border-spacing 属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。
- Xlength Ylength：规定相邻单元的边框之间的距离。使用px、cm单位。不可以使用负值，
- inherit：规定应该从父元素继承border-spacing 属性的值。
empty-cells 属性设置是否显示表格中的空单元格。
- hide：不在空单元格周围绘制边框。
- show：在空单元格周围绘制边框，默认。
- inheritage：规定应该从父元素继承empty-cells 属性的值。
table-layout属性用来显示表格单元格、行、列的算法规则。
- automatic:默认。列宽度由单元格内容设定。
- fixed：列宽由表格宽度和列宽度设定。
- inherit：规定应该从父元素继承table-layout属性的值。
caption-side 属性设置表格标题的位置。该属性指定了表标题相对于表框的放置位置。
- top：默认值。把表格标题定为在表格之上。
- bottom: 把表格标题定位在表格之下。
- inherit：规定应该从父元素继承caption-side属性的值。
因为个人感觉这种表格比较死板外观并不是太美观所以就不弄代码图片演示了，以上均为自己总结的css样式的知识点，如有错误还请指正。😊😊
代码以及文本链接放在评论区，有需要的小伙伴可以下载使用。在😁😁
