CSS(层叠样式表)
定义如何显示HTML元素
1、CSS的三中引入方式:行内样式(内联),内部样式表,外部样式表。
2、语法:CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。每条声明由一个属性和一个值组成。
3、选择器
3.1 元素选择器 div{}
3.3 类选择器 .cl{}
3.4 ID选择器 #id{}
3.5 属性选择器 [type=‘text’]{}
优先级问题:
内联 》 ID选择器 》类选择器 》元素选择器
4、尺寸(行内元素的宽和高不生效)
width: max-width: min-width;
height: max-height; min-height;
5、背景
background-color:
background-image:url(),url();
background-repeat:背景平铺
background-position:背景图位置;水平位置 垂直位置
background-attachment:背景图固定,是否滚动
background-size:背景图尺寸width height; cover全覆盖;contain扩展到最大尺寸;
多张背景图写法:background: url() no-repeat,url();
6、文本:改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
text-indent:首行缩进;
text-align:文本行对齐方式;
text-decoration:下划线underline、删除线line-through、顶划线overline;(装饰修饰)
line-height:高度固定后,可以设置垂直居中
word-break:单词换行
white-space: nowrap;文本不换行
overflow: hidden;
text-overflow: ellipsis;文本超出显示省略号
7、字体
font-family:字体类型;可以写多个,浏览器识别的第一个;
“Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体)”
font-size:字体大小;chrome最小12px;
font-weight:字体粗细;bold加粗;bolder更粗;lighter更细;400等同于normal;700相当于bold;
font-style:斜体;normal正常;italic斜体;oblique倾斜(这两个斜体在浏览器看上去相同)
color;字体颜色;