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

显示效果：