css引入方式
- style标签
- link标签 引入css文件
- 行内style属性
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
css基本语法结构
- css基本语法结构
- 选择器{
- 属性:属性值;
- 属性:属性值
}
选择器
- 元素选择器 p div hx
- class选择器 .class名
- id选择器 #id名 尽量不用
- 并集选择器 选择器,选择器,… 同时使用多个选择器
- 交集选择器 选择器选择器 选择同时满足多个选择器的元素
- 后代选择器 选择器 选择器 选取包含在某些元素中的元素(层次关系)
- 子代选择器 选择器>选择器 同上 必须紧邻
- 属性选择器 [属性][属性=“属性值”] 通过属性选择 通常和交集一起使用
- 全局选择器 * 同样属性设置 会被其他选择器的修饰覆盖
- 伪类选择器 :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 一般使用在有定位的属性上
数大的显示在前