CSS学习记录1-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaoshengmeyan/article/details/139452603

CSS编写位置

CSS有3个编写位置样式：行内样式，内部样式，外部样式。

行内样式（不常用）：

<!DOCTYPE html>
<html lang="zh-CN">
<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>行内样式</title>
</head>
<body>
    <h1 style="color:red;">Excalibur！！！！</h1>
</body>
</html>

写在标签属性style中，注意形式 style=“名：值；”

内部样式：

<!DOCTYPE html>
<html lang="zh-CN">
<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>内部样式</title>
    <style>
        h1{
            color:red;
            font-size: 100px;
        }
        p{
            color: blue;
            font-size: 200px;
        }
    </style>
</head>
<body>
    <h1>Excalibur！！！</h1>
    <p>砸瓦鲁多！！</p>
    <p>砸瓦鲁多！！</p>
</body>
</html>

写在<head>页面内部<style>标签内

外部样式：

<!DOCTYPE html>
<html lang="zh-CN">
<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>css外部样式</title>
    <link rel="stylesheet" href="./60_css外部样式.css">
</head>
<body>
    <h1>Excalibur！！！！</h1>
    <p>电路与模拟电子技术</p>
</body>
</html>

需要另建一个CSS文件（后缀 .css）

h1{
    color: red;
}
p{
    color: blue;
    font-size: 150px;
}

优先级：

行内>内部=外部

内部与外部后写的优先。