网站资讯 news
您现在的位置:首页 > 网站资讯 > div+css概念优缺点和3种使用方法示范
NEWS

新闻资讯

div+css概念优缺点和3种使用方法示范

发布时间:2017/04/27 网站资讯 浏览次数:993

昆山网站建设

原文出自:小七论坛

这个系列教程是关于div+css的,有别于html里面通过body属性来控制元素,div+css更加方便灵活,内容和样式可以分开,二者一起使用来布局网页,网页就没那么“臃肿”,为了帮助新人更加容易理解,这里先把概念列出来。

div和css的含义;
div标签定义HTML文档中的一个分隔区块或者一个区域部分。div标签常用于组合块级元素,以便通过css来对这些元素进行格式化。
css样式全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表css。

cxiv+css的优点:
1.精简代码,内容与样式分离,提高页面浏览速度,缩减带宽成本。
2.结构清晰,容易被搜索引擎搜索到,有利于SEO。
3.维护轻松,容易改版,修改css文件即可同时控制多个页面元素,定位精准。

相对于html的不足:
1)HTML代码不规范、臃肿
2)内容与样式混在一起,如果修改网页,必须重新制作html
3)结构不清晰,可读性不高,用户体验较差

css使用方法有三种:
1)行内,比如:<p style=””></p>,对本行起作用;
2)内嵌,在head加入<style></style> 定义css,body中引用,对本页面起作用;
3)链接,这个最常用,head中用<link src=””>加载,body中引用,对引用过指定css文件的页面都起作用;

下面我们分别对以上3种使用方法进行示范;
1)行内,这种方法只对一行起作用,如果要对多行进行控制,则每一行都要加行内css,这里举例,给第一行设置36号字体,红色,代码如下:
<body>
<p style=”color:#FF0000; font-size:36px;”>SEOWHY DEMO</p>
<p>SEOWHY DEMO</p>
</body>

2)内嵌,在head加入以下代码
<style type=”text/css”>
p{color:#FF0000;
font-size:36px;
}
</style>
3)链接,我们演示的时候把css文件放在桌面上,命名为seowhy.css,文件内容如下
p{color:#FF0000;
font-size:36px;
}

云风网络是集昆山网站制作,昆山网页设计,昆山网站推广于一体的昆山网络公司,业务涵盖:昆山手机网站制作,昆山网站设计,昆山网络建设,昆山做网站,昆山网站建设,电话:13912673321

相关推荐
点击这里给我发消息 技术咨询
回到顶部