没有样式就是最好的样式

Archive for September, 2004


CSS Attribute selectors(CSS的属性选择器)

Sep 17, 2004 Author: | Filed under: Uncategorized

很遗憾,这又是一个IE不支持的属性(CSS2.1),请用mozilla查看效果。

http://www.mozilla.org/products/firefox

运行代码 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

5.8 Attribute selectors

CSS 2.1 allows authors to specify rules that match elements which have certain attributes defined in the source document.

5.8.1 Matching attributes and attribute values

Attribute selectors may match in four ways:

[att]

Match when the element sets the “att” attribute, whatever the value of the attribute.

[att=val]

Match when the element’s “att” attribute value is exactly “val”.

[att~=val]

Match when the element’s “att” attribute value is a space-separated list of “words”, one of which is exactly “val”. If this selector is used, the words in the value must not contain spaces (since they are separated by spaces).

[att|=val]

Match when the element’s “att” attribute value is a hyphen-separated list of “words”, beginning with “val”. The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the “lang” attribute in HTML) as described in RFC 3066 ([RFC3066]).

Attribute values must be identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language.

Example(s):

For example, the following attribute selector matches all H1 elements that specify the “title” attribute, whatever its value:

h1[title] { color: blue; }

Example(s):

In the following example, the selector matches all SPAN elements whose “class” attribute has exactly the value “example”:

span[class=example] { color: blue; }

Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute.

Example(s):

Here, the selector matches all SPAN elements whose “hello” attribute has exactly the value “Cleveland” and whose “goodbye” attribute has exactly the value “Columbus”:

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Example(s):

The following selectors illustrate the differences between “=” and “~=”. The first selector will match, for example, the value “copyright copyleft copyeditor” for the “rel” attribute. The second selector will only match when the “href” attribute has the value “http: //www.w3.org/”.

a[rel~="copyright"]

a[href="http: //www.w3.org/"]

Example(s):

The following rule hides all elements for which the value of the “lang” attribute is “fr” (i.e., the language is French).

*[lang=fr] { display : none }

Example(s):

The following rule will match for values of the “lang” attribute that begin with “en”, including “en”, “en-US”, and “en-cockney”:

*[lang|="en"] { color : red }

Example(s):

Similarly, the following aural style sheet rules allow a script to be read aloud in different voices for each role:

DIALOGUE[character=romeo]

{ voice-family: “Laurence Olivier”, charles, male }

DIALOGUE[character=juliet]

{ voice-family: “Vivien Leigh”, victoria, female }

原文在:

http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

[Edit on 2004-9-17 13:35:18 By guoshuang]

CSS的中文问题

Sep 16, 2004 Author: | Filed under: Uncategorized

毫无疑问,XML支持unicode,其标记使用中文没有任何问题。浏览器也支持。

但是对于XML文件带上层叠式样式表(CSS),那么在CSS却不可以直接使用中文了。

例如:

