CSS样式表与HTML网页的关系

华海4客户沟通

华海4客户沟通

2016-02-20 00:20

下面图老师小编要跟大家分享CSS样式表与HTML网页的关系,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

最近因为帮一个网友很费神的修改了一个导航的CSS文件,还没有我自己重写code来的快,让我想起了写这篇文章。我发现很多web设计者对CSS写法的继承关系都有了一点了解,但是了解的还是不够深,不够透彻,所以今天打算把这个讲一下。

首先谈一下html文档,但凡接触过html语言的设计师,一定都会发现html的一个很明显的特点,那就是大多数代码标签,都是有一个头和一个尾的。比如table和/table还有div和/div等等,这种特点其实已经告诉你了一个信号,就是html标签是可以包含和被包含的。要深刻理解这点并不容易。实际上,一层标签包含一层标签的写法,这样层层相套的关系就是一种继承关系。

注:W3C组织对html代码的个体标签也做了规范化处理, 例如img,br等都要求做自封闭处理,才能通过W3C标准检测。就是在标签末尾的反方括号前加一个斜线。写法如下img sc="pic.jpg " alt="" /,br /.

我们来看下面的一个例子:

div

b小白/b

/div

 标签b就是标签div的子标签,他们就已经形成了一个继承关系,在CSS样式表里你可以这样写来定位出文字小白的样式。

div b{ font:400 14px "宋体"; color:#FF0000;}

你可以看到一个未加粗的14px大小的红色字体样式作用在文字小白上了。由此我们可以发现被标签包含的标签在CSS里可以用空格表示其继承的关系,并且标签符本身就可以作为样式表的名来定位需要修饰的样式内容,这两点要牢记和深刻理解。

有过一定网页设计经验的朋友都知道,在CSS样式表里,我们可以通过定义ID名和类名也就是CLASS名来定位需要修饰的样式内容,但是现在我们在理解了上面刚讲的内容后,这里我则推荐你如果可以使用html元素名来定位的时候则不必使用ID名和CLASS名。为什么?第一,这是代码的精简性要求,第二,用html元素名来定位,能很好在CSS文档里呈现出html文档的结构关系,这有利于你在后续的CSS深化表现时不破坏html页面的大框架。

当然,理解这一点,需要有一定程度的html语言功底,什么地方用什么标签,是很有学问的。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

大家不妨用下面的这个图来理解html语言

可以很明了的看出html 语言的基本结构就已经展示了一个包含,继承的关系。在body标签内就是需要我们用心设计和表现的WEB主体了。我们在写CSS样式表的时候,按照层级的递增关系能很容易的定位出需要修饰的元素。在元素内容重复和复杂的时候,则可以再用ID名和CLASS名来逐一区分。

注:ID名在html文档里是不能重复的,这不符合W3C规范。CLASS名可以重复出现在html文档里,那么大家在定义大区域结构的时候可以用ID名,在需要重复使用的样式的地方就用CLASS名来定位。

总结一点:写CSS文档就像画画,学过美术的朋友都知道,画素描的时候都要先画结构,在上黑白灰关系。那么CSS和html也一样,定义好大框架后在着眼细节。做出来的网页才会结构清晰,代码精炼,并易于修改。就把html看做一副画,不要急于出效果,一步步来吧。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

CSS样式表与HTML网页的关系

Web开发
CSS样式表与HTML网页的关系

CSS样式表空格与不空格的关系

Web开发
CSS样式表空格与不空格的关系

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS样式表中继承关系的空格与不空格

Web开发
CSS样式表中继承关系的空格与不空格

CSS样式表尽量放到网页头部

Web开发
CSS样式表尽量放到网页头部

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS用样式表美化你的网页

Web开发
CSS用样式表美化你的网页

关于CSS样式表

Web开发
关于CSS样式表

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

使用Windows7系统自带磁盘管理工具调整硬盘分区大小

使用Windows7系统自带磁盘管理工具调整硬盘分区大小

Windows 7绚烂背景、主题简介

Windows 7绚烂背景、主题简介
下拉加载更多内容 ↓