Web前端（CSS篇）

什么是CSS？

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

为什么使用CSS?

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

CSS 实例

html 复制代码

body {
  background-color: lightblue;
}

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

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

CSS的特点：

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

什么是选择器：

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

什么是声明？

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

html 复制代码

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        /*  *（通配符）选择器选中所有元素 */
        *{
            color: #ff4100;
            width: 100px;
        }
         /*  选中#dis下所有的元素 */
        #dis *{
            color: blue;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="dis" class="dec">
    	<p>#dis下的p标签</p>
        <h2>#dis下的h2标签</h2>
        ... ...
    </div>
</body>

CSS 的引入方式

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

CSS是和html结合使用

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

头部引入

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css的引入方式</title>
		<!-- 头部引入 -->
		<style type="text/css">
			h1{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<h1>你好，世界！！！</h1>
	</body>
</html>

内联（标签内）引入

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css的引入方式</title>
	</head>
	<body>
		<!-- 标签内（内联） -->
		<p style="color: red;">熊大最帅！！！</p>
	</body>
</html>

外部引入

html 复制代码

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

@import 引入

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css的引入方式</title>
		<!-- 外部引入-方法1 -->
        <style type="text/css">
            @import url("./css/index.css");
            /*这里不予许在写任何样式*/
        </style> 
	</head>
	<body>
		<h1 class="ps">你好，世界！！！</h1>
		<ul>
			<li>你好，前端！！！</li>
		</ul>
	</body>
</html>

link引入

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css的引入方式</title>
		<!-- 外部引入-方法二 -->
		<link rel="stylesheet" type="text/css" href="./css/02cssyinru.css"/>
	</head>
	<body>
		<h1 class="ps">你好，世界！！！</h1>
		<ul>
			<li>你好，前端！！！</li>
		</ul>
	</body>
</html>

引入方式的优先级及语法

优先级（就近原理）

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

html 复制代码

<!-- 优先级演示 -->
<p class="ps" style="color: red;">最终的效果</p>

语法及优缺点

标签内（内联）

语法：<p style="属性:值;..."></p> 优点：优先级高缺点：冗余代码过多，不利于维护适用场景：个别特殊样式适用。

头部引入

语法：

html 复制代码

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

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

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

适用场景：单页面适用。

外部引入

语法：

html 复制代码

1、<style>
		@import url("外部css文件");
   </style>


2、<link rel="stylesheet" href="外部css文件">

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

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

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

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改变样式。

Web前端 （CSS篇）

CSS 实例

CSS 的引入方式

头部引入

内联（标签内）引入

外部引入

@import 引入

link引入

引入方式的优先级及语法

优先级（就近原理）

头部引入

外部引入

link与@import的区别

Web前端（CSS篇）