xhtml+css 正确的说法

“DIV+CSS”叫法将网页制作者引入两大误区

【误区一】网页中用了Table,页面就不标准,甚至觉着用Table丢人,Table成为了判定页面是否标准的关键点。

【误区一】认为网页中的DIV标签用的越多越好,甚至有人将页面中所有的标签都替换为DIV,DIV的多少,决定页面标准的程度。

既然是标准页面,标签各干各的活“各司其职”,Table就用来存储数据,DIV就用来构架页面结构 div不是越多越好

W3C标准不是一个标准,而是一系列标准的集合,包含三部分的标准:结构标准、表现标准和动作标准。与结构标准对应的代表语言是xHTML,与表现标准对应的代表语言是CSS,与动作标准对应的代表语言是JavaScript。

当我们将一个成品的网页设计制作成一个静态页面的时候,就要符合前面两种标准,结构标准和表现标准,那么制作出来的页面就是标准页面,用他们相对应的语言来描述这种制作标准页面的技术我们就称之为“xHTML+CSS”! (静态)

xhtml是一种结构 css就是一种表现  就像人穿衣服 如何去穿  就用到了样式 样式就是 css控制页面的手段也就是 人穿衣服的方式

--------------------------------------------------------------------------华丽丽的分割线--------------------------------------------------------------------------------------------

第一:如何让CSS去控制HTML页面?

有4种样式(方式),行内样式、内嵌样式、链接样式、导入样式

行内:

<p style="color:#F00; background:#CCC; font-size:12px;"></p>

直接但是后期不好维护

内嵌

内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:

<head>
<style type="text/css">
body,div,a,img,p{margin:; padding:;}
a{color:#FFF;}
img{float:left;}
#container{width:500px; height:350px; background:url(http://www.w3cfuns.com/static/image/cm/demo/2d121/w3cBg.jpg) no-repeat; position:relative; margin:0 auto;}
#container p{width:380px; height:40px; position:absolute; left:60px; bottom:60px; color:#fff; font-size:12px; line-height:18px; text-align:center; font-family:"微软雅黑", Verdana, Geneva, sans-serif;}
#reg{display:block; width:114px; height:27px; position:absolute; left:191px; bottom:28px;}
</style>
</head>

提供一个公共css代码 但是后期维护还是不太好

链接样式:

链接样式是使用频率最高,最实用的样式,只需要在<head></head>之间加上<link…/>就可以了,如下:

<link type="text/css" rel="stylesheet" href="style.css" />

四种样式的优先级按照“就近原则”:行内样式 > 内嵌样式 > 链接样式 > 导入样式。  同id属性 优先级高的能覆盖低的

记住“<!---->”注释只要出现在CSS和JS里面,那么就是针对浏览器的条件注释。

--------------------------------------------------------------------------华丽丽的分割线--------------------------------------------------------------------------------------------

对页面控制用样式  如果对特定元素 小范围的页面控制就用到了css选择器

单对一,单对多控制 控制的是页面元素

CSS选择器最基本的有四种:标签选择器、ID选择器、类选择器、通用选择器。

标签选择器

个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,比如,在style.css文件中对p标签样式的声明如下:

p{
font-size:12px;
background:#900;
color:;
}

这么做,会使页面中所有p标签的背景都是#900(红色),文字大小均是12px,颜色为#090(绿色),这在后期维护中,如果想改变整个网站中p标签背景的颜色,只需要修改background属性就可以了,就这么容易!当然你也可以设置整个页面中所有的div的属性、a链接的属性、span的属性,这么做方便是方便,但是不够灵活,如果页面中除了某个p标签背景不是红色外,其他的都是红色,就不能用这种方法定义了。

ID选择器:

单独定义 针对性

ID选择器在某一个HTML页面中只能使用一次,就像只有一个身份证 (ID)一样,不重复!在页面中使用ID选择器更具有针对性

<p id="one">W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区!</p>
在CSS中定义ID为one的p标签的属性,就需要用到“#”,代码如下:

#one{
font-size:12px;
background:#900;
color:090;
}

这样页面中的某个p就会是CSS中定义的样式。针对“页面中除了某个p标签背景不是红色外,其他的都是红色的”情况,我们就可以用ID选择器单独定义那个背景不为红色的p标签,这样问题就解决了

类选择器:

