2.1-CSS基础--CSS引入方式、基本选择器

秋枫 ~

已于 2022-08-12 19:06:13 修改

阅读量186

点赞数

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

于 2022-07-19 14:40:58 首次发布

本文是秋枫 ~原创文章，转载请附上博文链接！

本文链接：https://blog.csdn.net/weixin_43472938/article/details/125870140

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

一、CSS引入方式

内嵌式：css写在style标签中
注：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
外联式：css写在一个单独的.css文件中
注：需要通过link标签在网页中引入
行内式：css写在标签的style属性中
注：配合js使用

引入方式	书写位置	作用范围	使用场景
内嵌式	css写在style标签中	当前页面	小案例
外联式	css写在单独的css文件中，通过link标签引入	多个页面	项目中
行内式	css写在标签的style属性中	当前标签	配合js使用

内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 -->
    <style>
        p {
    color: red ;
        }
    </style>
</head>
<body>
<p>我是一个标签</p>
</body>
</html>

外联式

在link标签内href属性中写上css文件的路径

在这里插入图片描述

行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./02.css"> -->
</head>
<body>
    <!-- 行内式 -->
<p style="color: green;">我是一个标签</p>
</body>
</html>

二、基础选择器

标签选择器

结构：标签名 { css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意：标签选择器选择的是一类标签，而不是单独某一个

类选择器

结构：.类名 { css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意：
- 所有标签上都有class属性，class属性的属性值称为类名。
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头。
- 一个标签可以同时有多个类名，类名之间以空格隔开。
- 类名以重复，一个选择器可以同时选中多个标签。