CSS（二）

最新推荐文章于 2024-10-20 21:25:59 发布

不说话的娃娃鱼

最新推荐文章于 2024-10-20 21:25:59 发布

阅读量114

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_40144821/article/details/108761129

版权

字体样式

    <style>
        /*
        font-family: 字体
        font-size: 字体大小
        font-weight: 字体粗细
        color: 字体颜色
        */
        body{
            font-family: "Arial Black",楷体;
            color: #65a4ff;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: lighter;
        }

    </style>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        颜色：
            单词
            RGB     0~F
            RGBA   A(透明度) ：0~1
        文本对齐的方式：
            text-align: center;   排版，居中
        首行缩进：
            text-indent: 2em;    段落首行缩进
        行高：
            height: 300px;
            line-height: 300px;
                行高，和 块的高度一致，就可以上下居中
        装饰：
            text-decoration
        文本图片水平对齐：
            vertical-align: middle;
        */
        h1 {
            color: rgba(0, 255, 255, 0.9);
            text-align: center;
        }

        .p1 {
            /*首行缩进*/
            text-indent: 2em;
        }

        .p3 {
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去除下划线*/
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>

<a href="">123</a>

<p class="l1">123123132</p>
<p class="l2">123123132</p>
<p class="l3">123123132</p>


<h1>1111</h1>
<p class="p1">2222222222222222222222</p>

<p>3333333333333333333333</p>

<p class="p3">esfhhkhsbekfuhsekdufsdhkfe</p>
</body>
</html>

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
            font-size: 50px;
        }
        /*激活状态：鼠标点击之后未释放的状态*/
        a:active{
            color: #40ff3f;
        }
        /*点击之前的状态*/
        a:link{

        }
        /*点击之后的状态*/
        a:visited{
            color: red;
        }
        /* text-shadow: 阴影颜色  水平偏移  垂直偏移  阴影半径  */
        #price{
            text-shadow: yellow 10px 10px 2px;
        }
    </style>

</head>
<body>

<a href="#">
    <img src="images/a.PNG">
</a>
<p>
    <a href="#">123</a>
</p>
<p>
    <a href="">456</a>
</p>
<p id="price">
    $99
</p>
</body>
</html>

列表样式

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

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

渐变

    <style>
        body{
            background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
        }
    </style>

不说话的娃娃鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