CSS 一-CSDN博客

本文链接：https://blog.csdn.net/qq_58631644/article/details/129804560

CSS 入门

1．外部样式表

所谓外部样式表，就是将样式表保存成一个独立的 CSS 样式表文件，当编写的 HTML 文档要使用这个 CSS 文件时，可使用 <link> 标签将该样式表引入到 HTML 文档中。

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

2．内部样式表

<head>
  <style type="text/css">
    body {
      font-family: Verdana, sans-serif;
    }
    p {
      margin-left: 20px;
    }
  </style>
</head>

3．内联样式

<p style="margin-left: 20px">我在使用内联样式设置段落的左边距为20px。</p>

4．优先级

总结：样式选择优先级：外部样式表 > 内部样式表 > 内联样式。

在 CSS 中，子元素会从父元素继承属性。如果已经将 body 元素里的字体都设置为宋体，那么 body 元素下的其他子元素（例如 p、ul、ol、li、td 等）将继承此属性，也将字体设置为宋体。但是在这些子元素中，如果希望表格中单元格的字体为隶书，则可以单独给 td 元素设置字体，具体代码如下：

body {
  font-family: 宋体;
}
td {
  font-family: 隶书;
}

多个标签相同样式，中间用逗号分开，具体代码如下：

h1,
h2,
h3,
h4,
h5,
h6 {
  color: red;
}

选择器

id 选择器 > 类选择器 > 标签选择器

从样式表的插入方式区分优先级，其先后顺序为：内联样式 > 内部样式表 > 外部样式表。

其实根本不需要去死记硬背这些优先级，只要把握“就近原则”或“适用范围最小原则”即可判断出优先级的先后顺序。

1. 标签选择器

<style type="text/css">
  body {
    background-color: #000000;
    color: yellow;
  }
  h1 {
    text-align: center;
  }
</style>

2. 类选择器

<head>
  <style type="text/css">
    strong {
      font-style: italic;
    }
    .center {
      color: red;
    }
  </style>
</head>
<body>
  <h3>图书分类</h3>
  <strong>无序列表外的strong元素</strong>
  <ul>
    <li><strong>小说</strong></li>
    <li><strong>文艺</strong></li>
    <li><strong>励志/成功</strong></li>
    <li class="center"><strong>童书</strong></li>
    <li class="center">生活</li>
    …
  </ul>
</body>

3. id选择器

<head>
  <style type="text/css">
    strong {
      font-style: italic;
    }
    .center {
      color: red;
    }
    #wenyi {
      font-family: 隶书;
      font-size: 12px;
      background: #dddddd;
    }
  </style>
</head>
<body>
  <h3>图书分类</h3>
  <strong>无序列表外的strong元素</strong>
  <ul>
    <li><strong>小说</strong></li>
    <li id="wenyi">文艺</li>
    <li><strong>励志/成功</strong></li>
    <li class="center"><strong>童书</strong></li>
    <li class="center">生活</li>
  </ul>
</body>

4. 派生选择器

派生选择器可以说是标签选择器的一种拓展，它不仅依赖标签本身，还需要根据这些标签元素的上下文关系来定义样式。

例如，希望无序列表中 <strong> 标签里的内容以斜体形式展现，而其他 <strong> 标签里的内容还是正常非斜体字显示，就可以定义一个派生选择器

<head>
  <style type="text/css">
    ul strong {
      font-style: italic;
    }
  </style>
</head>
<body>
  <h3>图书分类</h3>
  <strong>无序列表外的strong元素</strong>
  <ul>
    <li><strong>小说</strong></li>
    <li><strong>文艺</strong></li>
    <li><strong>励志/成功</strong></li>
    <li><strong>童书</strong></li>
    <li>生活</li>
    …
  </ul>
</body>

CSS 常用样式

1.background-attachment 属性

通过对 <body> 标签设置 bgproperties 属性，实现了页面内容较长，当拖动浏览器滚动条时，背景不动，只滚动内容的效果，具体代码如下：

<body background="img_URL" bgproperties="fixed"></body>

也可以在 CSS 中通过设置 background-attachment 属性达到这样的目的，具体代码如下：

body {
  background-image: url(https://labfile.oss.aliyuncs.com/courses/2841/bg.jpg);
  background-attachment: fixed;
}

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随页面内容滚动。

2.background 属性

通过 background 属性，允许在一个声明中设置所有的背景属性。下表中列出的属性都可以设置其中，中间用空格隔开，例如：

background: blue url(https://labfile.oss.aliyuncs.com/courses/2841/bg.jpg)
  no-repeat fixed top;