首页 > 其他分享> > CSS美化网页元素

CSS美化网页元素

2022-09-02 20:31:43 作者：互联网

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