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文件里不用<style>标签。
html中写明包含style.css文件：<link rel="stylesheet" type="text/css" href="/study/style.css" />
6.优先级
样式中带!important > style属性 > style标签 > 外部文件style.css
网友评论