关闭

CSS(2)伪元素、盒子模型

标签: 网页编程css选择器盒子模型
334人阅读 评论(0) 收藏 举报
分类:
扩展选择器

☆关联选择器

标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器。例如:

<span style="font-family:Times New Roman;font-size:14px;">p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>湖南城市学院</b>段落样式</p>
<p>P标签段落</p> </span>

☆组合选择器

对多个选择器进行相同样式的定义。例如,我们想对“div中的<b>标签”和“类名为cc”的区域设置相同的样式,则可以定义如下的组合选择器:

.
<span style="font-family:Times New Roman;font-size:14px;">cc, div b{/*不同选择器之间用逗号分开*/
  background-color:#0000ff;
  color:#fff;
}</span>
☆伪元素选择器

      其实就在html中预先定义好的一些选择器,称为伪元素。

格式:标签名:伪元素。类名 标签名。类名:伪元素。

超链接a标签中的伪元素

a:link  超链接未点击状态。
a:visited 被访问后的状态。                                        使用顺序: L – V – H – A
a:hover 光标移到超链接上的状态(未点击)。
a:active 点击超链接时的状态。
段落p标签中的伪元素
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。

自定义伪元素

:focus 具有焦点的元素


<span style="font-family:Times New Roman;font-size:14px;">div:hover{
    background-color:#f00;
    color:#fff;
  }</span>

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS技术学习</title>
		<style type="text/css">
		   p{
		      font-style: italic;
		      color: #ff0000;
		      font-size: 15pt;
		   }
		   
		   /*关联选择器: 选择<p>标签内部的<b>标签*/
		   p b{
		      font-size: 20pt;
		   }
		   
		   /*组合选择器*/
		   p b, div b{
		      background-color: #ff0;	   
		   }
		   
		   /*伪元素*/
		   a:link{/*未被访问时的状态*/
		      background-color: #06f;
		      color:#fff;
		      text-decoration:none;
		   }
		   a:visited {/*访问之后的状态*/
		    font-size: 14pt;
		    text-decoration: underline;
		    color: blue;
		   }
		   a:hover{/*鼠标悬停状态*/
		     background-color: #0ff;
		     font-size: 16pt;
		     text-decoration: underline;
		   }
		   a:active{/*鼠标点击时*/
		     background-color: #0f0;
		     font-size: 18pt;
		   }
		   
		   p:first-letter {
	          font-size: 32pt;
		   }
		   
		   div:hover, input:hover{
		     background-color: #0ff;
		   }
		   
		   input:FOCUS {
	         background-color: #ff0;
	         font-size: 18pt;
           }
		   
		</style>
	</head>
	<body>
		<p>
		     段落中的文字,湖南<b>城市学院</b>,过两天周末!!!
		</p>
		<p>
		     设计院承办第十一届<b>城市</b>发展与规划大会“湖南绿色人文城市建设实践”
		</p>
		湖南商学院院长<b>陈晓红教授</b>作了题为《生态文明与绿色发展——长株潭两型社会实践》的主题发言。
		
		<div> 院长<b>陈晓红教授</b>作了题为《生态...》的报告 </div>
		
		<a href="http://www.hncu.net">看看城市学院</a>
		<br/>
		姓名:<input type="text"> <br/>
		年龄:<input type="text">
		
	</body>
</html></span>
    CSS的盒子模型1

◇边框(border)

  上 border-top
  下 border-bottom
  左 border-left
  右 border-right


◇内补丁(Paddings):内边距                                                                   

  上  padding-top
  下  padding-bottom
  左  padding-left
  右  padding-right


◇外补丁(Margins):外边距

  上  margin-top
  下  margin-bottom
  左  margin-left
  右  margin-right


         

☆CSS布局——漂浮

◇ float : none | left | right

  none : 默认值。对象不飘浮
  left : 文本流向对象的右边
  right : 文本流向对象的左边

