什么是css？

css（Cascading Style Sheets）是层叠样式表或级联样式表，是一组设置规则用于web。

css的特点：

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

`选择器{

属性：值//声明

什么是选择器？

选择器是指的是需要改变的HTML元素的标签、类名、和id名语法：

什么是声明？每一组声明由一个属性和值组成，属性是你希望改变的样式名 { width: 100px;//声明宽度为100px background-color: red; //声明背景颜色为红色 }

css引入方式

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

优先级：内联 > 头部 > 外部

    <style type="text/css">

        .dis{
            width: 300px;

            height: 300px;

            background-color: red;
        }
        .lis{
            width: 200px;
            height: 40px;
            background-color: yellow;
   }
    </style>
    
            <style type="text/css">
		/* 外部引入（@import） */
		/* @import url('./css/index.css'); */
		/* 以下不在写任何css样式 */
	</style>
	<!-- 外部引入（link） -->
           <link rel="stylesheet" type="text/css" href="./css/index.css"/>

引入方式的优缺点：

内联：

语法：<p style ="属性值；..><p>

优点：优先级最高

缺点：冗余代码过冬，不利于维护

适用与场景：个别特殊样式使用

头部引入：

语法 :

<head> <style> p{ 属性: 值; ... } </style> </head>

优点：速度快，没有服务器请求压力缺点：不利于改版,代码可读性较差，不利于前后端沟通适用场景：单页面展示页

外部引入： 语法：

1、<style>@import url('样式表')</style> 
2、<link rel="stylesheet" type="text/css" href="样式表" />
优点：一个文件可以控制多个页面，利于维护,利于前后端沟通 缺点：冗余代码过多，有服务器请求压力 适用场景：各大企业官网

介绍一下 @import & link 的区别：

前言：我们在页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用；其中外部引用有两种分别是：link和@import。

那么，link和@import到底有什么区别呢？

我们来看一下语法：

link ： <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

@import：

<style type="text/css" media="screen">
@import url("CSS文件");
 </style>

			区别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改变样式
                                    
                              5.权重：@import的权重要高于link

介绍css