博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DIV+CSS 入门
阅读量:6761 次
发布时间:2019-06-26

本文共 1575 字,大约阅读时间需要 5 分钟。

 玩一小会儿前csdn什么时候,页面上的加qq而微博,我认为这是美好的。牛腩完成。运营商也开始了他真正的学习B/S之旅。

刚開始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的,敲完了回过头来再看,好像明确了一些。BS正在进门中 。写的不正确各位多多指正。

CSS

    总体来说css中包含各种各样的样式属性。用于控制字体,颜色,对齐方式和边距,这些仅仅是网页样式

    的一些方面。

css的样式属性分为两大类。

    布局属性:由影响网页上元素位置的属性(如边距 填充 对其等等)组成 。

    格式化属性,由影响站点中元素的视觉显示的属性(如字体类型,大小,颜色等)组成。

    CSS的层叠

css样式单中的层叠表示样式单规则应用与HTML文档元素的方式。即css样式单中的样式形成一个层次结构。更详细的样式覆盖通用样式。样式规则的优先级有css更具这个层次结构决定,从而实现练级效果。

也能够看成一种类似继承的关系,子类继承父类的特征。基本样式规则适用于整个样式单,但可被更详细的样式规则覆盖。

我们用一个简单的样例看一下。你能猜出以下文本的颜色么?

this text is green.

this text is blue.

this text is stil green.

结果是这种

                

在这个样例中,颜色green 通过样式属性color 应用于<div>标签。

因此<div>标签本是绿色的。因为<p>标签是<div>标签的子标签。因此绿色的文本样式传递给<p>中的文本

。然而第一个<p>标签覆盖了color样式,将它改为蓝色。最后的结果是,第一段文本是蓝色的,第二段文本为传递而来的绿色。

DIV+CSS

    假设有三个或者很多其它的网页使用类似的格式和字体,我们可能想为它们创建一个样式单,将样式直接应用于网页中的HTML。牛腩中用到的div+css非常像我们以前玩过的给小人穿衣服的游戏。

div 会给我们建造出主要的部件,而由css 决定每个部件的样式是什么。div会告诉我们有帽子,有外套。有首饰,有鞋子。css 就是的各种款式 颜色的衣服和帽子。用比較专业的术语来说就是应用div+css 让结构和表现分离。

             

css盒子模型

    一个网页是被分解成若干区块来控制页面框架的。这些区块都是为了放置 网也不通元素服务的。这就引入了”盒子模型“HTML中的每一个元素被考虑为一个”盒子“,无论这个元素是段落,<div> 还是图像。

盒子有一致的属性。下图是盒子模型的图解。描写叙述了每一个HTML块级元素可能的边框,填充和边距。以及边框 填充和边距的应用方式。换句话说,全部元素的内容和边框之间都有一些填充。

                     

Table与div+css的差别

    HTML中另一类应用table,Table标签就是表格。是用来显示数据的,而不是用来布局网页的,

尽管它有时候布局网页非常easy,可是一个大型的网页假设用表格嵌套的表格来布局的话,对于网

页的显示是极为不利的,由于,一个表格仅仅有在其全然读取完才会显示出来。大型的表格要读取

完须要时间,不利于用户的阅读,用户对网页的等待时间是非常短的,你的网页非常慢非常慢的显示出

来的时候。 用户一般会告诉你“别让我等”。

          DIV+CSS布局最大的长处还在于,网页布局的更改性,哪天你想要改变网页布局的话,仅仅须要更

     改你的CSS文件就可以。而没有必要像曾经那样,又一次编制一份大型的表格嵌套表格的网页布局,

     极大的方便了网页的维护和优化工作。

     注意我们以上讨论的是table布局。

而不是否定table标签的作用。

以上是个HTML一些了解的内容。BS刚开始。

版权声明:本文博客原创文章。博客,未经同意,不得转载。

你可能感兴趣的文章
java通过CLASSPATH读取包内文件
查看>>
开源 C# 代码开发平台 icsharpcode SharpDevelop
查看>>
使用 Java 程序写文件时,记得要 flush()
查看>>
OpenCV在矩阵上的卷积
查看>>
linux 编译java并打包
查看>>
What is Entity Framework?
查看>>
SQL Server 2008性能故障排查(一)——概论
查看>>
NGUI ScrollView动态加入和删除对象。
查看>>
****RESTful API 设计最佳实践(APP后端API设计参考典范)
查看>>
Linux内存管理-高端内存(二)
查看>>
[LeetCode] Longest Substring Without Repeating Characters 最长无重复字符的子串
查看>>
FU-A分包方式,以及从RTP包里面得到H.264数据和AAC数据的方法。。
查看>>
[LeetCode] 4Sum 四数之和
查看>>
luoguoj 1598 垂直柱状图 模拟
查看>>
Hello World 之 控制台版本(Console Application)
查看>>
IOS 播放动态Gif图片
查看>>
随笔1
查看>>
HTML中Select的使用具体解释
查看>>
《推荐系统》--基于知识推荐
查看>>
Java synchronized
查看>>