css属性整理
背景background
简写顺序
background-color
background-image
background-repeat
background-attachment
background-position
background: #ffffff url("img_tree.png") repeat-x fixed right top;
文本属性
uppercase // 大写
lowercase //小写
capitalize // 首字母大写
text-decoration: none;
text-decoration: overline //上划线
text-decoration: line-through // 穿过文本
text-decoration: underline // 下划线
文本缩进text-indent 字符间距letter-spacing(可设置负值) 文本方向direction:rtl 字间隔word-spacing 不换行white-space:nowrap 添加阴影text-shadow 垂直对齐vertical-align
字体样式
normal - 正常显示文本
italic - 以斜体字显示的文字
oblique - 文字向一边倾斜 (和斜体非常类似,但不太支持)
绝对大小(如px):
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小(如em):
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
为了避免浏览器中无法调整文本的问题,许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em
font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母
均会被转换为大写
,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小
。 该属性主要用于定义小型大写字母文本。理论上,用户代理可以根据正常字体计算出小型大写字母字体。
链接 链接有四种状态
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited 后面
a:active 必须跟在 a:hover 后面
列表样式
circle|square|upper-roman(大写罗马数字)|lower-alpha(小写字母)|cjk-ideographic(一二三)
list-style-image(图片) list-style-position
inside|outside
表格
table|tr(一行)|th(表头)|td
border-collapse: collapse
水平对齐text-align和垂直对齐vertical-align 条纹表格
使用 nth-child() 选择器和添加 background-color 属性到所有的奇数(或偶数)列即可形成斑马条纹样式的表格:
tr:nth-child(even) {
background-color: #f2f2f2
}
caption-side: bottom; // 表格标题位置
盒子模型:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距margin,边框border,填充padding,和实际内容content。
元素的总宽度应该这样计算:
元素总宽度 = width + left padding + right padding + left border + right border + left margin + right margin
元素的总高度应该这样计算:
元素总高度 = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
css轮廓属性outline
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline在border外面。
outline不占空间,可能非矩形
outline-offset设置偏移量
浮动与清除
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
CSS选择器
css3属性整理
background 新的背景属性
background-clip background-clip: border-box|padding-box|content-box|initial|inherit;
值 描述 border-box 默认值。背景绘制在边框方框内(剪切成边框方框) padding-box 背景绘制在衬距方框内(剪切成衬距方框) content-box 背景绘制在内容方框内(剪切成内容方框) initial 将此属性设置为其默认值 inherit 从其父元素继承此属性
background-origin指定背景图像的位置 background-origin: padding-box|border-box|content-box|initial|inherit background-size定义大小
css3渐变(Gradient Background)
线性渐变-向下/向上/向左/向右/对角方向
默认情况下,从上到下渐变
示例 效果 linear-gradient(red, yellow) 从上到下,从红到黄的渐变 linear-gradient(to right, red , yellow) 从左到右 linear-gradient(to bottom right, red, yellow) 对角渐变,左上到右下 linear-gradient(-90deg, red, yellow) 0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变,-90deg将创建一个从右到左的渐变 linear-gradient(red, yellow, green) 多颜色渐变 linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)) 透明度的渐变 repeating-linear-gradient
(red, yellow 10%, green 20%)重复的线性渐变
径向渐变-由它们的中心定义
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。 语法:background: radial-gradient(center, shape size, start-color, …, last-color)
css3阴影效果
box-shadow(用法与text-shadow类似) text-shadow
示例 效果 text-shadow: 2px 2px 阴影沿x轴y轴哥偏移2px text-shadow: 2px 2px red 阴影沿x轴y轴哥偏移2px,颜色为红色 text-shadow: 2px 2px 5px red 阴影沿x轴y轴哥偏移2px,颜色为红色,模糊效果范围5px text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF 多重阴影
css3文本效果
text-overflow:clip(隐藏) | ellipsis(省略号) word-wrap:break-word(换行) word-break(定义换行时单词是否拆分的规则): break-all(拆) | keep-all(不拆)
字体 使用自定义字体@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
css3的2D转换
translate() 平移
例: transform: translate(20px, 10px) //向右平移20px,向下平移10px rotate() 旋转
例:transform: rotate(30deg) //顺时针旋转30° scale()放缩
例:transform: scale(.5) //缩小为原来的一半 skew() 包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
例:transform: skew(30deg,20deg) //元素在X轴和Y轴上倾斜30度20度 matrix() matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能
例:transform: matrix(1, -0.3, 0, 1, 0, 0) 矩阵的问题可能有点难以理解,这里涉及到线性代数的矩阵相乘
以及三角函数
的知识。接下来我们一起来补补课吧(每天进步一点点) CSS3——CSS3矩阵matrix进行2D变换的数学原理
css3的3D转换
translate3d(x,y,z) scale3d(x,y,z) rotate3d(x,y,z,angle) perspective(n) //定义 3D 转换元素的透视视图。 matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) //定义 3D 转换,使用 16 个值的 4x4 矩阵。
过渡transition
div {
width: 50px;
}
div:hover {
width: 100px;
transition: width 2s;
}
// 鼠标移到div上的时候,div的宽度逐渐变大,2s后停止变化,宽度100px
// 鼠标离开div时,div宽度逐渐变小,2s后停止变化,宽度50px
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
等同于
div {
transition: width 2s linear 1s;
}
transition-timing-function 属性表
值 描述 ease 默认值。规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 step-start 等同于 steps(1, start) step-end 等同于 steps(1, end) steps(int,start|end)|steps() 设置间隔参数,可以实现分步过渡。第一个参数指定了时间函数中的间隔数量(必须是正整数) 第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。 cubic-bezier(n,n,n,n) 立方贝塞尔曲线函数,在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 initial 将此属性设置为其默认值。 inherit 从其父元素继承此属性。
css3动画// 定义动画
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
// 使用百分比分割
@keyframes example1 {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
// 使用动画
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
animation-name // 动画名称 animation-duration //动画时长 animation-timing-function // 指定动画的速度曲线 同transition-timing-function animation-delay //延迟时长 animation-iteration-count // 运行次数,infinite
指定动画应该播放无限次(永远) animation-direction // 反向或交替循环运行动画
值 描述 normal 默认值。动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。 alternate-reverse 动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。 initial 设置该属性为它的默认值。 inherit 从父元素继承该属性。
animation-play-state: paused|running|initial|inherit; // 动画运行状态
响应式图片
img {
max-width: 100%;
height: auto;
}
功能强大的图片滤镜
(CSS filter
属性用为元素添加可视效果 (例如:模糊与饱和度) 语法:filter:none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()| invert() | opacity() | saturate() | sepia() | url();
值 描述 none 默认值,没有效果。 blur(px) 对图像应用模糊
效果。更大的值会产生更多的模糊。 如果没有指定值,则使用0。 brightness(%) 调整图像的亮度
。 0%将使图像完全黑色。 100%(1)是默认值,代表原始图像。 超过100%的价值将提供更明亮的结果。 contrast(%) 调整图像的对比度
。 值是0%的话,图像会全黑。 值是100%,图像不变。 值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。 drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影
效果。 可能的值: h-shadow - 必需
。指定水平阴影的像素值。负值将图像左边的阴影放置。 v-shadow - 必需
。指定垂直阴影的像素值。负值将阴影放在图像上方。blur - 可选
。这是第三个值,必须以像素为单位。给阴影添加一个模糊效果。 更大的值将产生更多的模糊(阴影变得更加轻盈)。不允许使用负值。如果没有指定值,则使用0(阴影的边缘很尖)。 spread - 可选
。这是第四个值,必须以像素为单位。积极值将导致阴影扩大并扩大,阴性值会导致阴影收缩。 如果没有指定,它将为0(阴影将与元素的大小相同)。 注意: Chrome,Safari 和 Opera 以及其他浏览器,不支持第4个长度; 如果添加,它将不会呈现。 color - 可选。给阴影添加一个颜色。如果未指定,颜色取决于浏览器(通常为黑色)。创建一个红色阴影的例子,它是8px大,水平和横向,具有10px的模糊效果: filter: drop-shadow(8px 8px10px red); 提示: 此过滤器类似于 box-shadow 属性。
grayscale(%) 将图像转换为灰度
。 0%(0)是默认值,代表原始图像。 100%将使图像完全灰色(用于黑白图像)。 注意: 不允许使用负值。 hue-rotate(deg) 在图像上应用色相旋转
。该值定义图像样本将被调整的颜色圆周围的数量。默认为0度,表示原始图像。 注意: 最大值为360度。 invert(%) 反转
图像中的样品。 0%(0)是默认值,代表原始图像。 100%将使图像完全倒转。 注意: 不允许使用负值。opacity(%) 设置图像的不透明度
级别。透明度级别描述了透明度级别,其中: 0%是完全透明的。 100%(1)是默认值,代表原始图像(无透明度)。 注意: 不允许使用负值。 提示: 此过滤器与 opacity 属性类似。 saturate(%) 使图像饱和
。 0%(0)将使图像完全饱和。 默认为100%,表示原始图像。 超过100%的值提供了超饱和的结果。 注意: 不允许使用负值。 sepia(%) 将图像转换为棕褐色
。 0%(0)是默认值,代表原始图像。 100%将使图像完全变成棕褐色。 注意: 不允许使用负值。 url() url() 函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。 filter: url(svg-url#element-id) initial 将此属性设置为其默认值。 inherit 从其父元素继承此属性。
多列效果
column-count // 列数 column-gap // 列与列间的间隙 column-rule-style // 列边框 // 如:solid column-rule-width // 边框宽度 column-rule-color // 边框颜色 column-rule // 如:column-rule: 1px solid red; column-span //指定元素跨越多少列 column-width //指定列的宽度
用户界面
resize //调整尺寸(Resizing) outline-offset //外形修饰
多媒体查询——针对不同媒体类型可以定制不同的样式规则 多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。@media not|only mediatype and (expressions) {
CSS-Code;
}
如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。 除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。 not
:用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。 only
:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。 all
:所有设备,这个应该经常看到。 你也可以在不同的媒体上使用不同的样式文件:<linkrel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css" >
值 描述 all 用于所有多媒体类型设备 print 用于打印机 screen 用于电脑屏幕,平板,智能手机等。 speech 用于屏幕阅读器
```
// 在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
```