引入

外部样式表

内部样式表

内嵌样式

  
    this is a paragraph

此方式不利于后期维护，较少使用此方法。

语法

选择器
属性声明=属性名:属性值
注释 /* */

@规则

@media 有动态样式时使用
@keyframes 动画过程
@font-face 引入外部字体

简单选择器

选择p标签：
p{color:blue;}

类选择器

.className
为标签赋予类

段落一

可在CSS中用
.first{color:blue;}
来为这一类标签实现同样地样式
类选择器以“.”开头，可使用字母、数字、-、_，必须以字母开头，在同一个文件中可出现多次。

id选择器

idName

sdfjalsg

second{color:blue;}

属性选择器

使用标签内的属性来选择。
[属性值]{样式}
[type=button]{样式}
[class~=sports]{样式}　　　　表示class中有sports的所有类
[href^="#"]{样式}　　选择以#开头的链接
[href$=pdf]{样式}　　选择以pdf结尾的链接
[href*="sports.com"]{样式}　　选择包含“sports.com”的链接

伪类选择器

亚马逊中国
使用伪类选择器
a:link{color:gray;} 选择href中有值的元素
a:visited{color:red;} 点击过后
a:hover 鼠标放在此处时
a:active 点击时的样式
:enabled 可用
:disabled 不可用
:checked 多选框中已选择的部分
:empty 选择空元素
:root 选择根标签
:not()
:target
:lang()

伪元素选择器

::first-letter{}
::first-line{}
::selection{} 被选中内容的样式

组合选择器

后代选择器和子选择器

电台名称

作者名称

共58期

订阅2533次

.main a{样式} 选择main这个类之内的所有a元素
.main>a{样式} 选择main这个类之内第一级的a元素
div+p{样式} 选择与div相邻的p元素
div~p{} 选择div后面所有的p元素

选择器分组

p,h3,a{} 选择这三个元素

文本

字体

font:12px/2 arial;

此处表示字体是Arial，12像素大，行高是12px的2倍。

水平对齐

text-align:left|right|center|justify
左对齐、右对齐、居中、两端对齐。

垂直对齐

首行缩进

text-indent: |
写2em即两个字符，10px即缩进10像素，20%即缩进文本容器宽度的20%。
设置为极大的负值可以将文本隐藏。

white-space

定义空格、换行、tab是否保留。
white-space:normal | nowrap | pre | pre-wrap | pre-line
normal 空格、tab会被合并，换行被取消。
nowrap 在normal基础上，强制不换行直到遇到
标签。
pre 保留换行、空格、tab，不换行。
pre-wrap 保留空白符序列，正常换行。
pre-line 合并空白符，保留换行。
inherit 从父元素继承white-space属性值。

文本换行

word-wrap:normal | break-word
默认，允许单词换行。（对英文）
word-break:normal | keep-all | break-all
默认，不打断单词换行，任意单词均可以换行。

文本特效

阴影

text-shadow:none | [{2,3}&&?]#
text-shadow:1px 2px 3px #f00;
X轴偏移1px，Y轴偏移2px，模糊半径3px，阴影颜色#f00.

下划线

text-decoration:none | [underline || overline || line-through]
下划线、上划线、中划线。（这三个可以同时存在）

溢出字符隐藏

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
表示文本溢出时用省略号表示，多出的字符隐藏，并且不换行。

定义鼠标形状

inherit

强制继承父元素的属性。

盒模型

盒模型概念

CSS盒模型是CSS规范的一个模块，它定义了一个长方形的盒子，每个盒子拥有各自的内边距和外边距，并根据视觉格式化模型来对元素进行布局。

width

width: | | auto | inherit
使用像素个数或百分比定义（相对父元素的值）。
max-width设置最大宽度，min-width设置最小宽度

height

大体与width类似

padding

