前端【css】

1、常用样式
font-size:16px; ------ 设置字体大小
font-family:“宋体”; ------ 设置字体样式
为了防止不支持中文，出现乱码，可以使用Unicode字体

font-weight:bold; ------ 字体加粗，也可以写数字，如：700
font-style:italic; ------ 字体倾斜，恢复正常字体使用normal
font: 30px “新宋体”; ------ 综合写法
text-decoration: none; ------ 去掉超链接下划线
display:block; ------ 把行内元素转换为块级元素
display:inline; ------ 把块级元素转换为行内元素
display: inline-block; ------ 转换为行内块元素
text-align:center; ------ 让文字水平居中
line-height: 30px; ------ 垂直居中，假设块级元素高度为30px
background-image: url(…/image/timg.gif); ------ 设置背景图片(默认平铺)
background-repeat : repeat | no-repeat | repeat-x | repeat-y ------ 背景是否平铺 ：平铺 | 不平铺 | 横向平铺 | 纵向平铺
background-position: top | center | bottom | left | center | right ------ 背景位置
background-position: 10px 10px| 10px center | center 10px ------ 背景位置坐标方式
background-attachment: fixed; ------背景固定
background: 背景颜色 背景图片地址 背景平铺 背景滚动/固定 背景位置; ------ 背景简写
background-color: rgba(0,0,0,.1); ------ 背景透明
solid dashed dotted none ------ 边框：实线 虚线 点线 无
border可以指定上下左右，如：border-top: none;
border-collapse: collapse; ------ 合并相邻的边框
父 position: relative; 子 position: absolute;top: 50%;left:50%; ------ 绝对定位
border-radius:50%; ------ 把元素变成圆形
transition:all 0.6s; ------ 过度时间(谁需要给谁加)

2、选择器
1）后代选择器

    
    
    


    

        
普通狗
        
普通狗
        
普通狗
    
    

        

            
王可可
            
王可可
            
王可可
        
    

2）子元素选择器

    
    
    


    

        儿子
        儿子
        儿子
    
    

        

            孙子
            孙子
            孙子
        
    

3）交集选择器

    
    
    


    
红色
    
红色
    
红色
    
红色
    
蓝色
    
蓝色

4）并集选择器

    
    
    


    我和你
    
心连心
    同住
    
地球村

链接伪类选择器

a:link;  ------ 未点击
a:visited; ------ 点击后
a:hover; ------ 悬停
a:active; ------ 鼠标点击未松手

3、CSS三大特性
层叠性、继承性、优先级
权重计算公式

权重叠加(没有进位)

• div ul li ------> 0,0,0,3
• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1
  注意：如果父级元素没有选中子级元素，则继承权重为0，选中则权重叠加