CSS常用样式整理

css引入方式

1. style标签
2. link标签 引入css文件
3. 行内style属性

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

css基本语法结构

• css基本语法结构
• 选择器{
  • 属性：属性值；
  • 属性：属性值
    }

选择器

1. 元素选择器 p div hx
2. class选择器 .class名
3. id选择器 #id名 尽量不用
4. 并集选择器 选择器,选择器,… 同时使用多个选择器
5. 交集选择器 选择器选择器 选择同时满足多个选择器的元素
6. 后代选择器 选择器 选择器 选取包含在某些元素中的元素（层次关系）
7. 子代选择器 选择器>选择器 同上 必须紧邻
8. 属性选择器 [属性][属性=“属性值”] 通过属性选择 通常和交集一起使用
9. 全局选择器 * 同样属性设置 会被其他选择器的修饰覆盖
10. 伪类选择器 :xxx 选择元素状态或元素的关系 通常和交集一起使用
    • :active 点击状态
    • :hover 鼠标悬浮状态

常用属性

color 文字颜色 英文 rgb值 #xxxxxx
font-size 字体大小 英文 像素
font-family 字体类型
text-align 文字对齐方式 可对内联元素生效
text-decoration 文字修饰 上中下线
width 宽 像素 比例 可随意继承父元素
height 高 同上 需要html和body 或在需要设置高度的块上定高度
line-height 行高 把块中的文字水平居中 行高和块高设置相同
background-color 背景颜色
background 背景图片 url(img/test.png)
background-repeat 背景图片重复方式
list-style li上的标记改变
display 控制元素显示方式
none 不显示
block 块
inline 内联 不能设置宽高
inline-block 内联块 可以设置宽高
border 可以使用复合属性 1px solid black
可以分开设置
border-top
border-bottom
border-left
border-right

border-radius 边框圆角

padding 内部填充（边框和内容之间的空间） 可以使用复合属性
10px 四边
10px 20px 上下 左右
10px 20px 30px 上 左右 下
10px 20px 30px 40px 上 右 下 左
可以分开设置
同上

margin 外边距（元素间的间距）可以使用复合属性 同上
复合属性时 0px auto 可以使块左右居中
可以分开设置
同上

overflow 块嵌套时 排布超过父元素边界
hidden 隐藏
float 元素漂浮（不要与其他元素产生冲突）
left
right

cursor 鼠标类型
pointer 手

position 定位
static 默认文档流 块从上到下 内联从左到右
relative 相对定位 本身不脱离文档流 以自身位置进行偏移
absolute 绝对定位 脱离文档流 以页面位置进行偏移
fixed 固定定位 脱离文档流 以页面位置进行偏移 并固定在此处

top 向下偏移 负值反方向
left 向右偏移
z-index 一般使用在有定位的属性上
数大的显示在前

text-align对span不生效的原因