CSS-和HTML结合的方式

CSS:层叠样式表,使页面的显示效果更好。将网页内容和显示样式进行分离,提高了显示功能。

CSS和HTML结合的四种方式:

    1.在每个html标签上面都有一个属性 style,把CSS和HTML结合在一起。

        <div style = "background-color:red;color:blue">中国社会主义牛逼</div>

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  div{
	background-color:red;
	color:blue;
	}
  </style>
 </head>
 <body>
	<div>中国社会主义牛逼</div>
 </body>
</html>

    2.使用html的一个标签实现<style>标签,写在head里面

        <style type = "text/css"

            css代码;

        </style>

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  div{
	background-color:red;
	color:blue;
	}
  </style>
 </head>
 <body>
	<div>中国社会主义牛逼</div>
 </body>
</html>

    3.在style标签里面 使用语句

        @import url(css文件的路径);

            html文件:

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
	@import url(div.css);
  </style>

 </head>
 <body>
	<div>中国社会主义牛逼</div>
 </body>
</html>

    css文件:

/*
	div
*/

div
{
	background-color:red;
	color:black;
}

    4.使用头标签 link,引入外部css文件

        <link rel = "stylesheet" type = "text/css" href = "css文件"/>

    html文件

<!doctype html>
<html>
 <head>
  <title>Document</title>
	<link rel = "stylesheet" type = "text/css" href = "div.css"/>
 </head>
 <body>
	<div>中国社会主义牛逼</div>
 </body>
</html>

css文件

/*
	div
*/

div
{
	background-color:red;
	color:black;
}
    第三种结合方式,有缺陷,某些浏览器无法使用,一般使用第四种方式。

猜你喜欢

转载自blog.csdn.net/tommy5553/article/details/80786832