CSS_rules

CSS 特性
1）控制灵活，功能强大 元素-->标签 针对html的元素
2）可以设置html元素的属性，与html框架的进行分离
3）执行效率更高
CSS语法
text-indent 文字缩进
选择器{属性：值} selector{property:value;property:value;.....}
1. 多个属性和值分号隔开，last one 可加可不加
2. 可以 Java 式写法
3. 大小写不敏感，but in selector to class and id's names 敏感
(1) CSS 可以写入标签作为参数，内联
1）作用叠加(内联未定义的叠加，已定义的叠加)
2）作用域就近

type "text/css"
(2) CSS 可以写入head标签底部，外联
(3) 可以是外部文件，在html head 标签中加入link标签 (优先级最低)
选择器 selector
1. 元素选择器 标签名 定位
2. 类选择器 .classname{} 可在标签中重复使用 标签中使用class 参数 调用相应CSS——style
3. id选择器 #idname {} 定位准确，效率最低 只能针对单一标签
id 不可重复 标签中使用id参数调用相应CSS_style
块--> 区域--> 元素 <标签>

CSS padding:值 会同时拉宽拉高“值”块
padding-bottom
-left
-right 只改变单独的padding
-top
margin : 0 auto 自动居中
margin 与最近框的距离，不改变块大小
顶右底左的顺序
只合并垂直间距，如果两者相同，只选其一；如果不同，选大间距
border : 1px solid #foo
宽 类型 颜色
CSS 流-->
块--> 文档流 每一块占一行
float-none
-left 漂浮
-right
clear:both
left 清除受漂浮的影响
right
元素可引用多个类 class="a a_blue"
div div{} a div{} .a1,.a2,.a3{}
.a1{} .a2{} .a3{}
id aa div{}
in-line block
display 改变块的模式
overflow = {hidden,auto,scroll(滑块)}
background-repeat : no-repeat;
background-position: top left;
background-size:auto;
contain;
cover;
值

position:absolute
relative
inherit
相对位置
1）左上角的顶点作为原点
2）left代表x值
top代表y值
3)原来的位置不会被删除
position: absolute 原点在整个网页显示区的左上角
left top 控制顶点坐标
父类div 相对位置，子类div绝对位置 相对的绝对位置
border-radius: 5px; 边框圆角
line-height: 行高
搜索框多图标背景 + input框
先编写的在最底层，用 z-index:[-oo,+oo] 可以调整层
width:100% 占其父块的百分比
position:fixed 固定位置 有bottom坐标
background-size: cover 拉伸填满
text-decoration:underline 文字加下划线
&rrar; 小箭头
ol 有序列表 ul 无序列表 dl 自定义列表
ul 列表
-webkit- 定义在谷歌浏览器中的相关规则
-ms- 定义在IE浏览器中的相关规则
ul padding 各子块间距 list-style 定义项目符号规则
display: block 正常块 文档流 自顶向下
inline-block 行内块 从左向右
inline 行内元素 有宽无高，没有块属性和块规则
伪类
名字固定格式 selector:before|after|hover
before&after 必须有{content}属性
a标签的伪类
1）link 未点击
2）visited 访问过
3）hover(common) 鼠标滑过
4）active 激活（按下）
font-weight:bold 加粗
CSS3 动画{ 对所有进行过度 过渡需要时间
过渡 transition: all time(s) {ease,linear(线性),ease-in,ease-out,ease-in-out,none}
动画 1) animation: "name" "time(s)" {ease,linear(线性),ease-in,ease-out,ease-in-out,none} {infinite(无限次循环)}
animation-play-state:{running,pause}(可以放在需要的地方来中途暂停动画)
2) 设置
定义名称
@keyframes "name"
{
from{}
to{}
}
@keyframes "name"
{
0%{}
25%{}
50%{}
75%{}
100%{}
}
}

From WizNote