css 知识点总结

xywzw_loveforever

已于 2022-02-28 13:51:10 修改

阅读量139

点赞数

文章标签： css

于 2022-02-28 12:47:56 首次发布

本文链接：https://blog.csdn.net/xy_loveforever/article/details/123179478

版权

css (casading style sheet) 层叠样式表，核心在于：“层叠” 二字。

html是一个网页的“骨架”(结构)，想要让这个“骨架”变得美观，就要给html添加相应的css样式。

在html中，引入css的三大方法：

1. 行内写法
2. style标签中编写css （三种命名方法：id class 标签）
3. link标签引入法（如果link中的命名和style标签中的有冲突，以style标签的为准）

权重：

行内 > id > class > 标签

<div style="background:blue"></div>

1. id 表示法：（不同标签不能有重名，这种方法用得较少）

<head>
  <style>
    #box {
       background: red;
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>

2. class 表示法：（不同标签可以重复使用同一个，这种方法用得最多）

<head>
  <style>
    .box {
       background: red;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

3. 标签表示法：

<head>
  <style>
    div {
       background: red;
    }
  </style>
</head>
<body>
  <div></div>
</body>

在 head 标签中加入link标签，引入test.css文件：

test.css:

.box {
  width: 100px;
  height: 100px;
  background: orange;
}

test.html:

<head>
  <title>test</title>
  <link rel="stylesheet" href="./test.css">
</head>
<body>
  <div class="box"></div>
</body>

关注