CSS常见 属性 框架 及常用选择器

最新推荐文章于 2024-08-24 08:03:00 发布
原创 最新推荐文章于 2024-08-24 08:03:00 发布 · 428 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 CSS:CSS 指层叠样式表（Cascading Style Sheets），层叠的意思是：多重样式定义被层叠为一
 层叠样式表
        作用 : 就是设置我们的HTML标签的展示样式，因为HTML自带的属性，比较匮乏，不能满足我们对样式的要求，
		另一方面，我们想要解耦，HTML标签，既要定义网页元素，又要展示样式，但是HTML标签提供的属性，比较少，很多时候不能满足我们的要求
		CSS的出现了，提供了，非常丰富的样式，能够满足我们的要求，那么以后，HTML标签只需要定义网页元素即可，至于这个标签展示成什么样子，交给CSS来做 
	     那CSS怎么跟HTML标签配合使用呢?有三种方式
		 方式1：内联样式：不推荐使用，因为代码复用度太差，代码书写凌乱
		 每个HTML标签 ，都有一个style属性，style属性值，就可以书写CSS代码，那么书写的CSS代码就会对这个标签起作用，一次只能控制这个一个标签
		 方式2：内部样式：推荐使用，可以提高CSS代码的复用性 
		       要是使用内部样式：要学一个概念叫做选择器
		 方式3：外部样式：复用度更高，开发首选
		 
		
		 CSS代码的语法风格：属性名：属性值；属性名2：值2
		 -->
		 
		 <div id="" style="height: 100px;width: 100px;background: red;">
		 	
		 </div>
		  <div id="" style="height: 100px;width: 100px;background: red;margin-top: 10px;">
		 	
		 </div>
		 
		 <div id="" style="height: 300px;width: 300px;background:yellow;">
		 	
		 </div>
	
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 div 标签是一个纯净的块标签，所谓的纯净，就是这个标签，不带有任何样式（没有宽高，没有背景等）
		 块标签：这个标签会默认占据一行
		 行标签：不会占据一行
		 -->
		 <b>加粗</b> <b>加粗2</b> <h1>标题标签</h1><b>加粗2</b>
		 <ul>
		 	<li>列表标签</li>
		 </ul>
		 <ol>
		 	<li>asdfasfd</li>
		 </ol>
		 
		 <table border="1" cellspacing="" cellpadding="" width="200px" height="200px">
		 	<tr><th>Header</th></tr>
		 	<tr><td>Data</td></tr>
		 </table>
		 <font size="" color="">asdfasdfasd</font>
		 
		 
		<div id="" style="font-size: 100mm;color: aqua;">
			abc
		</div>
		<a href="#">asdfasdf</a><a href="#">asdfasdf</a>
	</body>
</html>
字体的css属性
font-size:绝对尺寸/关键字/相对尺寸/百分比**

关键字:xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
取值：

normal  ---- 正常显示

bold ----粗体（数字700粗细值）

bolder ---加粗

lighter ---细体（比正常字体稍微细一点）

number  ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 	span{
				font:italic 900 20mm 楷体;
			} */
			 span{
				color: red;
				font-size: 20mm; /* px mm cm pt*/
				font-weight:100; /* 加粗 100---900*/
				font-family:隶书;
				font-style: italic;/* 斜体 */
			}
		</style>
	</head>
	<body>
		<span>文字内容</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- span 纯净的行标签 所谓的纯净，就是不带有任何样式 -->
		<s>abc</s>
		<span style="text-decoration: line-through;">纯净的行标签</span>
	</body>
</html>
动画

transition 过渡动画

格式：transition: width 2s;** （应用于宽度，时间2秒）


div{transition:width 5s;

  width:100px;height:100px;

  background:red;}

div:hover { width:300px; } 先定义一个层的hover  鼠标进入后把宽度改为300px  则就会看到过渡动画
行高的设置

line-height


  用来控制文本内容之间行间距

  **属性取值**

  normal---浏览器默认的行高

  **数字--设置行高带上单位**

 百分比----表示行高是该元素字体大小的百分比
