1.语法
selector { property:value }
选择器 { 属性:值 }
2.选择器类型
①元素选择器 p
②id选择器 #p
③类选择器 .p
3.注释
style里面的注释是用/* */
4.CSS属性
属性名称 | 属性 | 值 |
---|---|---|
尺寸 | width height |
百分比、像素 |
背景颜色 | background-color | 颜色名字、rgb格式、16进制格式 |
背景图片 | background-image | url(../../xx.jpg) |
背景重复 | background-repeat | repeat 水平垂直方向都重复 repeat-x 只有水平方向重复 repeat-y 只有垂直方向重复 no-repeat 无重复 |
背景平铺 | background-size | contain 把背景图片拉伸 |
文字颜色 | color | 颜色名字、rgb格式、16进制格式 |
对齐 | text-align | left、right、center |
文本修饰 | text-decoration | overline 上划线 underline 下划线 line-through删除效果 blink闪烁效果 none去掉了下划线的超链 |
行间距 | line-height | 数字、百分比 |
字符间距 | letter-spacing | 数字 |
单词间距 | word-spacing | 数字 |
首行缩进 | text-indent | 数字 |
大小写 | text-transform | uppercase 全部大写 capitalize 首字母大写 lowercese 全部小写 |
空白格 | white-space | normal 默认,多个空白格或者换行符会被合并成一个空白格 pre 有多少空白格,显示多少空白格,如果长度超出父容器也不会换行 pre-wrap 有多少空白格,显示多少空白格,如果长度超出父容器,会换行 nowrap 一直不换行,直到使用br |
字体尺寸 | font-size | 数字、百分比 |
字体风格 | font-style | normal 标准字体 italic 斜体 |
字体粗细 | font-weight | normal 标准粗细 bold 粗一点 |
字体字库 | font-family | 写字体名称,IE默认宋体 |
鼠标样式 | cursor | default 箭头 auto 光标 crosshair 十字架 pointer 手掌 e-resize 东向拉伸 ne-resize 东北向拉伸 nw-resize 西北向拉伸 n-resize北向拉伸 se-size 东南向拉伸 sw-resize 西南向拉伸 w-resize 南向拉伸 text 光标 wait 等待标记 help 帮助标记 not-allowed 禁止标记 |
表格布局 | table-layout | automatic 单元格的大小由td的内容宽度决定 fixed 单元格的大小由td上设置的宽度决定 |
表格边框 | border-collapse | separate 边框分隔 collapse 边框合并 |
边框风格 | border-style | solid 实线 dotted 点状 dashed 虚线 double 双线 |
边框颜色 | border-color | 颜色、十六进制格式、rgb格式 |
边框宽度 | border-width | 数字 |
只有一个方向有边框 | border-top-style | top可以换成bottom、left、right,style可以换成color、width等。 |
元素内边距 | padding-left | 数字,left可以换成right、top、bottom padding 上 右 下 左(四边都有,这是参数的顺序) |
元素外边距 | margin-left | 左外边距(left可以换成right、top、bottom) |
超链状态 | link visited hover active |
初始状态,从未被访问过 已访问过 鼠标悬停于超链的上方 鼠标左键点击下去,但是尚未弹起的时候 |
去除超链的下划线 | text-decoration | none |
隐藏 | display visibility |
none hidden(两种方式都可以) |
5.CSS文件
把CSS统一写在style.css文件里,易于管理。
style.css文件里不用