训练

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/my.css" />
    </head>

    <body>
        <font class="s1">梁山排行榜</font><br/>
        <span class="s2">宋江</span><br/>
        <span class="s3">卢员外</span><br/>
        <span class="s4">吴用</span><br/>
        <span class="s3">豹子头</span><br/>
        <span class="s3">大刀关胜</span><br/>
    </body>

</html>

View Code

my.css

.s1 {
    font-size: 30px;
    color: blue;
}

.s2 {
    background-color: silver;
    font-style: italic;
    font-weight: bold;
    color: red;
}

.s3,
.s4 {
    background: lightgray;
    font-weight: bold;
}

.s4 {
    font-style: italic;
    text-decoration: underline;
}

View Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/my.css" />
    </head>

    <body>
        <font class="s1">梁山排行榜</font><br/>
        <span class="s2">宋江</span><br/>
        <span class="s3">卢员外</span><br/>
        <span class="s4">吴用</span><br/>
        <span class="s3">豹子头</span><br/>
        <span class="s3">大刀关胜</span><br/>
        <a href="index.html">goto souhu大刀王五</a><br/>
        <a href="#">goto souhu大刀王五</a><br/>
        <a href="#">goto souhu大道往往无</a><br/>
    </body>

</html>

View Code

my.css

.s1 {
    font-size: 30px;
    color: blue;
}

.s2 {
    background-color: silver;
    font-style: italic;
    font-weight: bold;
    color: red;
}

.s3,
.s4 {
    background: lightgray;
    font-weight: bold;
}

.s4 {
    font-style: italic;
    text-decoration: underline;
}
/*使用html元素选择器*/
a:link{
    color: red;
    font-family: "华文新魏";
    text-decoration: none;
}
a:hover{
    color: green;
    font-size: 40px;
    font-family: "宋体";
    text-decoration: underline;
}
a:visited{
    color: gray;
}

View Code