(一)字体样式
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style>
#box {
width: 500px;
height: 200px;
border: 1px solid black;
/* 文字大小 谷歌默认16px,偶数,最小是12px */
font-size:20px;
/*字体*/
font-family:"Arial Black";
/*文字颜色*/
color: blue;
/*行高*/
line-height: 200px; /*(行高-字体大小)/2*/
/* 文字对齐方式:center/left/right */
text-align: center;
/*首行缩进 em是字符数单位 */
text-indent: 2em;
/* 文字着重:bold加粗、normal原粗细 */
font-weight: normal;
/*文字倾斜:italic 不倾斜normal*/
font-style: normal;
/*文本修饰 下划线underline、上划线overline、中间线line-through、无线none*/
text-decoration: none;
/*字母间距*/
/*letter-spacing: 5px;*/
/*单词间距*/
word-spacing: 20px;
/*英文字母大小写转换*/
font-variant: small-caps;
}
</style>
</head>
<body>
<div id="box">设置文本样式</div>
</body>
(二)背景样式
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
/*ctrl+alt+l 代码格式化快捷键,自动修改不规范的代码*/
#box {
width: 400px;
height: 400px;
/*背景颜色*/
/*background-color: yellow;*/
/*背景图片 url为图片地址*/
/*background-image: url("../img/iulp.jpg"); !*1080x1080*!*/
/*背景大小*/
/*background-size: 400px; !*图片压缩的比例:400/1080*!*/
/*background-size: 200px 200px; !*图片压缩的比例:400/1080*!*/
/*背景平铺:no-repeat不重复、repeat重复、repeat-x/y x和y轴进行填充*/
/*background-repeat: no-repeat;*/
/*背景定位 可以为负值*/
/*background-position:-40px 0;*/
/*沿着x轴移动,上下居中*/
/*background-position:40px;*/
/*上下左右都居中*/
/*background-position:center;*/
/*上下左右*/
/*background-position:top;*/
/*background-position:bottom;*/
/*background-position:left;*/
/*background-position:right;*/
/*百分比调节*/
/*background-position:50% 50%;*/
/*复合样式书写背景样式*/
/*书写顺序:颜色,图片,平铺,定位/大小*/
background:yellow url("../image/iu.jpg") no-repeat 0 0/400px 400px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>