JAVA 之 CSS知识框架

CSS知识导图.png

一、css的简介

1. 什么是css
      层叠样式表，css是对html进行样式修饰语言
      层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用
      样式表：就是css属性样式的集合  
2、css的作用
     (1)修饰html的 使其html样式更加好看
     (2)提高样式代码的复用性
     (3)html的内容与样式相分离 便于后期维护    

3、css的引入方式和书写规范
    (1)内嵌样式
        内嵌样式是把css的代码嵌入到html标签中
        
你好啊
        语法：
            (1)使用style属性将样式嵌入到html标签中
            (2)属性的写法：属性：属性值
            (3)多个属性之间使用分号;隔开
        (不建议使用)

    (2)内部样式
        在head标签中使用style标签进行css的引入
        
        语法：
            (1)使用style标签进行css的引入
                
        link与@import方式的区别：
            (1)link所有浏览器都支持， import部分低版本IE不支持
            (2)import方式是等待html加载完毕之后在加载
            (3)import方式不支持js的动态修改

二、css选择器

1、基本选择器
    (1)元素选择器
        语法：html标签名{css属性}
        示例：
            hello css!!!
            

    (2)id选择器    id唯一性
        语法：#id的值{css属性}
        示例：
            
hello css1!!!
            
hello css2!!!
            

    (3)class选择器
        语法：.class的值{css属性}
        示例：
            
div1
            
div2
            
div3
            
    
    ***选择器的优先级：id>class>元素

2、属性选择器
    语法：基本选择器[属性=‘属性值’]{css属性}
    示例：
        

            name:

            pass:

        
            

3、伪元素选择器
    a标签的伪元素选择器
        语法：
            静止状态    a:link{css属性}
            悬浮状态    a:hover{css属性}
            触发状态    a:active{css属性}
            完成状态    a:visited{css属性}
        示例：
            点击我吧
                

4、层级选择器
    语法：父级选择器 子级选择器 .....
    示例：
        

            

                span1-1
            
            

                span1-2
            
        
        

            

                span1-1
            
            

                span1-2
            
        
        
        

三、css属性

1、文字属性
    font-size:大小
    font-family:字体类型        
2、文本属性
    color:颜色
    text-decoration:下划线
        属性值：none    underline   
    text-align:对齐方式
        属性值：left  center  right
        
hello css!!!
        click me!!!
        
3、背景属性
    background-color:背景颜色
    background-image:背景图片
        属性值：url("图片地址");
    background-repeat:平铺方式
        属性值：默认横向纵向平铺
                repeat:横向纵向平铺
                no-repeat:不平铺
                repeat-y：纵向
                repeat-x：横向
    
    body{
        background-color: black;
        background-image: url("images/dog.gif");
        background-repeat: repeat-y;
    }

4、列表属性
    list-style-type:列表项前的小标志
        属性值：太多了
    list-style-image:列表项前的小图片
        属性值：url("图片地址");
        
        

            
程序员
            
程序员
            
程序员
            
程序员
        
        

5、尺寸属性  
    width:宽度
    height:高度
        
div1
        
div2
        
6、显示属性
    display:
        属性值：none:隐藏
                block:块级显示
                inline：行级显示
        
        

            name:对不起 输入不符合要求
            

            pass:
            

            
        
        
        

7、浮动属性
    float:
        属性值：left  right
                clear:清除浮动 left right both
        缺点： (1)影响相邻元素不能正常显示
                (2)影响父元素不能正常显示

四、css盒子模型

border:
    border-width:边框的宽度
    border-color:边框的颜色
    border-style:边框的线型
    
    border-top:上边框
    border-bottom:下边框
    border-left:左边框
    border-right:右边框
            
padding:
    代表边框内壁与内部元素之间的距离
    padding:10px;代表上下左右都是10px
    padding:1px 2px 3px 4px;上右下左
    padding:1px 2px;上下/左右
    padding:1px 2px 3px;
    padding-top:单独设置
margin:
    代表边框外壁与其他元素之间的距离
    margin:10px;代表上下左右都是10px
    margin:1px 2px 3px 4px;上右下左
    margin:1px 2px;上下/左右
    margin:1px 2px 3px;
    margin-top:单独设置