CSS基础知识小结

最新推荐文章于 2024-08-31 21:18:22 发布

老桃子一号

最新推荐文章于 2024-08-31 21:18:22 发布

阅读量170

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_45108095/article/details/105065723

版权

# CSS真的超级有意思

我搜的百度百科是这样解释的

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

其实吧，CSS就是一个专门搞花里胡哨的工具，能对各个各种元素进行修饰
本文的撰写是基于对B站’ 表严肃 '的教学视频学习

链接CSS文件的方式

在html文件中链接CSS文件，在head标签中添加语句<link rel="stylesheet" href="文件路径">即可
在CSS文件中链接CSS文件，可能有其他做法，但这只说明一种简单的@import "文件路径";即可

CSS有很多种选择器

选择器也是有优先级之分的，!important > style内联属性 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器

类选择器

这个嘛就是在标签里面加上class = ' '，示例：

</!DOCTYPE html>
	<html>
		<head>
	        <meta charset="UTF-8">
	        <title>老桃子的测试</title>
	        <link rel="stylesheet" href="taozi.css">
		</head>
		<body>
			<div class="red">老桃子是个靓仔</div>
			<div class="yellow">老桃子天下第一帅</div>
			<div class="blue">老桃子全宇宙第一帅</div>
			<div class="green blod">老桃子李白贼强</div><!--指定多个类的时候用空格分开-->
		</body>
	</html>

.red {
	color: red;
	font-size: 100%;
}
.yellow {
	color: yellow;
	font-size: 200%;
}
.blue {
	color: blue;
	font-size: 300%;
}
.green.blod {/*当同时满足两个类的时候才会触发*/
	color: green;
	font-size: 400%;
	text-decoration: underline;
}

在这里插入图片描述

ID选择器

这个呀就是在标签里面加上id = ' '，这个的话一般用于非常非常特殊的，就是一对一的关系的时候，示例：

</!DOCTYPE html>
	<html>
		<head>
	        <meta charset="UTF-8">
	        <title>老桃子的测试</title>
	        <link rel="stylesheet" href="taozi.css">
		</head>
		<body>
			<div id="red">老桃子是个靓仔</div> 
			<div class="yellow">老桃子天下第一帅</div>
			<div class="blue">老桃子全宇宙第一帅</div>
			<div class="green blod">老桃子李白贼强</div><!-- 指定多个类的时候用空格分开 -->
		</body>
	</html>

#red {
	color: red;
	font-size: 100%;
}

在这里插入图片描述

属性选择器

这个的话是在标签面加上属性名 = ' 属性值'来定义的，示例：

</!DOCTYPE html>
	<html>
		<head>
	        <meta charset="UTF-8">
	        <title>老桃子的测试</title>
	        <link rel="stylesheet" href="taozi.css">
		</head>
		<body>
			<div test = "first">云想衣裳花想容</div>
			<div test = "second">春风拂槛露华浓</div>
			<div test = "third">若非群玉山头见</div>
			<a test = "forth">会向瑶台月下逢</a>
		</body>
	</html>

[test] {
	color: red;
}
[test = "second"] {/*当属性值为second才会生效*/
	font-size: 200%;
	/*如果在等号面前有一*表示匹配包含该字符的所有属性
	如果在等号面前有一^表示匹配以该字符开头的所有属性
	如果在等号面前有一$表示匹配以该字符结尾的所有属性*/
}
a[test] {/*选定的是在a标签下的test属性*/
	background: green;
}

在这里插入图片描述

后代选择器

这个适用于嵌套的场景，就是一层套一层的时候，会把比自己小包括自己所影响，示例：

</!DOCTYPE html>
	<html>
		<head>
	        <meta charset="UTF-8">
	        <title>老桃子的测试</title>
	        <link rel="stylesheet" href="taozi.css">
		</head>
		<body>
			<div class = "first">云想衣裳花想容
				<div class = "second">春风拂槛露华浓
					<div class = "third">若非群玉山头见
						<div class = "forth">会向瑶台月下逢</div>
					</div>
				</div>
			</div>
		</body>
	</html>

