CSS知识点概述（随笔）

最新推荐文章于 2023-05-24 20:04:06 发布

菜根花小宝贝

最新推荐文章于 2023-05-24 20:04:06 发布

阅读量249

点赞数

分类专栏：网页学习文章标签： CSS 选择器浮动盒子

本文链接：https://blog.csdn.net/qq_45493915/article/details/102640174

版权

网页学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS基础知识点（随笔）

CSS是层叠样式表，用来美化我们的HTML页面，并提高代码的复用性。

一、块标签

div标签，它默认独占一行。
span标签，内容显示在同一行

二、选择器

CSS选择器是帮助我们找到我们要修饰的标签或元素。
在一个style标签中，去编写css,最好style标签放在head标签中

（一）元素选择器

元素选择器是直接使用标签的名称。
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color: blue;
			}
		</style>
	</head>
	<body>
		<span>你长得真好看</span>
		<span>我觉得你说得对</span>
	</body>
</html>

（二）类选择器

使用：
.类的名称{
属性名称：属性的值；
属性名称2：属性的值；
}
样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <style>
        	.shucai{
        		color: green;
        	}
        	.shuiguo{
        		color: red;
        	}
        </style>
	</head>
	<body>
		<div class="shuiguo">香蕉</div>
		<div class="shucai">黄瓜</div>
		<div class="shuiguo">苹果</div>
		<div class="shucai">茄子</div>
		<div class="shuiguo">橘子</div>
	</body>
</html>

（三）ID选择器

ID在整个页面必须是唯一的
使用：
#ID名称{
属性名称：属性值；
属性名称2：属性值；
}
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		#div1{
			color: red;
		}
	</style>
	</head>
	<body>
		<div id="div1">JAVA</div>
		<div>C++</div>
		<div>python</div>
	</body>
</html>

CSS优先级
! important>行内样式>ID选择器>类选择器>元素选择器>通配符选择器
当同时被两个类修饰时，采用就近原则

（四）其它选择器

后代选择器：
爷爷和孙子间用逗号隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		/*<!--请将H1下面所有em元素的内容颜色改成红色-->
		 *<!--中间以空格隔开的是后代选择器-->
		 */
		/*子元素选择器
		 h1>em
		 */
		h1 em{
			color: red;
		}
		</style>
	</head>
	<body>
		<h1>
			this is a
			<em>儿子</em>
			<strong><em>孙子</em></strong>
			heading
		</h1>
	</body>
</html>

属性选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--修改包含title属性的a标签-->
		<style>
			/*a[title='aaa']{
				color: red;
			}*/
			a[href][title]{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<a href="#" title="aaa">张三</a>
		<a href="#">李四</a>
	</body>
</html>

伪类选择器：
用于超链接标签中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a:link{color: red;}
			a:visited{color: pink;}
			a:hover{color: yellow;}
			a:active{color: green;}
		</style>
	</head>
	<body>
		<a href="#">能吃真好</a>
	</body>
</html>

三、浮动

浮动的元素会脱离正常的文档流，在正常的文档流中部占空间
float属性：
left：左浮动
right：右浮动
清除浮动：

①在父类元素上设置overflow:hidden;
②在父元素上设置伪类元素，属性设置为content:"";display:block;clear:both
③使用空标签设置
clear属性：
both ：左右浮动都清除
left ：清除左浮动
right：清除右浮动
样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="float: left;width: 200px;height: 200px;background-color: red;"></div>
		<div style="clear: both;"></div>
		<div style="width: 200px;height: 200px;background-color: blue;"></div>
		<div style="width: 200px;height: 200px;background-color: green;"></div>	
	</body>
</html>

四、盒子模型

标准盒子模型
box-sizing:content-box;
content不包含其它成员
怪异盒子模型
box-sizing:border-box;
content包含border和padding
它是顺时针的，上右下左
padding：内边距，控制的是盒子内容的距离
margin：外边距，控制盒子与盒子之间的距离

五、定位

relative：相对定位，相对于自身位置进行定位
fixed：固定定位，相对于浏览器窗口
position：绝对定位，若祖上元素都没有定位，则相对于最外层，否则相对于祖上设置了position的元素定位
top:距离顶部的距离
left:距离左边的距离

六、常见的水平居中垂直居中实现方式

在这里插入图片描述

菜根花小宝贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS知识点概述（随笔）

CSS基础知识点（随笔）一、块标签二、选择器（一）元素选择器（二）类选择器（三）ID选择器（四）其它选择器三、浮动四、盒子模型五、绝对定位CSS是层叠样式表，用来美化我们的HTML页面，并提高代码的复用性。一、块标签div标签，它默认独占一行。span标签，内容显示在同一行二、选择器CSS选择器是帮助我们找到我们要修饰的标签或元素。在一个style标签中，去编写css,最好sty...
复制链接

扫一扫

专栏目录