CSS基础语法

CSS（cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言。CSS3是CSS的最新版本。

一、使用方式

1. 内联样式（Inline Style）：将样式规则直接写在 HTML 标签的 style 属性中。这种方式虽然使用方便，但是不易维护，也不利于样式的复用，因此通常不建议使用。

例如：

<p style="color: red; font-size: 16px;">这是一段红色的文本。</p>
2. 内部样式表（Internal Style Sheet）：将样式规则写在 HTML 文档头部的 style 标签中，可以用于整个页面或单个文档。

例如：

<html>
  <head>
    <style>
      p {
        color: red;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <p>这是一段红色的文本。</p>
  </body>
</html>

例如：

在一个名为 styles.css 的文件中：

p {
  color: red;
  font-size: 16px;
}

在 HTML 中引入样式表：

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>这是一段红色的文本。</p>
  </body>
</html>

使用外部样式表的方式是最常见的，它可以将页面的样式与内容分离开来，使得页面更易于维护和修改。

4. 导入式：在CSS样式表中引入外部CSS样式表的方法。使用CSS import导入式，可以将一个外部的CSS文件嵌入到另一个CSS文件中。

要使用CSS import导入式，请按照以下步骤操作：

  1. 在CSS样式表中使用@import关键字，如下所示：

    @import url("style.css");

  2. 在@import语句中指定外部CSS文件的URL，如上例中的style.css文件。

注意事项：

  • @import语句必须放在CSS样式表的开头。
  • 不建议在HTML文档中使用@import语句，因为它可能会导致页面加载速度变慢。
  • 如果使用多个@import语句，它们之间的顺序很重要，因为它们会按照顺序依次加载。

二、选择器

CSS选择器用于选取HTML文档中的元素，并为其应用样式。CSS选择器可以根据元素的标签名、class、id、属性等多种方式进行选择。

  1. 标签选择器（Tag Selector）：

    p {
/* 样式 */
}

    根据HTML元素的标签名称来选择元素。例如，p选择所有段落元素。

  2. 类选择器（Class Selector）：

    .my-class {
/* 样式 */
}

    根据HTML元素的类名来选择元素。类选择器以.为前缀，例如，.my-class选择所有具有my-class类名的元素。

  3. ID选择器（ID Selector）：

    #my-id {
/* 样式 */
}

    根据HTML元素的ID属性来选择元素。ID选择器以#为前缀，例如，#my-id选择具有my-id ID属性的元素。

  4. 属性选择器（Attribute Selector）：

    input[type="text"] {
/* 样式 */
}

    根据HTML元素的属性值来选择元素。属性选择器使用方括号[]来选择具有指定属性值的元素。

  5. 后代选择器（Descendant Selector）：

    div p {
/* 样式 */
}

    选择元素的后代元素。后代选择器使用空格分隔两个选择器，例如，div p选择所有div元素内部的所有段落元素。

  6. 子元素选择器（Child Selector）：

    ul > li {
/* 样式 */
}

    选择元素的直接子元素。子元素选择器使用大于号>分隔两个选择器，例如，ul > li选择所有直接作为ul元素子元素的li元素。

  7. 相邻兄弟选择器（Adjacent Sibling Selector）：

    h1 + p {
/* 样式 */
}

    选择元素后面的相邻兄弟元素。相邻兄弟选择器使用加号+分隔两个选择器，例如，h1 + p选择紧跟在h1元素后面的第一个p元素。

  8. 通用选择器（Universal Selector）：

    '*' {
/* 样式 */
}

    选择所有元素。通用选择器使用星号*表示，例如，*选择文档中的所有元素。

  9. 伪类选择器（Pseudo-class Selector）：

    a:hover {
/* 样式 */
}

    根据元素的状态或位置来选择元素。伪类选择器以冒号:为前缀，例如，a:hover选择所有鼠标悬停在a元素上的状态。

    伪类：用于为元素在不同状态下设置样式。伪类可以根据用户与元素的交互行为、元素的位置和其他条件来选择元素，以实现更丰富的样式效果。

    常见的伪类包括：

    • :hover：鼠标悬停在元素上时应用的样式。
    • :active：鼠标点击元素时应用的样式。
    • :focus：元素获得焦点时应用的样式。
    • :visited：已访问过的链接应用的样式。
    • :first-child：选择作为其父元素第一个子元素的元素。
    • :last-child：选择作为其父元素最后一个子元素的元素。
    • :nth-child(n)：选择作为其父元素的第n个子元素的元素。

  10. 伪元素选择器（Pseudo-Element Selector）：

    .my-class::before {
content: "前缀 ";
font-weight: bold;
color: blue;
}

    伪元素：是指在文档中不存在的虚拟元素，可以用来为HTML元素添加特殊的样式和效果。伪元素是由双冒号::或单冒号:标识的，与伪类（Pseudo-Class）区分开来。

    常见的伪元素包括：

    • ::before：在元素内容之前添加内容。
    • ::after：在元素内容之后添加内容。
    • ::first-letter：选中元素的第一个字母。
    • ::first-line：选中元素的第一行。
    • ::selection：选中元素中被用户选中的部分。

