css学习第三天(下)

1.css三大特性

1. 继承性 元素会自动继承祖先的样式,常见可继承的有 text-? font-? line-?  list-? color
2. 优先级 就是指权重,并集选择器的每一个是单独算的
3. 层叠性 样式冲突时,权重一样,后来者居上

2.css的象素和颜色

1. 象素单位 px
2. 颜色有 rgb/rgba 在里面可以直接书写颜色 或者#xxxxxx 或者写色相角度 hsl

3.常用的字体属性

font-?	名称	特性
font-size	字体大小	谷歌浏览器所接受最小的字体是12px,更小就没变化了
font-family	字体族	可设多个字体,从左到右逐个查找,最后加上 serif衬线或者 sans-serif非衬线,让浏览器去找那个类型的
font-size	字体风格	normal正常 italic倾斜
font-weight	字体粗细	一般用数字(范围为1~1000) 100到300为细 lighter 400-500 为正常 normal 600及以上为粗 hold
font	字体复合属性	最后2个分别为字体大小(必须倒第二)和字体族(必须最后),其他无所谓 font {xx,xx,xx,font-size,font-faimly}

3.常用的文本属性

text-? color 行高	名称	特性
color	文本颜色
word-spacing 单词间距         letterspacing  字母间距	文本间距	正指 增大间距 符指减小间距 单位px 字母间距通过空格来识别
text-decrotion	文本修饰	none        没有线 overline   上划线 underline 下划线
text-indent	文本缩进	indent:缩进
text-align	文本对齐(水平方向)	left左 center中 right右
line-height	行高
vertical-align	文本对齐(垂直方向)	不能控制块元素 有 top middle bttom baseline(默认值) 基线对齐

行高 :可以输入的值 1.直接输 xxpx 2.输入1.5~2 (行高即为字体大小的1.5~2倍) 3.% 

4.normal 默认(由浏览器决定)

由于字体设计原因,文字在一行中不是绝对垂直居中

        1.单行文字中 ,line-height = height时文字垂直居中

        2.多行文字中,line-height控制行与行间的距离 

4.列表相关属性

list-?	名称	特性
list-style-type	列表符号	常用 none 去掉li的小圆点
list-style-position	列表符号的位置	inside outsid
list-style-image	自定义列表符号	在url里写图片位置
list-style	复合属性	没有要求

5.表格相关属性

	名称	特性
边框相关属性	border-width边框宽度
	border-color边框颜色
	border-style边框风格	none默认 solid实线 dashed虚线
	border 边框复合属性	没有要求
边框独有属性	table-layout 列宽度	auto 自动设置  fixed平分
	border-spacing单元格间距
	border-collapse单元格合并	collapse 合并 separate 不合并(默认值)
	empty-cells 隐藏单元格	show显示(默认值) hide隐藏
	caption-side 表格标题位置	top 在表格上面(默认值) bottom 在表格下面
隐藏单元格和设置单元格间距的前提是单元格没有合并

6.背景 

background-?	名称	特性
background-color	背景颜色
background-imgage	背景图片
bakcground-repeat repeat(重复)	设置背景图片重复方式	repeat 铺满 repeat-x 沿x轴重复 repeat-y 沿y轴重复 no-repeat 不重复
background-position	设置背景图片位置	只写关键字 左中右 水平方向 left center right 上中下 垂直方向 top center bottom 只写一个值的话,另一个默认center
		直接写px 象素 第一个是x轴 第二个是y轴 只写一个值的话,另一个默认垂直居中
bakground	背景图片复合属性	没有要求

7.鼠标相关设置

         cursor 设置鼠标光标样式,当值为pointer为小手,自定义样式可以url去改变

8.盒子模型

	名称	特性
常用的长度单位	px
	em	当前元素或其父元素的font-size X 倍数
	rem (root根)	找html看他的font-size的大小 X 倍数
	%(以后会变)	找父元素的font-size的大小 X 倍数
元素的显示模式	块元素 block	独占一行,可设置宽高,宽度撑满父元素,高度看内容
	行内元素 inline	不独占一行,不可设置高宽,高宽看内容
	行内块元素 inline-block	不独占一行,可设置高宽,高宽看内容,

9.常见元素的显示模式

名称	有哪些
block 块元素	1.主体结构标签 html body 2.排版标签 h1~h6 p div hr 3.列表标签 ol li ul dl dt dd 4.表格标签 table thead thbody tfoot  表格标题opaction tr  5.表单标签 form 下拉框里的选项 option
inline 行内元素	em span strong br a label
inline-block 行内块元素	1.图片 img 2.表单控件 input botton 下拉框select 文本框textarea  3.单元格 th td 4.框架标签 iframe

10.修改元素的显示模式 

 disable,当值为none 时隐藏,其他就是转换成其他的