css为什么会出现“ 用户代理html.css”

css为什么会出现“ 用户代理html.css”,第1张

css出现 用户代理html.css这种情况也是正常的!

1、你所有<p>标签都没有关闭:<p class="p1">人民币什么的都是浮云<p>,后面的<p>改成</p>,三句都改好;

2、把<style>标签也写入<head>区里面;

3、检查“C:\Documents and Settings\Administrator\zhuomian\css.css”里面是否也定义了.p1样式。

要从固定的、基于像素的设计方法转到d性的、相对的设计方法并不容易。但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。

像素是计算机屏幕上的不可缩放的点,而一个 em 就是一个字大小的方块。由于字体大小的变化, em 代表用户喜欢的文字大小的相对单位。

采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用d性的设计方法,就可以充分利用电脑的显示器和浏览器。

也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。

为了理解d性设计,我们必须首先来看看一个似乎与此无关的问题 - 指定文字大小的几种方式。

d性文本

显然文字是最容易实现的d性设计的。能够设定喜欢的文字大小是用户最常见的要求,因此不可忽视。

亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。

如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows 下的IE却不能。

em 存在的问题

Em 似乎是进行文字相对大小设定时的单位,浏览器默认的文字高度是16像素,对大多数设计者来说太大了,不合他们的口味。要使用 em,设计者一般将文字的初始大小设为小于 1em。

例如:

body { font-size: 0.8em}

h1 { font-size: 2em}

p { font-size: 1em}

看起来似乎可行,但有一个问题 - 如果你在 IE 中将“文字大小”设为“较小”或“最小”,文字就会小得难以阅读。由于 IE 如此普及, em 似乎不是可行的选择。

得出的。 Owen Briggs 测试了264种不同的文字缩放方法并演示了 em 之类的相对单位行不通。许多设计人员现在都用像素为单位指定文字大小,不是出于精确控制网页外观的需要,而是似乎没有更为合理的其他选择。

如此看来,要么是难看的大字体,要么无法缩放,好像无法两全。别着急,接着读下去。

另一种“大字体”后备样式

在与无法缩放的像素所带来的亲和力问题的战斗中,许多作者在他们的网页上使用了一种的技术,可通过网页上的一个链接进行切换。

