学习JavaWeb的第五天（css和HTML的结合方式，css的选择器）

最新推荐文章于 2023-03-11 17:11:58 发布

l承z

最新推荐文章于 2023-03-11 17:11:58 发布

阅读量145

点赞数 3

文章标签： web

本文链接：https://blog.csdn.net/weixin_64311506/article/details/125811496

版权

CSS和HTML的结合方式

第一种结合方式：

在标签的style属性上设置“key=value value”，修改标签样式

例如：

<div style="border:1px solid yellow">标签1</div>

通过border来设置标签的边框像素，并且选择边框类型是线型的，设置边框的颜色是黄色。

边框的形式有（常用）：

none：默认值。无边框。不会受任何border-width值的影响。

hidden：隐藏边框。

dotted：在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线。

dashed：在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线线。否则为实线。

solid：实线边框。

double：双线边框。两条单线与其间隔的和等于指定的border-width值。

这种方式的缺点：

1.如果标签多了，样式多了，代码量会非常庞大，非常不方便。

2.可读性比较差。

3.css代码没有什么复用性。

第二种方法：

在head标签中，使用style标签来决定自己需要的css样式。

格式为：

xxx{

key：value value;

}

xxx表示标签的类型

style专门来定义css样式代码

style标签写在head里面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标签</title>
  <style type="text/css">
    div{
      border:1px solid #0048ff;
    }
    span{
      border:2px solid #2fff00;
    }
  </style>
</head>
<body>
<div>标签一</div>
<span>标签二</span>
</body>
</html>

这样就可以实现css标签的重复使用了，一定程度上降低了代码的数量和复杂度。

但是这种方法依然有缺点：

1.只能在同一页面内复用代码，不能在多个页面复用css代码。

2.维护起来不方便，实际项目有成千上万个页面，要一个一个修改太浪费时间。

第三种方法：

把css样式写成一个单独的css文件，再通过link标签引入即可复用

link标签专门用来引入css样式代码

再css文件中

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

在html文件中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标签</title>

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

</head>
<body>
<div >标签一</div>
<span>标签二</span>
</html>

同样可以达到相同的结果

CSS选择器

1.标签名选择器

格式为：

标签名{

属性：值；

}

标签名选择器可以决定哪些标签被动的使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标签</title>
<style type="text/css">
 div{
    color:blue;
    font-size:20px;
    border:2px solid yellow;
  }
  span{
    color:red;
    font-size:10px;
    border:2px solid green;
  }
</style>
</head>
<body>
<div >标签一</div>
<span>标签二</span>
</html>

2.id选择器

id选择器的格式为：

#id属性值{

属性：值；

}

id选择器，可以让我们通过id属性选择性的去使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标签</title>
<style type="text/css">
  #id01{
    color:blue;
    font-size:20px;
    border:2px solid yellow;
  }
  #id02{
    color:red;
    font-size:10px;
    border:2px solid green;
  }
</style>
</head>
<body>
<div id="id01">标签一</div>
<div id="id02">标签二</div>

</body>
</html>

3.class选择器（类选择器）

class类型选择器的格式为：

.class属性值{

属性：值；

}

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

4.组合选择器

格式：

选择器1，选择器2，......选择器n{

属性：值；

}

组合选择器可以让多个选择器共用一个代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标签</title>
<style type="text/css">
  .class01,#id01{
    font-size:30px;
    color:blue;
  }
</style>


</head>
<body>
<div id="id01">标签一</div>
<span class="class01">标签二</span>
</html>

可以一起使用。