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

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

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

1. 初始CSS

2. CSS引入方式

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>