CSS样式规则

文本规则

    文本规则： css核心属性中的文本属性

属性	属性值
font-size：字体大小	默认16px，最小10px
font-family:字体族科	可以跟中文字体，中文字体不用带引号；可以跟英文字体，如果英文字体是一个单词组成，不用单引号，如果是多个单词组成需要带引号；后面可以跟多个取值，从左侧依次进行匹配；默认字体是宋体。
color：文本颜色	rgb、颜色单词、六位十六进制的颜色值
font-weight：文本加粗	数值类型(100-900；100=细体 400=正常字体 700=加粗字体 900=更粗字体)；关键词类型(lighter=细体 normal=正常字体 bold==粗字体 bolder=更粗字体)
font-style：文本倾斜	normal：普通正常字体 italic：倾斜 oblique：斜体字（强调）
text-decoration：文本修饰线	underline：下划线 line-through：中划线 overline：上划线 none：取消
text-align：水平对齐方式	left center right
line-height：单行文本垂直居中对齐	等于高度时文本垂直居中
text-indent：首行缩进	2em，em是一个相对单位，相对于本标签大小缩放的一个倍数，默认是16像素，1em=16px；
letter-spacing：字符间距	px
word-spacing：单词间距	px

列表规则

 只针对列表标签使用，实际开发中常使用ul>li=====无序列表

标签	属性	属性值
ul	列表项显示类型：list-style	none;square;circle
li，ul	列表项显示类型：list-style-type	none;square;circle;添加到父元素上面能实现，添加到子元素也能实现，这称之为继承性。
ul，li	列表项显示图片类型：list-style-image	url(图片的路径)
li	列表项的位置：list-style-position	outside inside，列表项在li里面还是外面；

使用列表项的时候，所有的效果目前做开发的时候，以上三个属性都不使用，上面是单一属性，
主用：list-style：复合属性
list-style：url(图片路径) none inside
经常使用的一行代码：list-style：none；

边框规则

    含义：元素的边缘位置
    属性：border(复合属性)
    border：10px  solid  gray
    用边框宽度，和边框形态和边框颜色组成。
    注意：1）边框样式是必须值
               2）如果只添加了边框样式的话，会实现一个3px的黑色的实现边框
               3）如果只跟了样式和粗细的话，实现的是对应样式和粗细的黑色边框。
      属性的取值======单一属性为例（粗细为例）         

取值	实现的效果
V1	实现四个方向边框
V1 V2	实现四个方向边框，V1代表上下边框，V2代表左右边框
V1 V2 V3	实现四个方向边框，V1代表上边框，V2代表左右，V3代表下边框
V1 V2 V3 V4	实现四个方向边框，V1代表上边框，V2代表右边框，V3代表下边框，V4代表左边框

border-color和border-style一样可以这样表示

问题：能否设置一个方向的边框？
border-top：
border-left：
border-bottom：
border-right：

背景规则

含义：元素在文本底下显示的内容：背景图片，直播的背景图等等。

1）背景颜色：
background-color：
a）颜色单词
b）rgb
c）#六位十六进制的颜色值
d）rgba（red，green，blue，alpha）
alpha代表的是透明度：透明度为0-1，保留1位小数。例如0.1小数点前面的0可以省略掉。
1代表的是不透明 0代表的是透明。
2） 背景图片
background-image：url(路径)；
如果图片大小<盒子的大小，会显示平铺，直接会看到。
如果图=盒子大小，会显示一样大，但是实际上还是会有平铺的效果。
如果图>盒子大小，图片照样会平铺，只不过盒子只会显示图片的一部分，但实际上还是平铺。

3）背景的平铺属性
background-repeat：默认值是平铺的
repeat=平铺
no-repeat=不平铺
repeat-x=水平平铺
repeat-y=垂直平铺

4）背景的位置属性
background-position：x y
x水平位置 y垂直属性
x取值为正时，水平向右
x取值为负时，水平向左
y取值为正，垂直向下
y取值为负，垂直向上

    也可使用关键词：x=====left、right、center
                                 y=====top、bottom、center

  5）背景的固定和滚动
       background-attachment
              scroll===滚动
               fixed===固定  
               只要添加了背景的固定之后，背景图片就会默认的固定在浏览器窗口的左上角位置
               不会随着滚动条的滚动而被滚上去
               如果有多个盒子，每个盒子的背景图片都添加了固定，也会提前定过渡
   6）背景图片尺寸               
         background-size：x   y
         x====水平方向的尺寸大小
         y====垂直方向的尺寸大小
使用px单位和%单位的时候，会让图片变形，质量不高的话容易失真。
      同样，还会有以下两个取值：
      cover======覆盖，能把背景图片等比例放大，直到铺满为止，但是容易出现裁剪效果
      contain=====包含，也能把背景图片等比例放大，只要有一个边铺满就结束了。

    7）背景的复合属性
           background：color   image   repeat    x   y/  x   y   attachment 
        斜杠前面的x，y代表的位置
        斜杠后面的x，y代表的是大小