CSS知识整理

最新推荐文章于 2023-01-03 16:17:45 发布

VIP文章 Zhu Xiaopi

最新推荐文章于 2023-01-03 16:17:45 发布

阅读量762

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_46063425/article/details/118226175

版权

CSS知识整理

哈哈终于整理好了css常用到的知识笔记，想要参看我整理的HTML笔记点击HTML笔记

一、CSS介绍

1、css是什么？

css全称Cascading Style Sheets 翻译过来叫层叠样式

作用：设置网页的文字（大小、颜色、字体风格、对齐方式等）图片排版等，简单点说就是给网页化妆感知css

先来一个动图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HNlqvIDP-1624615631587)(C:\Users\cian\Desktop\e9rc4-0iozc.gif)]$

这是该gif涉及到的代码（详细的知识点请往后看）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			background-color: red;
			width: 100px;
			height: 100px;
			transition: all 2s ease;
		}
		div:hover{
			transform: rotate(720deg) scale(0.2,0.2);
			background-color: yellow;
		}
	</style>
	<body>
		<div>
			一个框
		</div>
	</body>
</html>

2、构建style标签

这个标签可以放在页面的任何地方，只是我们习惯放在头部
选择元素
大括号
属性和值
每一个属性结束都是用分号结束

<style type="text/css">
		div{
			background-color: red;
			width: 100px;
			height: 100px;
			transition: all 2s ease;
		}
	</style>

3、字体属性

3.1、font-size（默认大小是16px）

取值方式：数字+像素单位px（像素就是一个长度单位）

像素？==>是指构成图片的小色点，分辨率（单位DPI)是指每英寸上的像素数量，乐意查看作是这些小色点的分布密度；像素相同是，分辨率越高则像素密度越大，实际打印尺寸越小，图像越清晰

1英寸=2.54厘米

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			div{
				font-size: 36px;
			}
			span{
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<div>
			这是一个div
		</div>
		<span>
			这是span
		</span>
	</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a2uu44k6-1624615631588)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210622170454830.png)]$

3.2、font-weight（默认为500）

可以用数字表示粗细，100~以上字体逐渐加粗
也可以用单词 normal (普通) bold(加粗)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			div{
				font-weight: 100;
			}
			span{
				font-weight: unset;
			}
		</style>
	</head>
	<body>
		<div>
			这是一个div
		</div>
		<span>
			这是span
		</span>
	</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2C8aMYuF-1624615631590)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210622170841556.png)]$

3.3、font-style（字体风格）

italic 斜体 normal 正常


		<style type="text/css">
			div{
				font-weight: 100;
				font-style: italic;
			}
		</style>
		
		<div>
			这是一个div
		</div>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OsB0Er86-1624615631592)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210622171803154.png)]$

3.4、font-fanily（设置字体，默认是）

属性值有宋体，微软雅黑等等

字体可以加多个，以防客户端没有对应的字体样式

		<style type="text/css">
			div{
				font-weight: 700;
				font-family:'华文行楷','宋体';
			}
		</style>
		
		<div>
			这是一个div
		</div>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YP20shMJ-1624615631594)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210622172419574.png)]$

3.5、webding

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IXKocsZX-1624615631595)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210622173153914.png)]$

4、文本属性

4.1、text-decoration

underline 下划线 line-through 删除线（惯串线） none没有修饰线

overline 上划线

		<style type="text/css">
			div{
				text-decoration: underline;
			}
		<style>
		<div>
			12345ABCD
		</div>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NaoV9DLS-1624615631596)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210622173449989.png)]$

4.2、文本转换 text-transform

capitalize 首字母大写 uppercase 字母全部大写 lowercase将字母都转换成小写

<style type="text/css">
			div{
				text-transform: uppercase;
			}
		</style>
		<div>
			aannananan
		</div>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IzBJ4S4e-1624615631597)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210622174402300.png)]$

4.3、text-align 文本对齐方式

text-align:left;

4.4、text-indent文本缩进

text-indent：2em;//em 表示一个字符的单位

5、文字颜色 color

6、背景颜色background-color

二、css中的基本选择器

1、标签选择元素，标签（css样式）

p,div,span…

2、id选择器

#id名{}

<p id='p1'>pppp</p>
<style>
	#p1{
	color:#11ffee;
	}
</style>

3、class选择器

.class名{}

<p class='p1'>pppp</p>
<style>
	.p1{
	color:#11ffee;
	}
</style>

4、后代选择器

<div>
    <p class='p1'>pppp</p>
    <p class='p2'>pppp</p>
</div>
<style>
	div>p1{
	color:#11ffee;
	}
	div .p2{
	color:red;
	}
</style>

6、子代选择器(所有后代，包括孙子)

<div>
    <p class='p1'>pppp</p>
    <p class='p2'>pppp</p>
</div>
<style>
	div p1{
	color:#11ffee;
	}
	div .p2{
	color:red;
	}
</style>

7、多选择器（div,p,span{})


    <p class='p1'>pppp</p>
    <p class='p2'>pppp</p>
    <span>span</span>
    <div>div</div>

<style>
	div,p,span{
	color:#11ffee;
	}
</style>

8、复合选择器

<div>
    <p class='p1 p2'>pppp</p>
    <p class='p2'>pppp</p>
</div>
<style>
	.p2.p1{
	color:#11ffee;
	}
	
</style>

8、google案例

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evuzB1dT-1624615631598)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210622181250128.png)]$

三、其他选择器

1、通配选择器 *

*表示所有标签


    <p class='p1'>pppp</p>
    <p class='p2'>pppp</p>
    <span>span</span>
    <div>div</div>

<style>
	*{
	color:#11ffee;
	}
</style>

2、伪类选择器

a:link 正常链接时候的状态

最低0.47元/天解锁文章

Zhu Xiaopi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS知识整理

CSS知识整理哈哈终于整理好了css常用到的知识笔记，想要参看我整理的HTML笔记点击一、CSS介绍1、css是什么？css全称Cascading Style Sheets 翻译过来叫层叠样式作用：设置网页的文字（大小、颜色、字体风格、对齐方式等）图片排版等，简单点说就是给网页化妆感知css先来一个动图这是该gif涉及到的代码（详细的知识点请往后看）<!DOCTYPE html><html> <head> <meta charset="u
复制链接

扫一扫