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:背景颜色 背景图片 是否平铺 是否固定 背景位置
源代码:
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Titletitle>
- <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>