首页 > 其他分享> 文章详细

CSS美化网页元素

2022-09-02 20:31:43 阅读：222 来源： 互联网

标签：网页 color text height decoration CSS background font 美化

3.美化网页元素

3.1为什么要美化网页

1.有效的传递页面信息

2.美化网页，页面漂亮才能吸引用户

3.凸显页面的主题

4.提高用户的体验

span标签：重点要突出的字使用span标签套起来

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         #title{
             font-size: 50px;
         }
     </style>
 </head>
 <body>
 欢迎学习<span id="title">JAVA<span/>
 </body>
 </html>

3.2字体样式

 <!--font-family:字体
     font-size:字体大小
     font-weight:字体粗细
     color:字体颜色
 -->

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         p{
             font:oblique bolder 22px "楷体";
         }
     </style>
 </head>
 <body>
 <p>江淮、江汉、江南、四川盆地等地将出现持续高温天气，累计高温日数可达7～10天。</p>
 
 </body>
 </html>

3.3文本样式

1.颜色 color rgb/rgba

2.文本对齐方式 text-align center(居中)

3.首行缩进 text-indent: em;

4.行高line-height: px;单行文字上下居中line-height=height

5.装饰:

/下划线/ .L1{ text-decoration: underline; } /中划线/ .L2{ text-decoration: line-through; } /上划线/ .L3{ text-decoration: overline; }

/a标签去下划线/

text-decoration:none;

}

6.文本图片水平对齐:vertical-align:middle;

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <!--font-family:字体
         font-size:字体大小
         font-weight:字体粗细
         color:字体颜色
     -->
 <!--
 颜色：
     单词
     RGB（红绿蓝）#000000黑#FFFFFF白
     RGBA（透明度）
 排版：text-align  center(居中)
 首行缩进：text-indent 单位：em，px
 行高和块的高度一致时上下居中：
 height: 300px;
 line-height: 300px;
 
 -->
     <style>
         h1{
             color:rgba(0,255,255,0.9);
             text-align: center;
         }
         .p1{
             text-indent: 2em;
         }
         .p3{
             background: red;
             height: 300px;
             line-height: 300px;
         }
         /*下划线*/
         .L1{
             text-decoration: underline;
         }
         /*中划线*/
         .L2{
             text-decoration: line-through;
         }
         /*上划线*/
         .L3{
             text-decoration: overline;
         }
     </style>
 </head>
 <body>
 <p class="L1">123123123</p>
 <p class="L2">123123123</p>
 <p class="L3">123123123</p>
 <h1>介绍</h1>
 <p class="p1">值得关注的是，未来10天</p>
 <p class="p3">江淮、江汉、江南、四川盆地等地将出现持续高温天气，累计高温日数可达7～10天。</p>
 
 </body>
 </html>

3.4阴影

 /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
 #price{
     text-shadow:red 5px 5px 5px ;
 }

3.5超链接伪类

 /*鼠标悬浮的状态（重点）*/
 a:hover{
     color: orange;
     font-size: 50px;
 }
 /*鼠标按住未释放的状态*/
 a:active{
     color: green;
 }
 /*已访问的链接*/
 a:visited{
     color: red;
 }

3.6列表

 /*ul li*/
 /*  list-style: none;
 none  去掉原点
 circle  空心圆
 decimal  数字
 square  正方形
 */
 ul{
     background: gold;
 }
 ul li{
     height: 30px;
     list-style:none;
     text-indent: 1em;
 
 }

3.7背景

背景颜色

背景图片

 div{
             width: 1000px;
             height: 700px;
             border: 1px solid red;
             background-image: url("image/1.jpg");
             /*默认是全部平铺的*/
         }
         .div1{
             background-repeat: repeat-x ;
         }
         .div2{
             background-repeat: repeat-y;
         }
         .div3{
             background-repeat: no-repeat;
         }

3.8渐变

background-image: linear-gradient( 方向/角度 , 颜色1，颜色2，颜色3....);

标签：网页,color,text,height,decoration,CSS,background,font,美化
来源： https://www.cnblogs.com/cyh822blogs/p/16651129.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9