1.css三大特性
- 继承性 元素会自动继承祖先的样式,常见可继承的有 text-? font-? line-? list-? color
- 优先级 就是指权重,并集选择器的每一个是单独算的
- 层叠性 样式冲突时,权重一样,后来者居上
2.css的象素和颜色
- 象素单位 px
- 颜色有 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 时隐藏,其他就是转换成其他的