id选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 选择器：用来选择一个或多个标签，进行样式的控制，为了提高CSS代码的复用性
		     id选择器：一次选择一个标签
			 class 选择器：一次可以选择多个标签
			 标签选择器：一次可以选择多个标签
		 -->
		 
		 <style type="text/css">
			 #div1,#div2{
				 height: 300px;
				 width: 300px;
				 border: 2px blue solid;
				 background-color: pink;
			 }
	
		 </style>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<div id="div2">
			
		</div>
	</body>
</html>
标签选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div,h1{
				color: #0000FF;
				font-size: 19mm;
			}
			
		</style>
	</head>
	<body>
		<div id="">
			asdfasdf
		</div>
			<div id="">
			asdfasdf
		</div>
			<div id="">
			asdfasdf
		</div>
		<h1>阿斯顿发顺丰大</h1>
		<h1>阿斯顿发顺丰大</h1>
		<h1>阿斯顿发顺丰大</h1>
		<h1>阿斯顿发顺丰大</h1>
		<h1>阿斯顿发顺丰大</h1>
		
		<h2>asdfasdfasdf</h2>
		<h2>asdfasdfasdf</h2>
		<h2>asdfasdfasdf</h2>
		<h2>asdfasdfasdf</h2>
		<h2>asdfasdfasdf</h2>
		
		<ul>
			<li>asdfasdfasfasd</li>
		</ul>
	</body>
</html>
后代选择器
div >p{
意思是 div 里面所有的子标签p 都被会选中 注意对孙子标签是不起作用的

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				color: red;
			}
			#div1 div div{
				color:yellow;
			}
			
			#div11 div div{
				color:green;
			}
			li{
				color: #0000FF;
			}
			ul li{
				color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			爷爷
			<div id="div2">
				爸爸
				<div id="div3">
					孙子
				</div>
			</div>
		</div>
		
			<div id="div11">
			爷爷2
			<div id="div222">
				爸爸2
				<div id="div33">
					孙子2
				</div>
			</div>
		</div>
		
		<ul>
			<li>asdfasdfsdf</li>
		</ul>
		
		<ul>
			<li>asdfasdfsdf</li>
		</ul>
	</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			*{
			font-family:微软雅黑;	
			background: #FFC0CB;
			}
			[id]{
				color: red;
			}
			div[id]{
				color: #0000FF;
			}
			h1[id]{
				color: yellow;
			}
			div[id=div1]{
				color:deepskyblue;
			}
			
		</style>
	</head>
	<body>
		<div id="div1">
			一行文字
		</div>
			<div id="div2">
			一行文字
		</div>
		<h1 id="myh">asdfasdfsf</h1>
	</body>
</html>
伪类选择器
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活（按下）状态 a:active
其中的hover 和active 可以用于其他控价
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 链接状态 */
			a:link{
				color: #FF0000;
				
			}
			/* 鼠标悬浮状态 */
			a:hover{
				color: palegreen;
				
			}
			/* 按下鼠标的状态 */
			a:active{
				color: #FFFF00;
				
				
			}
			/* 访问过后的状态 */
			a:visited{
				color: plum;
				
			}
		</style>
		
	</head>
	<body>
		
		
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		<a href="index.html">跳到首页</a>
		
	</body>
</html>
相邻选择器
div +p{
意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p 之间隔着一个元素 那是选不中的
}
div ~p{
意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* h1 +h2{ //相邻一个
				color: red;
			} */
			h1 ~h2{  /* 相邻所有*/
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>asdfasb</h1>
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
		
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
		<h2>2222222222222222222222</h2>
		
	</body>
</html>
子类选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			#div1>h1>b{
				color:yellow;
			}
			/* #div2>h1,h2,h3{
				color: red;
			} */
			/* #div h1,h2,h3{
				color: #00BFFF;
			} */
		</style>
	</head>
	<body>
		<div id="div1">
			<h1>
				<b>abc<b>
			</h1>
		</div>
		<div id="div2">
			<h1>aaaa</h1>
			<h2>bbbb</h2>
			<h3>cccc</h3>
			<h1>aaaa</h1>
			<h2>bbbb</h2>
			<h3>cccc</h3>
			<h1>aaaa</h1>
			<h2>bbbb</h2>
			<h3>cccc</h3>
		</div>
	</body>
</html>
选择器的优先级
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				color: red;
			}
			#div1{
				font-size: 100px;
				color: yellow;
			}
			#div2{
				font-size: 200px;
			}
			.myclass{
				font-family: 楷体;
				color: #00FFFF;
			}
			
			/* 
			选择器的优先级。就是为了解决，多个选择器，出现属性控制冲突时，听谁的
			
			内联样式>id选择器>class选择器>标签名选择
			 
			 
			 */
			
		</style>
	</head>
	<body>
		<div id="div1" class="myclass" style="color: #FFC0CB;">
			abc
		</div>
		<div id="div2" class="myclass">
			cccc
		</div>
	</body>
