三、CSS学习[非重点]

CSS层叠样式表

Cascading Style Sheet
作用：美化页面（装修）

如何在HTML页面中添加CSS样式代码

三种引入方式

  • 内联样式：在标签的style属性中添加样式代码, 弊端:不能复用
  • 内部样式：在head标签里面添加一个style标签, 在标签体内写
  • 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用, 可以将html代码和css样式代码分离
内敛样式

<h1 style="color: red">内敛样式</h1><!--在标签里面，添加style属性-->

内部样式
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      h2{color: blue}
    </style>
</head>
<body>
<h1 style="color: red">内敛样式1</h1>
<h1 style="color: red">内敛样式2</h1><!--在标签里面，添加style属性-->
<h2>内部样式</h2>
<h2>内部样式</h2>
</body>
外部样式
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      h2{color: blue}
    </style>
  <link rel="stylesheet" href="mycss.css" type="text/css"><!--这里是对外部css的引用 -->
</head>
<body>
<h1 style="color: red">内敛样式1</h1>
<h1 style="color: red">内敛样式2</h1><!--在标签里面，添加style属性-->
<h2>内部样式</h2>
<h2>内部样式</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>

mycss文件代码
h3{
    color: greenyellow;
}

效果图

posted @ 2022-04-22 16:38  效马生  阅读(35)  评论(0)    收藏  举报