css3总结笔记_html/css_WEB

属性选择器

E[attr]只使用属性名，但没有确定任何属性值
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
实例：百度文库;

测试文字

备注：IE7及以上支持;

结构性伪类

E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/匹配奇数行/
p:nth-child(even){background:red}/匹配偶数行/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

实例：新浪头部导航

            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
           测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字

其它伪类

E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素
Content 属性

css3绘制叉号

a{ display: inline-block; width: 20px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg) }    a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg);}

文字

文字阴影

text-shadow：x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡很卡很卡

文字阴影应用

最简单用法

text-shadow:2px 2px 4px black

阴影叠加

text-shadow:2px 2px 0px red, 2px 2px 4px green;

先渲染后面的，再渲染前面的
几个好玩的例子

//层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;//光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;//火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;

文字描边

webkit-text-stroke:宽度颜色

新增文本功能

Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从左到右
注意要配合unicode-bidi 一块使用

p{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;unicode-bidi: bidi-override}

Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

p{width:300px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

自定义文字

代码格式

@font-face {    font-family: 'miaov';    src: url('1-webfont.eot');    src: url('1-webfont.eot?#iefix') format('embedded-opentype'),         url('1-webfont.woff') format('woff'),         url('1-webfont.ttf') format('truetype'),         url('1-webfont.svg#untitledregular') format('svg');    font-weight: normal;    font-style: normal;}

转换字体格式生成兼容代码http://www.fontsquirrel.com/fontface/generator

弹性布局

弹性盒模型

    1    2    3    4    5

注意在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box

box-orient 定义盒模型的布局方向

Horizontal 水平显示vertical 垂直方向

 .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-orient:vertical; }

box-direction 元素排列顺序

 Normal 正序 Reverse 反序

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff; }

box-ordinal-group 设置元素的具体位置

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{width:100px;height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}

box-flex 定义盒子的弹性空间

子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){width:300px;}.box div:nth-of-type(2){-webkit-box-flex:2;}.box div:nth-of-type(3){-webkit-box-flex:3;}.box div:nth-of-type(4){-webkit-box-flex:4;}.box div:nth-of-type(5){-webkit-box-flex:5;}

box-pack 对盒子富裕的空间进行管理

start 所有子元素在盒子左侧显示，富裕空间在右侧
end 所有子元素在盒子右侧显示，富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布

 .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:justify  ;  }

box-align 在垂直方向上对元素的位置进行管理

star 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中

    1s    2s    3s    4s    5s

盒模型阴影

用法

box-shadow:[inset] x y blur [spread] color

参数
inset投影方式
inset：内投影
不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径
先扩展原有形状，再开始画阴影color

box-shadow:10px 10px 30px blue;box-shadow:inset 10px 10px 30px blue;box-shadow:0 0 30px 10px #000; box-shadow:0 0 30px 30px #000,inset 0 0 30px yellow;

其他盒模型新增属性

box-reflect 倒影

direction 方向必选 above|below|left|right;
距离
渐变（可选）

img{ -webkit-box-reflect:below;}//上下排列，倒影在下方img{ -webkit-box-reflect:right 10px;}//左右排列，倒影在右方img{-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}//线性渐变，逐渐消失background:-webkit-linear-gradient(red 0,blue 100%);//背景渐变

resize 自由缩放

both 水平垂直都可以缩放
horizontal 只有水平方向可以缩放
vertical 只有垂直方向可以缩放

.box{width:100px;height:100px;background:url(bg.jpg);border:5px solid #000; resize:both; overflow:auto;}

注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放

box-sizing 盒模型解析模式

content-box 标准盒模型 width/height=border+padding+content
border-box 怪异盒模型 width/height=content

.box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box;}

Css3分栏布局

column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线

.wrap{width:900px;border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-width:400px;}//分成了宽度400px的两栏.wrap{ -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid red;}//分成了四列

只有webkit内核实现了该属性

Css3响应式布局

媒体类型

all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视

关键字

and
not not关键字是用来排除某种制定的媒体类型
only only用来定某种特定的媒体类型

