CSS

一、css的简介

1. 什么是css?
   层叠样式表，css是对html进行样式修饰语言
   层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用
   样式表：就是css属性样式的集合
   外部样式表通常存储在 CSS 文件中,可以极大提高工作效率

2. css的作用
   (1)修饰html的,使其html样式更加好看
   (2)提高样式代码的复用性
   (3)html的内容与样式相分离,便于后期维护

3. 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选择器
css选择器主要是用于选择需要添加样式的html元素。

1. 基本选择器

(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>

(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>

选择器的优先级：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.层级选择器

语法：父级选择器 子级选择器 ......
        示例：
            <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属性
1、文字属性

font:简写属性，作用是把所有针对字体的属性设置在一个声明中
font-size:大小
font-family:字体类型    
font-style:定义字体风格

2、文本属性

color:颜色
text-decoration:下划线
        属性值：none    underline   
text-align:对齐方式
        属性值：left  center  right

    <div>hello css!!!</div>
    <a href="#">click me!!!</a>
    <style type="text/css">
        div{color:red;text-decoration: underline;text-align: right }
        a{text-decoration: none;}
    </style>

3、背景属性

background:简写属性，作用是将背景属性设置在一个声明中
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:简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-type:列表项前的小标志
        属性值：太多了
list-style-image:列表项前的小图片
        属性值：url("图片地址");

        <ul>
            <li>My name is Soar_Sir</li>
            <li>My name is Soar_Sir</li>
            <li>My name is Soar_Sir</li>
            <li>My name is Soar_Sir</li>
        </ul>
        <style type="text/css">
            /* ul{list-style-type: decimal-leading-zero;} */
            ul{list-style-image: url("images/forward.gif");}
        </style>

5、尺寸属性

width:宽度
height:高度

        <div id="d1">div1</div>
        <div id="d2">div2</div>
        <style type="text/css">
            #d1{background-color: red;width: 200px;height: 200px;}
            #d2{background-color: pink;width: 200px;height: 200px;}
        </style>

6、显示属性

display:
        属性值： none:隐藏
                block:块级显示
                inline：行级显示

            <form action="">
                name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
                <br>
                pass:<input id="pass" type="password" />
                <br>
                <input id="btn" type="button" value="button" />
            </form>
            <style type="text/css">
                span{color:red;display: none}
            </style>
            <script type="text/javascript">
                document.getElementById("btn").onclick = function(){
                    document.getElementById("span").style.display = "inline";
                };
            </script>

7、浮动属性

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

8、定位属性

允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。
top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移

四、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:单独设置

使一大块div居中的方法是：
div{margin: 10px auto}(左右使用auto)