CSS基础入门------01-与HTML的3种结合方式

最新推荐文章于 2024-06-19 16:19:47 发布

Haishan_

最新推荐文章于 2024-06-19 16:19:47 发布

阅读量247

点赞数 1

分类专栏： HTML入门文章标签： css

本文链接：https://blog.csdn.net/m0_37597069/article/details/75138439

版权

HTML入门专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>01-结合方式1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 结合方式1:
		html标签上加上style属性. 属性的值填写Css代码.
		所有标签都有style属性.
 -->
  </head>
  
  <body>
   <p style="color:red;" > This is my HTML page. </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>02-结合方式2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 结合方式2:
	使用head标签中的style标签.设置页面样式.style中填写css代码
 -->
 	<style type="text/css">
 		p{
 			color:red;
 		}
 	</style>
  </head>
  
  <body>
   <p> This is my HTML page. </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>03-结合方式3.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
<!-- 结合方式3:
 -->
   <link rel="stylesheet" type="text/css" href="p.css">
  </head>
  
  <body>
   <p> This is my HTML page. </p>
  </body>
</html>

运行效果如下