css总结

最新推荐文章于 2024-09-26 19:50:45 发布

让火车在天上飞

最新推荐文章于 2024-09-26 19:50:45 发布

阅读量41

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/huochefei/article/details/119549580

版权

1.复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

(1)、交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧：交集选择器是并且的意思。即...又...的意思

比如：p.one选择的是类名为.one的段落标签。

(2)、并集选择器

并集选择器（CSS选择器分组）是各个选择器通过<strong style="color:#f00">逗号</strong>连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧：并集选择器是和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

比如：.one, p, #test{color: #F00;}表示.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

(3)、后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

(4)、子代选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个进行连接，注意，符号左右两侧各保留一个空格。

2.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

为了和我们刚才学的类选择器相区别，类选择器是一个点，比如: .demo{}而我们的伪类用2个点就是冒号。比如:link{}

(1)、链接伪类选择器

:link /* 未访问的链接 */

:hover /* 鼠标移动到链接上 */

:active /* 选定的链接 */

:visited /* 已访问的链接 */

注意写的时候，他们的顺序尽量不要颠倒，按照lhav的顺序。

1.浮动和清除
1.1 浮动属性
通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，

如果一行显示不下，则会换行显示

常用取值：

left左浮动
right右浮动
none不浮动，默认值
设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#container{
			/* width:800px; */
			border:1px solid #000000;
		}
		.div1,.div2,.div3,.div4{
			width:100px;
			height:50px;
		}
		.div1{
			background:red;
			float:left;
		}
		.div2{
			background:blue;
			float:left;
		}
		.div3{
			background:green;
			float:left;
		}
		.div4{
			background:cyan;
			float:left;
		}
		.clr{
			clear:left;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		<div class="div3">div3</div>
		<div class="div4">div4</div>
		<div class="clr"></div>
	</div>
	aaa
</body>
</html>

1.2 清除属性
通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素

常用取值：

left左侧不允许出现浮动元素
right右侧不允许出现浮动元素
both两侧不允许出现浮动元素
none允许两侧出现浮动元素，默值
结论：

对于非浮动元素，两边都可以设置清除（常用）
对于浮动元素，向哪边浮动，就只能设置哪边的清除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			margin:0;
			padding:0;
		}
		#container{
			width:660px;
			margin:0 auto;
			border:2px solid #0f0;
		}
		.div1,.div2,.div3,.div4{
			width:200px;
			height:180px;
			float:left;
			margin:5px;
			border:5px outset #ff7300;
			padding:10px;
		}
		#container img{
			width:100%;
			height:100%;
		}
		.clr{
			clear:left;
		}
	</style>
</head>
<body>
	<div id="container">
	<div class="div1"><img src="../images/adv1.jpg" alt=""></div>
	<div class="div2"><img src="../images/adv2.jpg" alt=""></div>
	<div class="div3"><img src="../images/adv3.jpg" alt=""></div>
	<div class="div4"><img src="../images/adv4.jpg" alt=""></div>
	<div class="clr"></div>
	</div>
	<p>welcome to css</p>
</body>
</html>

2.元素的显示和隐藏
2.1 display
通过display属性设置元素是否显示，以及是否独占一行

常用取值：

取值   含义   说明
none   不显示
inline   显示为内联元素，行级元素的默认值   将块级元素变为行级元素，不再独占一行
block   显示为块级元素，块级元素的默认值   将行级元素变为块级元素，独占一行
inline-block   显示为内联元素，但是可以设置宽和高   在inline基础上允许设置宽度和高度
注意：

行级元素是无法设置宽度和高度的，可以为行级元素设置 display:inline-block ,然后就可以设置宽和高了

2.2 visibility
也可以通过visibility属性设置元素的显示和隐藏

常用属性：

取值   含义   说明
visible   显示
hidden   隐藏
2.3 区别
display隐藏时不再占据页面中的空间，后面的元素会占用其位置

visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.div1{
			width: 100px;
			height: 100px;
			background:blue;
			display:inline;
		}
		span{
			width: 100px;
			height: 50px;
			background:yellow;
			display:inline-block;
		}
		i{
			display:block;
			width: 100px;
			height: 50px;
			background:red;
		}
		p{
			width: 50px;
			height: 50px;
			background:red;
		}
		.p1{
			visibility:hidden;
		}
		.login{
			display:inline-block;
			width: 100px;
			text-decoration:none;
			background:rgba(255, 0, 0, 0.7);
			color:#fff;
			padding:10px;
			text-align:center;
			border-radius:10px;
		}
		.login:hover{
			background:rgba(255, 0, 0, 0.5);
		}
	</style>
</head>
<body>
	<div class="div1">div1</div>
	<span>span1</span>
	<i>呵呵</i>
	<hr>
	<p class="p1">hello</p>
	<p class="p2">world</p>
	<hr>
	<a href="javascript:alert('欢迎光临')" class="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</a>
</body>
</html>