*.first .second{
	color: red;/*嵌套定位，以空格分开，选择所有用星号*/
}

在这里插入图片描述

相邻选择器

这个的话用于同级的时候，示例：

</!DOCTYPE html>
	<html>
		<head>
	        <meta charset="UTF-8">
	        <title>老桃子的测试</title>
	        <link rel="stylesheet" href="taozi.css">
		</head>
		<body>
			<div class = "first">云想衣裳花想容
				<div class = "second">春风拂槛露华浓
					<div class = "third">若非群玉山头见
						<div class = "forth">会向瑶台月下逢</div>
					</div>
					<div>大唐</div>
					<div>盛世</div>
				</div>
				<div>诗仙</div>
				<div>李白</div>
			</div>
		</body>
	</html>

.second + div{
	color: red;/*如果是+则选中同级的下一个*/
}
.third ~ div{
	color: yellow;/*如果为~则把所有同级的都选中*/
}

在这里插入图片描述

伪类选择器

这个的话是基于标签的，示例：

</!DOCTYPE html>
	<html>
		<head>
	        <meta charset="UTF-8">
	        <title>老桃子的测试</title>
	        <link rel="stylesheet" href="taozi.css">
	        <button title = "嘿嘿嘿">Turn to baidu.com</button>
	        <a href = "http://baidu.com" title = "呜啦啦啦啦">Turn to baidu.com</a>
	        <input>
		</head>
		<body>
		</body>
	</html>

a:link {/*伪类选择器，访问前*/
	background: black;
}
a:visited {/*伪类选择器，访问后*/
	background: yellow;
}
button:hover {/*伪类选择器，悬停*/
	background: red;
}
button:active {/*伪类选择器，摁下时*/
	background: black;
}
input:focus {/*伪类选择器，摁下后*/
	outline-color: yellow;
	background: green;
}

伪元素选择器

这个也是基于标签的，示例：

</!DOCTYPE html>
	<html>
		<head>
	        <meta charset="UTF-8">
	        <title>老桃子的测试</title>
	        <link rel="stylesheet" href="taozi.css">
		</head>
		<body>
			<div>
	            <p>云想衣裳花想容</p>
	            <p>春风拂槛露华浓</p>
	            <p>若非群玉山头见</p>
	            <p>会向瑶台月下逢</p>
        	</div>
        	<q>abcdefghijklmnopqrstuvwxyz</q>
		</body>
	</html>

div p:first-child {/*伪元素选择器，定义第一个*/
	color: red;
}
div p:last-child {/*伪元素选择器，定义最后一个*/
	color: yellow;
}
div p:nth-child(2) {/*伪元素选择器，定义参数中的*/
	color: blue;
}
q:after {/*伪元素选择器，在末尾添加*/
	content: "-----END-----";
}
q:before {/*伪元素选择器，在首部添加*/
	content: "-----BEGIN-----";	
}

在这里插入图片描述

block和inline

这个像是个容器的样式，示例：

</!DOCTYPE html>
	<html>
		<head>
	        <meta charset="UTF-8">
	        <title>老桃子的测试</title>
	        <link rel="stylesheet" href="taozi.css">
		</head>
		<body>
			<div>
	            <div class="block">云想衣裳花想容</div>
	            <div class="inline">春风拂槛露华浓</div>
	            <div class="inline-block">若非群玉山头见</div>
	            <div class="inline-block">会向瑶台月下逢</div>
        	</div>
		</body>
	</html>

/*若将display赋值为none则隐藏*/
.block {/*块级元素*/
	display: block;/*就是要占一行*/
	background: grey;
}
.inline {/*只对左右造成影响*/
	display: inline;
	background: grey;
}
.inline-block {/*对左右上下都能造成影响*/
	display: inline-block;
	background: grey;
	padding: 50px;
}

在这里插入图片描述

每一个元素的容器

在这里插入图片描述

老桃子一号

关注

0
点赞
踩
0

收藏

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

CSS真的超级有意思我搜的百度百科是这样解释的层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有...
复制链接

扫一扫