align
CSS 里面的 text-align
属性可以控制文本的对齐方式。
text-align: justify;
可以让除最后一行之外的文字两端对齐,即每行的左右两端都紧贴行的边缘。
text-align: center;
可以让文本居中对齐。
text-align: right;
可以让文本右对齐。
text-align: left;
是默认值,它可以让文本左对齐。
size
width
你可以使用 CSS 里的 width
属性来指定元素的宽度。 属性值可以是相对单位(比如 em
),绝对单位(比如 px
),或者包含块(父元素)宽度的百分比。
height
tag
stron加粗
<strong> 内容</strong>
=font-weight:bold;
underline下划线
<u>内容</u>
=text-decoration: underline;
emphasize斜体
<em> 内容 </em>
=font-style: italic;
strick删除线
<s>内容</s>
=text-decoration: line-through;
hr水平线
人力资源(bushi
Horizontal Rule<hr>自闭合
backgrounhd-color
rgba 代表:
r = red 红色
g = green 绿色
b = blue 蓝色
a = alpha 透明度( 0 代表完全透明,1 代表完全不透明)
允许使用background:url()添加背景
font-size
标签属性值用font-size更改字体大小
font-weight
字体粗细
box-shadow阴影
box-shadow
属性的阴影依次由下面这些值描述,由逗号分隔的一个或多个阴影列表。:
offset-x
阴影的水平偏移量;offset-y
阴影的垂直偏移量;blur-radius
模糊半径(可选);spread-radius
阴影扩展半径(可选);color
opacity透明度
由0到1:透明->不透明
text-transform大小写
lowercase | "transform me" |
uppercase | "TRANSFORM ME" |
capitalize | "Transform Me" |
initial | 使用默认值 |
inherit | 使用父元素的 text-transform 值。 |
none | Default:不改变文字。 |
line-height
行高,行间距
hover
悬停状态
a {
color: #000;正常黑色
}
a:hover{
color:blue;悬停蓝色
}
position
relative
当元素的定位设置为 relative
时,它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。 CSS 里控制各个方向偏移量的属性是 left
、right
、top
和 bottom
。 它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。
p {
position: relative;
bottom: 10px;
}
absolute
周围的元素会忽略它。
fixed
它是一种特殊的绝对(absolute)定位,将元素相对于浏览器窗口定位。不会随着屏幕滚动而移动。
float
浮动元素不在文档流中,它向 left
或 right
浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通常需要用 width
属性来指定浮动元素占据的水平空间。
z-index
解决重叠问题,数值大的放在上面
居中margin:auto
图片默认是内联元素,但是可以通过设置其 display
属性为 block
来把它变成块级元素。
hsl(Hue, Saturation, Lightness)
CSS3 引入了 hsl()
做为颜色的描述方式。
色相是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。 以颜色光谱为例,光谱左边从红色开始,移动到中间的绿色,一直到右边的蓝色,色相值就是沿着这条线的取值。 在 hsl()
里面,色相用色环来代替光谱,色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
饱和度是指色彩的纯度,也就是颜色里灰色的占比。 饱和度越高则灰色占比越少,色彩也就越纯;反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。
亮度决定颜色的明暗程度,也就是颜色里白色或者黑色的占比。 其中,100% 的亮度表示纯白色, 0% 的亮度则表示纯黑色;而 50% 的亮度就表示在色相中选取的颜色。
linear-gradient
线性渐变
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
第一个参数指定了颜色过渡的方向——它的值是角度,90deg 表示垂直渐变(从左到右),45deg 表示沿对角线渐变(从左下方到右上方)。 其他参数指定了渐变颜色的顺序:
linear-gradient(35deg,#CCFFFF,#FFCCCC)有点好看
linear-gradient
重复线性渐变
repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,同色起止像素相同,不渐变
black 40px,同像素起止色不同,则不渐变
blue 80px 不同像素不同色,渐变
);
transform
:scale(n)
放缩n倍
:hover
transform又很多函数可调用,比如用伪类hover可使悬停时完成效果
:skewX()
按x(y)轴翻转角度,
::after()
伪元素 ::before
和 ::after
。 伪元素可以在所选元素之前或之后添加一些内容。
动画
#anim {
animation-name: colorful;animation-name 用来设置动画的名称
animation-duration: 3s;设置动画所花费的时间。
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
如果不想动画重置,可加入
animation-fill-mode: forwards;
iteration
animation-iteration-count: 3;infinete则一直播放
动画
在 CSS 动画里,animation-timing-function
用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。 如果要描述的动画是一辆车在指定时间内(animation-duration
)从 A 运动到 B,那么 animation-timing-function
表述的就是车在运动中的加速和减速等过程。
有一些预定义的关键字可用于常见的选项。 比如,默认值是 ease
,动画以低速开始,然后加快,在结束前变慢。 其它常用的值包括 ease-out
:动画以高速开始,以低速结束;ease-in
,动画以低速开始,以高速结束;linear
:动画从头到尾的速度是相同的。
除了预定义值之外,CSS 还提供了贝塞尔曲线(Bezier curves)来更细致地控制动画的速度曲线。
在 CSS 动画里,我们可以用 cubic-bezier
来定义贝塞尔曲线。 曲线的形状代表了动画的速度。 曲线在 1 * 1 的坐标系统内, 其中 X 轴代表动画的时间间隔(类似于时间比例尺),Y 轴代表动画的改变。
cubic-bezier
函数包含了 1 * 1 网格里的4个点:p0
、p1
、p2
、p3
。 其中 p0
和 p3
是固定值,代表曲线的起始点和结束点,坐标值依次为 (0, 0) 和 (1, 1)。 你只需设置另外两点的 x 值和 y 值,设置的这两点确定了曲线的形状从而确定了动画的速度曲线。