padding:[ | ]{1,4} | inherit
赋予4个值时，按顺序分别是上(T)、右(R)、下(B)、左(L)的填充(顺时针方向)。
.sample1{padding: 40px 30px 20px 10px;}
.sample2{padding-top: 40px;padding-right: 30px;padding-bottom: 20px;padding-left: 10px;}
上面这两条padding的定义实现的效果是一样的。
margin/border也具有类似的特点。

缩写：对面相等，后者省略；4面相等，只写一个。
padding:20px;　　padding:20px 20px 20px 20px;
padding:20px 10px;　padding:20px 10px 20px 10px;
padding:20px 10px 30px;　padding:20px 10px 30px 10px;

margin

用来设置所有四个（上下左右）方向的外边距属性，除了有一个默认值auto外其余语法与padding相同
只有一个值时，这个值会被指定给全部的四个边.
两个值时，第一个值被匹配给上和下, 第二个值被匹配给左和右.
三个值时，第一个值被匹配给上,第二个值被匹配给左和右, 第三个值被匹配给下.
四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序).

margin合并
相邻元素的边距值会被合并成较大者。

border

CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。

border: [border-width ||border-style ||border-color |inherit] ;

border-radius

overflow

overflow:visible | hidden | csroll | auto
默认是显示的，hidden会隐藏超出部分，scroll将使区块可以滚动，auto会自动在内容超出区域时增加滚动功能。

可以使用overflow-x和overflow-y分别设置水平和垂直方向上的多余内容显示方式。

box-sizing

默认情况width和height设置的是content-box的属性
content-box
border-box

box-shadow

box-shadow:none | [,]*  
:inset? &&{2,4} && ?

举例：box-shadow:4px 5px 3px 0px black;
表示水平向右便宜4px，垂直向下偏移5px，阴影边缘的3px（边缘向外1.5，向内1.5）会模糊，阴影大小0px。
当不设置颜色时，阴影颜色与文字相同。

box-shadow:3px 3px 5px 2px, inset 0px 0px 5px purple;

内外阴影可以叠加,使用逗号隔开。
阴影只是修饰，不占用空间。

outline

描绘轮廓。不占用空间。位置在border以外。
outline:[||||] | inherit

width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline

背景

background-color

背景颜色设置。transparent表示全透明。

background-image

[,]*
url("http://.....")
background-image:url(red.png),url(blue.png)
两个背景图会都出现，靠前写的会在上面一层。

background-repeat

[,]*
=repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
沿x轴、y轴平铺，space表示平铺图形之间有空隙，round表示通过缩放使图案充满区域。
举例：
background-image:url(red.png)
background-repeat:space;

background-attachment

用来设置背景图是否跟随页面滚动。

background-attachment:scroll | local | fixed

scroll表示背景图不跟着内容滚动，local即背景图会跟着滚动。

background-position

background-position:

按钮

linear-gradient

线性渐变。

radial-gradient

background-origin

background-origin:border-box | padding-box | content-box

即设置背景的边界在容器的哪个盒模型边界。

background-clip

设置背景显示的区域。
background-clip:border-box | padding-box | content-box

background-size

[,]*  
=[ |  | auto]{1,2} | cover | contain

可设置为像素数，百分比，或其他关键字。百分比是相对容器来说的。cover表示背景充满容器，contain表示背景填满容器但是不超过容器。

布局

布局简介、display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)

display

设置元素的显示方式。
display:block | inline | inline-block | none

display:block

默认是父元素的宽度，可设置宽高，换行显示。
默认display:block元素——div,p,h1-h6,ul,form...

display:inline

默认宽度是内容宽度，不可设置宽高，同行显示。
默认行级元素：span,a,label,cite,em...

display:inline-block

默认宽度为内容宽度，可设置宽高，同行显示，整块换行。
默认行内块级：input,textarea,select,button...

display:none

设置元素不显示。
使用visibility:hidden也可以隐藏元素，但是后续元素并不会显示在隐藏元素的位置，只是空出来这一块。

块级元素居中

margin:auto

居中导航

在容器处设置 text-align:center,每个导航项设置为inline-block

