CSS基础

一、css的简介

CSS 是Cascading Style Sheets的缩写，中文译名为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

css的引入方式

        (1)内嵌样式
            内嵌样式是把css的代码嵌入到html标签中
            <div style="color:red;font-size: 100px;">你好啊 小朋友</div>
            语法：
                (1)使用style属性将样式嵌入到html标签中
                (2)属性的写法：属性：属性值
                (3)多个属性之间使用分号;隔开
            不建议使用
        (2)内部样式
            在head标签中使用style标签进行css的引入
            <style type="text/css">
                div{color:red;font-size: 100px;}
            </style>
            语法：
                (1)使用style标签进行css的引入
                    <style type="text/css">
                        属性：type：告知浏览器使用css解析器去解析
                (2)属性的写法：属性：属性值
                (3)多个属性之间使用分号;隔开

        (3)外部样式
            将css样式抽取成一个单独css文件 谁去使用谁就引用
            <link rel="stylesheet" type="text/css" href="demo1.css"/>
            语法：
                (1)创建css文件 将css属性写在css文件中
                (2)在head中使用link标签进行引入
                    <link rel="stylesheet" type="text/css" href="css文件地址"/>
                    rel:代表要引入的文件与html的关系
                    type：告知浏览器使用css解析器去解析
                    href：css文件地址
                (3)属性的写法：属性：属性值
                (4)多个属性之间使用分号;隔开
        (4)@import方式
            <style type="text/css">
                @import url("css地址");
            </style>
            link与@import方式的区别：
                (1)link所有浏览器都支持 import部分低版本IE不支持
                (2)import方式是等待html加载完毕之后在加载
                (3)import方式不支持js的动态修改

CSS选择器

        (1)元素选择器
            语法：html标签名{css属性}
            示例：
                <span>hello css!!!</span>
                <style type="text/css">
                    span{color:red;font-size:100px; }
                </style>
        (2)id选择器    id唯一性
            语法：#id的值{css属性}
            示例：
                <div id="div1">hello css1!!!</div>
                <div id="div2">hello css2!!!</div>
                <style type="text/css">
                    #div1{background-color: red;}
                    #div2{background-color: pink;}
                </style>
            id的属性唯一使用
        (3)class选择器
            语法：.class的值{css属性}
            示例：
                <div class="style1">div1</div>
                <div class="style1">div2</div>
                <div class="style2">div3</div>
                <style type="text/css">
                    .style1{background-color: red}
                    .style2{background-color: pink}
                </style>
        class属性可以共用
        ***选择器的优先级：id>class>元素

    2、属性选择器
        语法：基本选择器[属性=‘属性值’]{css属性}
        示例：
            <form action="">
                name:<input type="text" /><br/>
                pass:<input type="password" /><br/>
            </form>
            <style type="text/css">
                input[type='text']{background-color: yellow}
                input[type='password']{background-color: pink}
            </style>    

    3、伪元素选择器
        a标签的伪元素选择器
            语法：
                静止状态    a:link{css属性}
                悬浮状态    a:hover{css属性}
                触发状态    a:active{css属性}
                完成状态    a:visited{css属性}
            示例：
                <a href="#">点击我吧</a>
                <style type="text/css">
                    a:link{color:blue}
                    a:hover{color:red}
                    a:active{color:yellow}
                    a:visited{color:green}
                </style>    

    4、层级选择器
        语法：父级选择器 子级选择器 .....
        后代选择器
        .row .btn { width: 200px; }
        子元素选择器
        .row > .btn { width: 200px; }
        兄弟选择器
        .btn + .btn { margin-left: 15px; }
        伪类
        a:hover { color: red; }

        示例：
            <div id="d1">
                <div class="dd1">
                    <span>span1-1</span>
                </div>
                <div class="dd2">
                    <span>span1-2</span>
                </div>
            </div>
            <div id="d2">
                <div class="dd1">
                    <span>span1-1</span>
                </div>
                <div class="dd2">
                    <span>span1-2</span>
                </div>
            </div>

            <style type="text/css">
                #d1 .dd2 span{color:red}
            </style>

CSS属性

color 设置文本颜色
line-height 设置行高
text-align 对齐元素中的文本
　属性值：left center right
border-collapse 设置是否把表格边框合并为单一的边框

css盒子模型

border
边框
padding
代表边框内壁与内部元素之间的距离
margin
代表边框外壁与其他元素之间的距离

设置边框属性顺序 ：上右下左 优先级顺序
js文件中 window.onload表示html文件加载完后，再执行function函数

window.onload = function() {
}