HTML+CSS笔记 (4.使用css来修改网页中原始的样式)

CSS介绍

CSS用于控制页面中元素的样式(表现)
（层叠样式表）是一个多层结构，用CSS给每层设计样式，最终看见的是网页上最上面的一层（ps图层的原理）

使用css来修改网页中原始的样式

1.style属性（内联样式）

在标签内部通过style属性来设置元素的样式(不推荐使用)
内联样式只能对一个标签生效，影响多个元素要写很多遍，样式变化不方便修改和维护。
！开发时不要使用内联样式
例：

1
<p style="color: brown; font-size: 60px;">君不见黄河之水天上来，奔流到海不复回</p>

2.(内部样式表)将样式编写到head里

将样式编写到head里的style标签里。只对一个网页起作用。不能跨页面复用

1
2
3
4
5
6
<head>
    <title></title>
    <style>
       统一写到这里
    </style>
</head>

通过css选择器选中元素并为其设置格式

1
2
3
4
5
6
7
8
<head>
    <style>
    p{


    }    
    </style>
</head>

可以为所有p元素设置样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="zh">
<head>
    <title></title>
    <style>
    p{
        color: burlywood;
        font-size: 50px;
    }
    </style>
</head>
<body>
    <p style="color: brown; font-size: 60px;">君不见黄河之水天上来，奔流到海不复回</p>
    <p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
	<p>人生得意须尽欢，莫使金樽空对月。</p>
	<p>天生我材必有用，千金散尽还复来。</p>
</body>
</html>

3.（外部样式表）将样式写在外部css文件里

将样式写在外部css文件里,然后通过link标签引入外部的css文件,外部样式的好处在于样式可以在不同页面复用。将样式编写到css里可以很好使用到浏览器的缓存机制，从而加快网页的加载速度。
这是开发的最佳样式
css程序：

1
2
3
4
p{
    color: blue ;
    font-size: 20px;
}

html引入css样式：

1
2
3
4
    <head>
   
    <link rel="stylesheet" href="./样式.css">
</head>
计算机及嵌入式软件 > 计算机前端 > HTML+CSS
#HTML+CSS
HTML+CSS笔记 (4.使用css来修改网页中原始的样式)
https://www.duruofu.xyz/posts/51383/
作者
DuRuofu
发布于
2023年6月6日
更新于
2025年1月10日
许可协议