1、对齐:center, justify, right, left(faulted)
<style>
h4 {
text-align: center;
}
p {
text-align: justify;
}
</style>
<h4>Today is a good day</h4>
<p>I'm doing perfect</p>
2、加粗:<p><strong>I'm learning coding</strong></p>
下划线:<u> </u>
强调:<em> </em>
删除线:<s> </s>
水平线:<hr>
自关闭标签
3、阴影 box-shadow?
4、透明度:opacity: 数字
在动画中会用到这个属性
5、大小写:text-transform
`text-transform: uppercase 全部大写 lowercase 全部小写 capitalize 首字母大写 inherit 继承 initial 默认值 none 不改变文字
6、字体
font-size 大小
font-weight 粗细
font-family 字体家族
7、行高:line-weight
8、伪类
a: hover {
color: red;
}
<a href="http://freecatphotoapp.com/" target="_blank">猫咪相册 App</a>
9、位置
相对位置(向下偏移 15 像素):
h2 {
position: relative;
top: 15px;
}
绝对位置:
position: absolute
定位是元素的定位参照于最近的已定位父元素。
position: fixed
定位的参照物是浏览器的窗口。
浮动:
<style>
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 40%;
}
</style>
重叠元素的位置:
z-index
的取值是整数,数值大的元素优先于数值小的元素显示。
块级元素居中:
<style>
div {
background-color: blue;
height: 100px;
width: 100px;
margin: auto;
}
</style>
<div></div>
通过设置图片 display
属性为 block
来把它变成块级元素,然后添加 margin
属性居中。
10、缩放
p: hover {
transform: scale(2.1);
}
11、动画
animation
属性控制动画的外观, @keyframes
规则控制动画中各阶段的变化。
用偏移属性 right
、 left
、 top
和 bottom
可以用在动画规则里创建动作。
<style>
#example {
animation-name: rainbow; 动画名称
animation-duration: 10s; 动画循环的时间
animation-iteration-count: 3 动画循环的次数(infinite 永不停止)
animation-timing-function: linear 匀速 ease-out 高速开始低速结束 ease-in 低速开始高速结束 cubic-bezier (x1, y1, x2, y2) 贝塞尔曲线定义速度曲线
}
@keyframes rainbow {
0% {
background-color: blue;
top: 20px;
}
50% {
background-color: green;
top: 0px;
}
100% {
background-color: yellow;
top: 20px;
}
}
</style>
悬停时始终高亮:animation-fill-mode: forwards
<style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
animation-fill-mode: forwards;
/* add your code above this line */
}
@keyframes background-color {
100% {
background-color: green;
}
}
</style>
<button>注册</button>