div css（层叠样式表）入门

分类: IT文章 • 2024-07-24 16:24:07

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

    </head>
    <body>
<span style="font-size: 30px;color:blue">栏目一</span><br/>
<span style="font-size: 10px;color: red;font-style: italic;">栏目一</span><br/>
<span style="font-size: 40px;color: green;font-weight: bold;">栏目一</span><br/>
<span style="font-size: 20px;color: pink;font-weight: lighter;">栏目一</span><br/>
<span style="font-size: 30px;color: red;font-weight: lighter;">栏目一</span><br/>
    </body>
</html>

View Code

没有使用css时候

css分内部css与外部css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style>
    .style2{
        font-size: 20px;
        color: red;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
    }
    </style>
    </head>
    <body>
<span class="style2">栏目一</span><br/>
<span class="style2">栏目一</span><br/>
<span class="style2">栏目一</span><br/>
<span class="style2">栏目一</span><br/>
<span class="style2">栏目一</span><br/>
    </body>
</html>

View Code

汶川地震的时候网页都变黑白，怎么实现

css的滤镜体验：

变黑白;

<!DOCTYPE html>
<!--实现滤镜功能-->
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            img {
                filter: grayscale(100%);
            }
        </style>
    </head>

    <body>
        <img src="img/help_steps.jpg">
        <img src="img/login_step1.jpg">
        <img src="img/login_step2.jpg">
    </body>

</html>

View Code

鼠标悬浮变色功能;

<!DOCTYPE html>
<!--实现滤镜功能-->
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:link {
                filter: grayscale(100%);
            }
            
            a:hover {
                filter: grayscale(0%);
            }
            
            ;
        </style>
    </head>

    <body>
        <a href="#"> <img src="img/help_steps.jpg"></a>
        <a href="#"> <img src="img/login_step1.jpg"></a>
        <img src="img/login_step2.jpg">
    </body>

</html>

View Code

eg；

<html>
<head>
        <meta charset="UTF-8">
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

</head>

<body>

<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>

</body>
</html>

View Code

div css（层叠样式表）入门

相关推荐