CSS基础操作（六）-文本修饰和字体设置、学子商城测试案例练习

时间：2021-07-13 17:26:17 阅读：13 评论：0 收藏：0 [点我收藏+]

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>

显示效果：

技术分享图片

CSS基础操作（六）-文本修饰和字体设置、学子商城测试案例练习

原文：https://www.cnblogs.com/XiaoCui-blog/p/15006612.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)