css层叠样式初学

一、css简介

　　1、层叠样式表：叠加效果，不同css对同一html修饰，冲突部分，优先级高作用，不冲突部分，共同作用

　　2、css作用

　　　　(1)修饰html
　　　　(2)替代了标签自身的颜色，字号等属性，提高复用性
　　　　(3)html内容与样式分离，便于后期维护

　　3、css引入方式

　　　　(1)内嵌样式

　　　　(2)内部样式（写在head中）

　　　　　　div{color:red;font-size:100}

　　　　　　input{color:red;font-size:100}

　　　　</style>

　　　　(3)web全局样式

　　　　　　1.创建css文件

　　　　　　2.键入：div{color:red;font-size:200px}

　　　　　　3.引入该css文件

　　　　(4)@import方式

　　　　　　基本不用，原因迟滞于html加载css，不支持js动态修改，部分低ie版本不支持

　　　　小结：

　　　　　　style:告知浏览器使用css去解析

　　　　　　ref:css和html的关系

　　　　　　引入写在head中

　　　　　　内部样式也写在head中

二、css选择器

　　1、基本选择器

　　　　(1)、标签/元素选择器

　　　　　　<style>
　　　　　　　　div{color:red;font-size:10px}
　　　　　　</style>

　　　　(2)、id选择器

　　　　　　<style>
　　　　　　　　#div1{color:red;font-size:10px}
　　　　　　</style>
　　　　　　<div id="div1">id选择器</div>

　　　　(3)、class选择器

　　　　　　<style>
　　　　　　　　.style1{color:red;font-size:10px}
　　　　　　　　.style2{color:pink;font-size:10px}
　　　　　　</style>
　　
　　　　　　<div class="style1">id选择器1</div>
　　　　　　<div class="style1">id选择器2</div>
　　　　　　<div class="style2">id选择器3</div>
　　优先级总结：id选择器>类选择器>标签选择器

　　2、属性选择器

　　　　<style>
　　　　　　input[type='text']{background-color:green}
　　　　　　input[type='password']{background-color:yellow}
　　　　</style>
　　　　<form>
　　　　　　name<input type="text" value=""/>
　　　　　　password<input type="password" value=""/>
　　　　</form>

　　3、a标签伪元素选择器

　　　　语法：鼠标放到链接上有四种状态

　　　　静止状态 a:link{css属性}
　　　　悬浮状态 a:hover{css属性}
　　　　点击状态 a:active{css属性}
　　　　释放状态 a:visited{css属性}

　　　　<style type="text/css">
　　　　　　a:link{background-color:white}
　　　　　　a:hover{background-color:pink}
　　　　　　a:active{background-color:red}
　　　　　　a:visited{background-color:green}
　　　　</style>
　　　　<a href="#">hit me</a>

　　4、层叠选择器

　　　　语法：适用于div嵌套，给其中指定的元素修饰

　　　　<style>
　　　　　　#div1 .div1class span{color:red;font-size:100px}
　　　　　　.body2 .div2class span{color:pink;font-size:50px}
　　　　</style>

三、css属性

　　1、文字属性

　　　　font-size:字体大小

　　　　font-family:字体类型

　　2、文本属性

　　　　color:颜色

　　　　text-decoration:下划线

　　　　　　属性值：none/underline

　　　　text-align:对齐方式

　　　　　　属性值：left/right/center

　　3、背景属性
　　　　background-color:背景颜色
　　　　background-image:背景图片
　　　　background-repeat:平铺方式
　　　　属性值：repeat-x/repeat-y/repeat
　　4、列表属性
　　　　list-style-type
　　　　　　属性值很多，用时查
　　　　可以在li前面加图片，效果很棒
　　　　格式：list-style-image:url("xxx.gif");
　　5、尺寸属性
　　　　width:宽
　　　　height:高
　　6、显示属性
　　　　display
　　　　　　属性值：none/inline
　　　　<style type="text/css">
　　　　　　span{display:none;color:red}
　　　　</style>
　　　　<script type="text/javascript">
　　　　　　function deal(){
　　　　　　　　document.getElementById("span").style.display="inline";
　　　　　　}
　　　　</script>
　　　　<form>
　　　　　　username<input type="text" value="">
　　　　　　<span id="span">对不起您的输入有误！</span><br>
　　　　　　password<input type="password" value=""><br>
　　　　　　<input id="btn" type="button" value="button" οnclick="deal()">
　　　　</form>
　　7、浮动属性
　　　　float:
　　　　　　属性值：
　　　　　　　　left:向左浮
　　　　　　　　right：向右浮动
　　　　clear:
　　　　　　属性值：
　　　　　　　　left:清除左浮动
　　　　　　　　right：清除右浮动
　　　　　　　　both:左右均清除
　　　　<style type="text/css">
　　　　　　#div1{background-color:red;width:50px;height:60px;float:left}
　　　　　　#div2{background-color:green;width:50px;height:60px;float:left}
　　　　　　#div3{background-color:pink;width:50px;height:60px;float:left}
　　　　</style>
　　　　<div id="div1"></div>
　　　　<div id="div2"></div>