css笔记

1.css书写规范：CSS (Cascading Style Sheets) ：层叠样式表----->对标签进行样式的设置
    <head>
        <style>
            /*css代码*/        //注释快捷点ctrl+/
            span{font-size:30px;color:bule;}   //属性1：值1；属性2：值2；
        </style>
    </head>

2.选择器
    1.元素选择器
        元素名称{}
        span{    }    //此样式作用于所有的span标签
            
    2.类选择器名称
        先定义class属性
        .类名{/*css   ...*/}    //作用于所有此class属性的标签
    
    3.id选择器
        定义id属性，必须在本页面唯一
        #id{ /* css  */   }        //#后面没有空格 作用于此id对应的标签
        
        改变特定标签内容属性值
        
    4.层级
        选择器1 选择器2 …..{   //选择器有层级关系，表示作用与选择器1下的选择器2标签
                /*css样式代码*/
        }
        
    5.组合选择器
        选择器1，选择器2...{  //作用于所有的选择器
            
        }
2.边框属性
    border : 1px solid red;  //边框的粗细 样式 颜色
    width:300px;            //边框宽度
    height:300px;            //边框高度
    
3.浮动属性（float）
    三个值：left right none（默认值）    //设置浮动属性后，脱离原来文档流，即脱离原来版式
    注意事项：
        当标签中有内容时，浮动后不会被覆盖
    
4.转换
    行内元素    //有多少内容占多少空间
    块级元素    //独占一行，自带换行符
    display:block;   //块级元素显示
    display:inline;  //行内元素显示
    display:none     //不显示，不占空间
    
5字体属性
    font-size:100px;
    color:red;  //不需要font
    
6.盒子模型
    边框    border   //与前面讲的边框是一个边框，border : 1px solid red; 
    内边距    padding
    外边距    margin   
            margin:0px auto; //居中
    
    均有对应的left right top bottom属性如    border-left:20px;
    也可进行通用设置
7.css和html结合的方式
    内部样式
        <a style="font-size:120px ; color : red;">船只学院</a>
        <head><style>  ....   </style></head>
    外部样式
        <link rel="stylesheet" type="text/css" href="cssdemo.css"/>
        三个属性 rel：表示导入的为样式列表
                type：表示导入的为css
                href: 文件路径