标题{color: #00FF00;}

这样的CSS语句不管是在IE还是Mozilla (或Mozilla Firefox)均不能正确识别。

那么有没有办法在CSS里使用中文呢。

有一个办法,就是把中文转换为unicode代码加上转义符如上述的语句改为:

0680709898{color: #00FF00;}

其中前面是“标题”两字的unicode代码。可以通过UltraEdit 的Hex编辑查看,注意UltraEdit显示的编码是高字节在后,低字节在前的,即“标题”二字显示十六进制编码为:0768 9898 使用时要倒过来。

将该CSS命名为 “test.css”

不过我记得,样式表手册中有个属性用来指定样式表的字符集,不知道可以解决不,回头测试一下。guoshuang

在HTML里用ruby可以对汉字进行注音

Sep 16, 2004 Author: | Filed under: Uncategorized

运行代码 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

如果IE不认识标签,自然就略过,因此,上面的显示在IE里是正常的。另外,IE也能处理rp标签。但不能正确处理rbc和rtc标签。如果使用这两个标签,则生成的页面看上去就不正常了。而W3C的Amaya能很好的处理这些标签,可惜amaya对编辑中文实在是比较难弄。如果要在现在版本的IE里正常显示又满足W3C的规范,就用ruby, rc,rb和rp三个标签吧。

原文地址在:

http://www.ee-studio.com/drupal/node?from=10

[Edit on 2004-9-16 18:22:09 By guoshuang]

挺有意思的,分析的比较细致。guoshuang commet.

由 eureka 提交于 星期四, 六月 24, 2004 - 12:40 工具和服务 | 计划打算想法

  在网上花了些时间去找这样的工具没找到, WEB4C 在其6月5日的BLOG里写了关于如何完整抓取页面的文章,后面是“未完待续”今天已经24号了,也未见其“下”部分刊出。看其上部分所写的,使用了一些工具,象wget,不但要熟悉这些工具,用起来其实还是挺麻烦。以下是我的试验笔记和想法:

  以http://www.csszengarden.com/tr/chinese/(CSS禅意花园中文版[繁体]为例)。

用IE的“另存为”选“网页,全部”保存网页,会保存一个.htm文件和一个??.files的文件夹,在files文件夹里会保存用到的js, css 和图片文件。象在本例中只保存了一个001-zh.css文件。html页面中显示的图片因为是在css中的,所以没有被保存。用IE保存还有一个缺点就是它大量的修改的原文件。把原本xhtml全部改成了HTML4.0.1。这时重新打开文件保存的文件,却再也看不到原页面的效果了!

使用firefox打开该网页,用“页面另存为”,选择“网页,全部”,它象IE一样创建一个.files文件夹,里面放些图片。这次却连.css文件都没有下来。但它所下载的.html页面里却忠实的保存原来的xhtml格式。

那么,如果要抓取一个网页的所需部分,先看看网页是除了正常的html页面本身外,还可能会从外面导入哪些东东来构成的:

img标签,即文内图片,也就是部分。(这部分一般浏览器能很好的抓下来)。

Applet标签,里面的achive文件IE却是抓不下来的,但现在网上用Applet的比较少,如果需要的话,可以抓取applet标签里的achive属性所带的文件。

embed标签,该标签可以让你插入音乐等内容。可用在ie和ns上,但它不是W3C的标准。若用IE进行保存,是不会保存该标签的src属性部分的。

object标签,象著名的Flash,就是通过该标签插入的,里面的value属性会带上flash文件地地址。IE也不能直接下载文内flash。

其它象input标签里也可能会带上图片,使用src属性引入。

通过scrip标签载入脚本,使用src属性引入脚本。

通过style和link标签导入的CSS还会在CSS正文里继续导入CSS和图片。

通过@import导入CSS文件。

通过url()导入图片文件。

在body标签的background属性会引入背景图片

象href属性所带的内容一般是一些资源,基本与页面显示关系不大,而象base标签可能对导入文件的位置有影响。

下面是以手工的方式抓取一个页面的过程:

抓取html页面,为了避免ie另存为对页面的修改,可以用两种方式:通过其它到该页面的链接使用“目标另存为”方式存下该页面。或使用“查看源文件”然后用记事本保存该页。另外使用一些下载工具,如flashget等下载当然也不会更改该html内容。

参照上述标签内容搜寻该页面的外部内容url地址:这里参照所举的例子(主要讨论css部分),在style标签里有@import “/001/001-zh.css”;的语句。

把该语句使用了绝对路径。因此,只要加上域名即可下载。即:http://www.csszengarden.com/001/001-zh.css。

查看该文件,找里面的url()语句,有: url(/001/blossoms.jpg), url(/001/zen-bg.jpg),url(/001/h1.gif),url(/001/h2.gif),url(/001/paper-bg.jpg),url(/001/h3.gif),url(/001/h4.gif),url(/001/h5.gif),url(/001/h6.gif), url(/001/cr1.gif),url(/001/cr2.gif) 将这些地址前面加上http://www.csszengarden.com/即可下载这些图片。

我们修改源文件重新定位这些图片文件,在这里为方便起见下级目录001,然后把些文件放上,把url()里的绝对路径改成相对,即去掉“/001/”(注意css文件里的图片地址是相对与css文件位置而不是html文件位置。现在可以看到整个html的页面设计了。

现在的关键是怎样以最方便的方法利用程序自动抓取整个html。

以下是我的想法:

利用程序(我用php)自动解析所给网页,生成所有需下载内容的链接,并生成足够的提示来指示如何操作下载后的文件。

利用非常流行的下载软件,如flashget, 浏览该页,然后使用“下载全部链接”方式一次性下载所有内容。

根据前一步的提示组织这些文件。好了,到此,就很好的下载了整个html文件。

这个小项目正在考虑,现在还没有去实现,如果大家觉得有必要去实现这样的功能,请在这里留言。

原文地址在:

http://www.ee-studio.com/drupal/node/view/303

[Edit on 2004-9-16 17:49:46 By guoshuang]

CSDN:标准的UBB正则表达式

Sep 13, 2004 Author: | Filed under: Uncategorized

摘自,CSDN:标准的UBB正则表达式。

http://expert.csdn.net/Expert/topic/2889/2889317.xml?temp=.2898523

http://search.csdn.net/expert/topic/52/5202/2003/1/12/1351125.xml

啥叫“标准”的,我不是很理解,:(- guoshuang

转帖:

public static string FormatDetail(string sDetail)

{

Regex r;

Match m;

//处理空格

sDetail = sDetail.Replace(” “,” ”);

sDetail = sDetail.Replace(”<","<");

sDetail = sDetail.Replace(">“,”>”);

//sDetail = sDetail.Replace(”
“,”

“);

//sDetail = sDetail.Replace(”
“,”
“);

//处标记

r = new Regex(@”([b])([ S ]*?)([/b])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),”” + m.Groups[2].ToString() + ““);

}

//处标记

r = new Regex(@”([i])([ S ]*?)([/i])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),”” + m.Groups[2].ToString() + ““);

}

//处标记

r = new Regex(@”([U])([ S ]*?)([/U])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),”” + m.Groups[2].ToString() + ““);

}

