css基础为网页添加样式

最新推荐文章于 2023-09-20 08:47:54 发布

pythonset

最新推荐文章于 2023-09-20 08:47:54 发布

阅读量102

点赞数

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

本文链接：https://blog.csdn.net/pythonset/article/details/127555202

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

为网页添加的样式

术语解释

css

css规则

选择器

选择器：选中元素

1.id选择器：选中的是对应id值的元素
2.元素选择器
3.类选择器

声明块

出现在大括号中

声明块中包含很多声明（属性）表示每一个样式规则

css代码书写格式

1.内部样式表
写在style元素中

2.内联样式表，元素样式表
直接书写在元素的style的属性中

3.外部样式表(用的最多)

将样式书写在独立的css文件中

1）.外部样式可以解决多页面样式重复的问题
2）.有利于浏览器的缓存，提高页面响应效率
3）.代码分离，更容易阅读和维护`

.red-big{
    color: red;
    font-size: 3em;
    text-align: center;
}

<!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="css\1.css">
    <style>
        h1{
            color: brown;
            background-color: aliceblue;
            text-align: center;
        }
        #test{
            color: beige;
        }
        .red{
            color: red;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h1 >
        样式
    </h1>
    <p>asdasdas</p>
    <p id="test">Lorem ipsum dolor sit amet.</p>
    <p class="red">Quibusdam cumque eaque repellat praesentium.</p>
    <p class="red-big">Voluptates cum aperiam suscipit velit?</p>
    <p>Laudantium architecto quod debitis eveniet.</p>
    <p>Sed debitis minus accusantium soluta?</p>
    <p>Fugit commodi beatae ducimus voluptatum.</p>
</body>
</html>