媒体特性

(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips
@media screen{ 选择器{属性：属性值； }
}
@media screen and (max-width:400px) {
}

移动端meta

width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放（no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

新增样式属性

圆角

border-radius: 1-4个数字 / 1-4个数字
前面是水平，后面是垂直
不给“/”则水平和垂直一样

border-radius: 10px/5px;border-radius:100px/150px;border-radius:20px 40px 60px 80px/10px 20px 30px 40px;

参数
各种长度单位都可以：px，%。 %有时很方便但宽高不一致时不太好

border-radius:50%;

用法
1个：都一样
border-radius: 一样

 border-radius:20px;

2个：对角
border-radius: 左上&右下右上&左下

 border-radius:20px 40px;

3个：斜对角
border-radius: 左上右上&左下右下

border-radius:20px 40px 60px;

4个：全部，顺时针
border-radius: 左上右上右下左下

 border-radius:20px 40px 60px 80px;

例子：风车

边框

边框图片 border-image

border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式 round 平铺,repeat 重复,stretch拉伸

.box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:20px;border-right-width:20px;}.box{width:100px;height:100px; border-width:20px; -webkit-border-image:url(border.png) 27 27 round round;}

边框颜色 border-colors 只在火狐下实现

-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;

线性渐变

线性渐变格式
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上

IE 下的样式格式如下

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');`

参数
起点：从什么方向开始渐变 left、top、left top 默认：top
角度：从什么角度开始渐变 x deg的形式

background-image:-webkit-linear-gradient(60deg,red,blue);background-image:-webkit-linear-gradient(60deg,red,blue,yellow,blue);

点：渐变点的颜色和位置
black 50%，位置可选

线性渐变实例进度条

 background-image:-webkit-linear-gradient(60deg,red 0,blue 50%,green 100%);

repeating-linear-gradient

 background-image:-webkit-repeating-linear-gradient(60deg,red 0,blue 30px);

性渐变实例(2)
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px 配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

实例：百度音乐图片光影效果

兼容版本

.box{background:-webkit-linear-gradient(red,blue);background:-moz-linear-gradient(red,blue);background:linear-gradient(red,blue); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');}

径向渐变

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状： ellipse、circle
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持关键字

background:-webkit-radial-gradient(red,blue);background:-webkit-radial-gradient(100px 50px,red,blue);background:-webkit-radial-gradient(100px 50px,circle,red,blue);background:-webkit-radial-gradient(100px 50px,100px 20px,red,blue);background:-moz-radial-gradient(100px 50px,red,blue);

背景

多背景 先写的背景在上面
逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;

背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
ackground-origin ： border | padding | content
border-box：从border区域开始显示背景。
padding-box：从padding区域开始显示背景。
content-box：从content区域开始显示背景。
background-clip
border：从border区域向外裁剪背景。
padding：从padding区域向外裁剪背景。
content：从content区域向外裁剪背景。
no-clip：从border区域向外裁剪背景。
实例：iphone开机动画

遮罩

Mask-image
Mask-position
Mask-repeat
实例：特殊形状的幻灯片效果

1、通过 translate 来移动元素和用 left top 移动元素有何区别？分别有何优劣？
2、在兼容IE6及所有其他浏览器、不使用JS的前提下：一个未知宽高的块元素如何在屏幕中水平垂直居中？需说明原理。
3、在兼容IE6及所有其他浏览器、不使用JS的前提下：三列布局：中间宽度固定，两侧宽度自适应屏幕？需说明原理。
4、在兼容IE6及所有其他浏览器、不使用JS的前提下：三列布局：中间自适应屏幕，两侧固定宽度，要求至少两种方式完成。
5、请在IE6下实现元素（如：DIV）中心点的旋转？
6、对于一个大型网站静态页面的制作，谈谈你对HTML结构的设计、CSS样式表规划及重用性的思考？

上一篇：css实现居中_html/css_WEB
下一篇：2016TFC正式召开【很快】成为大会焦点_html/css_WEB