//处[p][/p]标记

r = new Regex(@”((
)*[p])(.*?)((
)*[/p])”,RegexOptions.IgnoreCase|RegexOptions.Singleline);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),”

” + m.Groups[3].ToString() + “

“);

}

//处[sup][/sup]标记

r = new Regex(@”([sup])([ S ]*?)([/sup])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),”” + m.Groups[2].ToString() + ““);

}

//处[sub][/sub]标记

r = new Regex(@”([sub])([ S ]*?)([/sub])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),”” + m.Groups[2].ToString() + ““);

}

//处[url][/url]标记

r = new Regex(@”([url])([ S ]*?)([/url])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

” +

m.Groups[2].ToString() + ““);

}

//处[url=xxx][/url]标记

r = new Regex(@”([url=([ S ]+)])([ S ]*?)([/url])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

” +

m.Groups[3].ToString() + ““);

}

//处[email][/email]标记

r = new Regex(@”([email])([ S ]*?)([/email])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

” +

m.Groups[2].ToString() + ““);

}

//处[email=xxx][/email]标记

r = new Regex(@”([email=([ S ]+)])([ S ]*?)([/email])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

” +

m.Groups[3].ToString() + ““);

}

//处[size=x][/size]标记

r = new Regex(@”([size=([1-7])])([ S ]*?)([/size])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

” +

m.Groups[3].ToString() + ““);

}

//处[color=x][/color]标记

r = new Regex(@”([color=([S]+)])([ S ]*?)([/color])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

” +

m.Groups[3].ToString() + ““);

}

//处[font=x][/font]标记

r = new Regex(@”([font=([S]+)])([ S ]*?)([/font])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

” +

m.Groups[3].ToString() + ““);

}

//处理图片链接

r = new Regex(”\[picture\](\d+?)\[\/picture\]“,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

"" target="_blank">

"">“);

}

//处理[align=x][/align]

r = new Regex(@”([align=([S]+)])([ S ]*?)([/align])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

” +

m.Groups[3].ToString() + “

“);

}

//处[H=x][/H]标记

r = new Regex(@”([H=([1-6])])([ S ]*?)([/H])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

sDetail = sDetail.Replace(m.Groups[0].ToString(),

” +

m.Groups[3].ToString() + ““);

}

//处理[list=x][*][/list]

r = new Regex(@”([list(=(A|a|I|i| ))?]([ S ]*)
)(([*]([ S ]*
))*?)([/list])”,RegexOptions.IgnoreCase);

for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

{

string strLI = m.Groups[5].ToString();

Regex rLI = new Regex(@”[*]([ S ]*
?)”,RegexOptions.IgnoreCase);

Match mLI;

for (mLI = rLI.Match(strLI); mLI.Success; mLI = mLI.NextMatch())

{

strLI = strLI.Replace(mLI.Groups[0].ToString(),”

  • ” + mLI.Groups[1]);

    }

    sDetail = sDetail.Replace(m.Groups[0].ToString(),

      ” + m.Groups[4].ToString() + “” +

      strLI + “

    “);

    }

    //处理换行,在每个新行的前面添加两个全角空格

    r = new Regex(@”(
    (( )| )+)(?<正文>S+)”,RegexOptions.IgnoreCase);

    for (m = r.Match(sDetail); m.Success; m = m.NextMatch())

    {

    sDetail = sDetail.Replace(m.Groups[0].ToString(),”
      ” + m.Groups["正文"].ToString());

    }

    //处理换行,在每个新行的前面添加两个全角空格

    sDetail = sDetail.Replace(”
    “,”
    “);

    return sDetail;

    //return “

    ” + sDetail + “

    “;

    }

    [align=right][size=1][color=#cccccc][Edit on 2004-9-13 19:12:13 By guoshuang][/color][/size][/align]

  • httplook

    Sep 13, 2004 Author: | Filed under: Uncategorized

    google搜索中文,只找到这么一句话

    HTTPLook用于测试站点或服务端CGI脚本,学习网页编程。

    guoshuangweb/software/httplook.exe

    http://www.httpsniffer.com/

    [Edit on 2004-9-13 14:14:20 By guoshuang]
    [Edit on 2004-9-13 15:07:47 By guoshuang]