CSS 样式介绍（二）

各种样式属性的作用

1.文字相关的样式属性

p {
    color: blue;  /**文字的颜色**/
    font-size: 20px;  /**文字的大小**/
    
    font-family: "Microsoft YaHei", tahoma; /**文字的字体**/
    font-weight: 400;/**文字的粗细 400等于normal ,700的bold**/
    font-style: italic; /**文字斜体还是正常的**/
    /**font：综合设置字体样式 font属性用于对字体样式进行综合设置，基本语法如下：{font: font-style font-weight font-size font-family} 不能更换顺序*/
    font: normal 900 30px "宋体";  
    /**必须保留 font-size 和 font-family 否则 font 不起作用**/
    font: 30px "宋体";   
}

strong {
    font-weight: normal; /**粗体标签设置font-weight:让粗体变为不加粗**/
}

em {
    font-style: normal; /**斜体标签设置font-style：让斜体变为不斜体*/
}

#line-height {
    line-height: 50px; /*每行的高度*/
    text-align: left; /*文字对齐方式*/
    text-indent: 2em; /*首行缩进,建议用em设置 1em就是一个字的宽度*/
    letter-spacing: 10px;  /*每个字的间距*/
    text-decoration: none; /**取消下划线 文本装饰**/
    word-spacing: 20px; /*单词的间距*/
    color: rgba(0, 0, 0, 0.5);  /*颜色透明度 css3*/
    text-shadow: 4px 5px 5px red; /*文字阴影 css3， text-shadow带了4个参数水平位置 垂直位置 模糊距离 颜色*/
}

2.块级元素、行内元素、行内块元素

    
    
    
    

    
    


    
    
    
    
SDK叫啥的的
    

    
山东矿机

    
    
    
div就是块级元素，最典型的块级元素
    

        
 块级元素特点
        

        
1.总是从新行开始
        
2.高度、行高、外边距及内边距都是可以控制
        
3.宽度默认是100%
        
4.可以容纳内联元素和其他块元素。
    
    

    
    123 
    345
     567 
    

        
 行内元素特点
        

            
1.和相邻行内元素在一行上
            
2.宽、高是无效的，但水平方向的padding和margin可以设置，垂直方向无效
            
3.默认宽度就是它本身的内容宽度
            
4.行内元素只能容纳文本或其他行内元素（a 标签除外，比较特殊）
        
    

    
     
    

         
 行内块元素特点
         

            
1.和相邻 行内元素（行内块）在一行上，但之间会有空白间隙
            
2.默认宽度就是它本身内容的宽度
            
3.高度、行高、外边距、内边距都可以控制
        
    

    
    

         
 标签显示模式转换
         

            
1.块转行内：display: inline;
            
2.行内转块：display: block;
            
3.块、行内元素转换为行内块：display: inline-block;
        
    

    
块级转行内
    行内转块级


    百度

3.背景样式属性

div {
    width: 600px;
    height: 300px;
    background-color: pink; /*背景图片*/
    background-image: url(test.png); /*背景图片*/
    /*background-repeat：照片是否平铺，repeat-x水平平铺，repeat-y 垂直平铺，repeat水平垂直平铺， no-repeat不平铺*/
    background-repeat: no-repeat; 
            
    /* 1.利用方位名词 top bottom center left right来更改背景图片位置。（如果方位名词只写一个那么另外一个默认是center）*/
    background-position: left bottom;
    background-position: center center;
    background-position: left;
    /**2.利用精确单位更改背景图片位置： 第一个是x坐标,第二个是y 坐标**/
    background-position: 10px 30px; 
    /**3.利用精确单位和方位更改背景图片位置**/
    background-position: center 20px; /**代表水平居中 垂直距离20px**/

    /*background-size：指定对象背景图的尺寸大小：宽度 高度, 尽量只改一个值，另外一个会等比例缩放，防止图片失真、变形*/
    background-size: 80px;
    background-size: 50%;  /**通过百分比缩放图片大小***/
    /*cover 会自动调整缩放比例，保证图片始终填充满背景区域，如果溢出部分则互被隐藏*/
    background-size: cover;
    /*contain 会自动调整缩放比例，保证图片完整的显示在背景区域。如何背景区域宽高比例不相同，不会填充背景区域*/
    background-size: contain;

    /**background-attachment背景图固定：默认是scroll可以滚动的，fixed代表不可滚动*/
    background-attachment: fixed;
    /**背景属性简写: background属性的值的书写顺序官方并没有强制标准的为了可读性，建议大家如下写：
            background 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/
    background: #000 url(test.png) no-repeat scroll bottom right;
    /*放多张图，为了避免背景色将图片盖住，背景色通常都定义在最后一组上，不定义在前面是防止颜色被后面的覆盖掉*/
    background: url(test.png) no-repeat scroll bottom right,
            url(test.png) no-repeat scroll top right #ccc;
}

a:hover { /**鼠标经过给我的链接添加背景图片**/
    background: url(test.png) no-repeat;
}

4.css3样式特性

• 1.重叠性(重叠的属性以最后样式为准)
• 2.继承性:所谓继承性是指书写css样式表时，子标签会继承父标签的某些样式，如字体、字号、文字颜色，跟文字类有关系的属性可以继承
• 3.优先级性: 0, 0, 0, 0。特殊性公式：从左往右，左边最大
• 标签选择器 0, 0, 0, 1
• 类选择器 0, 0, 1, 0
• 伪类选择器 0, 0, 1, 0
• id选择器 0, 1, 0, 0
• 行内式更高，就是在标签内写样式 1, 0, 0, 0
• 最大的 不是选择器，是!important 一旦出现优先执行
• 特别注意：继承的权重为0

p {
    color: orange!important; /**级别最大**/
}

ul li { /*权重叠加 0 0 0 2*/
    color: green;
}

li { /**0 0 0 1**/ 
   color: red;
}


            

                
继承的权重为0