Home >Web Front-end >HTML Tutorial >A brief talk about CSS, definitely what you want

A brief talk about CSS, definitely what you want

WBOYOriginal: 2016-07-06 13:28:241123browse

Contents of this chapter:

Introduction

CSS Definition
Four introduction methods
The order in which styles are applied

Selector

* Universal element selector
Tag Selector
class class selector
# ID selector
, multi-element selector
Descendant element selector
> Child element selector
Adjacent element selector
[] attribute selector
Pseudo-class selector

Common attributes

Color attributes (color, transparent, opacity)
Font attributes (font-style, font-weight, font-size, font-family, font)
Text attributes (white-space, direction, text-align, line-height, vertical-align, text-indent, letter-spacing, word-spacing, text-transform, text-overflow, text-decoration, text- shadow, word-wrap)
Background properties (background-color, background-image, background-position, background-repeat, background-attachment, background)
List attributes (list-style-type, list-style-image, list-style-position, list-style)

Page layout

Border (border-style, border-color, border-width, border-radius, border, box-shadow)
Box model (padding, margin)
display
visibility
float float
clip crop image
overflow Set how to display the content when the content of the object exceeds its specified height and width
position specifies the positioning type of the element (static, relative, absolute, fixed)
z-index element stacking order
outline border outline
zoom zoom ratio
cursor mouse type shape (Crosshair, Pointer, Move, text, wait, help...)
transform, transition animation effects

简介

What is CSS?

CSS is the abbreviation of Cascading Style Sheets, which is called cascading style sheets in Chinese.

Attributes and attribute values are separated by colons and terminated by a semicolon.

Four ways to introduce CSS:

1.Inline

Inline style is to set the CSS style in the style attribute of the tag.

    <div style="..."></div>

2.Embedded

Embedded formation is the & lt; style & lt; & lt;/style & gt; label pair of & lt; style & lt;/style & gt;

<head>
    ...
    <style type="text/css">
        ...此处写CSS样式
    </style>
</head>

3.Import
Introduce an independent .css file into the HTML file. Import use @import to introduce external CSS files. The c9ccee2e6ea535a969eb3f532ad9fe89 tag is also written in 93f0f5c25f18dab9d176bd4f6de5d30e Marking.

The import method will load the CSS file after the entire web page is loaded.

<head>
    ...
    <style type="text/css">
        @import "My.css"; 此处注意.css文件的路径
    </style>
</head>

4.Linked
Introduce an independent .css file into the HTML file and use the 2cdf5bf648cf2f33323966d7f58a7f3f tag to write it in the 93f0f5c25f18dab9d176bd4f6de5d30e tag.

The link will load the CSS file before loading the main body of the web page file.

<head>
    ...
    <link href="My.css" rel="stylesheet" type="text/css">
</head>

Style application order:

Inline styles have the highest priority
For the same style attribute, different style attributes will be presented in a merged manner
The same style and the same attributes, the presentation method is determined by the order in 93f0f5c25f18dab9d176bd4f6de5d30e, and the previous attributes will be overwritten later
!important
Specify style rules to be applied first

        .nick {
            color: yellow !important;
        }

选择器（Selector）

Selector

基本选择器：

1.通用元素选择器

* 表示应用到所有的标签。

        * {color: yellow}

2.标签选择器

匹配所有使用 div 标签的元素（可以匹配所有标签）

        div {color: yellow}

3.类选择器

匹配所有class属性中包含info的元素。

语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）

        .Mycolor {color: yellow}
        <h3 class="Mycolor">nick</h3>

4.ID选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。

语法：#ID名{样式}（ID名不能以数字开头）

        #Mycolor {color: yellow}
        <h3 id="Mycolor">Nick.</h3>

组合选择器：

1.多元素选择器

同时匹配h3,h4标签，之间用逗号分隔。

        h3,h4 {color: yellow;}
        <h3>Nick</h3>
        <h4>Jenny</h4>

2.后代元素选择器

匹配所有div标签里嵌套的P标签，之间用空格分隔。

        div p {color: yellow;}

    <div>
        <p>Nick</p>
        <div>
            <p>Nick</p>
        </div>
    </div>