</html>
背景属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style type="text/css">
			 body{
				 background: #FFC0CB;
				 background-image: url(css/20150708112951_Ts8dW.jpeg);
				 background-repeat:no-repeat;
				 background-size: 100% 1000px;
				 background-attachment: fixed;/* 固定背景图片 */
				
			 }
		 	div{
				width: 500px;
				height: 300px;
				background-color:red ;
				background-image: url(img/20150425H5207_vyJRP.thumb.700_0.jpeg);
				background-size: 50% 50%;
				background-repeat: no-repeat;/* 取出图片重复 */
				background-position: 50px 15px; /* 值1 是左右位置 值2 上下位置*/
			}
		 </style>
	</head>
	<body>
		<div id="">
			
			</div>
			
			<p>
				
				<hr size="3000px">
			</p>
		</div>
	</body>
</html>
层浮动
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.myclass {
				width: 200px;
				height: 200px;
				border: 1px black solid;
				float: left;
				/* left right 浮动，可以让块标签可以一字排开*/
			}
			#div5{
				width: 200px;
				height: 200px;
				border: 1px black solid;
			}
			#div6{
				width: 200px;
				height: 200px;
				border: 1px black solid;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="myclass">
			1
		</div>
		<div id="div2" class="myclass">
			2
		</div>
		<div id="div3" class="myclass">
			3
		</div>
		<div id="div4" class="myclass">
			4
		</div>
		<!-- 这个div 用来清除浮动 clear -->
		<div id="mydiv" style="clear:left;">
		</div>
		<div id="div5">
			6
		</div>

		<div id="div6">
			7
		</div>
	</body>
</html>
层溢出
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				border: 1px black solid;
				/* overflow:scroll 强行加滚动条/visible 默认值溢出还是显示/hidden 隐藏溢出部分/auto自动判断是否加滚动条*/
				overflow:auto;
			}
		</style>
	</head>
	<body>
		<div id="">
			asdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdf
			
			asfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasfasdfasf
		</div>
	</body>
</html>
行标签和块标签的区别
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				/* height:500px;
				width: 300px;
				margin-top: 500px;
				margin-bottom: 300px; */
				margin-left: 200px;
			}
			h1{
				color: red;
				height: 500px;
				border: 1px black solid;
			}
		</style>
	</head>
	<body>
		<!-- 行标签，不能设置宽高，以及上下间距 ，他的内容有多宽他就有多宽 设置左右间距有效 -->
		<span>这是一个纯净的行标签asdfasfdasdfasdf</span><span>这是一个纯净的行标签</span>
		<h1>这是块标签</h1>
		<h1>这是块标签</h1>
		
	</body>
</html>
行标签和块标签的转换
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1 {
				display: inline;
				/* 把块标签变为行标签*/
			}

			span {
				display: block;
				/* 把行标签变成块标签 */
			}

			div {
				/* display: inline-block; */
				/* 把块标签，变成行标签，还能设置宽高，以及上下间距 */
				height: 200px;
				border: 1px black solid;
			}

			ul {
				float: left;
			}

			#u1 {
				width: 200px;
				background: red;
				
			}
			#u1:active{
				display: none; /*隐藏一个块，他隐藏之后占的位置就不在了*/
			}
			#u2 {
				width: 200px;
				background: yellow;
			}


			#u3 {
				width: 200px;
				background: green;
				
			}
		</style>
	</head>
	<body>
		<h1>asdfasdfasdf</h1>
		<h1>asdfasdfasdf</h1>
		<span>这是个行标签</span>

		<div id="">
		
			asdfasdfasdfs
			asdfasdfasdfs

			asdfasdfasdfs

		</div>

		<div id="">
			asdfasdfasdfs
			asdfasdfasdfs
			asdfasdfasdfs
			asdfasdfasdfs

			asdfasdfasdfs

		</div>


		<ul id="u1">
		
			<li>asdfasfdsaf</li>
			<li>asdfasfdsaf</li>

			<li>asdfasfdsaf</li>
			<li>asdfasfdsaf</li>
		</ul>

		<ul id="u2">
			
			<li>asdfasfdsaf</li>
			<li>asdfasfdsaf</li>
			<li>asdfasfdsaf</li>

			<li>asdfasfdsaf</li>
			<li>asdfasfdsaf</li>
		</ul>


		<ul id="u3">
			>
			<li>asdfasfdsaf</li>
			<li>asdfasfdsaf</li>

			<li>asdfasfdsaf</li>
			<li>asdfasfdsaf</li>
		</ul>

	</body>