这种方法固然不错,但是如果和相对文字大小的措施(比如

CSS 关键词

Font-size 的关键词(xx-small, medium, x-large,等等)好像就是答案。在 IE 中,当用户选择“较大”或“最大”时文字会变大,选择“较小”或“最小”时文字会变小,一直到合适的大小。与其他的d性设计方法不同,使用关键字的好处是当对文字进行缩放时,永远不会使文字实际像素大小低于某个值,所以无论用户如何选择文字大小,都应当有良好的可读性。

在 ALA 的对关键字有更详尽的解说,这种方法的最好的示例也许就是你正在阅读的这篇文章。(在最近一次的改版之前,ALA 使用了后备的“大字体”样式切换,一个样式表使用像素指定文字大小,另一个用的是基于关键字的相对大小方法。)

百分比使得 em 可行

Em 之所以可行是因为通过设定初始文字的百分比,可以很容易避免文字过小的问题。虽然其原理并非显而易见,但的确可行。当采用这种方案时,IE 文字大小各档设置之间的间隔就不会显得生硬,设计者可以精确设置初始文字大小,使得在“较小”和“最小”时仍然得到较好的可读性。这样有使 em 有了用武之地。(甚至于 Briggs 现在也更.)

例如:

body { font-size: 80%}

h1 { font-size: 2em}

p { font-size: 1em}

不用关键字而采用 em 的好处是你可以用 em 来指定全部布局的尺寸,它可以随着文字的大小按比例缩放。

d性布局

对设计者来说,比d性字体更困难的是彻底的相对布局 - 如果用 em 来设定布局的尺寸事情就容易了。

让布局具有d性,使之随着用户改变文字大小时自动适应,这好像有些多余甚至毫无必要。但是既然你让文字可以伸缩,那么让包容文字的布局也随之伸缩也是顺理成章的事。

另外,如果用户选择了较大的字体,则周围的空间应当会随之按比例增加,保持了“设计者”选择的比例,使文章容易阅读。

这种方案的另一个好处是可以避免不希望的文字换行。如果一个窄的栏目宽度以像素来定义,当其中的文字变大时,可能会打乱整个布局。采用文字大小比例来指定栏目宽度就可避免这个问题。

关于该方案的一个例子请看 CSS Zen Garden 上的作品 。

太宽了!

将网页的初始文字大小指定为 100% 以后,在 IE 的“中等”字体下,36em 的宽度应该是 576 个像素(作为参考,ALA 的宽度为600个像素),在“最大”的字体下,36em 应当增加到 768 个像素(Windows 下 IE 6 的测试结果)。如果再大一点,在 800 像素宽的屏幕、“最大”号字体下就可能会显得太宽了。

CSS 对这个问题的解决方案是 max-width 属性,它可以指定某个元素的最大宽度。不幸的是 Internet Explorer 不支持(不知有谁想过没有?)。

另一个解决方案就是采用流动式布局,也就是说根本不指定内容区域的宽度,让文字自然流动,充满屏幕宽度(采用了这种方案)。许多人不接受这种方案,因为在宽屏幕下的可读性不好,但对于移动设备这样的小屏幕非常合适。

如果你准备采用d性布局方案,在指定边界或者位图之类的由像素构成的对象时,仍然要以像素为单位,这可能会和基于文字大小关系发生冲突;但这不应成为不采用d性布局的理由。

使图形d性化

用相对大小来设置位图的尺寸会导致灾难性的后果。对付这个问题可以这样做 - 维持图形原有的解析度不变,将它裁剪到合适的大小。

通过更换背景图片可以就可做到。这里是一个标题元素的例子,你也可以采用其他的图片替换技术:

h1 { font-size: 1emwidth: 10emheight: 100pxtext-indent: -1234embackground-image: url(whatever.jpg)}

或者(正如所做的那样),你可以将图片包含在一个容器,比如一个有下面样式的 DIV 中:

div { width: 10emoverflow: hidden}

本文中提到的许多d性设计方法都可以在 中看到。

1.我们来讲sublime自带的、基本的代码格式化功能——“reindent”。个人先建立了一个HTML页面作为示例。多个元素的排列和缩进都被打乱。

2.为了使其排列整齐,我们对文本进行全选(当然,如果只想重新排列部分代码也可以选择部分),然后选择sublime菜单栏的“edit”-“line”-“reindent”选项。reindent即重新缩进,顾名思义,即对当前的文本进行重新缩进处理。也可以看到,在其上方还有indent 和 unindent两个选项,分别代表增加缩进和减少缩进功能,并在后方写有其快捷键,各位网友可以自行尝试。

3.在“reindent”后,可以看到,全部的代码缩进都正常了。但是,sublime自带的重新缩进功能较为单一,就像其名称一样,仅仅是保证缩进正常了而已。而对于代码中写法不规范的地方,无法进行处理,这不符合我们编码的需求。接下来我们结合sublime插件,来讲解更完善的格式化代码功能。

4.第二部分,笔者将结合sublime插件来进行代码的格式化处理。由于不同的代码有不同的格式化要求,本部分仅使用sql format来进行演示,其它语言的格式化大家可以自行查找插件安装。首先,笔者在网上找了一段SQL代码,并特地打乱了其排布。

5.然后,使用快捷键Ctrl+Shift+P或者点击sublime菜单栏的“Preferences”-“package control”, 打开命令面板。如果各位网友没能打开,说明尚未安装package control,可以看下方的注意事项。

6.选择命令面板中的Install package,在新d出的搜索栏中输入“format”可以看到有大量的格式化插件可供选择。当然,并不是所有的格式化插件都要有format字样。重新搜索,笔者选择了名为“SQL Beautifier”的SQL格式化插件。

7.安装完成之后,该插件在Windows下提供了Ctrl+K 、Ctrl+F的格式化快捷键,从而提供格式化 *** 作。注意,是先按Ctrl + K,再按下Ctrl + F,否则的话,单独使用Ctrl+F是默认查找的快捷键。

8.总结,sublime本身只提供基本的缩进重置功能,不同语言的格式化可以使用不同的插件来实现。开源社区的生命力是无与伦比的,各种层出不穷的插件为我们的开发工作提供了诸多便利。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8337667.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存