css基础
css是层叠样式表,是对html进行样式修饰的语言
层叠:就是层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的部分应用优先级高的,不冲突的部分共同作用。
样式表:就是css属性样式的集合
css的作用
(1)修饰html,使html更加美观
(2)提高样式代码的复用性
(3)html的内容与样式相分离,便于后期维护
css的引入方式和书写规范
(1)内嵌样式
内嵌样式是把css样式嵌入到html标签中
1) 使用style属性将样式嵌入到html标签中
2) 属性的写法:属性:属性值
3)多个属性之间使用分号;隔开
(2)内部样式
在head标签中使用style标签进行css的引入
<style type="text/css">
</style>
1)使用style标签进行css的引入
<style type="text/css">
属性:type:告知浏览器使用css解析器去解析
2) 属性的写法:属性:属性值
3)多个属性之间使用分号;隔开
(3)外部样式
将css样式抽取成一个单独css文件,谁去使用谁就引用
<link rel="stylesheet" type="text/css" href="demo.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("demo.css");
</style>
link与@import方式的区别:
1)link所有浏览器都支持 import部分低版本IE不支持
2)import方式是等待html加载完毕之后再加载
3)import方式不支持js的动态修改
css选择器
1、基本选择器
(1)元素选择器
语法:html标签名{css属性}
(2)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属性:
1、文字属性
font-family:字体类型
font-size:大小
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:
5、尺寸属性
width:
height:
6、显示属性
display:none
block:块级显示
inline:行级显示
7、浮动属性
float:
属性值:left right
clear:清除浮动 属性值:left,right,both
缺点:(1)影响相邻元素不能正常显示
(2)影响父元素不能正常显示
盒子模型:
border-width:盒子的厚度
padding:盒子内壁与内部元素之间的距离
margin:盒子的外壁与外部元素之间的距离
border-width:边框的宽度
border-color:边框的颜色
border-style:边框的线型
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
padding:代表边框内壁与内部元素之间的距离
padding:10px
padding:1px 2px 3px 4px 上右下左
padding:1px 2px 上下/左右
padding:1px 2px 3px; 上(左右)下
padding-top:单独设置
padding-bottom:
padding-left:
padding-right:
margin:代表边框外壁与其他元素之间的距离
margin的用法与padding类似
左右设置为auto可以将div居中,这个非常重要