CSS学习归纳1-优快云博客

本文链接：https://blog.youkuaiyun.com/SPIRITE_SYF/article/details/137225553

本文介绍了CSS的基础知识，包括HTML与CSS的关系，文本美化（如字体、颜色、对齐等），选择器的使用（标签选择器、类选择器、ID选择器和通配符选择器），以及样式表的不同分类（内部样式表、行内样式表和外部样式表）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习CSS之前，应该完成了HTML的学习。HTML是一个网页的骨架，但是只有骨架是不够好看的，现在希望通过某一个技术去美化我们的网页，这里就需要学习CSS。

HTML的内容都是写在<body></body>中，而CSS的内容都是写在<head></head>下的<style></style>标签下的。

第一部分的学习主要是是对文本，文字的美化工作，包括大小，字体，颜色，对齐，字体样式，如何缩进，字体粗度，行高等进行学习。

一、选择器

如何理解选择器？因为HTML是一个标签语言，我们要对标签进行一系列属性的设计，那么需要有一个选择器去辅助我们选择我们想要改变的标签。

1.1标签选择器

何为标签选择器？顾名思义，直接选择某一类标签的选择器。正是因为选择了某一类标签，我们没有具体的细分，所以对一个网页中所有的这类标签的属性都做了修改。适用于处理大批量，同类型。

<style>
    /* 使得所有同类型的标签都变成同一个样子
    适用于处理大批量，同类型 */
    /* 要改就全改 */
    h1 {
      color: red;
    }

    div {
      color: palevioletred;
    }
  </style>

1.2类选择器

这个比标签选择器灵活太多了，这个的思想是创建一个我们想要的某个属性供所有人去选择使用，只有使用了的标签，才会发生改变。而且一个标签可以同时选用多个属性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类选择器</title>
  <style>
    /* 谁引用，谁变化 */
    .pink {
      color: pink;
    }

    .font35 {
      font-size: 35px;
    }
  </style>
</head>

<body>
  <!-- 一个标签可以调用多个类实现多种属性 -->
  <div class="pink font35">xxxxxxxxx</div>
</body>

</html>

1.3ID选择器

这个相较于类选择器并没有那么灵活。虽然说，我们设计的这个属性可供选择，但是只能有一个标签可以使用，一旦被使用，下一个标签就无法再使用了。

个人觉的，id选择器的设计初衷是只针对某一标签的属性设计，比如在写代码时，觉得此处的标签的属性想加以修改，但是不常用，所以就针对性的加一个id，使用一次即可。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ID选择器</title>
  <style>
    /* 指定某个ID的标签进行变化 */
    /* 只能一个标签使用,一旦使用,其他人不可使用 */
    #LINE1 {
      font-size: 35PX;
      color: cyan;
    }
  </style>
</head>

<body>
  <div id="LINE1">我是第一行,用来测试!</div>
</body>

</html>

1.4通配符选择器

顾名思义通用配置，即改变所有的标签属性

  <style>
    /* 顾名思义,全部配置,使用* */
    /* 这里将所有的内容改成100px */
    * {
      font: 100px;
    }
  </style>

二、文字设置系列

讲完了选择器，现在我们知道如何选择某一个标签。但是如何对属性进行修改，我们就需要学习具体的有关文字的属性。

2.1字体大小

/* 字体的大小 */
font-size: 50px;

2.2字体粗细

/* 字体的粗细 */
font-weight: bold;
/* 还可以使用，用数字，没有px
font-weight: 700; */

2.3字体样式

/* 文字的样式 */
/* 这里是斜体 */
font-style: italic;

2.4复合设计

2.1-2.3每一句控制一个属性，这样会占用多行，所以想用一个复合的方式去书写，集中写在一行中。

div {
      /* 必须按照这个顺序 */
      /* size 和 family 必须都有 */
      /* font: font-style font-weight font-size/line-height font-family; */
      font: italic 700 16px/2px "Microsoft yahei";
    }

三、文本属性

文本主要考虑的就不是文字的大小样式问题了，文本考虑的更多是缩进多少个，行间距是多少，如何对齐，如何装饰。而且所有的属性基本都是以text开头，和文字可以区分开

3.1文本对齐

/* 文字水平对齐 center left right*/
text-align: center;

3.2行间距

/* 设置行间距 line-height: px；
      行间距由：上间距，文本高度，下间距构成 */
      line-height: 26px;

3.3缩进设置

/* 段落的首行缩进 em相对于当前文字大小*/
/* 这样可以保持相对个数 */
text-indent: 2em;

3.4文本装饰

/* 装饰文本 text-decoration，下划线 删除线 上划线*/
      text-decoration: underline;

还有一个实用的，对链接文字取消下划线。

    a {
      /* 取消超链接自带的下划线 */
      text-decoration: none;
    }

四、样式表的分类

4.1内部样式表

刚才复习的都算是内部样式表，因为在同一个.html文件下，写在head中的style下。一定程度上做到了内容和样式的分离，使得结构更清晰。但

4.2行内样式表

直接对标签进行属性设置。

<body>
  <h1>对某一个做简单修改</h1>
  <p style="font-size: 25px; color: aquamarine;">1111111111111111</p>
  <p>2222222222222222</p>
  <p>3333333333333333</p>
</body>

4.3外部样式表

外部样式就是将head 下的style中的属性，放在.css后缀的文件中。然后在.html文件下使用<link rel="stylesheet" herf="xxx.css">的形式引用。

举例一个 .css文件

/* CSS文件里直接写style里的内容 */
p {
  font-size: 30px;
  font-weight: 700;
  color: blueviolet;
}

引用css的html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部样式表</title>
  <!-- 使用link引用CSS -->
  <link rel="stylesheet" href="样式文件.css">
</head>

<body>
  <p>外部样式表是使用最多的，单独将样式写道CSS文件中，然后将CSS文件引入</p>
</body>

</html>