w3c_html_study_note_5.26的更多相关文章

  1. CSharpGL(26)在opengl中实现控件布局/渲染文字

    CSharpGL(26)在opengl中实现控件布局/渲染文字 效果图 如图所示,可以将文字.坐标轴固定在窗口的一角. 下载 CSharpGL已在GitHub开源,欢迎对OpenGL有兴趣的同学加入( ...

  2. C#开发微信门户及应用(26)-公众号微信素材管理

    微信公众号最新修改了素材的管理模式,提供了两类素材的管理:临时素材和永久素材的管理,原先的素材管理就是临时素材管理,永久素材可以永久保留在微信服务器上,微信素材可以在上传后,进行图片文件或者图文消息的 ...

  3. grep-2.26 sed-4.2.2 awk-4.1.4 wget-1.18 pcregrep-8.39 pcre2grep-10.22 for windows 最新版本静态编译

    -------------------------------------------------------------------------------------------- grep (G ...

  4. TMS320F28027/26/23/22/21/20芯片解密单片机破解原理!

    TMS320F28027/26/23/22/21/20芯片解密单片机破解 TMS320F2802系列芯片解密型号: TMS320F28027F.TMS320F280270.TMS320F28027.T ...

  5. [.net 面向对象程序设计进阶] (26) 团队开发利器(五)分布式版本控制系统Git——图形化Git客户端工具TortoiseGit

    [.net 面向对象程序设计进阶] (26) 团队开发利器(五)分布式版本控制系统Git——图形化Git客户端工具TortoiseGit 读前必备: 接上篇: 分布式版本控制系统Git——使用GitS ...

  6. 编写高质量代码:改善Java程序的151个建议(第2章:基本类型___建议26~30)

    建议26:提防包装类型的null值 我们知道Java引入包装类型(Wrapper Types)是为了解决基本类型的实例化问题,以便让一个基本类型也能参与到面向对象的编程世界中.而在Java5中泛型更是 ...

  7. 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null

    [源码下载] 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null 作者:webabcd 介绍背水一战 Windows 10 之 XAML ...

  8. 新手指南: Linux 新手应该知道的 26 个命令

    当你进入了 Linux 的世界,在下载.安装 了某个 Linux 发行版,体验了 Linux 桌面并安装了一些你喜爱和需要的软件之后,应该去了解下 Linux 真正的魅力所在:命令行.每一个 Linu ...

  9. Java编程中“为了性能”需做的26件事

    1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: (1)控制资源的使用,通过线程同步来控制 ...

随机推荐

  1. text-overflow:ellipsis; 使用

    ul li{ height:25px; line-height:25px; width:200px; overflow:hidden; white-space:nowrap;-moz-text-ove ...

  2. [SQL]SUTFF内置函数的用法 (删除指定长度的字符并在指定的起始点插入另一组字符)

    STUFF 删除指定长度的字符并在指定的起始点插入另一组字符. 语法 STUFF ( character_expression , start , length , character_express ...

  3. CookieHelper JS封装Cookie 存取方法

    微信的一些页面会去获取授权,然后在回调到页面,但是这样的话通过url传递的参数有可能丢失掉,我采用存储cookie的方式来传值 建一个CookieHelper.js文件 function Cookie ...

  4. php面向对象的多态

    多态是指使用类的上下文来重新定义或改变类的性质或行为,或者说接口的多种不同的实现方式即为多态.把不同的子类对象都当成父类来看,可以屏蔽不同子类对象之间的差异,写出通用的代码,做出通用的编程,以适应需要 ...

  5. C#打开mdb文件,获取文件下的所有表格,以及获取表格下的所有字段

    String connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|aspxWeb2 ...

  6. mysql颠覆实战笔记(一)--设计一个项目需求,灌入一万数据先

    版权声明:笔记整理者亡命小卒热爱自由,崇尚分享.但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的<web级mysql颠覆实战课程 >.如需转载请尊重老师劳动,保留沈逸 ...

  7. Object-C编译的Protobuf

    因工作需要,要编译Object-C可用的Protocbuf,开始查资料, http://www.cnblogs.com/uniy/archive/2011/12/21/2296405.html 结果执 ...

  8. js设计模式(7)---装饰者模式

    0.前言 下午做事效率很低,无精打采的,整个脑子就跟浆糊一样,看看时间一点点流去,心中只能无可奈何,哎,码农的激情难道就这么容易熄灭吗? 1.该模式的使用情况 假如我们想给对象增加功能,但是又不想修改 ...

  9. Java生成唯一GUID UUID

    GUID(Global unique identifier)全局唯一标识符,它是由网卡上的标识数字(每个网卡都有唯一的标识号)以及 CPU 时钟的唯一数字生成的的一个 16 字节的二进制值. GUID ...

  10. hdu 5719 BestCoder 2nd Anniversary B Arrange 简单计数问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5719 题意:一个数列为1~N的排列,给定mn[1...n]和mx[1...n],问有符合的排列数为多少 ...