CSS 第一天学习笔记-CSDN博客

本文链接：https://blog.csdn.net/2301_79940491/article/details/147169077

一、CSS 定义

CSS，即层叠样式表（Cascading Style Sheets），是专门用于描述 HTML 文档呈现效果、美化网页内容的样式表语言。在 HTML 文件中，我们通常在title标签下方，使用<style>双标签来书写 CSS 代码。例如：

<title>CSS 初体验</title>
<style>
    p {
        color: red;
    }
</style>
<p>体验 CSS</p>

这里，p是选择器，表示选中所有的<p>标签；color是属性名，red是属性值，它们构成了一个键值对，用于设置<p>标签内文字的颜色为红色。

二、CSS 引入方式

1.内部样式表：

将 CSS 代码直接写在<style>标签里面，这种方式在学习阶段使用较多，方便对单个页面进行样式设置。

2.外部样式表：

把 CSS 代码写在单独的.css文件中，然后在 HTML 文件里通过<link>标签引入。这是实际开发中最常用的方式，它能使样式和 HTML 结构分离，便于维护和管理多个页面的样式。例如：

<link rel="stylesheet" href="./my.css">

my.css

/* 这个文件放 CSS 代码 */
/* 选择器 { CSS 属性 } */
p {
  color: red;
}

test.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 引入方式</title>
    <!-- link 引入外部样式表； rel：关系，样式表 -->
    <link rel="stylesheet" href="./my.css">
</head>

<body>
    <p>这是 p 标签</p>
    <!-- 行内，style=" CSS" -->
    <div style="color: green; font-size: 30px;">这是 div 标签</div>
</body>

</html>

3.行内样式：

将 CSS 代码写在 HTML 标签的style属性值里，一般配合 JavaScript 使用，用于临时改变某个标签的样式。比如：

<div style="color: red; font-size:20px;">这是 div 标签</div>

三、基础选择器

1.标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如：p, h1, div, a, img......

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签选择器</title>
  <style>
    /* 特点：选中同名标签设置相同的样式，无法差异化同名标签的样式 */
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是 p 标签</p>
  <p>1111</p>
  <p>2222</p>
</body>
</html>

注意：标签选择器无法差异化同名标签的显示效果。

2.类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：
• 定义类选择器 → .类名
• 使用类选择器 → 标签添加 class="类名“

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类选择器</title>
  <style>
    /* 定义 */
    .red {
      color: red;
    }

    .size {
      font-size: 50px;
    }
  </style>
</head>
<body>
  <!-- 使用 -->
  <!-- 一个类选择器可以给多个标签使用 -->
  <p class="red">111111</p>
  <p>222222</p>
  <!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
  <div class="red size">div 标签</div>
</body>
</html>

注意：

• 类名自定义，不要用纯数字或中文，尽量用英文命名
• 一个类选择器可以供多个标签使用
• 一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd

3.id选择器

作用：查找标签，差异化设置标签的显示效果。
场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

• 定义 id 选择器 → #id名
• 使用 id 选择器 → 标签添加 id= "id名"

规则：
• 同一个 id 选择器在一个页面只能使用一次

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>id选择器</title>
  <style>
    /* 定义 */
    #red {
      color: red;
    }
  </style>
</head>

<body>
  <!-- 使用 -->
  <div id="red">div 标签</div>
</body>

</html>

4.通配符选择器

作用：查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

经验：
• 通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通配符选择器</title>
  <style>
    * {
      color: red;
    }
  </style>
</head>
<body>
  <p>p 标签</p>
  <div>div 标签</div>
  <h1>h1 标签</h1>
  <ul>
    <li>li</li>
    <li>li</li>
    <li>li</li>
  </ul>
  <strong>strong</strong>
</body>
</html>

四、文字控制属性

1.字体大小

属性名：font-size

属性值：文字尺寸，PC 端网页最常用的单位 px

经验：谷歌浏览器默认字号是16px

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体大小</title>
  <style>
    /* 经验：谷歌浏览器文字有默认大小 16px */
    p {
      /* font-size 属性必须有单位，否则属性不生效 */
      font-size: 30px;
    }
  </style>