3.子元素选择器

匹配所有div标签里嵌套的子P标签，之间用>分隔。

        div > p {color: yellow;}

    <div>
        <p>Nick</p>
        <p>Nick</p>
    </div>

4.毗邻元素选择器

匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。

        div + p {color: yellow;}

    <div>Nick</div>
    <p>Nick</p>

属性选择器：

1.[title] & P[title]

设置所有具有title属性的标签元素；

设置所有具有title属性的P标签元素。

        [title]
        {
            color: yellow;
        }
        p[title]
        {
            color: yellow;
        }

    <div title>Nick</div>
    <p title>Nick</p>

2.[title=Nick]

设置所有title属性等于“Nick”的标签元素。

        [title="Nick"]
        {
            color: yellow;
        }

    <p title="Nick">Nick</p>

3.[title~=Nick]

设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。

        [title~="Nick"]
        {
            color: yellow;
        }

    <p title="Nick Jenny">Nick</p>
    <p title="Jenny Nick">Nick</p>

4.[title|=Nick]

设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"Nick"开头的标签元素。

例：lang属性："en"、"en-us"、"en-gb"等等

        [title|="Nick"]
        {
            color: yellow;
        }

    <p title="Nick-Jenny">Nick</p>

5.[title^=Nick]

设置属性值以指定值开头的每个标签元素。

        [title^="Nick"]
        {
            color: yellow;
        }

    <p title="NickJenny">Nick</p>

6.[title$=Nick]

设置属性值以指定值结尾的每个标签元素。

        [title$="Nick"]
        {
            color: yellow;
        }

    <p title="JennyNick">Nick</p>

7.[title*=Nick]

设置属性值中包含指定值的每个元素

        [title*="Nick"]
        {
            color: yellow;
        }

    <p title="SNickJenny">Nick</p>

伪类选择器：

1. link、hover、active、visited

a:link（未访问的链接状态）,用于定义了常规的链接状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:active（在链接上按下鼠标时的状态）。
a:visited（已访问过的链接状态）,可以看出已经访问过的链接。

        a:link{color: black}
        a:hover{color: yellow}
        a:active{color: blue}
        a:visited{color: red}

    <a href="#">Nick</a>

2. before、after

P:before 在每个e388a4556c0f65e1904146cc1a846bee元素的内容之前插入内容;
P:after 在每个e388a4556c0f65e1904146cc1a846bee元素的内容之后插入内容。

        p {
            color: yellow;
        }
        p:before{
            content: "before...";
        }
        p:after{
            content: "after...";
        }

    <p> Nick </p>

常用属性

1. 颜色属性：

color

HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间。）

transparent

全透明，使用方式：color: transparent;

opacity

元素的透明度，语法：opacity: 0.5;
属性值在0.0到1.0范围内，0表示透明，1表示不透明。
filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。

2. 字体属性:

font-style: 用于规定斜体文本

normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示

font-weight: 设置文本的粗细

normal（默认）
bold（加粗）
bolder（相当于8e99a69fbe029cd4e2b854e244eab143和a4b561c25d9afb9ac8dc4d70affff419标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）

font-size: 设置字体的大小

默认值：medium
17a8e73d602fa66bef038f2bfcfc14a9可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
4226e9640947c5a6ecea4125d199d554相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
42c97a047d75abc12b9b351eb8562711百分比指定文字大小。
d82af2074b26fcfe177e947839b5d381用长度值指定文字大小，不允许负值。

font-family：字体名称

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

font：简写属性

语法：font：字体大小/行高字体;（字体要在最后）

3. 文本属性:

white-space: 设置元素中空白的处理方式

normal：默认处理方式。
pre：保留空格，当文字超出边界时不换行
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap：保留空格，当文字碰到边界时换行
pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

ltr 默认，文本方向从左到右。
rtl 文本方向从右到左。

text-align: 文本的水平对齐方式

left
center
right

line-height: 文本行高

normal 默认

vertical-align: 文本所在行高的垂直对齐方式

