<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 使用外部样式 -->
<!-- <link rel="stylesheet" href="./xxx.css"> -->
<style>
/* 字体属性 */
p{/* 元素选择器 */
color: rgba(0,0,0,1);/*文本颜色*/
font-size: 30px;/* 文本大小 */
font-weight: lighter;/*文本粗细*//*bold:粗体;
bolder:更粗的;
lighter:更细的;
100~900:400同默认,700同bold*/
font-style: normal;/*文本字体样式*//*normal:默认;italic:斜体字*/
font-family: "Microsoft YaHei";/*指定一个元素的字体*//*"Microsoft YaHei":微软雅黑*/
}
/* 背景属性 */
.box1{/* 类选择器 */
width:300px;
height:300px;
background-color: #ffff00;/* 背景颜色 */
background-image: url("xxx.jpg");/* 背景图像 */
background-repeat: no-repeat;/*背景图像如何平铺*//*repeat:默认;
repeat-x:向水平方向平铺;
repeat-y:向垂直方向平铺;
no-repeat:不平铺*/
background-size: 50% 50%;/* 背景图像大小*//*length:第一个值宽度,第二个值高度;
percentage:计算相对位置区域的百分比;
cover:背景图像覆盖整个元素;
contain:背景图像完整显示在元素内*/
background-position: center;/*设置背景图像的起始位置*//*x% y%:第一个值是水平位置,第二个值是垂直位置,
左上角是0% 0%,右下角是100% 100% 。
如果只指定了一个值,其他值默认是50%。
默认是0% 0% */
}
/* 文本属性 */
.p2{/* 优先级:类选择器 > 元素选择器 */
text-align: left;/* 指定元素文本的水平对齐方式 *//* left:文本居左排列,默认值;
right:把文本排列到右边;
center:把文本排列到中间 */
text-decoration: underline;/* underline:定义下划线;
overline:定义上划线;
line-through:定义删除线 */
text-transform: lowercase;/* 控制文本的大小写 *//* captialize:定义每个单词开头大写;
uppercase:定义全部大写字母;
lowercase:定义全部小写字母 */
text-indent: 50px;/* 规定文本块中首行文本的缩进 */
}
/* 表格属性 */
/* 指定CSS表格边框,使用border属性 */
table, td { border: 1px solid black; }
/* border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开 */
table { border-collapse:collapse; }
table,td { border: 1px solid black; }
/* width和height属性定义表格的宽度和高度 */
table { width:100%; }
td { height:50px; }
/* text-align属性设置水平对齐方式,向左,右,或中心 */
td { text-align:right; }
/* 垂直对齐属性设置垂直对齐 */
td { height:50px; vertical-align:bottom; }
/* 下面的例子指定边框的颜色,和th元素的文本和背景颜色 */
table, td, th { border:1px solid green; }
td { background-color:green; color:white; }
</style>
</head>
<body>
<p>我来学习字体属性</p>
<div class="box1"></div>
<p class="p2">准考证开放打印时间为9月3日,请考生届时按照准考证要求进行相应准备。
The admission ticket printing will be available starting from September 3rd.
Candidates are requested to make the necessary preparations according to the requirements stated on the admission ticket.
</p>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>