CSS（一）——放置CSS方式

瓴翎玲

已于 2025-01-18 10:01:43 修改

阅读量207

点赞数 7

CC 4.0 BY-SA版权

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

于 2025-01-08 00:34:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41446512/article/details/144996870

前端开发专栏收录该内容

2 篇文章

订阅专栏

1.CSS基础

作用：增强控制网页样式，允许央样式信息与内容分离
CSS不需要编译，可由浏览器直接解析
基本语法：选择符、属性、属性权值

p{
	color:yellow;
}

不区分大小写，建议小写
属性与值之间用冒号；多个属性之间用分号
注释：/* 注释 */

2.CSS放置方式

（1）内联样式（行内引用）

<p style = "back-ground:pink">  </p>

（2）内嵌样式表（内部引用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是P标签</p>
</body>
</html>

（3）外联样式表（外部引用）
第一种：link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type = "text/css" href="./index.css">
    <title>Document</title>
</head>
<body>
    <p id="one">这是P标签</p>
</body>
</html>

#one{
    background-color: aquamarine;
}

第二种：@import 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" type = "text/css" href="./index.css"> -->
    <title>Document</title>
    <style>
        @import "index.css"
    </style>
</head>
<body>
    <p id="one">这是P标签</p>
</body>
</html>