当前位置：首页 > news >正文

HTML5前端第三章节

news 来源：原创 2025/5/21 2:25:29

一.CSS：

1.定义：

层叠样式表（Casecading Style Sheets），是一种样式表语言，用来描述HTML文档的呈现（美化内容）

书写位置：title标签下方添加style双标签，style标签里面书写CSS代码

<!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{
            /* 文字颜色 */
            color: aqua;
            /* 字号 */
            font-size: 30px;
        }
    </style>
</head>
<body>
<p>CSS</p>
</body>
</html>

2.CSS引入方式

（1）.内部样式表（学习使用）

CSS代码一般写在style标签里面

（2）.外部样式表（开发使用）

CSS代码写在单独的CSS文件中，在HTML中使用link标签引入

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

其中link表示引入外部样式表，rel表示关系，样式表

（3）.行内样式（配合JavaScript使用）

CSS写在标签的style属性值里

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

二.选择器

1.作用：

查找标签，设置样式

2.基础选择器

（1）.标签选择器

使用标签名作为选择器，可以选中同名标签设置相同的样式

<!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标签就会是现在这个基础选择器中的样式 */
        p {
            color: red;
        }
    </style>
</head>
<body>
<p>p标签</p>
<p>文本内容</p>
</body>
</html>

（2）.类选择器

查找标签，差异化设置标签的显示效果

<!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>
        /* 定义一个名字为red的类选择器 */
        .red {
            color: red;
        }

        .size {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 使用类选择器 -->
<div class="red">div标签</div>
<!-- 一个类选择器可以给多个标签使用 -->
 <p class="red">p标签</p>
 <!-- 一个标签可以使用多个选择器 -->
  <p class="red size">测试文本</p>
</body>
</html>

一个类选择器可以给多个标签使用，一个标签也可以使用多个标签

（3）.id选择器

查找标签，差异化设置标签的显示效果

使用场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式

<!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>
        #red {
            color:red;
        }
    </style>
</head>
<body>
<p id="red">id选择器测试</p>
</body>
</html>

同一个id选择器只能在一个页面使用一次

（4）.通配符选择器

查找页面所有标签，设置相同样式

<!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>
        * {
            color: red;
        }
    </style>
</head>
<body>
<p>p标签</p>
<div>div标签</div>
<h1>h1标签</h1>
</body>
</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>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .orange {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="red">div_test1</div>
    <div class="orange">div_test2</div>
</body>
</html>

效果图：

四.文字控制属性

font-size：

字体大小（常用单位：px）

font-weight：

字体粗细（开发时可以直接使用数字作为属性值（不需要加单位），也可以使用关键字如normal，bold（加粗））

font-style：

字体倾斜（属性值有normal和italic（倾斜），可以使用normal属性清除字体倾斜）

line-height：

行高（属性值常用单位：px，或直接使用数字，表示为当前font-size的倍数）

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

    <style>
        p {
            font-size: 20px;
            /* px单位 */
            line-height: 20px;
            /* 纯数字，表示为当前font-size的倍数 */
            line-height: 2;
        }
    </style>

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）

font-family：

字体族（改变当前文字的字体，如楷体等等）

font-family属性值可以书写多个字体名，各个字体名之间用逗号隔开，执行顺序是从左向右依次查找，一旦找到在当前环境中存在该字体就会使用该字体

font：

字体复合属性

能够将多种属性同时写到本属性中，是属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开

    <style>
        p {
            /* 是否倾斜 加粗 字号 行高 字体 */
            font:italic 700 30px/2 楷体;
        }
    </style>

使用场景：设置网页文字公共样式

注意font中的属性必须按顺序书写，分别为：是否倾斜是否加粗字号/行高字体，而在这之中字号和字体值必须书写，否则font属性不生效

text-indent：

文本缩进（属性值常用单位为：px和em，而1em等于当前标签的字号大小）

    <style>
        p {
            text-indent: 2em;
        }
    </style>

text-align：

文本对齐（left：左对齐，center：居中对齐，right：右对齐）

    <style>
        p {
            text-align: center;
        }
    </style>

我们可以使用本属性完成文本对齐（left，center，right）

text-align还可以设置图片的水平对齐，但是因为text-align本质是控制内容的对齐方式，所以属性要设置给内容的父级才能够生效

<!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 {
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <img src="" alt="">
</div>
</body>
</html>

text-decoration：

修饰线（属性值分别为：none：无，underline：下划线，line-through：删除线，overline：上划线）

<!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>
        .none {
            text-decoration: none;
        }
        .underline {
            text-decoration: underline;
        }
        .line-through {
            text-decoration: line-through;
        }
        .overline {
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <div>
        <p class="none">none</p>
        <p class="underline">underline</p>
        <p class="line-through">line-through</p>
        <p class="overline">overline</p>
    </div>
</body>
</html>

效果图：