CSS样式应用详解-优快云博客

本文深入讲解CSS的三种应用方式：内联样式、内部样式及外部样式。通过具体实例，展示了不同场景下各种CSS样式的使用方法及其优缺点，是前端开发者入门及进阶的实用指南。

CSS 指层叠样式表 (Cascading Style Sheets):

1 内联样式：无法复用，在元素style内写，很少使用；

2 内部样式：在head元素内style属性内写，此样式可以被当前页面中元素使用，小案例可以用一用；

3 外部样式：在单独CSS文件中写的样式，那个网页引用该文件就能复用该样式，一般使用这一种；

例子见下面代码：

CSSTest.html

<!-- CSSTest.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    
    <!-- 2 内部样式：在head元素内style属性内写，此样式可以被当前页面中元素使用 -->
    <style>
        /*style里是CSS，CSS的注释是这样写的*/
        h1{color:yellow}
        h2{color : blue}
        
    </style>
    
    <!--  3 在单独CSS文件中写的样式，那个网页引用该文件就能复用该样式-->
    <link rel = "stylesheet" href = "my.css"/>

</head>
<body>
    <!-- 1 内联样式：无法复用，在元素style内写 -->
    <P style = "color:blue;">CSS</P>
    <h1>CSS三种用法</h1>
    <h2>内联样式</h2>
    <h3>内部样式</h3>
    <h4>外部样式</h4>
    
</body>
</html>

View Code

my.css

/*my.css, 在单独CSS文件中写的样式，那个网页引用该文件就能复用该样式*/
h3{
    color:gray
}
h4{
    color:green
}

View Code

显示效果：

转载于:https://www.cnblogs.com/kwinwei/p/10496576.html

CSS三种样式