HTML设置<span>的css标签出现问题

HTML设置的css标签出现问题

<html>
    <head>
        <title>五颜六色title>
        <link rel="stylesheet" type="text/css" href="/css/task05.css">
    head>
    <body>
        <span class="c1">五span>
        <span class="c2">颜span>
        <span class="c3">六span>
        <span class="c4">色span>
    body>
html>

.c1{
    font-family: 黑体;
    font-size: 50px;
    color: #369;
    padding-bottom: 4px;
    border-bottom: 2px solid black;
}

不知道为啥没有生效

样式要放在style中呀

<style>
.c1{
    font-family: 黑体;
    font-size: 50px;
    color: #369;
    padding-bottom: 4px;
    border-bottom: 2px solid black;
}
 </style>

这个应该是引入css时路径写错了

路径有问题吧


  <link rel="stylesheet" type="text/css" href="../css/task05.css">


<html>

<head>
    <title>五颜六色</title>
    <link rel="stylesheet" type="text/css" href="/css/task05.css">
    <style>
        .c1 {
            font-family: 黑体;
            font-size: 50px;
            color: #369;
            padding-bottom: 4px;
            border-bottom: 2px solid black;
        }
    </style>
</head>

<body>
    <span class="c1">五</span>
    <span class="c2">颜</span>
    <span class="c3">六</span>
    <span class="c4">色</span>
</body>

</html>

直接用是可以的1. 你的不生效是 link 的路径问题就可以截个你的目录结构的图

可以看下css参考手册中的 css Properties column-span

你的link标签引入的路径，如果css文件跟html文件平级路径加个./不同文件夹看情况加

是路径没有引用对，如果是同级的话直接引用css文件，如果css文件的路径低于html的路径，可以用../ （../表示返回上级目录）具体情况根据你的文件目录来看，不清楚的话你可以多尝试不同的路径，方便的话把你的项目的目录结构发出来，给你看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五颜六色</title>
    <link type="text/css"  rel="stylesheet" href="task05.css">

</head>
<body>
<span class="c1">五</span>
<span class="c2">颜</span>
<span class="c3">六</span>
<span class="c4">色</span>
</body>
</html>

.c1{
    font-size: 50px;
    color: #369;
    padding-bottom: 4px;
    border-bottom: 2px solid black;

}
.c2{
    font-size: 50px;
   color: red;
    padding-bottom: 4px;
    border-bottom: 2px solid black;

}
.c3{
    font-size: 50px;
   color: orange;
    padding-bottom: 4px;
    border-bottom: 2px solid black;
}
.c4{
    font-size: 50px;
    color: green;
    padding-bottom: 4px;
    border-bottom: 2px solid black;
}

这是我的目录，及应用的情况

这是运行之后的结果

这个不对吧，

F12。去看下console有没有报错就知道了