文本属性与文本样式"/>
文本属性与文本样式
一、文本属性与样式
1、字体颜色
color:#333;
2、 文字大小
font-size:20px;
3、字体
font-family: "宋体";
4、字重
font-weight: 100-500(常规字体)/600-900（字体加粗）；
normal(常规字体)/bold/bolder(比较级强调作用)
5、字体样式
font-style: oblique; 文本倾斜
font-style:normal; 正常（不倾斜）
6、行高
line-height:1.5em; 1.5倍行间距
7、首行缩进
text-indent: 32px;
8、文本修饰
text-decoration： overline; （上划线）
text-decoration：line-through （删除线）
text-decoration：underline（下划线）
text-decoration：none（没有文本修饰）
9、字间距：控制英文字母与英文字母，汉字与汉字之间的间距
letter-spacing：10px;
控制英文单词与英文单词之间的间距
word-spacing：10px；
10、控制英文的输出
text-transform：capitalize；（首字母大写）
text-transform：uppercase；（全部大写）
text-transform：lowercase；（全部小写）
11、文字排版
text-align：center；（文本居中）
text-align：left；（文本居左）
text-align：right；（文本居右）
实操：
test2.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文本声明</title><!-- 链接css样式 --><link rel="stylesheet" type="text/css" href="css/test2.css"/></head><body><div class="box"><h3>纳兰性德</h3><p>人生若只如初见，何必秋风悲画扇。</p><p class="p2">等闲变却故人心，却道故人心易变。</p><p>海内存知己，天涯若比邻。</p><p>知否知否，应是绿肥红瘦。</p><p>I love you!</p><a href="#">百度</a></div></body>
</html>
test2.css
*{padding:0;margin:0;
}.box{width:400px;height:500px;border:5px solid #ccc;margin:0 auto; /* 元素居中 */
}.box p{/* 字体颜色 */color:#333;/* 文字大小 */font-size:20px;/* 字体 */font-family: "宋体";/* 字重 *//* font-weight: 100-500(常规字体)/600-900（字体加粗）；normal(常规字体)/bold/bolder(比较级强调作用) */font-weight:800;/* 字体样式 */font-style: oblique; /* 倾斜 *//* 行高 */line-height:1.5em; /* 1.5倍1.5倍行间距 *//* 首行缩进 */text-indent: 32px;/* 文本修饰 *//* text-decoration: overline (上划线)line-through(删除线) underline（下划线） none(没有文本修饰) */text-decoration: underline;/* 字间距 */letter-spacing: 10px; /* 汉字与英文字母 */word-spacing: 10px; /* 英文单词 *//* 控制英文的输出 *//* text-transform: 首字母大写capitalize, 全部大写uppercase,全部小写lowercase */text-transform: capitalize;
}.box h3{font-weight:300; /* 字体取消加粗 *//* 文字排版 left right center */text-align: center; /* 文本居中 */
}.box .p2{font-style: normal; /* 取消倾斜 */
}.box a{text-decoration: none; /* 取消链接的下划线 */
}.box a:hover{text-decoration: underline; /* 鼠标划过出现下划线 */
}运行效果：
二、练习
homework.html （完善前面的练习，html中未作修改）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>大练习</title><link rel="stylesheet" type="text/css" href="css/homework.css"/></head><body><div class="qyyf_box"><div class="yftx_item"><h3>研发体系</h3><img src="img/巨星科技_03.png" alt=""><p>巨星的核心竞争力之一就是创新能力，公司目前研发部门主要有：手工具开发部、电动工具开发部、产品造型部、模具中心、加工中心、产品快速成型中心、检测和实验中心。</p><a href="#">查看更多</a></div><div class="yftx_item"><h3>研发体系</h3><img src="img/巨星科技_03.png" alt=""><p>巨星的核心竞争力之一就是创新能力，公司目前研发部门主要有：手工具开发部、电动工具开发部、产品造型部、模具中心、加工中心、产品快速成型中心、检测和实验中心。</p><a href="#">查看更多</a></div><div class="yftx_item"><h3>研发体系</h3><img src="img/巨星科技_03.png" alt=""><p>巨星的核心竞争力之一就是创新能力，公司目前研发部门主要有：手工具开发部、电动工具开发部、产品造型部、模具中心、加工中心、产品快速成型中心、检测和实验中心。</p><a href="#">查看更多</a></div></div></body>
</html>
homework.css（对文本样式做了修改）
*{padding:0;margin:0;
}.qyyf_box{width:1200px; /* 必须首先给父元素盒子一个宽度，而后才可以命令盒子自适应水平居中 */margin: 0 auto;
}.yftx_item{width:300px;/* 浮动:让元素在画面中进行水平排版 */float: left; background-color:#4a98ef;margin-left:30px;padding:20px 30px;/* 内边距:上下 左右; */
}.yftx_item h3{/* 对"研发体系"加上边框 */border-bottom: 2px solid #fff;margin-bottom: 20px;color:#fff; /* 文字颜色 */
}.yftx_item img{display: block; /* 行元素转为块元素 */width:100%;
}.yftx_item p{color:#fff; /* 文字颜色 */font-size:14px; /* 文字大小 */line-height:1.5em; /* 行高 */margin-top:10px; /* p标签外边距(上方) */text-indent: 20px; /* 首行缩进 */
}.yftx_item a{color:#cee0f5;font-size: 14px;float:right; /* 向右浮动 */text-decoration: none; /* 去掉下划线 */margin-top:20px;
}运行效果：
更多推荐
文本属性与文本样式
发布评论