Java——html入门（2）css样式

最新推荐文章于 2024-08-06 13:44:56 发布

旺仔碎碎

最新推荐文章于 2024-08-06 13:44:56 发布

阅读量126

点赞数

分类专栏： Java基础文章标签： css html web

本文链接：https://blog.csdn.net/qq_45020745/article/details/107593237

版权

Java基础专栏收录该内容

23 篇文章 0 订阅

订阅专栏

方法一、直接设置（不推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    给标签设置css样式
    <style type="text/css">
        /* 标签选择器*/
        div{
            border:1px solid ;
        }
        span{
            border:1px solid ;
        }
    </style>

</head>
<body>
<!-- 在标签的style属性上设计-->
    <div >
        aeefasfsf
    </div>
    <span>
    daffasfa
    </span>

<p id="idname">edfsdfdfsf</p>
  <p id="id01">edfsdfdfsf</p>
    <p class="class1">qwwqwd</p>
</body>
</html>

方法二、引入css样式（推荐）

1.css


/*标签选择器*/
div{
    border:1px solid #ff0000;
}
span{
    border:1px solid #ff0000;
}
/*id 选择器*/
#idname {
    border:2px solid #075a5a;

}
/*class 选择器*/
.class1{
    border:3px solid #e5e565;

}
/*组合选恶气*/
#id01,.class1{
    border:3px solid #d0d042;

}

2 four.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
k rel="stylesheet" type="text/css" href="../css/1.css"/>
</head>
<body>
<!-- 在标签的style属性上设计-->
    <div >
        aeefasfsf
    </div>
    <span>
    daffasfa
    </span>

<p id="idname">edfsdfdfsf</p>
  <p id="id01">edfsdfdfsf</p>
    <p class="class1">qwwqwd</p>
</body>
</html>
``