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

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>

显示效果：

练习：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>测试</title>
 <style type="text/css">
 div{
   /*块级元素大小*/
   width:800px;
   height:100px;
   /*块级元素背景颜色*/
   background-color:yellow;
   /*块级元素边框*/
   border:2px dotted blue;
   /*边框圆角*/
   border-radius:5px;
   /*字体颜色*/
   color:red;
   /*字体大小*/
   font-size:50px;
   /*字体水平居中*/
   text-align:center;
   /*字体垂直居中，当像素值大于字体大小时，上下留出边距*/
   line-height:80px;
   /*字体加粗*/
   font-weight:bold;
   /*字体倾斜*/
   font-style:italic;
   /*设置字体样式*/
   font-family:华文彩云;  
 }
 p{
   width:800px;
   height:50px;
   background-color:pink;
 }
 #d1{
   text-align:left;
 }
 #d2{
   text-align:center;
 }
 #d3{
   text-align:right;
 }
 #d4{
   text-decoration:overline;
 }
 #d5{
   text-decoration:underline;
 }
 #d6{
   text-decoration:line-through;
 }
 #d7{
   text-decoration:none;
 }
 #d8{
   text-shadow:red 5px 5px 1px;
 }
 #d9{
   text-shadow:red 5px -5px 2px;
 }
 #d10{
   text-shadow:red -5px -5px 3px;
 }
 #d11{
   text-shadow:red -5px 5px 4px;
 }
 a{
   text-decoration:none;
 }
 h1{
   font-weight:normal;
 }
 .c1{
   font:20px 楷书;
 }
 .c2{
   font:30px bold 宋体;
 }
 .c3{
   font:40px red 幼圆;
 }
 </style>
 </head>
 <body>
   <div>2021，小崔，加油！</div>
   <p id="d1">字体对齐方式：靠左</p>
   <p id="d2">字体对齐方式：居中</p>
   <p id="d3">字体对齐方式：靠右</p>
   
   <p id="d4">text-decoration:overline(上划线)</p>
   <p id="d5">text-decoration:underline(下划线)</p>
   <p id="d6">text-decoration:line-through(删除线)</p>
   <p id="d7">text-decoration:none(无修饰线)</p>
   
   <p id="d8">text-shadow：x+ y+(右下偏移)</p>
   <p id="d9">text-shadow：x+ y-(右上偏移)</p>
   <p id="d10">text-shadow：x- y-(左上偏移)</p>
   <p id="d11">text-shadow：x- y+(左下偏移)</p>
   
   <a href="http://www.baidu.com">超链接去除下划线</a>
   <h1>标题去除加粗效果</h1>
   <p class="c1">字体样式1</p>
   <p class="c2">字体样式2</p>
   <p class="c3">字体样式3</p>
   
 </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>

显示效果：

 

posted @ 2021-07-13 15:27  Coder_Cui  阅读(194)  评论(0)  编辑  收藏  举报