1.css层叠样式表 cascading style sheets 多个样式可以层层覆盖叠加,如果不同的css样式对同一个html标签进行修饰,有冲突是使用优先 级高的。
2.css特点:a丰富的样式定义 b易于使用和修改 c 多页面应用 d层叠 e页面压缩
3.语法规则,两部分 a选择器 选择器通常是需要改变的样式
b 一条或多条声明 由一个属性和值组成(css对大小写不敏感)
4.(1)内联方式:css样式嵌入到html标签当中,类似属性的用法,可以单独设置某个元素样式,不利于样式重用
(2)内部样式:head标签中使用style标签引入css,可以控制页面中多个元素样式,只能一个页面使用
(3)外部样式:将css样式抽成一个单独文件,多个页面可以同时使用。
优先级:内联样式>内部样式>外部样式
5.css选择器:
a标签选择器:在<head> 中使用style标签引入在其中声明标签选择器,html标签属性,属性值
b.id选择器
c class选择器
优先级 id class 标签
6.CSS属性:font-size:字体大小
font-family:文字的字体
font-style:规定斜体字 italic 文本斜体显示 oblique 文本倾斜显示
font-weight:文本的粗细100~900 九级加粗度,100最细 400等价于normal,700等价于bold;
文本属性:color 设置文本颜色
text-indent:5em 缩进元素中文本的首行,取值类型 text—indent:5em;第一行缩进五个字符
text-indent:20% 表示此段落第一行缩进父容器宽度的百分之二十;
text-decoration:none 关闭原本应用到一个元素的所有装饰
underline 添加下划线
overline 顶端上划线
line-through 文本中间画一个贯穿线
blink 让文本闪烁
text-aligh 对齐
word-spacing 字符之间的间隔
letter-spacing 单词或者字母之间的间隔
line-height 设置行高
7.背景属性
background-color 背景颜色,默认透明
background-image:url(“图片路径”):设置背景图片
background-repeat:repeat-y 垂直方向平铺
repeat-x水平方向平铺
repeat 水平垂直方向平铺
no-repeat任何方向都不平铺
background-position 改变图像在背景中的位置,top bottom left right center
可以简写没有顺序
8.列表属性 list-style-type:decimal改变列表的标志类型
list-style-image:url(“images/xxx.gif“)inside
9.尺寸显示轮廓属性
width 设置元素的宽度
height:设置元素的高度
display:none 不显示,block 块显示 inline行级显示 inline-block 行级块 outline-style:绘制于元素周围的一条线
10.浮动属性 模拟浮动的块 display
静态定位static
相对定位 relative
绝对路径 absolute 相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么他的位置相对于视窗本身。
固定位置 fixed 网站左下角和右下角的广告,往下滑动还是有的。
11.CSS 盒子模型,border 边框 margin 外边框 padding 内边距 element一个元素 height元素高度 width元素宽度
边框的属性:border-style 边框样式 solid实线,double实心线, dashaed虚线组成的边框,dotted圆点组成的边框
边框的颜色:border-color
边框的宽度: border-width
外边距属性:margin 边框和边框外层的元素距离
四个方向的距离顺序(top right bottom left)
12.css3扩展属性
1.border-radius 圆角属性 border-radius:20px;
2.box-shadow 添加阴影 box-shadow:10px 10px 5px 颜色;
3.background-size 规定背景图片的尺寸 ,
4.background-image 未指定元素使用多个背景图像,
background-image:url(../img/001.jpg),url(../002.bmp);
background-repeat:no-repeat,no-repeat
background-size:200px 100px 200px 100px;
background-position :顺时针