CSS简介

什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

为什么使用CSS

实现内容与样式的分离，便于团队开发

样式复用，便于网站的后期维护

页面的精确控制，让页面更精美

CSS作用

页面外观美化

布局和定位

基本语法

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

CSS的引用方式

CSS有3中引用方式：内部样式、行内样式、外部样式

内部样式

在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style >
        .box{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

内部样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p style="background-color: red;">
        Hello World
    </p>
</body>
</html>

外部样式

使用单独的 .CSS 文件定义，然后在页面中使用link标签或@import指令引入

使用 link标签链接外部样式文件

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

@import 指令导入外部样式文件

<style>
	@import "CSS样式文件路径";
	@import url(CSS样式文件路径);
</style>

三种选择器

标签选择器
类选择器
id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 标签选择器 */
			div{
				color: bisque;
			}
			/* 类选择器 */
			.div-cls{
				color: aqua;
			}
			.p-cls{
				color: yellow;
			}
			/* id选择器 */
			#p-id{
				color: green;
			}
			
		</style>
	</head>
	<body>
		<div class="div-cls">我是div1，我用的是class选择器</div>
		<div class="p-cls" id="p-id">我是div2，我用的是class选择器和id选择器</div>
		<div class="div-cls">我是div3，我用的是class选择器</div>
		<p class="p-cls">我是p，我用的是class选择器</p>
		<h4 class="h4-cls">我是h4，我用的是class选择器</h4>
	</body>
</html>