层叠样式表（CSS）1

Posted 2023-01-11 MrNF

一、css的简介

1.层叠样式表的含义

    层叠样式表：css是不仅是表现HTML的语言、还是进行样式修饰的语言
    层叠：是对一个元素多次设置同一个样式，层层叠加覆盖，如不同的样式对一html标签进行修饰，若样式冲突，则冲突部分应用优先级高的；若不冲突，则共用
    样式表：是css属性样式的集合

2.作用

    丰富html、使html样式更多样
    提高css的样式复用性
    使html内容与css样式分离 便于维护	

3.引入方式

    内嵌样式
	内嵌样式是直接把css的代码嵌入到标签中
	<div >
                小老弟，针不戳
        </div>
      用法：
	    使用style属性将样式嵌入到html标签中、写法：属性：属性值
	    多属性之间用分号（;）隔开
	    **不建议使用**
    内部样式
	在head标签中使用style标签进行css的引入
	<style type="text/css">
	    divcolor:green;font-size:70px;
	</style>
      用法：使用style标签、type属性将css的引入
	  <style type="text/css">
	  属性：type：让浏览器知道要使用css解析器去解析这个样式，写法：属性：属性值；多属性之间用分号（;）隔开
	
    外部样式
       link链接方式
	  把css样式做成一个单独css文件，需要便引用（jj01.css文件）
	  <link rel="stylesheet" type="text/css" href="jj01.css" />
	  用法：
		创建css文件，把css样式写入文件中
		在head中使用link标签进行引入
		    <link rel="stylesheet" type="text/css" href="路径"/>
		      rel:设置引入的文件对象与HTML之间的关系
		      type：让浏览器知道要使用css解析器去解析这个样式
		      href：css文件的路径
			写法：属性：属性值；多属性之间用分号（;）隔开
       @import方式（不推荐使用）：
          我们来聊聊为什么不推荐使用这个方式来引入外部样式（了解一下@import即可，不必学习）
              在使用@import方式引入的时候，css是无法并行下载，浏览器首先下的引用的这个css文件，其他css文件需要等解析完成后再发现并下载，然后再解析再进行一系列操作才能把页面显示。这个问题直接说明了一个问题：网页加载时间变长，导致网页会有较长时间停留在空白页面。所以推荐使用link链接
          @import方式其他缺点：
	      @import对部分低版本IE浏览器是不支持的
	      @import是等html加载完后再在加载
	      @import是不支持js的动态修改

注：未经同意请勿转载，仅作学习使用。以上有描述不正确之处，望大家能不吝指出，共同学习共同进步。谢谢