css叠层_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}

(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)、标签/元素选择器

div{color:red;font-size:10px}

(2)、id选择器

#div1{color:red;font-size:10px}

id选择器

(3)、class选择器

.style1{color:red;font-size:10px}

.style2{color:pink;font-size:10px}

id选择器1

id选择器2

id选择器3

优先级总结：id选择器>类选择器>标签选择器

2、属性选择器

input[type='text']{background-color:green}

input[type='password']{background-color:yellow}

name

password

3、a标签伪元素选择器

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

静止状态 a:link{css属性}

悬浮状态a:hover{css属性}

点击状态a:active{css属性}

释放状态a:visited{css属性}

a:link{background-color:white}

a:hover{background-color:pink}

a:active{background-color:red}

a:visited{background-color:green}

hit me

4、层叠选择器

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

#div1 .div1class span{color:red;font-size:100px}

.body2 .div2class span{color:pink;font-size:50px}

三、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

span{display:none;color:red}

function deal(){

document.getElementById("span").style.display="inline";

}

username

对不起您的输入有误！

password

7、浮动属性

float:

属性值：

left:向左浮

right：向右浮动

clear:

属性值：

left:清除左浮动

right：清除右浮动

both:左右均清除

#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}

8、盒子模型

查资料