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. Part 10 AngularJS sort rows by table header

    Here is what we want to do 1. The data should be sorted when the table column header is clicked 2. T ...

  2. 最新32位和64位xp,win7,win8,win10系统大全(电脑装机版)

    一.系统主要特点 1.安装维护方便快速 - 全自动无人值守安装,采用万能GHOST技术,安装系统过程只需3-5分钟,适 合新旧各种机型. - 集成常见硬件驱动,智能识别+预解压技术,绝大多数硬件可以快 ...

  3. 开始写自己的iOS技术博客了

    2015-09-26 中秋节前夕,开始写自己的iOS开发相关的技术博客,还请广大专业的人士批评指教!欢迎纠错和交流! 在来到北京的第二家公司艾亿新融资本管理的子公司——资配易.由于基本没有加班,也算有 ...

  4. 20150511---Timer计时器（备忘）

    private void timer1_Tick(object sender, EventArgs e) { TimeSpan ts = , , ); string str = ts.Hours + ...

  5. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  6. 详解JSTL的forEach标签

    详解JSTL的forEach标签 为循环控制,它可以将集合(Collection)中的成员循序浏览一遍.      <c:forEach> 标签的语法 说明 : 语法:迭代一集合对象之所有 ...

  7. Python单元测试——深入理解unittest (转)

    单元测试的重要性就不多说了,可恶的是Python中 有太多的单元测试框架和工具,什么unittest, testtools, subunit, coverage, testrepository, no ...

  8. mysql快速上手2

    上一篇文章讲的是mysql的基本操作,这一篇会有一点难以理解,本节主要内容mysql视图,存储过程,函数,事务,触发器,以及动态执行sql 视图view 视图是一个虚拟表,其内容由查询定义.同真实的表 ...

  9. 去除wordpress由代发

    在服务器上安装好wordpress后,通过程序发送邮件却显示...由<www@hostname>代发,解决办法很简单:进入程序文件夹wp-includes修改pluggable.php文件 ...

  10. Ubuntu14.04 安装 PHP cURL

    今天遇到 Fatal error: Call to undefined function curl_init() in /xxx/xxxx/www/application/library/Ku/Htt ...