编写CSS值得使用时间吗? [英] Is writing CSS a worthwhile use of time?

查看:57
本文介绍了编写CSS值得使用时间吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

学习编写CSS比使用生成完整网页的

软件包更好地利用时间吗?


我搬家了到了一个新的平台(Macintosh),带走了我大约400

个人网页,有些可以追溯到目前为止我可能用vi写的。

大约4年前(部分归功于这个组中的提示)我将
转换为大约80页到CSS,并对结果非常满意,

虽然它们很简单。从那时起,我已经忘记了大部分关于CSS的知识,因为我没有修改CSS。略读各种Eric

Meyer书籍到目前为止只帮助我了解了

CSS。


我我想知道编写CSS(和HTML)是否仍然是一种合理的b / b $ b更新旧网页和编写新网页的方法?也许是时候改变一个为网站做所有事情的程序

创建者?也就是说,如果在价格范围内存在任何类似的东西我会考虑。到目前为止,我的测试已经淘汰了迄今为止已经下载的30多个HTML

编辑器。另外,我很快就会发现

得出的结论是,查看HTML编辑器完全是错误的

制作网站的方法。


CSS现在在我看来比四年前更令人困惑,

决定使用什么的条款。我有一个非常简单的有效

HTML测试页面,我的测试CSS位于文档中
http://www.ericlindsay/sheltersrus/index.html 即使提出了很多我不能回答的问题(完全除了是否可以在

除了Safari和Opera之外的任何东西工作。


使用HTML 4.01 Strict是否合理,还是应该看看XHTML?我好像b $ b似乎在这里和其他地方看到帖子意味着更多的浏览器支持

问题如果我去XHTML。我确实在上找到了支持

坚持使用HTML的页面http://www.spartanicus.utvinternet.ie/



charset = ISO-8859-1是否仍然合理,或者应该是什么Unicodey

使用了吗?


你真的应该把链接rel =" icon" href =" favicon.ico"

type =" image / x-icon"在你的标题中,还是完全放弃?不是全部

浏览器无论如何都会在你的网络基础目录中选择一个favicon?我猜

这不是样式表问题。


我曾经使用< base target =" _top">在你的网站上强制跳出非Javascript

浏览器的外部框架集,但验证器

会抱怨这一点。你是否忽略了验证器,或者是否有某种其他方式来支付


* {etc}是一种合理的方式来包含你的主要CSS样式,或者是它会更好地让你的整个页面和样式的div id =文件更好吗?

代替?或者你应该用你的主要CSS

样式来设置html标签的样式吗?我发现了一个似乎表明* {方法

是一个问题的讨论。


text-shadow:5px 5px 10px#11aaaa;在Safari中运行得很好,并且

并没有在Opera中显示(结果对我来说没问题),但是那种可能会破坏其他东西的b $ b浏览器完全?


浮动:对;使我的标题不受我的徽标图像的影响

(除非有人在他们的浏览器中使页面非常狭窄),但是使用float进行定位可能会破坏
很多浏览器中的东西?

如果漂浮不是什么好主意,那是什么?


颜色:红色;背景颜色:透明;如果我输入一个颜色

验证器警告没有背景颜色,但它不接受

透明。我认为透明是允许的,也是默认的。
http://www.w3.org/TR/REC-CSS2/colors.html 我最终在一周前的验证中找到了一个

的帖子(我的新闻组从中期开始阅读

七月,这是我通常读者可以找到的最老的帖子。在

最少解释如何使用透明可能会留下一些颜色组合的问题,所以我可以看到警告是合理的。我想我也可以省略透明,因为它是默认的。


..image {border:none; margin-top:20px; padding-top:20px; }

img {border:none;漂浮:对; padding-left:15px; }

这看起来非常混乱。我希望每张图片都保留在

的每个相关段落的右边,如果我使用了一张桌子就很容易。

相反,我添加了一个div类= "图像"每个段落,所以我要回头来标记汤。如果你使浏览器窗口足够宽,

图片无论如何都将偏离右边距。我有

border:none; (可能仅在img中需要),因为我非常确定IE

会尝试在图片和填充周围放置边框。我认为默认是不显示边框?


过去我避免使用图像(调制解调器带宽和主机不足) />
网站空间),但我现在想添加大量图片。然而,它似乎是
而不是IMG我应该使用OBJECT。除了浏览器支持

可能不存在。幸运的是,这个主题在
http://www.spartanicus中有所涉及。 utvinternet.ie/embed.htm


#logo {border:none;位置:绝对;顶部:0px;左:10px;宽度:

100px; }

