文字类:
设置文字字体:
font-family:
可以直接使用中文,例如:"font-family: 宋体;"
可以写多个,浏览器会依次查找,直到找到用户拥有的对应字体文件(即你要是用了花里胡哨的字体,人家没对应的字体文件也白搭,建议使用常见的字体,例如黑体、微软雅黑之类的)
设置字体大小:
font-size:
谷歌默认字体大小是16像素.
由于不懂用户会使用什么奇奇怪怪的浏览器,所以尽量设置一下全局默认字体大小.
设置字体粗细:
font-weight:
可写具体数值大小(非像素),也可以写
"normal"表示正常粗细,数值为400.
"bold"表示加粗,数值为700.
"bolder"表示特粗.
"lighter"表示细.
常用来把奇奇怪怪的字体粗细变回正常,即400.
最大值为900.
设置字体样式:
font-style:
"normal":正常样式.
"italic":倾斜.
常用来把倾斜的字体变成正常.
设置水平对齐:
text-align:
"center":居中对齐.
"left":靠左对齐.
"right":靠右对齐.
装饰文本样式:
text-decoration:
"none":无特殊样式
"underline":下划线
"overline":上划线
"line-through":删除线
除了"none"和"underline"以外,其他基本不用.主要用来把字体变回正常状态,例如将链接的下划线取消.
另外去除列表的装饰为:"list-style:none"
设置字体颜色:
color:
可以直接用英文写颜色:"red"、"blue"、“green”……
可以用RGB来写:rgb(0,0,0)……
CSS3可用RGBA来写(相比较RGB,多了最后一位透明度):rgba(100,100,100,0.3)……
可以用十六进制来写:#666666……
可以设置为透明:"transparent"
设置文本缩进:
text-indent:
可用2em来缩进两个文字距离,em代表父元素的字体大小。例如父元素字体大小为16px,2em=32px就是两个文字的距离。
设置行间距:
line-height:
如果想要文字在块元素中垂直居中,可将其行间距改成与块元素高度一致。
设置文字阴影:
text-shadow:水平阴影位置 垂直阴影位置 模糊距离 模糊颜色
文字复合写法:
font:font-style font-weight font-size/line-height font-family
顺序不能乱,并且其中font-size和font-family为必写项(即其可以省略).
背景类:
设置背景颜色:
background-color:
和上面设置字体颜色一样
设置背景图片:
background-image:url("具体路径")
设置背景图片平铺:
background-repeat:
"no-repeat":不平铺,若图片无法铺满也不再添加图片了,即只加一张背景图.
"repeat":平铺.若图片无法铺满则向x和y轴再添加图片,直到铺满某一轴.
"repeat-x":x轴上平铺,若图片无法铺满,则向x轴再加图片,直到x轴铺满.
"repeat-y":y上平铺,若图片无法铺满,则向y轴再加图片,直到y轴铺满.
一般使用"no-repeat",若无法填满盒子则修改图片大小.
设置背景图片大小:
background-size:
可以填具体的宽、高像素大小.
可以填“cover”:等比缩放至覆盖全图。
可以填“contain”:等比缩放使得背景图达到最大,即图片宽与盒子宽一致或是图片高与盒子高一致。
设置背景位置:
background-position:
可以设置具体的x、y值,x轴上右为正方向,y轴上下为正方向。
可以用方位名词:“right”“left”“center”“top”
可以用百分比:以自身大小为标准。
背景固定:
ground-attachment:
“scroll”:背景随内容而滚动。
“fixed”:背景固定。
背景属性复合写法:
background:背景颜色 背景图片 是否平铺 是否固定 背景位置
例子:
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one {
font-family: 宋体;
font-size: 50px;
font-weight: 900;
color: rgba(200, 0, 0, 0.3);
}
.two {
font: italic 400 16px/20px 黑体;
text-align: center;
text-decoration: underline;
color: rgb(128, 118, 163);
text-shadow: 10px 10px 10px gray;
}
.three {
width: 400px;
height: 400px;
border: 2px solid black;
background: #63bbd0 url("../素材/素材/image/animal/animal4/all.jpg") no-repeat scroll right;
background-size: 300px;
}
</style>
</head>
<body>
<p class="one">宋体</p>
<p class="two">这是一段话</p>
<div class="three"></div>
</body>
</html>