css知识点总结

最新推荐文章于 2024-11-12 22:56:44 发布

Z张弛儿

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量95

点赞数 1

文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_58730839/article/details/120155170

版权

css知识点总结2021年9月7日

css美化页面元素

css美化页面元素

-为什么美化网页

有效的传递页面信息
美化网页、页面漂亮、才能吸引用户
凸显页面的主题
提高用户的体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   **加粗样式** <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

欢迎学习 <span id="title1">Java</span>

</body>
</html>

字体样式

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

    -->
    <style>
        body{
            font-family: "Arial Black", 楷体;
            color: #a13d30;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>

文本样式

颜色： color rgb tgba

 <!--
      颜色：
            单词
            RGB 0~F
            RGBA  A:0~1
  -->
      <style>
        h1 {
            color: #FFFFFF;     
        /* #FFFFFF 白色
           #000000 黑色
           #FF0000 红色
           #00FF00 绿色
           #0000FF 蓝色
           */
        }
       

        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
            }
       </style>

*文本对齐的方式： text-align = center
*首行缩进： text-indent：2em；
*行高： line-height；
单行文字上下居中！line-height = height
装饰： text-decoration
文本图片水平对齐： vertical-align：middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
      颜色：
            单词
            RGB 0~F
            RGBA  A:0~1
         text-align:排版，居中
         text-indent:2em; 段落首行缩进
              行高，和 块的高度一致，就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .I1{
             text-decoration: underline;
        }
        /* 中划线 */
        .I2{
            text-decoration: line-through;
        }
        /*下划线 */
        .I3{
            text-decoration: overline;
        }
         /*超链接去下划线*/
        a{
            text-decoration: none;
        }
    </style>

</head>
<body>

阴影

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

超链接伪类

正常情况下，a，a:hover

 /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000;
        }
        /*鼠标悬浮的状态（只需要记住 :hover）*/
        a:hover{
            color: orange;
            font-size: 50px;
        }

列表

list-style-type：none；无标记符号
list-style-type：disc；实心圆，默认类型
list-style-type：circle；空心圆
list-style-type：square；实心正方形
list-style-type：decimal；数字
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a>
        </li>
    </ul>
</div>


</body>
</html>

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

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*  颜色，图片，图片位置，平铺方式  */
    background: red url("../images/d.gif") 270px 10px no-repeat;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/r.gif");
    background-repeat: no-repeat;
    background-position: 236px 2px;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

/*ul li*/
/*
list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
*/
/*ul{*/
/*background: #a0a0a0;*/
/*}*/

背景样式

常见的背景样式

背景图像

background-image属性
background-repeat属性
背景颜色
background-color

background-repeat属性

背景图像	背景的重复方式
repeat	沿水平和垂直两个方向平铺
no-reprat	不平铺，即只显示一次
repeat-x	只沿水平方向平铺
reprat-y	只沿垂直方向平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/img.png");
            /*默认是全部平铺的 repeat*/
        }
        .div1{
            background-repeat: repeat-x;
            /*水平方向平铺*/
        }
        .div2{
            background-repeat: repeat-y;
            /*竖直方向平铺*/
        }
        .div3{
            background-repeat: no-repeat;
            /*不平铺*/
        }
    </style>

</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

运行结果：
在这里插入图片描述

在这里插入图片描述

CSS渐变样式

线性渐变
颜色沿着一条直线过渡：从左向右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不在沿着一条直线变化，而是从一个起点朝所有的方向混合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--径向渐变，圆形渐变-->
    <style>
        body {
            /*background-color: #21D4FD;*/
            /*background-color: #21D4FD;*/
            background-image: linear-gradient(19deg, #21D4FD 0%, #00ff4e 100%);

        }

    </style>

</head>
<body>

</body>
</html>