◇ clear : none | left | right | both

  none :  默认值。允许两边都可以有浮动对象
  left :  不允许左边有浮动对象
  right :  不允许右边有浮动对象
  both :  不允许有浮动对象


☆CSS布局——定位

◇ position : static | absolute | fixed | relative

  static :  默认值。无特殊定位,对象遵循HTML定位规则。
  absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义。
  fixed :  未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。
  relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置。


综合练习
<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS技术学习</title>
		<style type="text/css">
		  
		</style>
	</head>
	<frameset rows="25%,*" >
	   <frame src="htmls/top.html">
	   <frameset cols="30%,*">
	      <frame name="left" src="htmls/left.html">
	      <frame name="right" src="htmls/1.html">
	   </frameset>
	</frameset>
	
	<body>
	   
	</body>
</html></span>

top.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
	  <img alt="" src="top-bg.png">
	</body>
	
</html></span>
left.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS技术学习</title>
		<style type="text/css">
		   ul{
		      list-style-type: none;
		      list-style-image:url("icon.png");
		   }
		   li a:link, li a:visited{
		     text-decoration: none;
		     font-size: 16pt;
		   }
		   a:hover,a:active{
		     background-color:#0ff;
		   }
		   
		</style>
	</head>
	<body>
	    <ul>
		   <li> <a href="1.html" target="right">CSS设置表格样式</a>  </li>
		   <li> <a href="2.html" target="right">盒子模型--边距</a>   </li>
		   <li> <a href="3.html" target="right">盒子模型--漂浮</a>   </li>
		   <li> <a href="4.html" target="right">盒子模型--定位</a>   </li>
		   <li> <a href="http://www.baidu.com" target="right">百度</a>   </li>
		</ul>
	</body>
	
</html></span>

1.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>CSS技术演示</title>
		<style type="text/css">
		   body{
		      font-size: 18px;
		   }
		   div{
		      font-size:20pt;
		      background-color:#ff0;
		   }
		   table{
		      /*border-style: solid;
		      border-bottom: 1px solid #f00;
		      border-left: 5px dotted #f00;
		       */
		      border: 1px solid #f00;
		      border-collapse: collapse;
		   }
		   table td, th{
		      border: 1px solid #f00;
		      padding: 5px;
		   }
		   
		   input{
		      border:none;
		      border-bottom: 3px solid #f00;
		      width: 100px;
		   }
		   #form{
		      background-color:white;
		      font-size:16pt;
		      font-weight:bold;
		      color:#00f;
		   }
		   
		   .aa:hover{
		      background-color:#ff0;
		      cursor:hand; 
		   }
		   
		</style>
		<link rel="stylesheet" href="">
	</head>
	
	<body >
	  <div style="color:#ff0000;background-color:#0ff;">  湖南城市学院 </div>
	  <div>信息科学与工程学院</div>
	  
	  <table >
			<caption>这是<span>我的第二个</span>表格</caption>
			<tr>
			   <th>第1列</th>  <th colspan="2">第2-3列</th>
			</tr>       
			<tr>
			   <td rowspan="2">单元格1-1</td>  <td>单元格1-2</td>  <td>单元格1-3</td>
			</tr>       
			<tr>
			   <td>单元格2-2</td>  <td>单元格2-3</td>
			</tr>       
	    </table>
		
	<hr/>
	<div id="form">
		 姓名:<input class="aa" type="text" name="name"> <br/>
		 密码:<input class="aa" type="password" name="pwd"> <br/>
	</div>
	
	</body>
</html></span>

2.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>CSS技术演示</title>
		<style type="text/css">
		  span{
		     border:#ff0000 1px solid;
		     width:200px;
		     margin: 10px 20px;
		     margin-left: 15px;
		     
		     padding: 10px;
		     padding-left: 15px;
		  }
		
		</style>
		
	</head>
	
	<body >
	  <h2>演示盒子模型</h2>
	  
	  
	  <span>这是div1中的文本</span>	
	  <span>这是div2中的文本</span>
	  	
	</body>