</html>
相对定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/all.css"/>
		
		<style type="text/css">
			
			button{
				position: relative;
				
			}
			#bt1{
				margin-left: 20px;
				
			}
			#bt2{
				margin-left: 20px;
			}
			#bt3{
				margin-left: 20px;
			}
			div{
				width: 200px;
				height: 200px;
				border: 1px black solid;
			}
			#div2{
				
				margin-top: 20px;
				
			}
		</style>
	</head>
	<body>
		
		<!-- 相对定位，设置间距，margin-left margin-top margin-right margin-bottom -->
			<button id="bt1">一个按钮</button>
		<button id="bt2">一个按钮</button>
		<button id="bt3">一个按钮</button>
		<div id="">
			div1
		</div>
		<div id="div2">
			div2
		</div>
	</body>
</html>
相对布局div
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin-left:5%;
				margin-right:5%;
				margin-top:0px;
			}
			#header{
				width: 100%;
				height: 400px;
				border: 1px black solid;
				background-image: url(img/girl.jpg);
				background-size: 100% 100%;
			}
			#dh{
				margin-top: 5px;
				width: 100%;
				height: 50px;
				border: 1px black solid;
				
			}
			#leftdiv,#centerdiv,#rightdiv{
				float: left;
				height: 300px;
				border: 1px black solid;
				
			}
			#leftdiv{
				width: 30%;
				height: 300px;
			}
			#centerdiv{
				margin-left:1% ;
				width: 38%;
				
			}
			#rightdiv{
				width: 30%;
				float: right;
				margin-right:-2px ;
			}
			#db{
				margin-top: 5px;
				width: 100%;
				height:300px;
				border: 1px black solid;
			}
			#max{
				margin-top: 5px;
				width: 100%;
				height:300px;
				border: 0px black solid;
			}
			.bt{
				font-size: 12px;
				margin-top:10px ;
				height: 30px;
				width: 80px;
				border: 1px black solid;
				float:left;
				margin-left:7%;
				text-align: center;
				line-height:30px;
				border-radius:5px ;
				box-shadow:5px 5px 5px grey ;
			}
			.bt:hover{
				font-size:14px ;
				box-shadow:7px 7px 7px green ;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="header">
			header
		</div>
		<div id="dh">
			<div id="" class="bt">
				<a href="#">个人简介</a>
			</div>
			<a href="#">
					<div id="" class="bt">
					联系本人
				</div>
			</a>
		
			<div id="" class="bt">
				成长经历
			</div>
			<div id="" class="bt">
				联系本人
			</div>
			<div id="" class="bt">
				成长经历
			</div>
			<div id="" class="bt">
				联系本人
			</div>
			<div id="" class="bt">
				联系本人
			</div>
		</div>
		<div id="max">
			<div id="leftdiv">
				左
			</div>
			<div id="centerdiv">
				中
			</div>
			<div id="rightdiv">
				右
			</div>
		</div>
		
		<div id=""style="clear: both;">
			
		</div>
		<div id="db">
			底部
		</div>
	</body>
</html>
页面定位 绝对定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/all.css"/>
		<style type="text/css">
			button{
				position:absolute;/* relative相对定位 absolute绝对定位*/
				
				
			}
			#bt1{
				left:18px;
				top:30px;
			}
				#bt2{
				left:100px;
				top:36px;
			}
				#bt3{
				left:180px;
				top:50px;
			}
			
		</style>
	</head>
	<body>
		<!-- 页面的左上角，是我们元素的起始位置
		第一个元素参照起始位置
			页面元素的默认定位方式，采用的是相对定位，一个元素的位置会参照上一个元素的位置
		  绝对定位：元素之间，不存在参照关系，所有 元素只参照起始位置
		  元素设为了绝对定位后，设置元素距离起始位置的属性
		  top
		  left
		  right
		  bottom
		 -->
		<button id="bt1">一个按钮</button>
		<button id="bt2">一个按钮</button>
		<button id="bt3">一个按钮</button>
	</body>
