CSS基础

最新推荐文章于 2024-04-10 10:24:09 发布

Suxiaomowang

最新推荐文章于 2024-04-10 10:24:09 发布

阅读量1.1k

点赞数 3

分类专栏： CSS

本文链接：https://blog.csdn.net/Suxiaomowang/article/details/119807631

版权

一. CSS是什么

CSS叫层叠样式表(Cascading Style Sheets)

它是用来定义html元素的显示样式用的

HTML标记是用来显示内容，至于这个内容长成什么样子HTML元素无法再进一步控制

CSS被用来进一步控制html元素的具体显示样子

有HTML的时候一定会有CSS对其内容进行修饰

1.1 如何在html文件中使用css

内联定义 (Inline Styles)

在html元素的开始标记中通过style属性来为当前的html元素设置样式

格式:<html标记 style="css属性名称1:属性值1;css属性名称2:属性值2"><html标记>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<h1 style="background-color: black;color: white;">内联定义</h1>
	</body>
</html>
缺点：当为当前元素所设置的样式比较丰富的时候，会使得这个html元素变得很长，以后

修改的时候不容易查找

1.2 内部样式块 (Embedding a Style Block)

在html网页的head元素中使用style标记，来设置对具体html元素的样式设置

实际上就是将定义在html元素中的style属性设置的样式，统一抽取到head标记中用style标记来统一管理

格式：
<style type="text/css">
css选择器{css属性名称1:属性值1;css属性名称2:属性值2}
</style>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    body{
				margin: 0;
				padding: 0;
			}
			h1{
				font-size: 30px;
				font-weight: 900;
				color: yellow;
				background-color: #f40;
			}
		</style>
	</head>
	<body>
		<h1>内部样式块</h1>
	</body>
</html>
当我们设置的样式很多的时候，会让html网页的头部显得很多

这是因为这个缺点，所以我们一般当需要设置的样式很少的时候使用

1.3 链入外部样式表文件 (Linking to a Style Sheet)

在html文件之外建立一个独立的样式表文件【.css】,在html文件中的head标记中通过link标记将独立的样式表文件连接进入html文件

具体步骤:
1.html文件之外建立一个独立的样式表文件【.css】
2.编辑具体样式设置
css选择器{css属性名称1:属性值1;css属性名称2:属性值2}
3.在当前的html文件中的head标记中通过link标记将样式表文件【.css】链接进入
<link rel="stylesheet" href="独立样式表文件的路径" />
<link rel="stylesheet" type="text/css" href="xianxi1-1.css"/>

二. CSS的语法格式

平时我们在html文件中使用CSS,用的最多的方式是内部样式块和链入样式表文件的方式

这两种css的操作语法都是一样的

2.1 内部样式块
<style type="text/css">
		    body{
				margin: 0;
				padding: 0;
			}
			h1{
				font-size: 16px;
				font-weight: bold;
				color: black;
				background-color: #f40;
			}
</style>

2.2链入样式表文件
<link rel="stylesheet" type="text/css" href="xianxi1-1.css"/>
前者适合插入css文本少的情况，后者适合css文本多的情况。

三. CSS注释

标注解释说明代码的含义

html的注释

css的注释/* 开始 */结束，中间的就是注释内容

/* 注释内容 */

CSS的注释不能用来注释html元素，只能作用在css上

往往都出现早具体样式属性设置的后面

可以一次性注释多行内容,但是不能嵌套

注释的内容不会被执行，可以用来调试程序

3.1 body 中元素注释

3.2 head 中元素注释
/* body{
			margin: 0;
			padding: 0;
		} */
以上元素快捷注释方式为选择注释文本后，按"ctrl"键+"?"键可以实现

四. css选择器

css选择器的作用--得到需要被控制的html元素

常用的css选择器

1.元素选择器

2.id选择器

3.class 选择器[类选择器]

4.包含选择器

5.子元素选择器

6.属性选择器

4.1 元素选择器
div{
			margin: 0;
			padding: 0;
		}

4.2 id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#span{
			margin: 0;
			padding: 0;
		}
		</style>
	</head>
	<body>
		<em id="span"></em>
	</body>
</html>

4.3 class 选择器[类选择器]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.span{
			margin: 0;
			padding: 0;
		}
		</style>
	</head>
	<body>
		<em class="span"></em>
	</body>
</html>

4.4 包含选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width: 500px;
			height: 300px;
			background-color: red;
		}
		div p{
			width: 300px;
			height: 150px;
			background-color: yellow;
		}
		</style&g

最低0.47元/天解锁文章

Suxiaomowang

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

一. CSS是什么CSS叫层叠样式表(CascadingStyleSheets)它是用来定义html元素的显示样式用的HTML标记是用来显示内容，至于这个内容长成什么样子HTML元素无法再进一步控制CSS被用来进一步控制html元素的具体显示样子有HTML的时候一定会有CSS对其内容进行修饰1.1 如何在html文件中使用css内联定义 (Inline Styles)在html元素的开始标记中通过style属性来为当前的html元素设置样式格式:<htm...
复制链接

扫一扫