CSS----2

目录

美化网页元素

1.为什么要美化网页

2. 字体样式

3.  文本样式

4.超链接伪类

5.列表

 6.背景

7.渐变

美化网页元素

1.为什么要美化网页

  1. 有效传递页面信息；
  2. 美化，好看才能吸引用户；
  3. 凸显页面主题；
  4. 提高用户体验； 

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

  <style>
    #aaa{
      font-size: 50px;
      background-color: #119aec;
      color: red;
    }
  </style>
</head>
<body>
欢迎学习 <span id="aaa">Java</span>
</body>

2. 字体样式

<!--
font-family  字体
font-size    字体大小
font-weight  字体粗细
-->

  <style>
    body{
      font-family: "Arial Black", 华文行楷;
        color: red;
    }
    h1{
      font-size: 50px;
    }
    .p1{
        font-weight: lighter;
    }
  </style>

3.  文本样式

  1. 颜色  color  rgb  rgba
  2. 文本对齐方式  text-align: right;
  3. 首行缩进   text-indent: 2em
  4. 行高   line-height: 200px;  单行文字上下居中
  5. 装饰  text-decoration  下划线
  6. 文本图片水平对齐：vertical-align: middle;
  7. 阴影
<!-- 颜色：单词、RGB（0~F）、RGBA  A:0-1
 排版：text-align
  text-indent: 2em;   段落首行缩进
   height: 200px;行高和块高度一样就可以上下居中；
   line-height: 200px;

 -->
  <style>
    h1{
      color: rgba(0,225,225,0.5);
      text-align: right;
    }
    .p1{
      text-indent: 2em;
    }
    .p3{
      background-color: #7914a0;
      height: 200px;
      line-height: 200px;
    }
    /*下划线*/
    .n1{
      text-decoration: underline;
    }
    /*中划线*/
    .n2{
      text-decoration: line-through;
    }
    /*上划线*/
    .n3{
      text-decoration: overline;
    }
    /*超链接去下划线*/
    a{
        text-decoration: none;
    }
 #price{
     text-shadow: #119aec 10px -10px 2px;
   }

4.超链接伪类

正常情况下，a,a:hover记住

/*默认颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮颜色(只需要记住hover)*/
    a:hover{
      color: red;
      font-size: 2px;
    }
    /*鼠标按住未释放状态*/
    a:active{
      color: green;
    }

5.列表

#nav{
    width: 300px;
    background: chartreuse;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 5px;
    line-height: 35px;
    background: #119aec;
    text-align: center;
}
/*ul li
 list-style:
            none  去掉圆点
            circle  空心圆
            decimal  数字
            square   正方形
*/
/*ul{*/
/*    background: dimgray;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 2em;
   
}
a{
    text-decoration: none;
    color: #000;
    font-size: 14px;
}
a:hover{
color: coral;
 text-decoration: underline;
}

 6.背景

  • 背景颜色
  • 背景图片
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*默认全部平铺*/
            background-image: url("images/1.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
    </style>

7.渐变

一个好看的背景生成网站：https://www.grabient.com/

background-color: #4158D0;
background-image: linear-gradient(119deg, #4158D0 0%, #C850C0 49%, #FFCC70 100%);

posted @ 2022-05-10 17:16  Fiercezm  阅读(16)  评论(0)  编辑  收藏  举报  来源