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)