</html>
隐藏块
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				margin-left: 20px;
				float: left;
				position: absolute;
				border-radius:100px ;/*设置边框圆角 */
				box-shadow: 20px 10px 20px aqua; /* 值1 左右 值2 上下 值3 发光范围 值4 阴影的颜色*/
				
				
			}
			div:hover{
				cursor:pointer; /* 设置鼠标变小手*/
			}
			#div1{
				background: red;
				/* display:none; 隐藏之后，占的位置不在*/
				visibility:visible;/* 隐藏之后，占的位置还在 */
				z-index: 6;
				left:50px;
				top:100px
			}
			#div2{
				background: yellow;
					z-index: 20; /* 当多个块，为绝对定位后，可能重叠现象，z-index可以设置他们的重叠顺序，数值越大就在最上面*/
					left:60px;
					top:120px
			}
			#div3{
				background: green;
					z-index: 1;
					left:70px;
					top:140px
			}
			
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
			<div id="div2">
			
		</div>
			<div id="div3">
			
		</div>
	</body>
</html>
frameset
注意 frameset 标签不能和body标签共存
属性

①border
设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
④cols
纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“”表示该区域占用余下页面空间。例如：cols=“25%,200,*” 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。

用例
注意1： cols与rows两属性尽量不要同在一个标签中使用。若要实现下图架构，代码正确写法为： Frameset使用教程 【即，若想即使用cols又使用rows，可利用frameset嵌套实现】 注意2： 意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。 意思是：浏览器窗口等分为四部分。
frame
属性

①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。

用例
iframe

是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）

属性

①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。

