CSS
1CSS概述
CSS:层叠样式表,是对html进行样式修饰的语言, 如果不同的css样式对同一html标签进行修饰,样式有冲突的部分,应用优先级高的,不冲突的部分共同作用.
作用: 1.修饰html的,使html更加好看.
2. 提高样式代码的复用性
3.使html的内容与样式分离,便于后期的维护.
2CSS引入方式
>1.内嵌样式
把css代码嵌入到html当中 使用style属性将样式嵌入到html标签中,属性的写法: 属性:属性值,多个属性之间用分号隔开.(不建议使用)
2.内部样式
在<head>标签中使用<style>标签进行css引入
3.外部样式(所有浏览器都支持)
将css样式抽取到一个单独到css文件中,谁使用谁就引入
<linkrel="stylesheet" type="text/css"href="demo1.css"/>
1.创建css文件,将属性写在css文件中
2.在head中使用link标签进行引入
4.@import方式(低版本IE不支持),不支持js的动态修改
@import url(“css地址”);
3 CSS选择器
>1基本选择器
-1.元素选择器
语法:html标签名{css属性}
-2.id选择器(id具有唯一性)
语法:#id的值{css属性}
-3.class选择器
语法: .class的值{css属性}
选择器优先级:id>class>元素选择器
>2属性选择器
语法: 基本选择器[属性名='属性值']{css属性}
>3伪元素选择器
a标签的伪元素选择器:
语法:
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
>4层级选择器
语法:
父级选择器 子级选择器... 标签名{css属性}
4CSS属性
>1、文字属性
font-size:大小 font-family:字体类型
>2、文本属性
color:颜色text-decoration:下划线
属性值:none underline
text-align:对齐方式
属性值:left center right
>3、背景属性
background-color:背景颜色
background-image:背景图片
属性值:url("图片地址");
background-repeat:平铺方式
属性值:默认横向纵向平铺
repeat:横向纵向平铺 no-repeat:不平铺 repeat-y:纵向 repeat-x:横向
>4、列表属性
list-style-type:列表项前的小标志
属性值:太多了
list-style-image:列表项前的小图片
属性值:url("图片地址");
>5、尺寸属性
width:宽度 height:高度
>6、显示属性
display:
属性值: none:隐藏
block:块级显示
inline:行级显示
>7、浮动属性
float:
属性值:left right
clear:清除浮动 leftright both
缺点: (1)影响相邻元素不能正常显示
(2)影响父元素不能正常显示