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