Liyuehahaha
关注
CSS 几种常见的选择器
Naion的博客
09-30 1333
简单写了些常使用的css基础选择器和复合选择器。
2024 CSS - 保姆级系列教程三 - 选择器与布局详解
最新发布
qq_37779333的博客
11-04 1014
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
CSS-常用的选择器
paku-san的博客
05-19 1512
六种常用的选择器准备工作1、id选择器2、class选择器(类选择器)3、标签选择器4、通配符5、分组选择器6、后代选择器7、伪类选择器 准备工作 使用div标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> &l...
CSS-常用选择器
qq_43681073的博客
05-17 662
转载防丢失，原文链接： CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器…），你知道多少？ CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！ 一、通配符选择器 通配符选择器常用 ‘*’ 号表
CSS 常用选择器
叶落的厕所
10-21 261
在CSS中，“ * ”符号为通配符选择器的定义，它表示选取页面中所有元素。
css常用选择器
weixin_53533170的博客
03-31 1602
CSS常用选择器 基本选择器 1.元素选择器 语法：元素名{属性:属性值;} 特点：选中页面上所有对应元素名的元素 例： p{ color:red; } 2.类选择器 语法：.类名{属性:属性值;} 特点：选中页面上拥有该类名的元素 注：一个元素可以有多个类名 例： .box{ font-size:40px; } 3.id选择器 语法：#id名{属性:属性值;} 特点：选中页面上拥有该id名的元素 注：一个元素只能有一个id名，一个id名只能在页面上出现一次 例： #box{ font-we
前端CSS：CSS3文本的常用文本样式属性
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-24 741
CSS3提供了多种文本样式属性，这些属性可以帮助开发者控制文本的外观，包括字体大小、颜色、对齐方式等。— 设置字体家族font-size— 设置字体大小— 设置字体粗细font-style— 设置字体样式（如斜体）text-align— 设置文本对齐方式— 设置行间距— 设置字符间距— 设置单词间距— 设置文本装饰— 设置文本转换（如大写、小写等）— 设置文本阴影— 设置首行缩进— 设置空白符处理方式— 设置溢出文本的显示方式— 设置长单词的换行方式。
CSS 盒模型、块状元素与内联元素、CSS选择器
09-25
### CSS盒模型、块状元素与内联元素、CSS选择器 #### 一、CSS盒模型 CSS盒模型是理解CSS布局的关键概念之一。它定义了网页元素如何根据其CSS属性进行渲染。盒模型主要由四个部分组成： - **内容（Content）**：这...
common.css文件 网页设计常用的基本css控制
09-25
常见的CSS选择器包括元素选择器（如div、p、span等），类选择器（如 `.class-name`），ID选择器（如 `#id-name`）和属性选择器等。 1. 通用选择器（*）通常用于重置浏览器的默认样式。比如 `{ margin:0; padding:0;...
CSS3文本的常用文本样式属性之段落和行的属性
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-24 944
text-align— 设置文本对齐方式— 设置行间距— 设置字符间距— 设置单词间距— 设置首行缩进— 设置文本转换（如大写、小写等）— 设置空白符处理方式— 设置溢出文本的显示方式— 设置长单词的换行方式hyphens— 设置自动破字tab-size— 设置制表符宽度word-break— 设置单词的换行规则接下来，我们将逐一介绍这些属性，并通过示例来展示它们的实际应用。
CSS常用的选择器
m0_70273331的博客
04-29 272
一般写法：#divBox p .red{color:red;} 更好写法：.red{..} 使用class代替层级关系 一般写法：#divBox ul li a{display:block;} 更好写法：.block{display:block;} [](()必须记住的30类CSS选择器 大概大家都知道“id”,“class”以及“descendant”选择器，并且整体都在使用它们，那么你正在错误拥有更大级别的灵活性的选择方式。下面提到的大部分选择器都是在CSS3标准下的，所以它们只能在相应最新版本的浏
css常用的选择器
m0_61973596的博客
07-10 666
css常用的选择器
CSS常用选择器
forever_wen的博客
09-28 9690
CSS （层叠样式表） 编辑 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式...
css常用选择器（一）
aicsswo的博客
03-17 2793
类选择器（.class）ID选择器（#id）元素选择器（element）后代选择器（element element）子元素选择器（element > element）伪类选择器（:hover, :first-child, :nth-child(n), :not(selector), :checked, :disabled等）伪元素选择器（::before, ::after, ::first-line, ::first-letter等）
css常见选择器
爱玩亚索的程序员
03-16 848
文章目录基础选择器元素选择器id选择器class选择器群组选择器包含选择器进阶选择器伪类选择符子选择符兄弟选择符属性选择符结构伪类选择符伪元素选择符 基础选择器 元素选择器 div { width: 500px; height: 300px; background-color: green; border: 10px dashed red; } <div>div1</div> 元素选择符(类型选择符、element选择符) 权重：000
选择器（尚硅谷前端网课学习笔记）
ENT_jingchui的博客
12-02 381
关系选择器 1 子元素选择器 作用：选中指定父元素的指定子元素 语法： 父元素 ＞ 子元素 2 后代元素选择器 作用：选中指定元素内的指定后代元素 语法： 祖先 后代 3 兄弟选择器 （1）作用：选择下一个兄弟 语法： 前一个 + 后一个 （2）作用：选择下边所有的兄弟 语法： 前一个 ～ 后一个 ** 属性选择器 ** ［属性名］ 选择含有指定属性的元素 ［属性名=属性值］ 选择含有指定属性和属性值的元素 ［属性名^=属性值］ 选择属性值以指定值为开头的元素 ［属性名$=属性值］ 选择属性值以指定值为结尾
CSS常见选择器
qq_63218110的博客
12-04 3182
本篇博客主要介绍CSS的引入方式，选择器，常见的元素属性，以及弹性布局
CSS常见的选择器
dxm809的博客
03-14 1097
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;    &lt;ti
掌握常用CSS代码，提升前端开发效率
1. CSS基础语法：了解CSS的书写规则是学习的第一步，包括选择器（元素、类、ID等）、属性（color、font-size等）和值（如颜色值、像素值等）的概念，以及如何使用大括号、冒号、分号来组织CSS代码。 2. 盒模型（Box...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值