认识CSS语法

news2024/12/27 13:08:51

CSS（网页美容）

重点：选择器、盒子模型、浮动、定位、动画，伸缩布局

Css的作用：

美化网页：CSS控制标签的样式
网页布局：CSS控制标签的位置
概念：层叠样式表（级联样式表）

书写方法

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

内联：

<body>
	<p style="font: 15px; color: red">这是一段文字。</p>
</body>

内嵌（内部）：
就是把CSS代码写在head标签中

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p{
		color:green
		}
	</style>
</head>
<body>
</body>
</html>

外嵌：自己新建一个单独的CSS文件，在CSS文件中不要谢style标签，直接写CSS代码就OK了
首先自己建立一个名字为CSS的文件夹，里面存放的就是CSS样式文件

在这里插入图片描述

验证优先级：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--下面p为标签选择器-->
	<style type="text/css">
		p{
			color: red;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="CSS/a.css">
</head>
<body>
	<p style="font-size: 15px; color:yellow">这是一段文字。</p>
</body>
</html>

结果：
在这里插入图片描述
优先级：内联>内嵌>外部
优先级：内联>内嵌>外部
优先级：内联>内嵌>外部。重要事情说三遍。

CSS语法

选择器{属性：值；。。。。}
例如:p{font:15px;color:red;}

选择器分类
一、基础选择器
1. 标签选择器
Html的标签名可以设置为样式的标签

p{
			color: red;
		}

2. 类选择器
. 自定义类名：{class属性：值；}

一个类样式可以被多个标签同时调用

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--下面p为标签选择器-->
	<style type="text/css">
	/*类样式的定义*/
		.test{
			color: red;
			font-size: 30px;
		}
	</style>
	
</head>
<body>
	<!--类样式调用-->
	<p class="test">Hello</p>
	<p class="test">Hello2</p>
</body>
</html>

在这里插入图片描述
特点：多个lclass属性的值可以重复，就像人一样，名字可能会相同的
一个标签可以同时调用多个类样式

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	/*类样式的定义*/
		.test{
			font-size:55px;
		}
		.test1{
			color: red;
		}
	</style>	
</head>
<body>
	<!--类样式调用-->
	<p class="test test1">Hello</p>	
</body>
</html>

3. ID选择器
#id选择器{属性：值}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--下面p为标签选择器-->
	<style type="text/css">
	/*类样式的定义*/
		#test{
			color: red;
			font-size: 30px;
		}
	</style>
	
</head>
<body>
	<!--类样式调用-->
	<p id="test">Hello</p>
</body>
</html>

特点：ID的值是唯一的，不能重复，就跟人的身份证一样都是唯一的。

4. 通配符选择器
语法：
* {属性: 值;…}
特点：
将页面中所有的标签都选中

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	*{
		height:200px;
		width: 200px;
		border: 1px solid red;	
	}
	</style>	
</head>
<body>
	<div class="c1"></div>
	<div class="c2"></div>
	<div class="c3"></div>
</body>
</html>

规范：不能使用特殊字符或者以特殊字符开头（$,#,@,%…）建议不推荐使用标签名作为类名

补充：px像素
em:一个文字的大小
颜色的表示方式
red,green…
rgb(三原色)
使用十六进制标表示颜色(#000-fff)
文本修饰
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	p{
text-shadow: 0px 0px 10px green;
	}
</style>
	
</head>
<body>
	<p>
		文本修饰
	</p>
</body>
</html>

第一个值可以设置正数或者负数，设置文字阴影在水平方向的一个偏移量
第二个值可以设置正数或者负数，设置文字阴影在垂直方向的偏移量
第三个值代表的是文字阴影的模糊度，不能设置负数
第四个值代表文字阴影的颜色。
同时可以设置多个阴影，用逗号隔开

font属性介绍

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	p{
font-family: "宋体";
font-size: 20px;
font-weight:bold;
font-style:normal;
line-height: 20px;
	}
</style>
	
</head>
<body>
	<p>
		aaaaaaaaaaaaaaaaaaaaaaaaaaa
	</p>
</body>
</html>

font-size:设置文字的大小
font-family:设置文字字体（宋体，黑体，微软雅黑等等）
font-family是可以设置若干个字体的。一本使用常用字体设置
font-weight:设置字体是否加粗
值为normal或 bold
font-style:文字是否斜体
值：noema或 italic
line-height:文字行高，改变文字之间的上下间距
font属性联写，也算代码简化的一种方式

<style type="text/css">
	p{
		font:italic 700 12px/24px "宋体";
		 }	
</style>

p{font-style font-weight font-size/line-height font-family}
注意：
1、顺序不能改变；
2、简写为一行的时候，font-size和line-height直接一样要用斜杠/，不能分开写；
3、没有赋值的属性，会自动使用默认值；
4.必须设置font-size 和font-family,font-size设置在font-family之前

二、复合选择器（交集选择器）
1. 后代选择器

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div p{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	font:italic 700 20px/20px "宋体";
	}
}
</style>
	
</head>
<body>
<div>
	<p>A</p>
	<p>B</p>
</div>
</body>
</html>

注意：后代标签其之间的结果后关系必须是嵌套关系
后代选择器中只能选中所有的后代元素（直接子元素和间接子元素）
后代选择器中，选择器与选择器之间必须使用空格隔开
2. 子代选择器
选择器>选择器 {属性: 值；}

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div>span{
	color: red;
}

</style>
	
</head>
<body>
<div>
	<span>a</span>
</div>
</body>
</html>

注意;
子代选择器只能选中直接子元素
子代选择器不能选中父元素
子代选择器标签的结构必须是嵌套结构
3. 并集选择器

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div,p,li,span{
	color: green;
}

</style>
</head>
<body>
<div>
	<div></div>
	<p></p>
	<li></li>
	<span></span>
</div>
</body>
</html>

4. 属性选择器

标签[标签属性]{样式}

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a[href]{
	color: red;
}

</style>
</head>
<body>
<div>
	<a href="www.baidu.com">百度</a>
</div>
</body>
</html>

5. 结构伪类选择器
使用方法：选择器：伪元素{样式}
:first-child {属性: 值；} 选中父元素中的第一个子元素
:last-child {属性: 值;} 选中父元素中最后一个子元素
:nth-child(n) {属性: 值; } 选中父元素中第n个子元素
n可以设置一个关键字 odd(奇数个数) | even（偶数个数）
n可以是一个表达式 an+b a和b可以设置正数和负数
:nth-last-child(n){属性: 值;} 选中倒数第n个子元素

6. 标签制定式选择器
我觉得叫标签类选择器好。直接
标签名.类名{属性：值；}

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	p.a1{
		font-size: 20px;
		color: red;
	}
	p.b1{
		font-size: 30px;
		color: green;
	}
</style>
	
</head>
<body>
	<p class="a1">
		aaaaaaaaaa
	</p>
	<p class="b1">
		bbbbbbbbbbbbbbb
	</p>
</body>
</html>