三、选择器的权重

选择器权重是用来决定当多个CSS规则应用于同一个元素时，哪个规则将具有优先权的值。选择器权重是根据选择器的组合方式计算的，通常表示为四个数字，分别对应于行内样式、ID选择器、类选择器和元素选择器的数量。

以下是选择器权重的具体计算方法：

  • 行内样式（Inline styles）：1000
  • ID选择器（ID selectors）：100
  • 类选择器、属性选择器和伪类选择器（Class selectors, attribute selectors, and pseudo-class selectors）：10
  • 元素选择器和伪元素选择器（Element selectors and pseudo-element selectors）：1

因此，选择器权重越高，就越具有优先权。当多个CSS规则应用于同一个元素时，CSS将按照选择器权重从高到低的顺序应用这些规则，具有相同权重的规则则按照后者覆盖前者的原则进行。

例如，以下CSS规则应用于同一个元素：

<style>
  #my-element {
    color: red;
  }
  .my-class {
    color: blue;
  }
  p {
    color: green;
  }
</style>

<p id="my-element" class="my-class">Hello World!</p>

由于选择器权重的计算，此时元素的文本颜色将为红色，因为ID选择器的权重是100，而类选择器的权重是10。虽然元素选择器也匹配了该元素，但其权重只有1，因此其样式被ID选择器和类选择器的样式所覆盖。

四、CSS继承性

  1. 文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效
  2. 只有特定的CSS属性才具有继承性。例如，字体、颜色、行高等属性可以被继承，而背景图像、边框等属性则不能被继承。
  3. 继承性遵循“就近原则”。如果一个元素的某个属性值在多个祖先元素中都有定义，那么该元素将继承距离最近的祖先元素中的属性值。

五、常用基础样式（文本段落）

  1. 字体样式（font-style）：可以设置为normal（默认）、italic（斜体）。

    p {
font-style: italic;
}

  2. 字体粗细（font-weight）：可以设置为normal（默认400）、bold（粗体700）、lighter（细体）和100-900等值。

    h1 {
font-weight: bold;
}

  3. 字体大小（font-size）：可以设置为像素、em或百分比等单位。

    p {
font-size: 16px;
}

  4. 字体系列（font-family）：可以设置为一系列字体，以备选字体为例。

    body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

    在网页中还可使用自定义字体，具体方法如下：

    /* 1、使用@font-face规则将字体映入网页 */
@font-face {
font-family: 'CustomFont';
src: url('path/custom-font.ttf').format('truetype')
}
/* 2、使用 */
body {
font-family: 'CustomFont', sans-serif;
}

  5. 文本颜色（color）：可以设置为颜色名称、十六进制代码或RGB值。

    p {
color: #333;
}

  6. 文本对齐方式（text-align）：可以设置为left（左对齐）、right（右对齐）、center（居中对齐）和justify（两端对齐）等值。

    h1 {
text-align: center;
}

  7. 行高（line-height）：可以设置为数字或百分比，用于调整行与行之间的间距。

    p {
line-height: 1.5;
}

  8. 文字间距（letter-spacing）：设置文字的间距

    p {
letter-spacingt: 10px;
}

  9. 文本装饰（text-decoration）：可以设置为none（默认）、underline（下划线）、line-through（中划线）、和overline（上划线）等值。

    a {
text-decoration: line-through;
}

  10. 首行缩进（text-indent）：可以设置为像素或em等单位，用于控制第一行的缩进。

    p {
text-indent: 2em;
}
Copyright © 高笑石 (2021 - present) all right reserved，powered by Gitbook文件修订时间： 2023-03-16 21:50:56

results matching ""

    No results matching ""