HTML中如何调用CSS样式?

基本上只使用HTML很难制作完成丰满设计的网页,这时需要的就是CSS。那么如何在HTML中调用CSS?下面本篇文章就来给大家介绍一下在HTML调用CSS的方法,希望对大家有所帮助。

在HTML中调用CSS的方法有3种:内联样式、内部样式表、外部样式表。

1、内联样式

使用style属性在特定的HTML标签内设置CSS样式。

例:

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
   </body>
</html>

2、内部样式表

在<head> 部分中使用<style>标签定义内部样式表,将CSS样式直接嵌入到HTML文档中。

语法:

<style type="text/css">
/*CSS样式 */
</style>

内部样式表的一个示例:

<!DOCTYPE html>
<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

3、外部样式表

想要使用外部样式表,需要在<head> 部分中通过link标签将外部CSS文件(.css文件)引用到HTML页面中。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

而mystyle.css中包含HTML页面所需的所有样式规则。

以上就是HTML中如何调用CSS样式?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读