html与css第三天_css三的发布时间-CSDN博客

本文链接：https://blog.csdn.net/ITw333/article/details/77917894

在HTML文档中使用CSS的方法：行内样式，内嵌样式，链接外部样式，导入外部样式

<!DOCTYPE html>            <!--内嵌样式-->
<html>
 <head>
  <meta charset="UTF-8">
  <title>王</title>
  <style type="text/css">
   p{
    color:#1176d2;
    font-size:24px;
   }
   body{
    background-color:#AADD66'
    font-size:20px;
   }
  </style>
 </head>
 <body>
  <h1>春姑娘</h1>
  <p>春姑娘来了--
     她渡过了河水，</p>
  在沙滩上慢慢走。
  <p>他低着头轻轻的唱，</p>
  那歌声像河水在流
 </body>
</html>





<!DOCTYPE html>              <!--链接外部样式-->
<html>
 <head>
  <title>
   朱坚强威武霸气
  </title>
  <link href="haha.css" rel="stylesheet" type="text/css"><!-- rel 定义样式文件与html的关系 stylesheet代表首选样式-->
 </head>
 <body>
  <h1>朱坚强</h1>
  <p>朱坚强威武霸气</p>
 </body>
</html>

haha.css的内容如下



h1{

color:green;

font-size:37px;

font-family:微软雅黑;

}

p{

text-indent:2px;

font-family:楷体;

font-size:30px;

background-color:red;

}





<!DOCTYPE html>              <!--导入外部样式-->
<html>
 <head>
  <title>
   朱坚强威武霸气
  </title>
  <style>
   @import url("haha.css");
  </style>
 </head>
 <body>
  <h1>朱坚强</h1>
  <p>朱坚强威武霸气</p>
 </body>
</html>

haha.css如上面相同





<!DOCTYPE html>              <!--行内样式-->
<html>
 <head>
  <title>
   朱坚强威武霸气
  </title>
 </head>
 <body style="background-color:pink;">
  <h1 style="text-align:center;font-size:30px;font-family:楷体">朱坚强</h1>
  <p style="font-size:20px;line-height:30px;text-align:center;">朱坚强威武霸气</br>朱坚强威武霸气</p> <!--line-height表示两行字之间的距离-->
 </body>
</html>

结束。。。END 打卡