baseline 默认
sub 垂直对齐文本的下标，和b96cac025db4031319c29e1eb68f19d6标签一样的效果
super 垂直对齐文本的上标，和2cdea26b4c3988e37d674b56660962a7标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本缩进

letter-spacing: 添加字母之间的空白

word-spacing: 添加每个单词之间的空白

text-transform: 属性控制文本的大小写

capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。

text-overflow: 文本溢出样式

clip 修剪文本。
ellipsis 显示省略符号...来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        div {
            width: 100px;
            height: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁</div>
</body>
</html>

text-decoration: 文本的装饰

none 默认。
underline 下划线。
overline 上划线。
line-through 中线。

text-shadow：文本阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
text-shadow: 5px 5px 5px #888;

word-wrap：自动换行

word-wrap: break-word;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            width: 150px;
            height: 160px;
            background-color: #FFA500;
            /*边框阴影*/
            box-shadow: 10px 10px 5px #888;
            /*自动换行*/
            word-wrap: break-word;
        }
        h1 {
            text-shadow: 5px 5px 5px #888;
        }
    </style>
</head>
<body>
    <p>
        When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
    </p>
    <h1>索宁</h1>
</body>
</html>

<span style="color: #000000;">a {
    text-decoration: none;
    /*去除a标签下划线*/
}</span>

去除a标签下划线

4. 背景属性

background-color: 背景颜色

background-image 设置图像为背景

url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 图片地址

background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

background-position 设置背景图像的位置坐标

background-position: center center; 图片置中，x轴center，y轴center
1px -195px 截取图片某部分，分别代表坐标x，y轴

background-repeat 设置背景图像不重复平铺

no-repeat 设置图像不重复，常用
round 自动缩放直到适应并填充满整个容器
space 以相同的间距平铺且填充满整个容器

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background 简写

background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;

5. 列表属性

list-style-type: 列表项标志的类型

none 去除标志
decimal-leading-zero; 02.
square; 方框
circle; 空心圆
upper-alph; & disc; 实心圆

list-style-image：将图象设置为列表项标志

list-style-position：列表项标志的位置

inside
outside

list-style：缩写

页面布局

1. 边框

border-style：边框样式

solid 默认，实线
double 双线
dotted 点状线条
dashed 虚线

border-color：边框颜色

border-width：边框宽度

border-radius：圆角

1个参数：四个角都应用
2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上
3个参数：第一个参数应用于左上；第二个参数应用于左下、右上；第三个参数应用于右下
4个参数：左上、右上、右下、左下（顺时针）

border: 简写

border: 2px yellow solid;

box-shadow：边框阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
box-shadow: 10px 10px 5px #888;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border:2px solid;
            border-radius:25px;
            width: 140px;
        }
    </style>
</head>
<body>
    <div>
         点赞哦！dear. 
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .radius1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 20px;
        }
        .radius2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px 35px;
        }
        .radius3 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 20px 35px 50px;
        }
        .radius4 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 20px 35px 50px 60px;
        }
    </style>
</head>
<body>
    <div>
        <span class="radius1"></span>
        <span class="radius2"></span>
        <span class="radius3"></span>
        <span class="radius4"></span>
    </div>
</body>
</html>

