记录一下自己学习的CSS笔记

最新推荐文章于 2025-12-01 16:00:16 发布

原创最新推荐文章于 2025-12-01 16:00:16 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #笔记

这篇文章介绍了CSS的基础用法，包括如何定义样式，如颜色、字体大小等。它讨论了三种样式引入方式：内联样式、内部样式表和外部样式表，并解释了它们各自适用的场景。此外，还详细讲解了选择器的概念，如全局选择器、元素选择器、类选择器和ID选择器，以及它们的优先级规则。最后提到了字体属性的设置方法。

CSS简介
使用CSS的目的就是让网页变得更加美观，CSS可以用于HTML文档中元素样式的定义
CSS的语法
由两个主要的部分组成：选择器，以及一条或者多条声明。
选择器一般是要改变的HMTL的元素而每条生命都由一个属性和一个值组成。每个属性都有一个值，属性和值被冒号隔开，不同属性之间用分号隔开。
h1{color:blue;font-size:12px}
在head标签里面添加一个style标签，在该标签内部可以来写样式。（可添加多条样式）

<!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;
            font-size:30px;
        }

    </style>
</head>
<body>
    <p>CSS的引入</p>
    <p>我是xxx</p>
</body>
</html>

运行结果：
在这里插入图片描述
该p选择器可以选择所有的p标签
CSS的引入

内联样式（在相关的标签内使用样式style，可以包含任何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=
    , initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>我是CSS</p>
    <p style="color:aqua;font-size: 30PX;">我也是CSS</p>
</body>
</html>

运行结果：
在这里插入图片描述
若是在一个页面定义了该标签的属性，在跳转的页面并不会有相同的效果

外部样式
当样式要适用于多个页面时外部样式将是更理想的选择，可以通过改变一个文件来改变整个站点的外观。每个页面都用link标签连接到样式表，link定义在文档的头部
link要引入新写的css，而新写的css只能重新写，定义为后缀为css，再用link里面的href引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./link.css">
</head>
<body>
    <p>我是首页</p>
    <a href="./product.html">产品页面</a>
</body>
</html>

<!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="./link.css">
</head>
<body>
    <p>我是产品</p>
</body>
</html>

p{
    color:red;
    font-size:30pX;
}

在这里插入图片描述
运行结果：

link必须放在每个文件的head里面
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>
    <style>
        *{
            font-size:30px;
            color:rebeccapurple;
        }
    </style>
</head>

<body>
    <p>全局选择器</p>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</body>
</html>

运行结果：
在这里插入图片描述

body里面写的所有标签都会进行改变（style要写在head里面）

元素选择器（根据元素来进行选择）p,b,div,a,img,body等等，会选择该页面上所有这种类型的标签，无法描述某一个元素的个性。

<!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:aqua;
            font-size:30px;
        }
        b{
            color:blueviolet;
            font-size:50px;
        }
        ul{
            color:chocolate;
            font-size:10px;
        }
        span{
            color:blue;
            font-size:20px;
        }
    </style>
</head>

<body>
    <p>Hello</p>
    <b>World</b>
    <p>Hi</p>
    <p>我爱<span>前端</span></p>
    <ul>
        <li>小姐姐</li>
    </ul>
</body>
</html>

也可以通过在标签中插入span标签再用span标签选择器
运行结果：在这里插入图片描述

类选择器
规定用圆点.来定义，针对要用的所有标签使用，可以灵活使用，使标签有个性
在标签内定于一个class=“名字”再再style里面用.来找到class，他只会选择class名字相同的标签
（类选择器的名字不能以数字开头，同一个标签可以使用多个类选择器，用空格隔开

<!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>
        .cyx{
            color:aquamarine;
            font-size:30px;
        }
        .zjl{
            color:darkblue;
        }
        .zjl1{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>大家好</p>
    <p class="cyx">我是陈奕迅</p>
    <p class="zjl zjl1">我是周杰伦</p>
    <h3 class="cyx">你们好</h3>
</body>
</html>

运行结果：
在这里插入图片描述

ID选择器，与类选择器相同，用#来找到相对应的id，每个id只能被使用一次即id是唯一的

<!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>
</head>
<body>
    <p id="cyx">我是陈奕迅</p>
    <p id="zjl">我是周杰伦</p>
</body>
</html>

合并选择器
可以提取共同的样式，减少代码的重复（适用于标签选择器和类选择器）

<!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,h3{
            color:chartreuse;
            font-size:30px;
        }
    </style>
</head>
<body>
    <p >我是陈奕迅</p>
    <h3 >我是周杰伦</h3>
</body>
</html>

<!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>
        .cyx,.zjl{
            color:chartreuse;
            font-size:30px;
        }
    </style>
</head>
<body>
    <p class="cyx">我是陈奕迅</p>
    <h3 class="zjl">我是周杰伦</h3>
</body>
</html>