</head>

<body>
  <p>测试字体大小</p>
  <div>测试默认字体大小</div>
</body>

</html>

2.字体粗细

属性名：font-weight

属性值

• 数字（开发使用）

• 关键字

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体粗细</title>
  <style>
    h3 {
      font-weight: 400;
    }

    div {
      font-weight: 700;
    }
  </style>
</head>

<body>
  <h3>h3 标题</h3>
  <div>div 标签</div>
</body>

</html>

3.字体样式（是否倾斜）

作用：清除文字默认的倾斜效果

属性名：font-style

属性值

• 正常（不倾斜）：normal
• 倾斜：italic

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体倾斜</title>
  <style>
    em {
      font-style: normal;
    }

    div {
      font-style: italic;
    }
  </style>
</head>

<body>
  <em>em 标签</em>
  <div>div 标签</div>
</body>

</html>

4.行高

作用:设置多行文本的间距

属性名:line-height

属性值

• 数字 + px

• 数字(当前标签font-size属性值的倍数)

记住这个：行高值是数字，表示是当前标签字体大小的倍数

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行高</title>
  <style>
    p {
      font-size: 20px;
      /* line-height: 30px; */
      /* 行高值是数字，表示是当前标签字体大小的倍数 */
      line-height: 9;
    }
  </style>
</head>

<body>
  <p>
    今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南旱北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。
  </p>
</body>

</html>

⑴.行高-垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直居中</title>
  <style>
    div {
      height: 100px;
      background-color: skyblue;

      /* 注意：只能是单行文字垂直居中 */
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div>文字</div>
</body>
</html>

5. `font - family`（字体族）

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体族</title>
  <style>
    div {
      font-family: 楷体;
    }
  </style>
</head>

<body>
  <div>测试文字</div>
</body>

</html>

6. `font`（字体复合属性）

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            font: 16px/2 "微软雅黑";
            /* 复合属性：字号 16px，行高 2 倍，字体微软雅黑 */
        }
    </style>
</head>

<body>
    <p>复合属性</p>
</body>

</html>

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>font 属性</title>
  <style>
    /* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */
    div {
      /* font: italic 700 30px/2 楷体; */

      /* font 属性必须写字号和字体，否则 属性不生效 */
      font: 30px 楷体;
      /* font: italic 700 30px/2; */
    }
  </style>
</head>

<body>
  <div>测试 font 属性</div>
</body>

</html>

7.文本缩进

属性名：text-indent

属性值：

• 数字 + px

• 数字 + em（推荐：1em = 当前标签的字号大小）

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            text-indent: 2em;
            /* 设置文本缩进 2 个字符宽度 */
        }
    </style>
</head>

<body>
    <p>玉兰颇受明清时期文人的欢迎，尤其在明代万历年间，玉兰被大量种植。</p>
</body>

</html>

8.文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

属性值

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本对齐方式</title>
  <style>
    h1 {
      /* 本质：居中的是文字内容，不是标签 */
      /* text-align: left; */
      text-align: center;
      /* text-align: right; */
    }
  </style>
</head>

<body>
  <h1>标题文字</h1>
</body>

</html>

图片居中对齐方法是添加一个父标签

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片对齐方式</title>
  <style>
    div {
      text-align: center;
    }
  </style>
</head>

<body>
  <div>
    <img src="./images/1.jpg" alt="">
  </div>
</body>

</html>

9.文本修饰线

属性名： text-decoration
属性值

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本修饰线</title>
  <style>
    a {
      /* 无，去掉修饰线 */
      text-decoration: none;
    }

    div {
      /* 下划线 */
      text-decoration: underline;
    }

    p {
      text-decoration: line-through;
    }

    span {
      text-decoration: overline;
    }
  </style>
</head>

<body>
  <a href="#">a 标签，去掉下划线</a>
  <div>div 标签，添加下划线</div>
  <p>p 标签，添加删除线</p>
  <span>span 标签，添加顶划线</span>
</body>

</html>