边框实现各种三角符号：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle-one {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-two {
            display: inline-block;
            border-top: 0 red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-stree {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-four {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 0 yellow solid;
            border-left: 50px blue solid;
        }

        .triangle-five {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 50px red solid;
        }
        .triangle-six {
            display: inline-block;
            border: 50px transparent solid;
            border-bottom: 50px yellow solid;
        }
        .triangle-seven {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 60px red solid;
            border-right: 0;
        }
        .triangle-eight {
            display: inline-block;
            border: 50px transparent solid;
            border-left: 30px yellow solid;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="triangle-one"></div>
    <div class="triangle-two"></div>
    <div class="triangle-stree"></div>
    <div class="triangle-four"></div>
    <div class="triangle-five"></div>
    <div class="triangle-six"></div>
    <div class="triangle-seven"></div>
    <div class="triangle-eight"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            background-color: #ddd;
            position: relative;
        }
        .back-in {
            position: absolute;
            width: 1020px;
            height: 45px;
            left: -20px;
            top: 50px;
            background-color: #2F4F4F;
        }
        .back-img {
            border: 20px solid transparent;
            border-top: 10px solid dimgrey;
            border-right: 0;
            display: inline-block;
            position: absolute;
            top: 95px;
            left: -20px;
        }
        .back-font {
            line-height: 9px;
            margin-left: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="back-in"><h3 class="back-font">妹子求关注 ^.^</h3></div>
        <div class="back-img"></div>
    </div>
</body>
</html>

2.★ 盒子模型

一个标准的盒子模型：

padding:用于控制内容与边框之间的距离;

margin: 用于控制元素与元素之间的距离;

padding、margin	表示上右下左都应用
padding-top、margin-top	上
padding-right、margin-right	右
padding-bottom、margin-bottom	下
padding-left、margin-left	左

一个参数，应用于四边。

　两个参数，第一个用于上、下，第二个用于左、右。

　三个参数，第一个用于上，第二个用于左、右，第三个用于下。

<span style="color: #000000;">边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子，外层还有html，
在默认情况下，body距离html会有若干像素的margin，所以body中的盒子不会紧贴浏览器窗口的边框了。

解决方法：
body {
    margin: 0;
}</span>

浏览器窗口最外层边框缝隙

3.★ display

none is not displayed.
block is displayed as a block-level element.
inline appears as an inline element.
inline-block inline block element (the height and width of the block element will be maintained).
list-item is displayed as a list element.

4. visibility

visible elements are visible
hidden element is invisible
collapse When used in a table element, this value can delete a row or column without affecting the layout of the table.

5.★ float float

Having two block-level tags displayed on one line will break away from the document flow

none
left float left
right float right

clear Clear float:

none : Default value. Allow floating objects on both sides
left : Floating objects are not allowed on the left
right : No floating objects are allowed on the right
both : Floating objects are not allowed on both sides

6. clip crop image

rect clipping positioned element:

auto default value, no clipping
Four offset values are provided in the order of top-right-bottom-left (clockwise)
The part outside the area is transparent
Must specify position:absolute;
例：clip:rect(0px,60px,200px,0px);

7. overflow Set how to display the content when the content of the object exceeds its specified height and width

visible Default value, the content will not be trimmed and will be rendered outside the element box.
Hidden content will be trimmed and the remaining content will be invisible.
scroll The content will be trimmed, but the browser will display scroll bars to view the remaining content.
auto If content is trimmed, the browser displays scroll bars to view the remaining content.

8.★ position specifies the positioning type of the element

static	默认值，没有定位，遵从正常的文档流
relative	相对定位元素，相对于其正常位置进行定位，遵从正常的文档流
absolute	绝对定位元素，脱离正常文档流
fixed	绝对定位元素，固定在浏览器某处

static

Default value, no positioning, follow normal document flow

relative

Relatively positioned elements are positioned relative to their normal position and follow normal document flow

absolute

Absolutely positioned elements, out of normal document flow

fixed

Absolutely positioned elements, fixed somewhere in the browser

通过以下四种属性进行定位：

left
top
right
bottom
z-index

9. z-index 元素层叠顺序

z-index 仅在定位元素上有效（例：position:absolute;）
可以指定负数属性值（例：-1;）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .z-index1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            z-index: -1;
        }
        .z-index2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="z-index1"></div>
    <div class="z-index2"></div>
</body>
</html>

10. outline 边框轮廓

outline-width 轮廓宽度
outline-color 轮廓颜色
outline-style 轮廓样式

11. zoom 缩放比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zoom1 {
            zoom: 100%;
        }
        .zoom2 {
            zoom: 150%;
        }
        .zoom3 {
            zoom: 200%;
        }
    </style>
</head>
<body>
    <div class="zoom1">Nick 100%</div>
    <div class="zoom2">Nick 200%</div>
    <div class="zoom3">Nick 300%</div>
</body>
</html>

12. cursor 鼠标的类型形状

鼠标放在以下单词上，There will be a miracle：

url: 自定义光标

<span style="color: #0000ff;">b70c64a5464fe1646808593eae42a7a7</span>
<span style="color: #0000ff;">af76a0c8f4a986c6771e3e43c71b3928</span>
<span style="color: #0000ff;">bbc65f352f95f28f7193d35048c6c028</span>
    <span style="color: #0000ff;">bb27581bdc82849cd353ec0bc99a5a93</span>
    <span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f5134</span>Title<span style="color: #0000ff;">00184704c11e7804493feb92cf7cb2ef</span>
    <span style="color: #008000;">112f6c35cb8e0c5a801d2b967758f05c</span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;">3b21e6c8c45975c3ab5015aaf5f6e09a</span><span style="background-color: #f5f5f5; color: #800000;">
        body </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            cursor</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url("mouse.png"), auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
    <span style="color: #0000ff;">092f6142df8c6e0ce17f4655efb493913d2122185cbd54e89e67b7ad869ab2844d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span>

自定义光标实例

Auto: 默认
  Default: 默认
  e-resize
  ne-resize
  nw-resize
  n-resize
  se-resize
  sw-resize
  s-resize
  w-resize
  Crosshair
  Pointer
  Move
  text
  wait
  help

13. transform、transition 动画效果

transform 转换，变形

origin 定义旋转基点（left top center right bottom 坐标值） transform-origin: 50px 50px; transform-origin: left;。
rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数，需要先定义origin。
skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。
scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍；transform:scale(2) 横竖都放大2倍。
translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nick</title>
    <meta charset="utf-8" />
    <style type="text/css">
        div {
            border: 1px solid black;
            height: 30px;
            width: 30px;
            background-color: yellow;

            /*transform-origin: 50px 50px;*/
            transform-origin: left;
            transform: rotate(50deg);
            /*transform: skew(50deg,50deg);*/
            /*transform: translate(50px,50px);*/
            /*transform: scale(2);*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Transition 平滑过渡

transition-property：变换的属性（none(没有属性改变)、all(所有属性改变)、具体属性）
transition-duration：变换持续时间
transition-timing-function：变换的速率（ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线））
transition-delay：变换延迟时间
transition：缩写

<span style="color: #000000;">#property 指定属性对应类型

1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；

2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；

3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；

4、integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；

5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；

6、transform list。

7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；

8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；

9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；

10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；

11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；

12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；

13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。</span>

property 指定属性对应类型

<span style="color: #000000;">#支持执行transition效果的属性

Property Name    Type
background-color    as color
background-position    as repeatable list of simple list of length, percentage, or calc
border-bottom-color    as color
border-bottom-width    as length
border-left-color    as color
border-left-width    as length
border-right-color    as color
border-right-width    as length
border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer</span>

transition 支持的属性

鼠标放在以下图片上，There will be a miracle：

<span style="color: #0000ff;">b70c64a5464fe1646808593eae42a7a7</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">bbc65f352f95f28f7193d35048c6c028</span>
    <span style="color: #0000ff;">0c832ed8c8e5273510aa5b9dd29e9c3b</span>
    <span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f5134</span>nick<span style="color: #0000ff;">00184704c11e7804493feb92cf7cb2ef</span>
    <span style="color: #0000ff;">a62e8279a9bf6c54f8cad1276afde887</span>
    <span style="color: #0000ff;">5514d48e7f6f4af7428015d6af5a9dc3</span><span style="background-color: #f5f5f5; color: #800000;">
        .img-see-2016-7-2 </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background-image</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg")</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 660px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background-repeat</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> no-repeat</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 300px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 600px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">

            transition-duration</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30s</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            transition-timing-function</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> ease</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            transition-property</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> background-size</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        .img-see-2016-7-2:hover </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 2000px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
    <span style="color: #0000ff;">726a71c748d71a725cf30bebc1665b264d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span>

上效果图代码

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS block-level elements and row-level elements (reprinted)Next article：CSS block-level elements and row-level elements (reprinted)

See more

A brief talk about CSS, definitely what you want

Related articles