CSS——1.引入、选择器、字体属性

买奶茶的小孩

已于 2022-06-10 13:57:51 修改

阅读量165

点赞数

分类专栏：前端文章标签：前端 css html

于 2022-06-04 14:10:40 首次发布

本文链接：https://blog.csdn.net/m0_46279684/article/details/124586603

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

引入CSS样式表

行内式（内联样式）

直接在标签里面加style属性

弊端：只有当前标签具备样式

<p style="color:red; font-size:15px；">我爱喝奶茶</p>

内部样式表（内嵌样式表）

在<head>标签中写一个<style>标签

弊端：只能在当前页面中有效

注意：type=“text/CSS”在html5中可以省略

<head>
<style type="text/CSS">
    选择器（要选择的标签）{
        属性1：属性值1；
        属性2：属性值2；
    }
</style>
</head>

<head>
    <style type="text/CSS">
        p {
            color:red;
            font-size:15px;
        }
    </style>
</head>
<body>
    <p>我爱吃火锅</p>
</body>

外部样式表（外联式）

新建一个css文件，将该文件引入到html文件中

可以在多个文件中引入

在<head>标签中引用，建立联系

<head>
    <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

导入样式

@import将外部的css文件引入到html文件中

<style>
    @import url("css位置");
</style>

内嵌式、嵌入式、外联式的优先级：

内嵌式
嵌入式、外联式按照顺序执行

CSS选择器

标签选择器

使用html标签筛选需要渲染的网页元素。

/* 标签选择器：对页面中所有的div渲染样式 */
div {
    background: red;
}

类选择器

为一组样式属性进行命名（类名）

/* 类选择器的标识符：. */
.aa {
    background: pink;
    width: 100px;
    height: 100px;
}
.bb {
    color: yellow;
}

类选择器特点

多个标签可以引用同一个样式类，提高程序的公用性。
通过语义化的类名定义增加了程序可读性。
标签可以通过class引入多个样式类名，用空格分开。
类名区分大小写。

多类名选择器

<!-- 多个类样式用空格分割 -->
<div class="aa bb">类选择器</div>

ID选择器

根据标签的id属性筛选要被渲染的标签

CSS:

/* ID选择器的标识符：# */
#div1 {
    background: blue;
}

HTML:

<div id="div1">id选择器</div>

注意事项：

ID不能重复，因此每个元素都要编写一个id选择器，无法提炼公用样式。
文档内元素的ID是区分大小写的。
id命名规则是由字母、数字和下划线组成，但是数字不能开头。

三个选择器的优先级

ID选择器
类选择器
标签选择器

多元素选择器

HTML：

<p id="h5">多元素选择器</p>
<p>多元素选择器</p>

CSS：

p，#h5{
    font-size: 30px;
    color: blue;
}

派生选择器

a.后代选择器，按照html标签的层级关系（全部后代子孙）筛选被渲染的标签。

b.子元素选择器，按照html标签的层级关系（直接后代），筛选要被渲染的标签。

c.相邻元素选择器 +

紧邻其后的第一个元素