随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿。于是css便诞生了。

web前端开发css笔记(CSS的三种导入方式说明)(1)

Web前端基础教程,Web前端开发,开课吧Web前端

CSS的三种导入方式

内联样式表

  <p style="font-size:50px;color:blue">css内联样式表</p>

内部样式表

  <styletype="text/css">

  p{

  font-size:100px;

  color:red;

  }

  </style>

  <p>css内部样式表</p>

  外部样式表

  创建一个cssTest.css的css文件

  p{

  font-size:50px;

  color:green;

  }

  span{

  font-size:50px;

  color:yellow;

  }

使用外部样式表

  <linkrel="stylesheet"type="text/css"href="../css/cssTest.css">

  <p>优先级:内联样式表>内部样式表>外部样式表</p>

  <span>外部样式表</span>

完整测试代码

  <!--文件名cssTest.html-->

  <!DOCTYPEhtml>

  <htmllang="en">

  <head>

  <metacharset="UTF-8">

  <title>cssTest</title>

  <styletype="text/css">

  p{

  font-size:50px;

  color:red;

  }

  </style>

  <linkrel="stylesheet"type="text/css"href="../css/cssTest.css">

  </head>

  <body>

  <pstyle="font-size:50px;color:blue">css内联样式表</p>

  <p>css内部样式表</p>

  <p>优先级:内联样式表>内部样式表>外部样式表</p>

  <span>外部样式表</span>

  </body>

  </html>

css文件

  <!--文件名cssTest.css-->

  p{

  font-size:50px;

  color:green;

  }

  span{

  font-size:50px;

  color:yellow;

  }

css三种导入方式的优先级:内联样式表>内部样式表>外部样式表

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

以上就是今天酷仔整理提供的“web前端基础:CSS的三种导入方式说明”一文,希望为学习Web前端的同学提供帮助,以后酷仔每日均会提供Python编程及Web前端相关的知识内容。

特殊说明:以上资料由开课吧提供!

,