Night小课堂05 CSS入门

最新推荐文章于 2024-06-16 20:55:56 发布

Night-Zzz

最新推荐文章于 2024-06-16 20:55:56 发布

阅读量52

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/NoNight_Zzz/article/details/130643306

版权

CSS是什么？

定义：级联样式表（Cascading Style Sheet）

作用：修饰网页（锦上添花）

修饰效果的种类：字体大小、颜色、高度、宽度等

应用：通常用于对网页的效果进行美化的工作

CSS发展史：1996年CSS1.0诞生 2010年CSS3.0推出

CSS的优势：

（1）内容和表现的分离

（2）网页的表现统一，容易修改

（3）丰富的样式，使得页面布局更加灵活

（4）减少网页的代码量，增加网页的浏览速度，节省网络带宽

（5）运用独立于页面的CSS

CSS语法：

选择器{

属性名1：属性值；

}

特点1：选择器包含基本选择器和高级选择器，用来获取html元素

特点2：{ }代表语法体，用来存放CSS代码

特点3：属性名一般是CSS中的语法

特点4：属性值一般是属性的内容或是范围

特点5：基于W3C标准；（分号）不建议省略

style标签：

特点1：使CSS的代码在网页中生效

特点2：type=“text/css”代表告诉浏览器当前style标签中的代码使css代码（CSS生效）

CSS的三种样式

1.行内样式 ：

特点：在HTML标签行中引入style属性，并对属性名设置属性值，或者对多个属性名设置多个属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内样式 </title>
	</head>
	<body>
		<p style="background: blue; color: red;">苹果</p>
	</body>
</html>

2.内部样式表 ：

特点：在head标签中引入<style>标签，type=“text/css”代表告诉浏览器style标签中的是css代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部样式表</title>
		<style type="text/css">
			p{
				background: blue;
				color: red;
			}
		</style>
	</head>
	<body>
		<p>123456</p>
		<p>123456</p>
		<p>123456</p>
		<p>123456</p>
		<p>123456</p>
	</body>
</html>

3.外部样式表：

特点1：利用link标签

特点2：rel=“stylesheet”代表使用外部样式表

特点3：type=“text/css”告诉浏览器文件中代码是css代码

特点4：href=“css/common.css”代表当前html页面引入的是css路径下的common.css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
	</head>
	<body>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
		<p>123</p>
	</body>
</html>

外部样式表需要注意，需要额外建个以.css的文档把css写进文档里

样式优先级：

（1）行内样式>内部样式表>外部样式表

（2）就近原则（离HTML越近，生效的可能性越大）

基本选择器

1.标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style type="text/css">
			p{
				background: red;
			}
			h1{
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>数字</h1>
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</body>
</html>

2.类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style type="text/css">
			.a{
				background: pink;
			}
			
		</style>
	</head>
	<body>
		<p class="a">1</p>
		<p>2</p>
		<p class="a">3</p>
	</body>
</html>

3.ID选择器

特点1：在html中定义id属性

特点2：在css中使用#id属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<style type="text/css">
			.a{
				background: pink;
			}
			#b,#b2{
				color: red;
			}
		</style>
	</head>
	<body>
		<p id="b" class="a">1</p>
		<p>2</p>
		<p class="a">3</p>
		<p class="a">4</p>
		<p id="b2">5</p>
	</body>
</html>

下期预告：下一篇文章将介绍CSS高级选择器等相关知识

本人才疏学浅，文中如有出现错误请多多谅解