position

设置定位方式
top,right,bottom,left(用来定位元素边缘各方向对参照物边缘的距离）
z-index
定义元素在z轴的排序，默认值是0。
z-index栈
父元素的z-index值优先级更高。

position:static | relative | absolute | fixed

position:relative

相对定位，仍在文档流中，其参照物为元素本身。使用场景：绝对定位元素的参照物。

position:absolute

绝对定位：元素默认宽度是内容宽度，脱离文档流显示，其参照物是第一个定位祖先/根元素。

布局：轮播头图

position:fixed

固定定位：默认宽度是内容宽度，脱离文档流。参照物为视窗（当前浏览器窗口）

布局：固定顶栏

.top{position:fixed;top:0;width:100%;height:50px;}

将顶栏固定在视窗的顶部。

布局：遮罩

.mask{position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;background-color: #000;opacity: 0.3;}

说明：定位在左上角，宽高值设置成100%覆盖全屏，然后设置了颜色和透明度。

布局：三行自适应布局

.head{position: absolute;top: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}
.body{position: absolute;top: 100px;left: 0;bottom: 100px;right: 0;overflow: auto;}
.content{height: 2000px;}
.foot{position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}

顶栏在top处，页脚固定在bottom，同时设置内容区top/left/bottom/right属性，撑开页面，使顶栏和页脚放在两头。

float

float：left|right|none|inherit

默认宽度是内容宽度，脱离文档流，会向指定的方向一直移动。float的元素在同一文档流。

float元素半脱离文档流

对于元素脱离文档流，对内容在文档流。




    float: left;
    A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property).

可以看到sample元素对于sb元素是脱离文档流的，但是内容并不脱离文档流。

clear

clear:both | left | right | none | inherit

清除浮动效果。

.clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
.clear

布局：两列布局






    main
    side

flex

display：flex

在文档流中的子元素才是弹性元素。

flex-direction

flex-direction: row|row-reverse|column|column-reverse

安行弹性排列、反向行方向、列方向、反向列

flex-wrap

flex-wrap: wrap|wrap-reverse

换行、反向换行

order

.item2{order: 1;}
.item1{order: 10;}
.item3{order: -1;}

定义元素顺序，不是绝对值。定义的值越小则元素越靠前。

弹性

flex-basis

flex-basis:main-size|

设置flex item的初始宽/高。

flex-grow

flex-grow:
initial:0

设置元素分配剩余空间的比例

flex-shrink

flex-shrink:
initial:1（默认值）

当空间不足时，用flex-shrink设置各个元素分摊的缩小比例。设置数值越大，缩小的越多。

flex

flex:<'flex-grow>'||<'flex-shrink'>||<'flex-basis'>
initial:0 1 main-size(默认值)

对齐

justify-content

justify-content:flex-start|flex-end|center|space-between|space-around

用来元素在有剩余空间时的对齐效果。（主轴）

align-items

设置辅轴的对齐方式。

align-items:flex-start|flex-end|center|baseline|stretch

分别表示上对齐、下对齐、居中、基线和拉伸。

align-self

align-self:auto|flex-start|flex-end|center|baseline|stretch

设置单个元素在辅轴的对齐方式

align-content

align-content:flex-start|flex-end|center|space-between|space-around|stretch

设置cross-axis方向（辅轴）上多行的对齐方式

三行两列自适应布局

flex ie9及以下不支持，目前主要用于移动web页面中

变形

transform

transform:none|

transform:rotate 旋转

transform:rotate()

定义元素旋转的角度（顺时针方向）。

transform:translate 平移

transform:translate（x轴值，Y轴值）

当使用百分比填写时，是相对元素原来的位置移动百分比。

transform:scale 缩放

transform:scale（横向值，纵向值）

设置元素放大倍数（小于1时缩小）当只填写一个值时，两个值都是所写的那个。

transform:skew 缩放

transform:skew(ax[,ay])

元素在X轴和Y轴方向以指定的角度倾斜。如果ay未提供，在Y轴上没有倾斜。

transform-origin

定义变形的坐标原点，相对于原来元素的位置。默认值是元素的中心点。只写一个值的时候表示只移动x轴方向。

perspective

立体透视效果。

.m-demo-1 pre{transform:rotateY(45deg);}
.m-demo-1{perspective:2000px;}

沿Y轴旋转，值越小透视效果越明显。

.m-demo-1{perspective:500px;perspective-origin:50% 50%;}
.m-demo-1 pre{transform:rotateY(45deg);}

perspective-origin用来定义透视的观察角度。

transform:translate3d

定义元素在3D空间的三个方向移动的值。也可以使用translateZ单独定义Z轴缩放。

transform: scale3d

三个方向的缩放比例。也可以使用scaleZ单独定义Z轴缩放。(缩放Z轴本身)

transform:rotate3d

transform:rotate3d(0,0,1,45deg);

以0,0,1和原点的连线为轴旋转45度。

transform-style

transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

transform-style: preserve-3d
transform-style: flat

默认是flat。

backface-visibility

关键字，指定元素背面是否可见，可为以下值：
visible 表示背面可见，允许显示正面的镜像。
hidden 表示背面不可见。

动画

transition-property

定义动画内容

.m-demo:hover pre{left:500px;color:#000;}
.m-demo-1 pre{transition-property:none;}
.m-demo-2 pre{transition-property:all;}
.m-demo-3 pre{transition-property:left;}
.m-demo-4 pre{transition-property:left,color;padding:20px 0;line-height:30px;}

transition-duration

定义动画时长

.m-demo{width:600px;height:550px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-duration:0s;top:0;}
.m-demo pre:nth-child(2){transition-duration:1s;top:150px;}
.m-demo pre:nth-child(3){transition-duration:2s;top:300px;}
.m-demo pre:nth-child(4){transition-duration:3s;top:450px;}

transition-timing-function

.m-demo{width:600px;height:700px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-timing-function:ease;top:0;}
.m-demo pre:nth-child(2){transition-timing-function:linear;top:150px;}
.m-demo pre:nth-child(3){transition-timing-function:ease-out;top:300px;}
.m-demo pre:nth-child(4){transition-timing-function:cubic-bezier(0.8,0,0,0.8);top:450px;padding:30px 0;line-height:20px;font-size:12px;}
.m-demo pre:nth-child(5){transition-timing-function:steps(3,start);top:600px;padding:30px 0;line-height:20px;font-size:16px;}

transition-delay

.m-demo{width:600px;height:550px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-delay:0s;top:0;}
.m-demo pre:nth-child(2){transition-delay:1s;top:150px;}
.m-demo pre:nth-child(3){transition-delay:2s;top:300px;}
.m-demo pre:nth-child(4){transition-delay:3s;top:450px;}

动画效果延迟触发。

CSS笔记

引入

外部样式表

内部样式表

内嵌样式

语法

@规则

简单选择器

类选择器

id选择器

idName

second{color:blue;}

属性选择器

伪类选择器

伪元素选择器

组合选择器

后代选择器和子选择器

电台名称

选择器分组

文本

字体

水平对齐

垂直对齐

首行缩进

white-space

文本换行

文本特效

阴影

下划线

溢出字符隐藏

定义鼠标形状

inherit

盒模型

盒模型概念

width

height

padding

margin

border

border-radius

overflow

box-sizing

box-shadow

outline

背景

background-color

background-image

background-repeat

background-attachment

background-position

按钮

linear-gradient

radial-gradient

background-origin

background-clip

background-size

布局

display

display:block

display:inline

display:inline-block

display:none

块级元素居中

居中导航

position

position:relative

position:absolute

布局：轮播头图

position:fixed

布局：固定顶栏

布局：遮罩

布局：三行自适应布局

float

float元素半脱离文档流

clear

布局：两列布局

flex

flex-direction

flex-wrap

order