PHP初学总结_CSS

最新推荐文章于 2023-03-11 15:35:56 发布

wy小骑士

最新推荐文章于 2023-03-11 15:35:56 发布

阅读量163

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/qq_39710961/article/details/90081218

版权

PHP 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css代码书写格式有以下三种方式：

通过style属性（单个属性）
<div style="color:red">
				用户名、留言时间<br/>
				留言内容				
</div>

通过style标签（所有标签）
<head>
		<meta charset="utf-8"/>
		<title>留言本</title>
		<style>
			div{
				color: red
			}
	</style>
</head>

通过link标签外链
<head>
		<meta charset="utf-8"/>
		<title>留言本</title>
		<link rel="stylesheet" type="text/css" href="CSS.css">
	</head>

测试效果（刷新网页0.0）

常用选择器：

		id选择器（#）
		<div id="a1">
			<div>
				用户名、留言时间<br/>
				留言内容				
			</div>
		</div>
#a1{
	color: blue;
}

  类选择器（.）
<div class="a1">
			<div>
				用户名、留言时间<br/>
				留言内容				
			</div>
		</div>
.a1{
	color: red;
}

标签名选择器
		<div>
			<div>
				用户名、留言时间<br/>
				留言内容				
			</div>
		</div>
		
	div{
	font-size:26px;
}

层级（父子）(中间空格)选择器
      <div id="a1">
			<div class="aa1">
				用户名、留言时间<br/>
				留言内容				
			</div>
		</div>
#a1 .aa1{
	color: blue;
}

样式:

div{
	font-size:26px; //用分号分隔，冒号组成，
	color: blue;
}

布局：
颜色格式：16进制（#ffffff），RGB（rgb(0,0,0)），英文单词。
尺寸：px(pc端屏幕上的一个点)，em，mm，%。
浮动：

<head>             
		<meta charset="utf-8"/>  
		<title> 留言本 </title> 
		<style type="text/css">
			#a{
				float: left;     //进行浮动
			}
		</style>
	</head>

清除浮动影响

<div style="clear:both;"></div>

也可以在浮动无提上添加个父节点，然后处理父节点进而达到消除浮动影响
<head>             
		<meta charset="utf-8"/>  
		<title> 留言本 </title> 
		<style type="text/css">
			#c{
				overflow:hidden     //消除浮动
			}
		</style>
	</head>

简单的css布局

<!DOCTYPE html>
<html>
	<head>             
		<meta charset="utf-8"/>  
		<title> 留言本 </title> 
		<style type="text/css">
		.wrap{
			width: 800px;
			margin: 0px auto;
		}
		.add{
			overflow: hidden;
		}
		.add .content{
			width: 598px;
			margin: 0;
			padding: 0;
		}
		.add .user{
			float: left;
		}
		.add .btn{
			float: right;
		}

		.msg{margin: 20px  0px; background: #ccc;padding: 5px;}
		.msg .info{overflow: hidden;}
		.msg .user{float: left;color: blue;}
		.msg .time{float: right;color: #999;}
		.msg .content{width: 100%;}
		</style>		
	</head>
	<body>
		<div class="wrap">
			<!-- 发表留言-->
			<div class="add">
				<textarea class="content" cols="50" rows="5"></textarea>		
				<input class="user" type="text" />
				<input class="btn" type="submit" value="发表留言">
			</div>

			<!--查看留言-->
			<div class="msg">
				<div class="info">
					<span class="user">用户名</span>
					<span class="time">2019-5-10 10:10:10</span>
				</div>
				<div class="content">
					我是内容。我是内容。我是内容。我是内容。
				</div>
			</div>	
			<div class="msg">
				<div class="info">
					<span class="user">用户名</span>
					<span class="time">2019-5-10 10:10:10</span>
				</div>
				<div class="content">
					我是内容。我是内容。我是内容。我是内容。
				</div>
			</div>		
			<div class="msg">
				<div class="info">
					<span class="user">用户名</span>
					<span class="time">2019-5-10 10:10:10</span>
				</div>
				<div class="content">
					我是内容。我是内容。我是内容。我是内容。
				</div>
			</div>			
		</div>
	</body>
</html>