HTML的修饰(CSS) -- 第三课

莘薪2024-10-05 2:09

文章目录

  • 前言
  • 一、CSS是什么？
  • 二、使用方式
    • [1. 基本语法](#1. 基本语法)
    • [2. 引入方式](#2. 引入方式)
    • [3. 选择器](#3. 选择器)
      • [1. 标签选择器](#1. 标签选择器)
      • 2.类选择器
      • [3. id选择器](#3. id选择器)
      • [4. 通配符选择器](#4. 通配符选择器)
    • [4. css属性](#4. css属性)
      • [1. 文本样式属性](#1. 文本样式属性)
      • [2. 文本外观属性](#2. 文本外观属性)
    • [5. 元素类型及其转换](#5. 元素类型及其转换)
      • [1. 元素的类型](#1. 元素的类型)
      • [2. 元素的转换](#2. 元素的转换)
    • 6.css高级特性
      • [1. 复合选择器](#1. 复合选择器)
      • [2. css层叠性和继承性](#2. css层叠性和继承性)
        • [1. 层叠性](#1. 层叠性)
        • [2. 继承性](#2. 继承性)
      • [3. css优先级](#3. css优先级)
  • 总结

前言

前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!

一、CSS是什么？

CSS（层叠样式表）是一种用于描述网页上元素的样式和布局 的语言。它与HTML结合使用，可以通过选择器来选择元素，并通过属性来定义元素的外观和行为。CSS可以控制文字的颜色、大小和字体样式，以及元素的大小、位置和背景等。通过使用CSS，可以使网页更具吸引力、易读性和可访问性。

二、使用方式

1. 基本语法

选择器 { 属性1: 值1; 属性2: 值2; ... }

2. 引入方式

1.行内式

行内式也称为内联样式，是通过标记的stvle属性来设置元素的样式。

html 复制代码 
<标记名style="属性1：属性值1；属性2：属性值2；属性3：属性值3；"> 内容 </标记名>

2.内嵌式

内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用**

html 复制代码 
<head>
<style type="text/css">
    选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>
css 复制代码 
div{
    color: red;
    font-size: 20px;
}

3. 链入式

链入式是将所有的样式放在一介或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。

html 复制代码 
<head>
    <link href="Css文件的路径"type="text/css"rel="stylesheet"/>
</head>

3. 选择器

1. 标签选择器

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 3.链入式 -- 开发的时候一般都会使用这种方式-->
    <link rel="stylesheet" href="./style.css">

    <!-- 2.内嵌式 -->
	<style>
        div{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 1.引入css样式 - 行内式,不推荐,写标签的地方建议只写标签 -->
    <div style="color: red;font-size: 20px;">123</div>
    <div>123</div>
    
</body>
</html>

上述案例中style标签中的div就属于标签选择器

2.类选择器

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 类选择器 -->
    <style>
        /*
            选择class属性值为box的标签 -- 可以有多个标签有相同的class属性值 
            每个class标签可以有多个名字
        */
        .box{
            color: red;
            font-size: 20px;
        }
        .box1{
            width: 100px;
            height: 100px;
            font-size: 50px;
            background-color: aliceblue;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box box1">123</div>
    <div class="box box2">123</div>
    <p class="box">这是p标签</p>
</body>
</html>

3. id选择器

id选择器使用"#"进行标识，后面紧跟id名，其基本语法格式如下：

html 复制代码 
/* id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；} */
<style>
	#box{
	    width: 100px;
	    height: 100px;
	    background-color:aquamarine;
	}
</style>

4. 通配符选择器

html 复制代码 
<style>
    *{
        color: red;
        font-size: 10px;
        /* 清除样式 */
        list-style: none;
    }
</style>

4. css属性

1. 文本样式属性

学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应的文本样式属性。

为了更方便的控制网页中各种各样的字体,css提供了一系列的字体样式属性

  1. font-size属性用于设置字号。

    • 常用单位

      1. 像素（px）：像素是最常用的单位，它表示屏幕上的一个物理像素。例如，font-size: 16px; 表示文本的大小为16像素。
      2. 百分比（%）：百分比单位相对于父元素的尺寸来计算。例如，font-size: 120%; 表示文本的大小为父元素字体大小的120%。
      3. em（em）：em单位相对于当前元素的字体大小来计算。例如，font-size: 2em; 表示文本的大小为当前元素字体大小的两倍。
      4. rem（rem）：rem单位相对于根元素（通常是元素）的字体大小来计算。例如，font-size: 1.5rem; 表示文本的大小为根元素字体大小的1.5倍。
      5. vw（视口宽度单位）：vw单位是相对于视口宽度的百分比单位。例如，font-size: 5vw; 表示文本的大小为视口宽度的5%。
      6. vh（视口高度单位）：vh单位是相对于视口高度的百分比单位。例如，font-size: 10vh; 表示文本的大小为视口高度的10%。
      7. rem和em的区别：rem单位相对于根元素的字体大小计算，而em单位相对于当前元素的字体大小计算。rem单位可以更好地控制整个页面的大小，而em单位相对于父元素的尺寸来计算，可以用于更细粒度地控制元素的大小。

  2. font-family属性用于设置字体。

    • 常用字体
      1. Arial：这是一种无衬线字体，广泛用于Web设计中。
      2. Helvetica：也是一种无衬线字体，非常相似于Arial。
      3. Times New Roman：这是一种衬线字体，很常见于印刷和出版物中
      4. Georgia：也是一种衬线字体，适合用于阅读大段文字。
      5. Verdana：这是一种宽松的无衬线字体，适合在小尺寸和低分辨率屏幕上使用。
      6. Tahoma：这也是一种无衬线字体，比较紧凑，适合用于小尺寸和高分辨率屏幕。

  3. font-weight属性用于定义字体的粗细。

    • 常用属性
      1. normal：默认值，表示使用正常的字体粗细。
      2. bold：表示使用粗体字体。
      3. bolder：更加粗体的字体，相对于父元素的字体粗细而言。
      4. lighter：更加细的字体，相对于父元素的字体粗细而言。
      5. 数字值（100、200、...、900）：表示使用特定的字体粗细，数字越大表示字体越粗。常用的数字值有100（thin）、400（normal）、700（bold）。
      6. initial：表示使用默认的字体粗细。
      7. inherit：表示继承父元素的字体粗细。

  4. font-variant属性用于设置变体（字体变化）。

    • 属性值

      1. normal：默认值，不改变字体的大小写形式。
      2. small-caps：将所有小写字母转换为小型大写字母，同时保持大写字母不变。

  5. font-style属性用于定义字体风格

    • 属性

      1. normal：默认值，标准的字体样式。
      2. italic：斜体字体样式。
      3. oblique：倾斜字体样式。

  6. font属性用于对字体样式进行综合设置。

    • 在CSS的font属性中，参数的顺序是有特定的规定的。它们的顺序应该按照以下顺序排列：

      1. font-style（字体样式）
      2. font-variant（字体变体）
      3. font-weight（字体粗细）
      4. font-size（字体大小）
      5. line-height（行高）
      6. font-family（字体系列）

2. 文本外观属性

  1. color：设置文本颜色。

  2. font-family：设置文本的字体系列。

  3. font-size：设置文本的字体大小。

  4. font-weight：设置文本的字体粗细。

  5. font-style：设置文本的字体样式，比如斜体。

  6. text-align：设置文本的对齐方式，比如左对齐(left)、居中对齐(center)、右对齐(right)等。

  7. text-decoration：设置文本的装饰效果，比如下划线(underline)、上划线(overline)、删除线(line_through)等。

  8. text-transform：设置文本的大小写转换，比如大写、小写、首字母大写等。

    1. none：不进行大小写转换，保持原样。
    2. capitalize：将每个单词的首字母转换为大写。
    3. uppercase：将文本中的所有字母转换为大写。
    4. lowercase：将文本中的所有字母转换为小写。
    5. initial：将属性重置为默认值。
    6. inherit：从父元素继承属性值。

  9. letter-spacing：设置字符间的间距。

  10. line-height：设置行高，控制行与行之间的距离。

  11. white-space：设置文本的处理方式，比如处理空格、换行等。

  12. text-indent 用于设置首行文本的缩进,其属性值可为不同的数值,em字符宽度的倍数,或相对于浏览器窗口的百分比,允许使用负值,建议使用em设置单位

  13. background-color:背景颜色,可以使用rgb(30,0,0),十六制颜色(#ccc),英文单词(red)

5. 元素类型及其转换

1. 元素的类型

HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。

  1. 块元素

    1. 在页面中以区域块的形式出现。
    2. 每个块元素通常都会独自占据---整行或多整行。
    3. 可以对其设置宽度、高度、对齐等属性。
    4. 常见的块元素:h1-h6,div,p,li,ol,ul

  2. 行内元素

    1. 不占有独立的区域。
    2. 仅仅靠自身的字体大小和图像尺寸来支撑结构。
    3. 一般不可以设置宽度、高度、对齐等属性。
    4. 常见的行内元素:strong,b,a,em,u(下划线),span

  3. 行内块元素

    1. 不会独占一行
    2. 能够调整宽高
    3. 本身高度默认是由内容撑开的

行内块元素的使用场景包括创建按钮、图像展示、菜单栏等。通过使用行内块元素可以实现一些复合性的布局效果，并且可以在不破坏文本流的情况下控制元素的尺寸和外观。

2. 元素的转换

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            /* 转换成行内块元素 */
            /* 注意行内元素inline和行内块元素inline-block */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>box1</div>
    <div>box2</div>

    <span>这是span标签</span>
</body>
</html>

6.css高级特性

1. 复合选择器

  1. 标签指定选择器
    标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集选择器 :单独选中class属性为box1的div标签*/
        div.box1{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <!-- 交集选择器示例 -->
    <div class="box1">div标签</div>
    <li>
        <p class="box2">p标签</p>
    </li>
    <span>span标签</span>
    <div>这也是一个div标签</div>
</body>
</html>
  1. 后代选择器
    后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 -- 所有代*/
        ul li{
            font-size: 50px;
        }

        /* 子选择器 -- 只有第一代 */
        ul>li{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 后代选择器示例 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <span>
            <li>4</li>
        </span>
    </ul>
    <ol>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>
</body>
</html>
  1. 并集选择器
    并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 同时选择到p和div标签 -- 并集选择器 */
        div,p{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box1,.box2{
            width: 100px;
            height: 100px;
            background-color:yellowgreen;
        }
    </style>
</head>
<body>
    <!-- 并集选择器示例 -->
    <div class="box1">div标签</div>
    <li>
        <p class="box2">p标签</p>
    </li>
    <span>span标签</span>
</body>
</html>

2. css层叠性和继承性

1. 层叠性

所谓层叠性是指多种CSS样式的叠加。

2. 继承性

所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。

并不是所有的CSS属性都可以继承，例如。下面的属性就不具有继承性：边框属性,定位属性,内外边距属性,布局属性,背景属性,元素宽高属性

3. css优先级

思考? 网页制作时，对统一元素，应用不同的背景，会出现什么情况？

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

html 复制代码 
<p class="father" id="header">
    <strong class="blue">文本的颜色</strong>

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：继承样式的权重为0。行内样式优先。权重相同时，CSS遵循就近原则。CSS定义了一个important命令 ，该命令被赋予最大的优先级。

总结

本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!

相关推荐
崔庆才丨静觅6 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60616 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了7 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅7 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅7 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅7 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment7 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅8 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊8 小时前
jwt介绍
前端
爱敲代码的小鱼8 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示