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

【CSS3】01-初始CSS + 引入 + 选择器 + div盒子 + 字体修饰

news 来源：原创 2025/5/17 10:21:34

从本文开始，介绍web开发中的重要部分—— CSS3。

本文主要介绍：初始CSS、引入、选择器、div盒子、字体修饰。

1. 初始CSS

2. CSS引入方式

2.1 内部样式表

2.2 外部演示表

2.3 行内样式表

3. 选择器

3.1 标签选择器

3.2 类选择器

3.3 id选择器

3.4 通配符选择器

4. 画盒子

5. 字体修饰属性

5.1 字体大小

5.2 字体粗细

5.3 字体样式(倾斜)

5.4 行高

5.5 字体

5.6 font 复合属性

5.7 文本缩进

5.8 文本对齐

5.9 水平对齐 - 图片

5.10 修饰线

5.11 文字颜色

1. 初始CSS

CSS是一种样式表语言，描述HTML文档的呈现

双标签 style 内部嵌套：选择器 { 属性名: 属性值 }

属性名和属性值成对出现

演示：

2. CSS引入方式

2.1 内部样式表

CSS写在style里如初始CSS演示的

2.2 外部演示表

CSS代码写在单独的CSS文件(.css)中

在HTML使用 link 标签引入

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

2.3 行内样式表

直接在标签内加样式

如

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

3. 选择器

作用：查找标签，设置样式

3.1 标签选择器

就是初始CSS中的例子

选中同名标签设置相同的样式

以标签名作为选择器：p h1 div a img等

3.2 类选择器

作用：查找标签，差异化设置标签效果

步骤：

1. 定义类选择器 .类名

2. 使用类选择器标签添加 class="类名"

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
        .size {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p class="red">111</p>
    <p class="blue">222</p>
    <!-- 一个类选择器可以给多个标签使用 -->
    <div class="red">333</div>
    <!-- 一个标签只能有一个class,但是一个class内可以有多个属性值 -->
    <div class="red size">444</div>
</body>

3.3 id选择器

作用：查找标签，查找设置标签的显示效果

一般搭配JS使用

步骤：

1. 定义类选择器 #id名

2. 使用类选择器标签添加 id="id名"

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

3.4 通配符选择器

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

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

它的作用是去除标签自带的默认样式(后面应用)

4. 画盒子

选择合适的选择器画盒子

新属性：

width 宽度

height 高度

background-color 背景色

举例：

<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: brown;
        }
        .blue {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red">111</div>
    <div class="blue">222</div>
</body>