CSS相关知识总结

最新推荐文章于 2024-07-11 22:24:37 发布

Alicization~Iris

最新推荐文章于 2024-07-11 22:24:37 发布

阅读量63

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_44296442/article/details/119462079

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS 全称为 cascading style sheet 层叠样式表

选择器介绍

语法：

选择器 {
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
属性名4:属性值4;
}
当我们在使用选择器的时候，是通过选择器选择上相应的标签，给它们设置我们定义的样式。

选择器的分类：

标签选择器： p{}（标签选择器可以给所有选中的标签设置相应的样式）

		<style type="text/css">
			h2{
				font-size: 15px;
				color: green;
				background-color: lightslategray;
			}
		</style>

		<h2>示例文本</h2>

效果：
在这里插入图片描述

类选择器：.className{}（可以通过在标签上设置class属性为类名的方式来使用类选择器）

		<style type="text/css">
			.style1{
				color: red;
				font-size: 50px;
			}
		</style>

		<p class="style1">段落1</p>

效果：
在这里插入图片描述

id选择器：#id{}（多用于JavaScript中）

使用CSS设置样式的方式

内嵌样式 & 内部样式 & 外部样式

.color-yellow{
	color: yellow;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 3、把外部css文件引入进来 -->
		<link rel="stylesheet" type="text/css" href="css/my.css"/>
		<!-- 2、内部样式 -->
		<style type="text/css">
			.color-blue{
				color: blue;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<!-- 1、内嵌样式，但是不推荐这样写 -->
		<h1 style="color: red; text-decoration: underline;">123</h1>
		<!-- 2、内部样式，练习的时候为了简单，可以这样写 -->
		<h1 class="color-blue">456</h1>
		<!-- 3、外部样式 -->
		<h1 class="color-yellow">789</h1>
	</body>
</html>

注意：当使用外部 CSS 文件时，需要使用 link 标签把外部文件引入进来；更推荐使用外部样式，这样可以让 html 和 css 相关代码分离。

设置样式的思路

我们可以用“公共类”的思路，把类设置的尽可能“小”，让它们能够被更多的标签使用。因为一个标签可以具有多个类（使用空格隔开，可以设置多个类）

/* my.css */
.font-50px{
	font-size: 50px;
}
.decoration-underline{
	text-decoration: underline;
}
.color-red{
	color: red;
}

		<p class="color-red font-50px">段落1</p>
		<p class="color-red decoration-underline">段落2</p>
		<p class="font-50px decoration-underline">段落3</p>

效果：
在这里插入图片描述

CSS中常用的高级选择器

后代选择器（）

可以为所有通过前者选中标签中，通过后者选中的标签设置样式（也叫后代）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Cssl.html</title>
	<style type="text/css">
		/* 后代选择器 */
		.div1 p {
			color : red;
		}
		.div2 p {
			color : green;
		}
	</style>
</head>
<body>
	<div class="div1">
		<p>段落</p>
		<ul>
			<li><p>段落</p></li>
			<li><p>段落</p></li>
			<li><p>段落</p></li>
			<li><p>段落</p></li>
		</ul>
	</div>
	<hr />
	<div class="div2">
		<ul>
			<li><p>段落</p></li>
			<li><p>段落</p></li>
			<li><p>段落</p></li>
			<li><p>段落</p></li>
		</ul>
	</div>
</body>
</html>

效果：
在这里插入图片描述

并集选择器（,）

为通过前者和后者选中的标签都设置样式

<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>selector_并集选择器.html</title>
    <style type="text/css">
    	/* 并集选择器 */
    	h3,p{
    		color: red;
    	}
    </style>
  </head>
  
  <body>
    <h3>我是一个h3啊</h3>
	<h2>我是一个h2啊</h2>
	<h3>我是一个h3啊</h3>
	<p>我是一个段落啊</p>
	<p>我是一个段落啊</p>
  </body>
</html>

效果：
在这里插入图片描述

交集选择器（.）

通过前.后的方式来定义，为前者选中标签中，class属性为后者的标签设置样式

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Cssl.html</title>
	<style type="text/css">
	
		/* 交集选择器 */
		h3.color_yellow{
			color:yellow;
		}
	</style>
</head>
<body>
	<h3>我是一个h3啊</h3>
	<h3>我是一个h3啊</h3>
	<h3 class="color_yellow">我是一个h3啊</h3>
</body>
</html>

效果：
在这里插入图片描述

盒模型

盒模型中，主要的属性有五个：width（宽度）、height（高度）、padding（内边距）、margin（外边距）、border（边界）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				padding-left: 10px;
				padding-right: 20px;
				padding: 40px 50px 60px;
				padding-bottom: 30px;
				/* border: 粗细 线的形状 线的颜色; */
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果：
在这里插入图片描述

通过审查元素我们可以清楚的看到每一个属性代表的范围和意义，实际上，盒子具体的宽度 = width + leftpadding + rightpadding + leftborder + rightborder，高度同理

在这里插入图片描述
注意：内外边距可以给每一边单独设置，也可以像 “padding: 40px 50px 60px;” 以这样的形式来设置，这样设置时，按照上、右、下、左的顺时针顺序来给每一边进行设置，如果少了某一边（或者两边），则以对边的大小为准，如果只设置了一个值，则四边的值相同。

对border（边界）属性的具体介绍

border中的 width（宽度）、style（线型）和color（颜色）需要单独设置，同时也可以对四边中的每一边单独进行设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* div: 如果不设置宽度，默认的宽度是父容器的宽度 */
			div{
				width: 200px;
				height: 200px;
				/* 虚线：dashed 点：dotted 其中点设置的是它的直径*/
				border-top: 5px dashed cyan;
				border-right: 5px solid #98FB98;
				border-bottom: 5px dotted #8A2BE2;
				border-left: 5px solid #FF7F50;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果：
在这里插入图片描述

Alicization~Iris

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS相关知识总结

CSS 全称为 cascading style sheet 层叠样式表选择器介绍语法：选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;属性名4:属性值4;}当我们在使用选择器的时候，是通过选择器选择上相应的标签，给它们设置我们定义的样式。选择器的分类：标签选择器： p{}（标签选择器可以给所有选中的标签设置相应的样式） <style type="text/css"> h2{ font-size: 15px; color: gr
复制链接

扫一扫