Web前端 （CSS篇）

什么是CSS？

        css(Cascading Style Sheets)是层叠样式表或级联样式表，是一组设置规则，用于控制web页面外观。

为什么使用CSS?

        CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

CSS 实例

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS的特点：

        css规则是由两部分组成：选择器和一条声明或多条声明。

什么是选择器：

        选择器通常指你需要改变的HTML元素的标签名、类名或ID名。

什么是声明？

        每一组声明都有一个属性和值组成，属性是你希望改变的样式名。

    
    
    


    

    	
#dis下的p标签
        
#dis下的h2标签
        ... ...
    

CSS 的引入方式

css常用引入方式：标签内（内联） 头部引入 外部引入

CSS是和html结合使用
根据定义CSS的位置不同，分为标签内（内联）、头部样式和外部样式。

头部引入

	
		
		
		
		
	
	
		
你好，世界！！！
	

内联（标签内）引入

	
		
		
	
	
		
		
熊大最帅！！！
	

外部引入

/* index.css */
/* css外部文件 */
li{
	color: green;
}
.ps{
	color: pink;
}

@import 引入

	
		
		
		
         
	
	
		
你好，世界！！！
		

			
你好，前端！！！
		
	

link引入

	
		
		
		
		
	
	
		
你好，世界！！！
		

			
你好，前端！！！
		
	

引入方式的优先级及语法

优先级（就近原理）

标签内（内联） ==> 头部引入 ==> 外部引入

最终的效果

语法及优缺点

        标签内（内联）

        语法：

​ 优点：优先级高 ​ 缺点：冗余代码过多，不利于维护 ​ 适用场景：个别特殊样式适用。

头部引入

        语法：

 
​        
​    	

        优点：速度快，没有服务器请求压力 ​。

        缺点：不易改版，代码可读性差，不易于前后台沟通 ​。

        适用场景：单页面适用。
 

外部引入

        语法：

1、


2、

        优点：一个文件可以控制多个页面样式，利于维护，利于前后台沟通 ​。

        缺点：冗余代码过多，有服务器请求压力 ​。

        适用场景：各大企业官网。

link与@import的区别

区别1： ​

        link是XHTML标签，除了加载css外还可以加载RSS等其他事务 ​ @import是属于css范畴，只能加载css ​。

区别2： ​

        link是XHTML标签，无兼容性问题 ​ @import是在css2.1提出的，低版本浏览器不支持 ​

区别3：

         ​ link引入css时，在页面加载时同时加载css ​ @import需要HTML页面完全载入后再加载css ​。

区别4： ​

        link支持使用javascript控制DOM改变样式 ​ @import不支持使用javascript控制DOM改变样式。