</html></span>
3.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>CSS技术演示</title>
		<style type="text/css">
		   div{
		      width: 200px;
		      height:30px;
		      border: 1px solid #ff0000;
		      margin: 10px;
		   }
		   
		   #d1{
		     float: right;
		     background-color: #ff0000;
		   }
		   
		   #d2{
		     clear:both;
		     background-color: #00ff00;
 			 height:40px;
		   }
		   
		   #d3{
		     clear:left;
		     background-color: #0000ff;
 			 height:50px;
		   }
		   
		</style>
		
	</head>
	
	<body >
	  <h2>演示盒子模型2</h2>
	  
	  <div id="d1">第1个div</div>
	  <div id="d2">第2个div</div>
	  <div id="d3">第3个div</div>
	  <div id="d4">第4个div</div>
	  	
	</body>
</html></span>

4.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>CSS技术演示</title>
		<style type="text/css">
		   div{
		      width: 200px;
		      height:40px;
		      border: 1px solid #ff0000;
		   }
		   
		   #d1{
		     background-color: #ff0000;
		     position: absolute;
		     left:200px;
		     top:150px;
		   }
		   
		   #d2{
		     background-color: #00ff00;
		   }
		   
		   #d3{
		     background-color: #0000ff;
		     position: relative;
		     left:50px;
		     top:0px;
		   }
		   
		   #d4{
		     background-color: #ff00ff;
		     position: relative;
		     left:50px;
		     top:20px;
		   }
		   
		   #d0{
		     border:1px solid #ff0000;
		     width:280px;
		     height:150px;
		     position: absolute;
		     left:100px;
		     top:200px;
		   }
		   
		</style>
		
	</head>
	
	<body >
	  <h2>演示盒子模型2</h2>
	  
	  <div id="d1">第1个div</div>
	  <div id="d2">第2个div</div>
	  
	  <div id="d0">
		  <div id="d3">第3个div</div>
		  <div id="d4">第4个div</div>
	  </div>
	  
	  
	  	
	</body>
</html>
</span>

                                                          




☆CSS布局——图文混排

☆CSS布局——图像签名

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>演示CSS图文混排</title>
	<style type="text/css">
	   img{
	      width: 200px;
	      height:180px;
	   }
	   #img1{
	      float:right;
	   }
	   #text1{
	      font-size: 15pt;
	      font-family: 黑体;
	      color:#ff0000;
	   }
	   #imgtext{
	      width: 500px;
	      height:300px;
	      position: absolute;
	      top:150px;
	      left:220px;
	      border: 5px dotted blue;
	   }
	   #imgtext:hover{
	      background-color: #ffff00;
	   }
	   
	   #img2{
	     position: absolute;
	   }
	   #text2{
	     position: absolute;
	     top:150px;
	     left:50px;
	     color: #ffffff;
	   }
	   
	</style>
</head>
<body>
	<div id="imgtext" onclick="alert('aaa');">
		  <img id="img1" alt="城院新闻" src="pcbanner1.jpg">
		  <div id="text1">
			   (本网讯)8月24日上午,学校在办公楼一会议室召开综合改革方案讨论会,就涉及综合改革方案的若干重要问题进行了深入研讨。全体校领导,二级学院院长和党总支书记,机关教辅单位负责人参加了会议。会议由党委书记罗成翼主持。
			会上,学校领导班子聚焦专项改革措施,从干部人事改革、人才培养改革、科技创新服务改革、学生管理服务改革、党建与党风廉政建设改革以及后勤基建、资产、财务管理改革等方面进行了全面深入的研讨,并提出了修改意见和建议。
	  	  </div>
	</div>
	
	
	<img id="img2" alt="城院新闻" src="pcbanner1.jpg">
	<span id="text2">城院风景</span>
	
</body>
</html></span>





0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:46999次
    • 积分:1561
    • 等级:
    • 排名:千里之外
    • 原创:113篇
    • 转载:4篇
    • 译文:0篇
    • 评论:18条
    博客专栏
    最新评论