我希望徽标(当我有时间画画时)显示在

传统的左上角。但是我希望

文档正文中的第一个东西是h1和第一段,以便使用搜索引擎更好地工作

。我将始终在搜索图片或html或脚本或其他任何内容之前放置搜索材料

引擎。

但绝对位置意味着我必须制作其他类似的东西

sidebar1从页面开始走低。如果有人让他们的浏览器放大到足够高的b $ b b。到目前为止,我不确定我是不是通过做一个绝对的位置来获得更多的问题。


这一点造成页脚的东西是只是一场灾难,所以

远我不知道我要去哪里。

#footer p {margin-top:0; margin-bottom:0; }

#footer h3 {margin-top:0; margin-bottom:0; }

#footer {width:75%;漂浮:对; }

..business {color:#dddddd;背景颜色:透明; }

h3.business {font-size:1.5em; }

p.business {font-size:.8em; }


难道我不能做#footer h3 p

到目前为止,我不明白为什么不能操作h3和p

显然我完全错过了一些东西,但我甚至都不知道要搜索的是什么。可能它只能在h3的孩子上运行,但是到目前为止我绝对没有继承的心理形象。我保持

希望找到一个类似于盒子模型的图表,它解释了边缘内边缘填充内的

内容。


然后有h3.business和p.business都可以工作,但是

与#sidebar1

..sb ul {margin-top :0; padding-top:0px; }

我只能通过添加.sb

类来获得侧边栏看起来合理,这在我看来就像是另一块标签汤。


当我终于在Windows PC上查看

IE以查看有什么中断时,我甚至不想想CSS会有多乱。到目前为止,我甚至没有看到菜单和链接样式的价格。


所以,任何人都想评论我是否应该坚持使用CSS,或者

同样努力尝试找到一个程序,它将为我创建web

页面(可能不在CSS中)。


-
http://www.ericlindsay.com

解决方案

Eric Lindsay写道:

学习编写CSS比使用时间更好地利用时间
产生完整网页的软件包?




最好的选择不是写CSS,而是使用已经写好的CSS

by别人真正知道他们在做什么。对于典型

网站(我知道没有典型的网站),那么辛勤工作

问题都大致相同 - 导航菜单,两三列,那是什么东西。如果可能的话,可以获得一个好的现有CSS并使用

那个。


编辑包很糟糕。仍然没有什么特别好的

。 Dreamweaver编写了狗代码,FP是不可知的。当你用bi清楚地掌握HTML时,你们两个都不会提供任何真正受益的东西。


基于CSS的设计仍然值得一试。 Blag it if you,

如果必须从头开始学习它。

对于一个简单的CSS设计,围绕标准设计并看到它

适用于Safari和Firefox。忽略Mac IE,因为它很好

已经过时了。您可能会关心Windows / IE,这是唯一仍然重要的

浏览器,但不会打球。


如果你可以完全避免水平填充和边框,那么IE

兼容性更容易。否则你会进入众所周知的箱宽

错误。


始终使用一致的大小单位。对任何垂直方向使用ems(或者对于相对字体大小,使用
可能为%),并使用ems或像素进行
水平测量。要么流动,要么流动。并使用ems(可能是最好的),

但请注意,您需要仔细构建以确保

您真正适合不同的窗口和文本尺寸。

否则如果您大量涉及固定尺寸的资产,例如

图像,那么请使用像素进行水平测量并坚持使用

他们。试图在水平轴上混合像素和ems是很难的工作

如果它们非常接近。


警惕浮动。理解那些不仅仅是琐碎的案件并不容易,而且这是一个真正的错误 - 我的IE浏览器。


不要太快解雇表格。如果他们是合理的那么

他们目前仍然比其他选择更具跨浏览器稳定性

forclose in工作。只是避免将它们用于页面级别。设计

工作。


做正确的可用性设置,正确设置你的尺寸单位,避免

Verdana,阅读Joe Clark'可用性书。


做正确的可用性事项,设置你的尺寸单位,避免
Verdana ,阅读Joe Clark的可用性书。




出于兴趣,为什么要避免Verdana?



Robin Tucker写道:

做正确的可用性事项,设置你的尺寸单位,避免
Verdana ,阅读Joe Clark的可用性书。



只是出于兴趣,为什么要避免Verdana?




< http ://www.google.com/search?hl = zh& q =为什么+避免+ Verdana& btnG = Google + Searc h>


-

-bts

-当摩托车,从不跟随猪车


Is learning to write CSS a better use of time than finding and using a
package that produces complete web pages?

I''ve moved to a new platform (Macintosh), taking with me about 400
personal web pages, some dating back so far I probably wrote them in vi.
About 4 years ago (thanks in part to hints found in this group) I
converted about 80 pages to CSS, and was fairly happy with the result,
plain though they are. Since then I''ve forgotten most of what little I
learnt about CSS, since I didn''t revise the CSS. Skimming various Eric
Meyer books has only helped a little so far in bringing me up to date on
CSS.

I am wondering whether writing CSS (and HTML) is still a reasonable
approach to updating old web pages, and writing new ones? Perhaps it is
time to change to a program that does everything for the web site
creator? That is, if anything like that exists in the price range I
would consider. My tests so far have eliminated a dozen or so HTML
editors from the 30 I''ve downloaded so far. Also, I am rapidly coming
to the conclusion that looking at HTML editors is entirely the wrong
approach to making web sites.

CSS now seems to me even more confusing than it was four years ago, in
terms of making decisions about what to use. I have a very simple valid
HTML test page with my test CSS in the document up at
http://www.ericlindsay/sheltersrus/index.html Even that raises many
questions I can''t answer (entirely apart from whether it will work in
anything except Safari and Opera).

Is it reasonable to use HTML 4.01 Strict, or should I look at XHTML? I
seem to be seeing posts here and elsewhere implying more browser support
problems if I go XHTML. I did find a page that gave support for
sticking with HTML on http://www.spartanicus.utvinternet.ie/

Is charset=ISO-8859-1 still reasonable, or should something Unicodey be
used?

Should you really put link rel="icon" href="favicon.ico"
type="image/x-icon" in your header, or leave it out entirely? Don''t all
browsers pick up a favicon in your web base directory anyway? I guess
that isn''t a stylesheet question.

I used to use <base target="_top"> in the head to jump non-Javascript
browsers out of external framesets imposed on your site, but a validator
will complain about that. Do you ignore the validators, or is there
some other way?

Is * { etc } a reasonable way to include your main CSS styles, or is it
better to have a div id=document around your entire page and style that
instead? Or should you maybe style the html tag with your main CSS
styles? I found a discussion that seemed to indicate the * { approach
was a problem.

text-shadow: 5px 5px 10px #11aaaa; works just fine in Safari, and
doesn''t show in Opera (either result is fine by me), but is that sort of
thing likely to break some other browser entirely?

float: right; makes my heading keep out of the way of my logo image
(unless someone makes the page very narrow in their browser), but is
using float for positioning likely to break things in lots of browsers?
And if float isn''t a good idea, what is?

color: red; background-color: transparent; If I put in a color the
validator warns about not having a background-color, but it won''t accept
transparent. I thought transparent was both allowed, and the default.
http://www.w3.org/TR/REC-CSS2/colors.html I eventually found a thread
on validation about a week ago (my newsgroup reading started from mid
July, the oldest posts available to me via my usual reader). That at
least explained how using transparent could leave problems with some
combinations of colours, so I can see a warning is justified. I guess I
might as well leave out the transparent, since it is the default.

..image { border: none; margin-top: 20px; padding-top: 20px; }
img { border: none; float: right; padding-left: 15px; }
This seems very messy. I wanted each picture to stay to the right of
each associated paragraph, which would be easy if I used a table.
Instead I''ve added a div class="image" to each paragraph, so I am headed
back to tag soup. If you make the browser window sufficiently wide the
pictures will align away from the right margin anyhow. I have the
border: none; (probably only needed in img) because I am pretty sure IE
will try to put a border around both the picture and the padding. I
thought the default was not to show a border?

In the past I''ve avoided using images (modem bandwidth and lack of host
site space), but I now I would like to add lots of images. However it
seems that instead of IMG I should use OBJECT. Except browser support
may not be there. Luckily this topic was covered in
http://www.spartanicus.utvinternet.ie/embed.htm

#logo { border: none; position: absolute; top: 0px; left: 10px; width:
100px; }
I wanted the logo (when I get time to draw it) to be displayed in the
traditional top left corner. But I wanted the first stuff in the
document body to be the h1 and first paragraph, to make things work
better with search engines. I will always place material for search
engines ahead of graphics or html or scripts or anything else in my page.
But position absolute means I have to make other things like the
sidebar1 start lower on the page. If someone makes their browser
magnification high enough that will break. Plus so far I''m not sure I
am not headed for more problems by doing an absolute position.

This bit of stuff styling the footer is just a total disaster, and so
far I have no idea where I am going with it.
#footer p {margin-top: 0; margin-bottom: 0; }
#footer h3 {margin-top: 0; margin-bottom: 0; }
#footer {width: 75%; float: right; }
..business { color: #dddddd; background-color: transparent; }
h3.business {font-size: 1.5em; }
p.business {font-size: .8em; }

Shouldn''t I be able to do #footer h3 p
So far I don''t understand why that isn''t operating on h3 and p
Obviously something I''ve missed entirely, but I don''t even know what to
search for. Probably it operates only on the p that is a child of h3,
but so far I have absolutely no mental image of inheritance. I keep
hoping to find a diagram like the box model ones that explained the
content inside padding inside border inside margin stuff.

Then there is the h3.business and p.business which both work, but
contrast that to these from the #sidebar1
..sb ul {margin-top: 0; padding-top: 0px; }
where I could only get the sidebar looking reasonable by adding that .sb
class, which seems to me like another piece of tag soup.

I don''t want to even think how messy CSS might get when I finally get at
IE on a Windows PC to check what breaks. Plus so far I haven''t even
looked at menus and link styling.

So, anyone feel like commenting on whether I should persist with CSS, or
put the same effort into trying to find a program that will make web
pages for me (probably not in CSS).

--
http://www.ericlindsay.com

解决方案

Eric Lindsay wrote:

Is learning to write CSS a better use of time than finding and using a
package that produces complete web pages?



Best option is not to write CSS, but to use CSS that''s already written
by someone else who really knows what they''re doing. For a "typical"
site (and I know there are no typical sites) then the "hard work"
problems are all much the same - nav menus, two or three columns, that
sort of thing. If you possibly can, get a good existing CSS and use
that.

Editing packages are bad. There still just aren''t any notably good
ones. Dreamweaver writes doggy code, FP is unmentionable. As you
clearly have a good grasp of HTML with vi, then neither would offer
anything that were really going to benefit from.

A CSS-based design is still worth the trouble. Blag it if you can,
learn it from scratch if you must.
For an easy CSS design, design around the standards and see that it
works well with Safari and Firefox. Ignore Mac IE, for it''s well
obsolete. You will probably care about Windows/IE and that''s the only
browser that still matters, yet doesn''t play ball.

If you can avoid horizontal padding and borders entirely, then IE
compatibility is easier. Otherwise you''re into the well-known box-width
bugs.

Use consistent size units throughout. Use ems for anything vertical (or
maybe % for relative font sizes) and use either ems or pixels for
horizontal measurements. Either "go fluid" and use ems (probably best),
but be aware that you''ll need to be carefully structured to make sure
that you really are fluid for different window and text sizes.
Otherwise if you''re heavily involved with fixed-size assets like
images, then go with pixels for horizontal measures and stick with
them. Trying to mix pixels and ems on the horizontal axis is hard work
if they''re in close proximity.

Be wary of float. It''s not easy to understand the more than trivial
cases and it''s a real bug-mine around IE.

Don''t be too quick to dismiss tables. If they''re justifiable then
they''re currently still more cross-browser stable than the alternatives
for "close in" work. Just avoid using them for "page level" design
work.

Do the right usability things, set your size units right, avoid
Verdana, read Joe Clark''s usability book.


Do the right usability things, set your size units right, avoid
Verdana, read Joe Clark''s usability book.



Just out of interest, why avoid Verdana?



Robin Tucker wrote:

Do the right usability things, set your size units right, avoid
Verdana, read Joe Clark''s usability book.



Just out of interest, why avoid Verdana?



<http://www.google.com/search?hl=en&q=why+avoid+Verdana&btnG=Google+Searc h>

--
-bts
-When motorcycling, never follow a pig truck


这篇关于编写CSS值得使用时间吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