属性 样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>属性样式</title>
<style type="text/css">
.box1 {
width: 500px; /*设置文本宽度*/
height: 200px; /*设置文本高度*/
color: #fff; /*设置文本字体颜色*/
text-align: left; /*水平对齐 左、中、右*/
background-color: #333; /*设置背景颜色*/
border: 5px solid #00f; /*设置边框样式 边框宽度 边框样式 边框颜色*/
/*设置文本修饰线 上划线(overline)、下划线(underline)、删除线(ling-through)、none 颜色*/
text-decoration: underline;
text-decoration-color: #f00;
/*英文字母大小写转换(uppercase、lowercase)、首字母大写(capitalize)*/
text-transform: capitalize;
/*设置行高*/
line-height: 10;
/*设置首行缩进*/
text-indent: 2em;
/*设置字符间距*/
letter-spacing: 6px;
/*设置单词间距*/
word-spacing: 10px;
}
.box2 {
/*垂直水平居中 行高和高度保持一致 就可以设置内容垂直居中*/
border: 1px solid #f00;
height: 100px;
text-align: center;
line-height: 100px;
}
.box3 span {
/*字体属性*/
/* 倾斜 italic 正常 normal */
font-style: italic;/*文本倾斜*/
/* 加粗 bold 正常 normal */
font-weight: bold;/*文本加粗*/
/* 字体大小 */
font-size: 12px;
}
.box3 {
/*关于字体 适配特殊字体时，一般都会使用图片来表示*/
/* 能否显示该字体时根据用户电脑里面是否有对应的字体文件 如果没有默认显示宋体 */
font-family: "楷体","宋体","微软雅黑";
}
.box4 {
/* 斜体 加粗 大小 字体 顺序执行 */
font: italic bold 22px "楷体";
}
</style>
</head>
<body>
<!-- 注意：行内元素是不可以设置宽高的 只有块级元素才可以 -->
<div class="box1">hello world div我是盒子</div>
<div class="box2">hello world</div>
<div class="box3"><span class="lz">量子优越性</span>是指当新生的<i>量子计算原型机</i>，在某个问题上的计算能力超过了最强的<b>传统计算机</b>，就证明其未来有多方超越的可能。”中科大教授陆朝阳介绍，多年来国际学界高度关注、期待这个里程碑式转折点到来。潘建伟团队这次突破历经20年，主要攻克高品质光子源、高精度锁相、规模化干涉三大技术难题。</div>
<div class="box4">量子优越性是指当新生的量子计算原型机，在某个问题上的计算能力超过了最强的传统计算机，就证明其未来有多方超越的可能。”中科大教授陆朝阳介绍，多年来国际学界高度关注、期待这个里程碑式转折点到来。潘建伟团队这次突破历经20年，主要攻克高品质光子源、高精度锁相、规模化干涉三大技术难题。</div>
</body>
</html>
尺寸样式
- 设置宽高 width height
行内元素是不可以设置宽高的 只有块级元素才可以
文本属性
- 颜色 水平居中 垂直居中 垂直水平居中（需要高度和行高取值一致）
- 边框（样式 宽度 颜色） 修饰线（上划线、下划线、删除线、正常）
- 英文字母大小写转换 首字母大写 首行缩进（一般使用em单位 1 em代表一个汉字的宽度）
- 行高 字符间距 单词间距
字体属性
- 样式（倾斜 正常） （加粗 正常）大小 格式字体
网友评论