css_day5---初识div+css

Day5


div+css简介

      Div元素是用来为HTML文档内大块的内容提供结构和背景的元素

      CSSCascading style Sheets层叠样式表单)

             它是一种用来表现HTMLXML等文件式样的计算机语言。

      Div+css是网站标准中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML中不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。

      可以这样简单理解div+css

      Div是用于存放内容(文字、图片、元素)的容器。

      Css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观。


      示意图如下:

快速体验案例:

test1.html:

<html>
	<!--引入my.css文件-->
	<head>
		<title>test1</title>
		<link href="my.css" type="text/css" rel="stylesheet"/>
		</head>
			<body>
			<div class="style1">
			<table>
				<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
				<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
				<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
				<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
				</table>
				</div>
				</body>
	</html>

my.css:

/*类选择器*/
.style1{
	width:300px;
	height:200px;
	border: 1px solid blue;
	margin:0 auto;
	}
	
	/*父子选择器*/
	/*级联选择器*/
	.style1 table{
		border:1px solid black;
		width:298px;
		height:198px;
		}
		
		.style1 table td{
			border:1px solid black;
			text-align:center;/*对齐方式*/
		}


运行结果:

可见,html文件中并没有设置表格的宽、高等属性,其属性全部在css文件中制定。


div+css的优势


网页设计的三个历史时期:

     Table à table+cssà div+css

 

好处:

★符合w3c标准,微软等公司均为w3c的支持者

HTML文件减少大量的tabletrtd标签,html变简洁

★内容和样式分离。-à可以实现复用!换肤功能轻松实现。

★符合搜索引擎的喜好:喜欢简洁的代码的网页,若内容太多,则不容易被搜索引擎定位搜索。-à滋生出一个新的职位:SEO(网页页面优化师)

      ★节约带宽

   观点:div+css并不是要我们抛弃table,因为table在显示数据时,特别方便,因此在使用div+css时,该使用table时就得使用。



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值