1 CSS 语法
选择器 {属性 1: 值 1;
属性 2: 值 2
...;}
例如:
- .c1 {width:500px;
- height:100px;
- background-color:#F00;}
2 CSS 导入样式
代码块
1. 行内样式 -->把 CSS 样式写到标签的 style 属性里
2. style 标签中定义
3. 写在单独的 CSS 文件中, 通过 link 标签导入
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
3 CSS 选择器
3-1 基本选择器
代码块
1. ID 选择器 --> html 标签都有唯一的 ID
2. 类选择器 --> HTML 标签可以设置 class 属性
3. 标签选择器 --> p,div,h1 等等还有其它标签定义样式, 对大范围使用
4. 通用选择器 *
3-2 组合选择器
代码块
1. div p 后代选择器(对后代所有 div 后面的 p 都生效)
2. div>p 儿子选择器(只对后代所有 div 后面的一层 p 生效)
3. div+p 毗邻选择器(对 div 同级的后面的 p 生效)
4. div~p 弟弟选择器 (对 div 同级的后面的 p 生效)
3 和 4 有什么区别呢?
3-3 分组和嵌套
代码块
分组:(对分组的标签都生效, 标签之间用逗号隔开)
- div,p{
- color:#F00;}
嵌套: div.p
3-4 属性选择器
代码块
1. div[s14] 找到有 s14 这个属性的 div 标签
2. input[type='email'] 找到 type 是 email 的 input 标签
- <form>
- 邮箱:<input type="email" value="请输入邮箱"></input>
- </form>
- input[type="email"]{
- color:#F00;
- background-color:#CCC;}
3-5 伪类选择器
代码块
1. :hover --> 鼠标移动到标签上时应用的样式
2. :focus --> input 标签获取焦点时应用的样式
3-6 伪元素选择器
代码块
p:before { --> 在 P 标签内部的最前面追加一个内容
- content: "*";
- color: red;
- }
p:after { --> 在 P 标签内部的最后面追加一个内容
}
清除浮动:
- .clearfix:after{
- content: "";
- clear: both;
- display: block;
- }
4 CSS 选择器的优先级
代码块
1. 样式名一样的话
类似 变量覆盖 最后加载的那个样式生效
2. 样式名不一样
根据 权重计算
内联样式 (1000)>ID 选择器(100)> 类选择器 (10)> 元素选择器 (1)> 继承(0)
3. 不讲道理的, 强制
!important
5 CSS 属性
5-1 文字相关的属性
代码块
1. font-family: "字体 1", "字体 2",
2. font-size 字体大小
3. font-weight 字体粗细
4. color 字体颜色
1. 英文的颜色名 red
2. 16 进制颜色代码 #FF0000
3. RGB rgb(255, 0, 0)
4. rgba(255, 0, 0, 0.4) 0.4 指的是不透明度
5-2 宽度和高度
代码块
1. width 宽
2. height 高
只有块儿级标签设置宽和高才有效
5-3 背景 background
- background-color: red
- background-image: url(...)
5-4 文本样式
代码块
1. 水平居中
text-align: center
2. 单行文本的垂直居中
line-height = 父标签的高度
3. 文本装饰线
text-decoration: none/under-line/over-line/line-through
5-5css 的盒子模型
内容 -->padding-->border-->margin
5-6 浮动
float: left/right
浮动的副作用: 需要在自己后面清除浮动
5-7 定位
代码块
2. 绝对定位 --> 相对自己已经定位过的祖先标签
3. 固定定位 --> 相对于屏幕做定位
5-7 溢出
overflow: hidden/scroll/auto
5-8 边框
- border: 1px solid red;
- border-radius: 50%
- 5-9 display
- block
- inline
- inline-block
- none
来源: http://www.bubuko.com/infodetail-3460255.html