列表、标签、背景

一、列表

1、HTML列表分为，有序列表(ol>li)、无序列表(ul>li 一般用于导航栏、商品列表显示)、目录列表(dl>dd>dt 用于名词解释)。
有序列表(HTML5新增的属性):

属性	说明
star	起始值 自己规定一个数字 显示以规定的数字后面的·数字依次显示
reversed	倒叙排列

list-style-position(设置列表项目符号位置的对齐方式，取值 outside|inside|outside(默认值))。
HTML代码

  <ul class="outside">
        <li>学习</li>
        <li>加油</li>
    </ul>

    <ul class="inside">
    <li>zx</li>
    </il>

css代码

ul{
    border:1px solid red;
    padding: 0;
    margin:0 auto;
    width: 500px;
    list-style-type: square;
}
.outside{
    list-style-position: outside;
}
.inside{
    list-style-position:inside;
}

效果图：

outside以列表项内容对齐，inside的列表则以项目符号对齐。

二、标签

文本类：text-indent(文本缩进)，text-transform(lowercase文本小写字母、uppercase所有文本大写字母、captitalize所有文本首字母大写)、text-shadow(文本阴影 第一值 是水平方向、第二个值 垂直方向、第三个值模糊程度、第四个值颜色)、word-spacing(词间距)、letter-spacing(字间距)。
**字体样式：**引用字体@font-face步骤：把字体放入站内、@font-face、添加声明块 设置引用字体名字 font-family:自定义 引用字体文件地址 src:url(“字体地址”)。
举个列子：
HTML:

CSS样式

效果：
背景图片大小(background-size):
一般给100%；
background-clip(背景剪切 当前元素的背景显示区域)

取值	说明
border-box	只显示边框和背景内容
padding-box	只显示填充盒(content+paddding)内容
content	只显示内容盒(content)背景内容

css样式:

div{
    width: 400px;
    height: 400px;
    border:20px dashed green;
    background-image: url("../IMG/tounao.jpg");
    background-size: cover;
 background-clip:border-box;
}

div{
    width: 400px;
    height: 400px;
    border:20px dashed green;
    background-image: url("../IMG/tounao.jpg");
    background-size: cover;
 background-clip:padding-box;
}

div{
    width: 400px;
    height: 400px;
    border:20px dashed green;
    background-image: url("../IMG/tounao.jpg");
    background-size: cover;
 background-clip:content-box;
}

设置背景图片起始区域(background-origin)
padding-box(以填充盒背景内容)
content-box(以内容盒左上角起始)

背景渐变色
background-image:linear-gradient() ;
linear-gradient(to 结束方向，起始颜色，颜色2，颜色3，颜色n，结束颜色)；
background-image: repeating-linear-gradient(to right, yellowgreen 0px, yellowgreen 20px, skyblue 20px, skyblue 40px);
background-image: linear-gradient(to left, red, yellow, green);
background-image: linear-gradient(to right bottom, red, yellow, green);
background-image: linear-gradient(to left bottom, red, yellow, green);
举个栗子：
我就用最后一个效果图：

透明度rgba
取值：0-1;
取值越小，透明度越高。取值越大，透明度越低。
/* background-color: rgba(222, 12, 222, 0.2); */
透明度opacity
取值：0-1;
取值越小，透明度越高。取值越大，透明度越低。
/* opacity: 0.5; */
rgba和opacity的区别
rgba设置某个属性
opacity设置当前元素和其后代元素的透明度
/* 当前元素进行隐藏 */
/* visibility: hidden; */