4.5 文本修饰和字体设置
-
文本水平对齐方式：text-align：left/right/center
-
文本修饰：text-decoration：overline/underline/line-through/none
-
文本阴影：text-shadow：颜色 x偏移值 y偏移值 浓度越大，越模糊
-
行高：line-height：像素值；可以实现文本垂直居中
-
字体大小：font-size：像素值；
-
字体加粗：font-weight：bold加错 normal去掉加粗效果
-
斜体：font-style：italic
-
字体设置：font-family：xxx，xxx，xxx；
-
font：字体 xxx，xxx，xxx；
-
注意不要书写多个属性，与浏览器有关，有可能识别不出来
-
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
div{
/*设置块级元素宽高*/
width:600px;
height:500px;
/*设置背景颜色*/
background-color:pink;
/*设置边框：粗细像素值 样式 颜色*/
border:3px solid blue;
/*设置字体颜色*/
color:red;
/*设置字体大小*/
font-size:50px;
/*设置文本水平对齐方式：靠左(默认)、居中、靠右*/
/*text-align:left;*/
text-align:center;
/*text-align:right;*/
/*设置行高：行高是一行文本所占的高度，文本会在这个高度中垂直居中*/
line-height:80px;
/*加粗*/
font-weight:bold;
/*斜体*/
font-style:italic;
/*字体*/
font-family:华文彩云;
/*字体阴影：颜色 x偏移值 y偏移值 浓度(浓度越大，越模糊)*/
text-shadow:lightyellow 10px 10px 3px;/*右下*/
/*text-shadow:lightyellow 10px -10px 3px;/*右上*/
/*text-shadow:lightyellow -10px -10px 3px;/*左上*/
/*text-shadow:lightyellow -10px 10px 3px;/*左下*/
/*设置文本修饰：overline上划线、underline下划线、line-through删除线、none没有修饰(默认)*/
/*text-decoration:none;*/
/*text-decoration:overline;*/
/*text-decoration:underline;*/
}
span{
text-decoration:line-through;/*删除线*/
font-family:楷体;
}
a{
text-decoration:none;/*去除超链接下面的下划线*/
font-family:幼圆;
}
#d1{
font-weight:normal;/*去除加粗*/
font-family:隶书;
}
h2{
font:30px bold italic 幼圆;/*写多个属性时可能识别不到*/
}
</style>
</head>
<body>
<div>2021，小崔，加油!<br><br>
原价<span>999</span>，现价9.9<br><br>
<a href="http://www.baidu.com">百度一下</a>
</div>
<h1 id="d1">今天也要加油呀</h1>
<h1>必须的</h1>
<h2>文本样式练习</h2>
</body>
</html>
显示效果：
4.6 CSS基础知识案例练习
4.6.1 学习商城测试案例1
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学子商城练习1</title>
<style type="text/css">
/*在body里面写的样式是全局样式，所有标签都能继承下去*/
body{
font:12px "simhei",Arial,Helvetica,sans-serif;
color: #666;
margin: 0px;
padding: 0px;
background-color: #f5f5f5;
}
body>div{
width:611px;
height:376px;
background-color:#e8e8e8;
background-image:url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
background-repeat:no-repeat;
background-color:318px 319px;
background-position:90% 70%;
overflow:hidden;
margin:0 auto;
}
div>div{
width:245px;
height:232px;
margin:68px 0 0 36px;
}
.p1{
font-size:32px;
color:#333;
margin:0 0 12px 0;
}
.p2{}
.p3{
font-size:24px;
font-weight:bold;
color:#0aa1ed;
margin-bottom:12px;/*改变p标签的下外边距，默认很宽*/
}
input{
width:132px;
height:40px;
background-color:#0aa1ed;
color:white;
font-size:20px;
border:0;/*去除边框*/
border-radius:3px;
cursor:pointer;/*鼠标悬浮时显示小手*/
}
</style>
</head>
<body>
<div>
<div>
<p class="p1">灵越 燃7000系列</p>
<p class="p2">酷睿双核i5处理器 | 256GB SSD| 8GB内存<br>
英特尔HD显卡620含共享显卡内存
</p>
<p class="p3">￥4999.00</p>
<input type="button" value="查看详情">
</div>
</div>
</body>
</html>
显示效果：
4.6.2 CSS学习商城测试案例2
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学子商城练习2</title>
<style type="text/css">
body{
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
margin: 0px;
padding: 0px;
background-color: #f5f5f5;
}
body>div{
width:375px;
height:376px;
background-color:#e8e8e8;
background-image:url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
background-repeat:no-repeat;
background-size:292px 232px;
background-position:80% 90%;
overflow:hidden;
margin:0 auto;
}
div>div{
margin:39px 0 0 25px;
width:253px;
height:232px;
}
.p1{
font-size:32px;
color:#333;
margin-bottom:12px;
}
.p3{
font-size:24px;
color:#0aa1ed;
font-weight:bold;
margin-bottom:12px;
}
a{
display:block;/*设置为块级元素*/
width:132px;
height:40px;
background-color:#0aa1ed;
color:white;
font-size:20px;
text-decoration:none;/*去除超链接的下划线*/
text-align:center;/*水平样式居中*/
line-height:40px;/*行高40排序，居中显示*/
border-radius:3px;
}
</style>
</head>
<body>
<div>
<div>
<p class="p1">颜值 框不住</p>
<p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
英特尔HD显卡620含共享显卡内存
</p>
<p class="p3">￥6888.00</p>
<a href="http://www.baidu.com">查看详情</a>
</div>
</div>
</body>
</html>
显示效果：