代码之家 › 专栏 › 技术社区 › brendan

如何以编程方式扩展CSS速记属性?

css .net c#

brendan · 技术社区 · 14 年前

是否有.NET CSS分析器允许我分析 css shorthand properties 变成他们的长手形?

例如,我想采取以下措施:

        #somediv{
            margin: 10px;
            padding: 10px 20px;
            border:5px solid #FFF;
        }

并翻译成:

        #somediv{
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 10px;
            padding-left: 20px;
            border-width: 5px;
            border-style: solid;
            border-color: #FFF; 
        }

下面是一个非常好的列表,列出了我需要以这种方式处理的所有不同属性: http://www.dustindiaz.com/css-shorthand/

理想情况下,我希望在.NET中有一些东西,但是如果有其他语言是开放源代码的话,我可能可以对它进行修改。

更新

在没有太多细节的情况下,我想在这里做的是基本前提:

我需要通过编程获取多个CSS文档,并将它们合并以创建一组明确的CSS。

因此,如果1号文件有:

p { padding: 10px;}

然后我加上2号文件:

p { padding-left:20px;}

得到的CSS应该是:

p { padding-top: 10px; padding-right:10px; padding-bottom:10px; padding-left:20px;}

因为后来添加的文档会覆盖单个属性。为了准确地做到这一点,我需要首先获取每个CSS并将每个属性分解为它的最低元素。

3 回复 | 直到 14 年前

brendan 14 年前

对于常规的CSS解析,我发现这是最容易使用的:

http://www.codeproject.com/KB/recipes/CSSParser.aspx

为了将速记属性分解成它们的长手形式,我发现了两种方法:

在.NET中: http://www.modeltext.com/css/index.aspx

在javascript中: http://www.glazman.org/JSCSSP/

Karthik Mahalingam 14 年前

最简单的方法是使用.NET的WebBrowserControl和MSHTML(IE渲染器),这也是最可靠的方法!

//Create the instance of new webbrowser control.
        WebBrowser browser = new WebBrowser();

        //Navigate to the specified URL.
        browser.Navigate(@"test.html");

        //Wait until the webpage gets loaded completely.
        while (browser.ReadyState != WebBrowserReadyState.Complete)
        {
            Application.DoEvents();
        }


        foreach (object divElement in
            (browser.Document.GetElementsByTagName("div")))
        {
            IHTMLCurrentStyle currentStyle = ((divElement as HtmlElement)
                .DomElement as IHTMLElement2).currentStyle;

            Console.WriteLine(currentStyle.marginLeft);
            Console.WriteLine(currentStyle.marginRight);

        }

注:

要使此代码正常工作,需要添加对Microsoft.mshtml.dll的引用,该引用可在以下位置找到。

C:程序文件\Microsoft.NET\主互操作程序集\

jimplode 14 年前

你能详细说明一下你为什么要这样做吗?

您是否希望它能够通过以下方式进行正确的解析:

填料:10px 15px;

进入之内

填充顶部:10px; 右侧填充:15px; 垫底:10px; 左侧填充:15px;