Java web的CSS

最新推荐文章于 2024-05-19 10:58:35 发布

自由梦想程序员

最新推荐文章于 2024-05-19 10:58:35 发布

阅读量887

点赞数 1

分类专栏： # Javaweb 文章标签： maven java intellij-idea

本文链接：https://blog.csdn.net/qq_56299755/article/details/123171195

版权

Javaweb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

CSS

第一种方式：
在这里插入图片描述
创建名为css的html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求1：分别定义两个div、span标签,分别修改每个div标签的样式为:边框一个像素,实践,红色-->
    <div style="border: 1px solid red;width:100px;height:100px;background-color: aqua;text-align: center">div标签1</div>
    <div style="border: 1px solid blue;">div标签2</div>
    <span style="border: 1px solid red;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>
</html>

PS：这种方式缺点：
1》如果标签多了，样式多了，代码量就很大
2》可读性差
3》CSS代码无复用性可言
第二种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!--需求1：分别定义两个div、span标签,分别修改每个div标签的样式为:边框一个像素,实践,红色-->
    <div >div标签1</div>
    <div >div标签2</div>
    <span >span标签1</span>
    <span >span标签1</span>
</body>
</html>

PS：缺点：
1.只能在同一页面内复用代码，不能在多个页面复用css代码
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中改，工作量大了
第三种：
把css样式写成单独的一个css文件，再通过link标签引入即可服用
创建css文件

div{
    border: 1px solid red;
                      }
span{
    border: 1px solid red;
}

在创建heml文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引用css样式代码-->
    <link rel="stylesheet" type="text/css" href="css3.css"/>
</head>
<body>
    <!--需求1：分别定义两个div、span标签,分别修改每个div标签的样式为:边框一个像素,实践,红色-->
    <div >div标签1</div>
    <div >div标签2</div>
    <span >span标签1</span>
    <span >span标签1</span>
</body>
</html>

二、标签名选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    div{
      border: 1px solid yellow;
      color: blue;
      font-size: 30px;
    }
    span{
      border: 5px dashed yellow;
      color: blue;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <!--需求2：所有div标签上修改字体颜色为蓝色，字体大小为30个像素，边框为1个黄色实线
      span标签字体颜色为黄色，字体大小为30个像素，边框为5像素蓝色虚线-->
  <div >div标签1</div>
  <div >div标签2</div>
  <span >span标签1</span>
  <span >span标签1</span>
</body>
</html>

三、id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #id1001 {
        color: blue;
        }
        #id1002{
            color: pink;
        }
    </style>
</head>
<body>
  <!--分别定义两个div标签-->
    <!--需求：第一个div标签id定义为id1001，然后根据id修改字体颜色为蓝色-->
    <!--需求：第二个div标签id定义为id1002，然后根据id修改字体颜色为粉色-->
    <div id="id1001">id标签1</div>
    <div id="id1002">id标签2</div>
</body>
</html>

四、class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border:1px solid yellow;
        }
        .class02{
            color: green;
            font-size: 26px;
            border: 1px solid red;
        }
        
    </style>
</head>
<body>
    <div class="class01">div标签1</div>
    <div  class="class02">div标签2</div>
    <span class="class01">span标签1</span>
</body>
</html>

自由梦想程序员

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Java web的CSS

CSS第一种方式：创建名为css的html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>  &lt
复制链接

扫一扫

专栏目录