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

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

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

[1. 初始CSS](#1. 初始CSS)

[2. CSS引入方式](#2. CSS引入方式)

[2.1 内部样式表](#2.1 内部样式表)

[2.2 外部演示表](#2.2 外部演示表)

[2.3 行内样式表](#2.3 行内样式表)

[3. 选择器](#3. 选择器)

[3.1 标签选择器](#3.1 标签选择器)

[3.2 类选择器](#3.2 类选择器)

[3.3 id选择器](#3.3 id选择器)

[3.4 通配符选择器](#3.4 通配符选择器)

[4. 画盒子](#4. 画盒子)

[5. 字体修饰属性](#5. 字体修饰属性)

[5.1 字体大小](#5.1 字体大小)

[5.2 字体粗细](#5.2 字体粗细)

[5.3 字体样式(倾斜)](#5.3 字体样式(倾斜))

[5.4 行高](#5.4 行高)

[5.5 字体](#5.5 字体)

[5.6 font 复合属性](#5.6 font 复合属性)

[5.7 文本缩进](#5.7 文本缩进)

[5.8 文本对齐](#5.8 文本对齐)

[5.9 水平对齐 - 图片](#5.9 水平对齐 - 图片)

[5.10 修饰线](#5.10 修饰线)

[5.11 文字颜色](#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 类选择器

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

步骤：

定义类选择器 .类名
使用类选择器标签添加 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>
111

222

333

444
</body>

3.3 id选择器

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

一般搭配JS使用

步骤：

定义类选择器 #id名
使用类选择器标签添加 id="id名"
同一个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>