CSS（一）——放置CSS方式-优快云博客

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

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>