现在的位置: 首页 > web前端 > 正文

引入css的方式

2020年07月20日 web前端 ⁄ 共 817字 ⁄ 字号 评论关闭

  CSS的引入方式共有三种:行内样式、内部样式表、外部样式表。


  CSS的引入行内样式


  使用style属性引入CSS样式。


  示例:


  <h1style="color:red;">style属性的应用</h1>


  <pstyle="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>


  实际在写页面时不提倡使用,在测试的时候可以使用。


  例如:


  复制代码


  复制代码


  <!DOCTYPE>


  <html>


  <head>


  <metacharset="utf-8"/>


  <title>行内样式</title>


  </head>


  <body>


  <!--使用行内样式引入CSS-->


  <h1style="color:red;">LeapingAboveTheWater</h1>


  <pstyle="color:red;font-size:30px;">我是p标签</p>


  </body>


  </html>


  CSS的引入内部样式表


  在style标签中书写CSS代码。style标签写在head标签中。


  示例:


  <head>


  <styletype="text/css">


  h3{


  color:red;


  }


  </style>


  </head>


  例如:


  复制代码


  复制代码


  <!DOCTYPE>


  <html>


  <head>


  <metacharset="utf-8"/>


  <title>内部样式表</title>


  <!--使用内部样式表引入CSS-->


  <styletype="text/css">


  div{


  background:green;


  }


  </style>


  </head>


  <body>


  <div>我是DIV</div>


  </body>


  </html>


  总之,引入css给大家简单的介绍了一些,希望大家多看看。


  

抱歉!评论已关闭.