精华内容
下载资源
问答
  • 利用style标记定义样式
    千次阅读
    2021-06-09 14:11:35

    本篇文章主要讲的是html style标签的定义和属性介绍,先让我们了解style标签在HTML中的一些用途和位置,然后介绍了使用中的一些方法和细节技巧,让我们一起来看看吧

    html style标签的定义和用法:

    style 标签用于为 HTML 文档定义样式信息。

    在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。

    type 属性是必需的,定义 style 元素的内容。唯一可能的值是 text/css 。

    style 元素位于 head 部分中。

    HTML style 标签实例:html head style type= text/css h1 {color:red}p {color:blue} /style /head body h1 Header 1 /h1 p A paragraph. /p /body /html

    必需的属性:

    type : text/css : 规定样式表的 MIME 类型。

    html style标签的使用方法详解:

    /style 标签对中书写各种标签的样式,可以是body也可以是h1,即将行内样式全写在一块儿

    比如10个标签都是同一个class的话,如果在行内样式中就需要写10条

    而在style中写一条就成。

    现在都是结构(html)、样式(css)、行为(js)相分离的设计模式p id= xxx === style #xxx{} /style p >

    style标签在css样式表中按其所在位置分三种:

    1.内嵌样式表

    2.内部样式表

    3.外部样式表

    下面详细解释一下:

    1.内嵌样式表是写在使用它的标签(Tag)内的,例如要在 p 标签中使用,

    其语法为:p style font-size:20pt 这段文字使用了内嵌样式表,更改了字体大小为20 /p

    2.内部样式表不同于内嵌样式表,其是写在html网页的 head /head 标签之间的,所以它对本网页全部有效。应注意的是,因为它不是写在某一个标签内的,所以在写的时候要注意,自己想在那个标签内使用这个样式表,再定义的时候也要写清楚,否则会造成整个页面的混乱。例如:html head p.mylayout style type= text/css {font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; } /style /head body p >

    可以看到,在定义内部样式表的时候, style 前面声明的时候应该首先声明在哪个标签里使用这个样式表,如果并不想在该网页所有的此标签中都使用这个样式表则在声明的标签后面加上自己定义的一个样式表名称,例如上面的p.mylayout,意为只能在该网页的 p 标签中使用此样式表,在要使用这个样式表的 p 标签中声明,声明方式为 标签 自定义样式表名称

    利用样式表选择,你可以用同样的HTML标签构成不同的样式。比如说,你希望段落 p 有两种样式,一种是居中对齐,一种是居右对齐。你就可以写如下样式:p.right {text-align:right}p.center {text-align:center}

    其中right和center就是两个样式表。然后你就可以引用这两个样式表,示例代码如下:p >

    也可以不用HTML 标签,直接用“.”加上样式表名称。示例代码如下:.center {text-align: center}

    这种通用的样式表名称就没有标签的局限性,可以用于不同的标签。比如:h1 class = center 这个标题居中显示。 /h1 p class = center 这个段落居中显示。 /p

    3.外部样式表

    外部样式表就是将样式表的内容单独写到一个notepad中,并保存为后缀为.css的文件,在你写的想要调用的网页中加上如下的代码(当然还是加到 head /head 之间):link href= 你css文件所在的文件夹 rel= stylesheet type= text/css

    例如:

    先写一段代码并存为p.cssp.mylayout {font-size:20pt; border-width:1px; color:blue; }

    然后在你写的网页中调用这个样式表:HTML head link href= p.css所在的相对路径 rel= stylesheet type= text/css /head body p >

    所以一个外部样式表可以被很多网页调用,这就是外部样式表的好处。

    样式表也可以串联,即一个网页用多个css,其串联的顺序是:内嵌 内部 外部 浏览器自身的

    也就是说当一个网页有内部css时,它在的调用外部css就被覆盖了(即外部css不起作用)

    css样式表定义时的嵌套说明:

    p b {color:blue;}

    使用时:p 这段文字在b标签中的为 b 蓝色 /b /p

    cursor:hand 这个属性是将鼠标变成手的形状。

    【小编的相关文章】

    html em标签的作用是什么? em 和 i 标签的区别

    html5 output标签是什么意思?html5 output标签的使用方法

    以上就是html style标签是什么意思?关于style标签的使用方法详解的详细内容,html教程

    郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

    更多相关内容
  • Android样式(style)和主题(theme)

    千次阅读 2016-12-04 21:33:23
    样式是在与指定布局的 XML 不同的 XML 资源中进行定义。Android 中的样式与网页设计中层叠样式表的原理类似 — 您可以通过它将设计与内容分离。例如,通过使用样式,您可以将以下布局 XML: android:layout_width=...

    样式和主题

    样式是指为 View 或窗口指定外观和格式的属性集合。样式可以指定高度、填充、字体颜色、字号、背景色等许多属性。 样式是在与指定布局的 XML 不同的 XML 资源中进行定义。

    Android 中的样式与网页设计中层叠样式表的原理类似 — 您可以通过它将设计与内容分离。

    例如,通过使用样式,您可以将以下布局 XML:

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#00FF00"
        android:typeface="monospace"
        android:text="@string/hello" />
    简化成这个样子:
    
    <TextView
        style="@style/CodeFont"
        android:text="@string/hello" />
    

    布局 XML 中所有与样式有关的属性都已移除,并置于一个名为 CodeFont 的样式定义内,然后通过 style 属性加以应用。 您会在下文中看到对该样式的定义。

    主题是指对整个 Activity 或应用而不是对单个 View(如上例所示)应用的样式。 以主题形式应用样式时,Activity 或应用中的每个视图都将应用其支持的每个样式属性。 例如,您可以 Activity 主题形式应用同一 CodeFont 样式,之后该 Activity 内的所有文本都将具有绿色固定宽度字体。

    定义样式

    要创建一组样式,请在您的项目的 res/values/ 目录中保存一个 XML 文件。 可任意指定该 XML 文件的名称,但它必须使用 .xml 扩展名,并且必须保存在 res/values/ 文件夹内。

    该 XML 文件的根节点必须resources。

    对于您想创建的每个样式,向该文件添加一个 style 元素,该元素带有对样式进行唯一标识的 name 属性(该属性为必需属性)。然后为该样式的每个属性添加一个 item 元素,该元素带有声明样式属性以及属性值的 name(该属性为必需属性)。 根据样式属性,item 的值可以是关键字字符串、十六进制颜色值、对另一资源类型的引用或其他值。以下是一个包含单个样式的示例文件:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
            <item name="android:layout_width">fill_parent</item>
            <item name="android:layout_height">wrap_content</item>
            <item name="android:textColor">#00FF00</item>
            <item name="android:typeface">monospace</item>
        </style>
    </resources>
    

    resources 元素的每个子项都会在编译时转换成一个应用资源对象,该对象可由 style>元素的 name 属性中的值引用。 可从 XML 布局以 @style/CodeFont 形式引用该示例样式(如上文引言中所示)。

    style 元素中的 parent 属性是可选属性,它指定应作为此样式所继承属性来源的另一样式的资源 ID。 如果愿意,您可在随后替换这些继承的样式属性。

    切记,在 XML 中定义您想用作 Activity 或应用主题的样式与定义视图样式的方法完全相同。 诸如上文所定义的样式可作为单个视图的样式加以应用,也可作为整个 Activity 或应用的主题加以应用。 后文将阐述如何为单个视图应用样式或如何以应用主题形式应用样式。

    继承

    您可以通过 style 元素中的 parent 属性指定应作为您的样式所继承属性来源的样式。您可以利用它来继承现有样式的属性,然后只定义您想要更改或添加的属性。 您可以从自行创建的样式或平台内建的样式继承属性。 (如需了解有关从 Android 平台定义的样式继承属性的信息,请参阅下文的使用平台样式和主题。) 例如,您可以继承 Android 平台的默认文本外观,然后对其进行修改:

        <style name="GreenText" parent="@android:style/TextAppearance">
            <item name="android:textColor">#00FF00</item>
        </style>
    

    如果您想从自行定义的样式继承属性,则不必使用 parent 属性, 而是只需将您想继承的样式的名称以前缀形式添加到新样式的名称之中,并以句点进行分隔。 例如,要创建一个继承上文定义的 CodeFont 样式的新样式,但将颜色设置为红色,您可以按如下方式创建这个新样式:

     <style name="CodeFont.Red">
            <item name="android:textColor">#FF0000</item>
        </style>
    

    请注意,style 标记中没有 parent 属性,但由于 name 属性以 CodeFont 样式名称(这是您创建的一个样式)开头,因此这个样式会继承该样式的所有样式属性。 这个样式随后会替换 android:textColor 属性,将文本设置为红色。 您可以 @style/CodeFont.Red 形式引用这个新样式。

    您可以通过使用句点链接名称继续进行这样的继承,次数不限。 例如,您可以通过以下代码将 CodeFont.Red 扩大:

        <style name="CodeFont.Red.Big">
            <item name="android:textSize">30sp</item>
        </style>
    

    这段代码同时从 CodeFont 和 CodeFont.Red 样式继承,然后添加 android:textSize 属性。

    注:这种通过将名称链接起来的继承方法只适用于由您自己的资源定义的样式。 您无法通过这种方法继承 Android 内建样式。 要引用内建样式(例如 TextAppearance),您必须使用 parent 属性。

    样式属性

    既然您已了解了样式是如何定义的,就需要了解什么类型的样式属性(由 item 元素定义)可以使用。您多半已经熟悉了其中的一些,例如 layout_width 和 textColor。 当然,还有许多其他样式属性可供您使用。

    相应的类引用最便于查找适用于特定 View 的属性,其中列出了所有支持的 XML 属性。 例如,TextView XML 属性表中所列的所有属性都可在 TextView 元素(或其其中一个子类)的样式定义中使用。 该引用中列出的其中一个属性是 android:inputType,因此,如果您正常情况下会在 EditText 元素中放置 android:inputType 属性,如下所示:

    <EditText
        android:inputType="number"
        ... />
    您就可以改为给包括该属性的 EditText 元素创建一个样式:
    
    <style name="Numbers">
      <item name="android:inputType">number</item>
      ...
    </style>
    

    这样您的布局 XML 现在便可实现这个样式:

    <EditText
        style="@style/Numbers"
        ... />
    

    这个简单示例可能显得工作量更大,但如果您添加更多样式属性并将能够在各种地方重复使用样式这一因素考虑在内,就会发现回报可能很丰厚。

    如需查看所有可用样式属性的参考资料,请参阅 R.attr 参考资料。 切记,所有 View 对象仍然不接受样式属性,因此正常情况下您应该引用所支持样式属性的具体 View 类。 不过,如果您应用样式的 View 不支持所有样式属性,该 View 将只应用那些受支持的属性,并直接忽略其他属性。

    不过,某些样式属性任何 View 元素都不提供支持,只能以主题形式应用。 这些样式属性应用于整个窗口而非任何类型的 View。例如,主题的样式属性可以隐藏应用标题、隐藏状态栏或更改窗口的背景。 这些类型的样式属性不属于任何 View 对象。要发现这些仅主题样式属性,请在 R.attr 参考资料中查看有关以 window 开头的属性的内容。 例如,windowNoTitle 和 windowBackground 是只有在样式以主题形式应用于 Activity 或应用时才起作用的样式属性。 请参阅下文有关以主题形式应用样式的信息。

    注:别忘了使用 android: 命名空间为每个 item 元素中的属性名称添加前缀。

    例如:<item name="android:inputType">。
    

    对 UI 应用样式和主题

    设置样式的方法有两种:

    如果是对单个视图应用样式,请为布局 XML 中的 View 元素添加 style 属性。
    或者,如果是对整个 Activity 或应用来应用样式,请为 Android 清单中的 activity 或 application 元素添加 android:theme 属性。
    当您对布局中的单个 View 应用样式时,该样式定义的属性只应用于该 View。 如果对 ViewGroup 应用样式,子 View 元素将不会继承样式属性 — 只有被您直接应用样式的元素才会应用其属性。 不过,您可以通过以主题形式应用样式,使所应用的样式作用于所有 View 元素。

    要以主题形式应用样式定义,您必须在 Android 清单中将样式应用于 Activity 或应用。 如果您这样做,Activity 或应用内的每个 View 都将应用其支持的每个属性。 例如,如果您对某个 Activity 应用前面示例中的 CodeFont 样式,则所有支持这些文本样式属性的 View 元素也会应用这些属性。 任何不支持这些属性的 View 都会忽略这些属性。 如果某个 View 仅支持部分属性,将只应用这些属性。

    对视图应用样式

    为 XML 布局中的视图设置样式的方法如下:

    <

    TextView
        style="@style/CodeFont"
        android:text="@string/hello" />
    现在该 TextView 将按照名为 CodeFont 的样式的定义设置样式(请参阅上文定义样式中的示例)。
    

    注:style 属性不使用 android: 命名空间前缀。

    对 Activity 或应用应用主题
    要为您的应用的所有 Activity 设置主题,请打开 AndroidManifest.xml 文件并application 标记,在其中加入带样式名称的 android:theme 属性。 例如:

    <application android:theme="@style/CustomTheme">
    如果您只想对应用中的一个 Activity 应用主题,则改为给 <activity> 标记添加 android:theme 属性。
    

    正如 Android 提供了其他内建资源一样,有许多预定义主题可供您使用,可免于自行编写。 例如,您可以使用 Dialog 主题,为您的 Activity 赋予类似对话框的外观:

    <activity android:theme="@android:style/Theme.Dialog">
    或者,如果您希望背景是透明的,则可使用 Translucent 主题:
    
    <activity android:theme="@android:style/Theme.Translucent">
    

    如果您喜欢某个主题,但想做些调整,只需将该主题添加为您的自定义主题的 parent。 例如,您可以像下面这样对传统明亮主题进行修改,使用您自己的颜色:

    <color name="custom_theme_color">#b0b0ff</color>
    <style name="CustomTheme" parent="android:Theme.Light">
        <item name="android:windowBackground">@color/custom_theme_color</item>
        <item name="android:colorBackground">@color/custom_theme_color</item>
    </style>
    

    (请注意,此处颜色需要以单独资源形式提供,因为 android:windowBackground 属性仅支持对另一资源的引用;不同于 android:colorBackground,无法为其提供颜色字面量。)

    现在,在 Android 清单内使用 CustomTheme 替代 Theme.Light:

    <activity android:theme="@style/CustomTheme">
    

    根据平台版本选择主题
    新版本的 Android 可为应用提供更多主题,您可能希望在这些平台上运行时可以使用这些新增主题,同时仍可兼容旧版本。 您可以通过自定义主题来实现这一目的,该主题根据平台版本利用资源选择在不同父主题之间切换。

    例如,以下这个声明所对应的自定义主题就是标准的平台默认明亮主题。 它位于 res/values 之下的一个 XML 文件(通常是 res/values/styles.xml)中:

    <style name="LightThemeSelector" parent="android:Theme.Light">
        ...
    </style>
    为了让该主题在应用运行在 Android 3.0(API 级别 11)或更高版本系统上时使用更新的全息主题,您可以在 res/values-v11 下的 XML 文件中加入一个替代主题声明,但将父主题设置为全息主题:
    
    <style name="LightThemeSelector" parent="android:Theme.Holo.Light">
        ...
    </style>
    

    现在像您使用任何其他主题那样使用该主题,您的应用将在其运行于 Android 3.0 或更高版本的系统上时自动切换到全息主题。

    R.styleable.Theme 提供了可在主题中使用的标准属性的列表。

    如需了解有关根据平台版本或其他设备配置提供备用资源(例如主题和布局)的详细信息,请参阅提供资源文档。

    使用平台样式和主题

    Android 平台提供了庞大的样式和主题集合,供您在应用中使用。 您可以在 R.style 类中找到所有可用样式的参考资料。 要使用此处所列样式,请将样式名称中的所有下划线替换为句点。 例如,您可以使用 “@android:style/Theme.NoTitleBar” 应用 Theme_NoTitleBar 主题。

    不过,R.style 参考资料并不完备,未对样式做全面说明,因此查看这些样式和主题的实际源代码可让您更清楚地了解每个样式提供的样式属性。如需查看更详实的 Android 样式和主题参考资料,请参阅以下源代码:
    Android 样式 (styles.xml)
    Android 主题 (themes.xml)

    这些文件有助于您通过示例进行学习。例如,在 Android 主题源代码中,您可以找到

    如需了解有关 XML 中样式和主题语法的详细信息,请参阅样式资源文档。

    如需查看您可用来定义样式或主题的可用样式属性(例如“windowBackground”或“textAppearance”)的参考资料,请参阅 R.attr 或您创建的样式所对应的 View 类。

    展开全文
  • DOM Style样式对象的详细用法

    千次阅读 2018-07-09 20:38:44
    DOM Style样式对象的详细用法HTML Style样式比较复杂,相应访问、修改方法也有所差异。参考相关资料,整理如下。典型Html文件如下,有三种定义方式。&lt;head&gt; &lt;style type="text/css"...

    DOM Style样式对象的详细用法

    HTML Style样式比较复杂,相应访问、修改方法也有所差异。参考相关资料,整理如下。

    典型Html文件如下,有三种定义方式。

    <head>
        <style type="text/css">
                   /* 内部样式 */
          h3 {color:green;}
        </style>
                <!-- 外部样式 style.css -->
        <link rel="stylesheet" type="text/css" href="style.css"/>
               <!-- 在外部的styles.css文件中,代码如下:
                   h3 {color:blue;} -->
    </head>
    <body>
        <h3 style ="color:Black;" >测试!</h3>
    </body>

    定义1:行内样式, (内联样式)Inline style

      任何HTML元素标签都会有一个通用的属性style。它会返回CSSStyleDeclaration对象。

    样式定义在HTML元素的标准属性style里

    a 将分号『;』隔开的一个或者多个属性:值(其全部为元素的style属性的值)

    b 属性和属性值之间用 『:』连接 
    下面我们看几个最常见的行内style样式的访问方式。Style在元素节点内,style可读可写;

    <div id='St1' style="font-family:Arial,Helvetica;width:100px; height:100px; color:red;">芒果</div> 

    var oV1 = document.getElementById('St1')

    a)获取:x = oV1.Style.width

            x = oV1.Style.getPropertyValue('height')

    b)设置:oV1.style.backgroundColor = 'red';

         oV1.Style.setProperty('height', '200px')

    c)移出(2种):oV1.style.font-family="";
             oV1.style.removeProperty("background-color")

    d)所有内联样式 CSS 属性

    style样式是个 CSSStyleDeclaration 对象,它不仅提供了单个 CSS 属性的访问方式,如cssText属性 ,也提供 setProperty()、getPropertyValue()及removeProperty() 方法

      oV1.Style.cssText = " height:200px; width: 200px"

      oV1.Style.cssText = '';

      oV1.setAttribute('style', ' height:100px; width:100px');

      oV1.getAttribute('style');

      oV1.removeAttribute('style');

      仅能操作style属性中定义的内联样式,无法获取或设置样式表中的样式
     

    定义2:内部样式表(style元素) Internal style sheet

    其使用 <style> 标记将样式定义为内部块对象,内部样式只对所在的网页有效。

    示例代码如下: 嵌入 CSS 可以有效减少 HTTP 请求,提升页面性能
    <head>

    <style type="text/css">
         <!--

          //div(选择器)  {width: 100px;(样式声明) }
           div,h3 { width: 100px; }                   //两个标签选择

         #Id1   { width: 100px; height: 100px; }       //一个id选择符
           .c3    { color:blue;}                                                //class选择符
           p.cla4 { color:#fff; background:#070;}                            /* 一个元素、一个class选择符

         -->

    </style>

    <style type="text/css">  @import url(sty2.css); </style>            //导入式

    <link rel="stylesheet" type="text/css"  href="wider.css">            //外部链接式(rel,type不要动)
    </head>
          //wider.css中的定义   #box { width: 200px; }


    function getStyle(oDiv, attr){
        if (oDiv.currentStyle)  {return oDiv.currentStyle[attr];              //针对IE浏览器 }
        else                    {return getComputedStyle(oDiv, false)[attr]; }  //Firefox浏览器 
        } 
    <div id="id1"  class="c3" >test style</div> 
    var oT1 = document.getElementById('id1'); 
    var a = getStyle(oT1, 'width');

      使用style属性可以设置行内的CSS样式,而通过id和class调用时最常用的方法。

      CSSStyleSheet类型表示通过<link>元素(HTMLLinkElement对象)和<style>元素(HTMLStyleElement对象)包含的样式表。
    样式表中一个大括号就是一个cssRule对象
    var sheet=link.sheet||link.styleSheet;    //(非IE)使用sheet属性,(IE)使用styleSheet得到这个类型
    var sheet=document.styleSheets[i];        //styleSheets: 获得当前网页的所有样式表对象

     

    定义3:外部样式表(引用一个CSS样式表文件)Rules或rules

    (1)  DOM(document对象)对象模型中有几个重要的集合 

    doc1.images         [HTMLCollection] 所有图像
    doc1.anchors        [HTMLCollection] 所有锚点
    doc1.styleSheets  [StyleSheetList] 所有样式
    doc1.links          [HTMLCollection] 所有链接

    其中styleSheets包含所有的样式集合

    (2) 样式表集合styleSheets -> 规则(选择器及样式)(css)rules ->某一样式.属性 style.attr

    一个style元素标签(一个样式表)  var sheet=document.styleSheets[0]

    规则集合(选择器及样式集合)   vsr Rules =sheet.cssRules||sheet[0].rules;   //W3C用cssRules //微软rules

    第一个规则(选择器及样式)     var rule=doc1.styleSheets[0].rules[0]   //rules[0](IE),CSSRules[0](非IE)

                                                  var rule=sheet.cssRules[0]|| sheet.rules[0];

    style标签或单个Style的全部内容  head.style.cssTextoV1.style.cssText 或 rules[0].style.cssText      

    style标签中一个大括号就是一个(css)Rule对象,cssRules(非IE)|rules(IE)可返回某一样式表中全部选择器的集合列表,可以通过CSSRules[0](非IE)和rules[0]属性(IE)来进行访问。第一条规则就是(css)Rules[0],第二条就是(css)Rules[1]等等。

    一条规则就是一个元素的声明 p {} 或者多个元素的一组声明 div,h3,p{color:blue;width: 100px;} (IE还将其分为3条)。可以对每个样式进行具体的操作(可读可写)。

         
        通过 className 修改样式 ,  获取或修改某个属性的值(兼容性问题) 
    doc1.styleSheets[0].(css)rules[index].style.attr     //IE,W3C为(css),查找样式表中的样式属性(ie chrom) 
     

    (3) style样式,规则(css)rules在各浏览器中差异

    例:下列样式表在不同浏览器的解释

    @import url("test.css"); 
      p,h2,h3 {padding-right: 10px; } 
      pre.test + * {margin-right: 20%;  } 
      pre.test { }
     
    Safari看见的是【4条】规则: 注意大写 
    cssRules[0]、undefined 
    cssRules[1]、P 
    cssRules[2]、PRE.test[CLASSS~="test"]+* 
    cssRules[3]、PRE.test[CLASSS~="test"]

    Safari则只取p。我才知道这是一种不正确的写法

    IE7看见了【5条】: 注意大写 
    rules[0]、P 
    rules[1]、H2 
    rules[2]、H3 
    rules[3]、PRE.test + * 
    rules[4]、PRE.test 
       IE认为p,h2,h3是三条而不是一条规则,
    Mozilla和Opera 9看见4条: 注意小写 
    cssRules[0]、undefined 
    cssRules[1]、p,h2,h3 
    cssRules[2]、pre.test + * 
    cssRules[3]、pre.test
    Mac IE也看见5条: 注意大写
    0、P 
    1、H2 
    2、H3 
    3、PRE.test * (注意没有+号) 
    4、PRE.test

    Mac IE把选择器改成了pre.test *,
    这样含义就非常不一样了。非常严重的问题。

    所以要访问pre.test在Safari和Mozilla里需要cssRules[3],而IE是rules[4],早期的Mozilla是cssRules[5]。

    没有关键字 ,所以如果使用索引值的话问题就非常严重。

    我们希望能这样访问: document.styleSheets[1].cssRules['PRE.test'],这样我就能访问pre的样式表规则了。但是W3C或者其他浏览器貌似不需要这样的访问样式表的方法。但是所有的文档在这个问题上都保持沉默。

    这个失败意味着你基本上没法访问规则了。

    假设我们已经访问了一条规则。现在需要改变其中一条声明。

    (1)表达式如下:  rule.style.color = '#0000cc';

    (2)W3C的方法是: rule.style.setProperty('color','#00cc00',null);因为style.color简单的多,所以我不想用这个

    例子:打算改变pre的颜色,代码如下:

    为了保证能用,我把pre的规则写在最后一条。很丑,但是这是唯一的办法: 
    function changeIt() { 
      if (!document.styleSheets) return; 
      var theRules = new Array(); 
      if (document.styleSheets[1].cssRules)     theRules = document.styleSheets[1].cssRules 
      else if (document.styleSheets[1].rules)   theRules = document.styleSheets[1].rules 
      else return; 
      theRules[theRules.length-1].style.backgroundColor = '#EEF0F5'; 
      }

    (4) style样式的添加或删除

    doc1.styleSheets[0].insertRule(“selector{attr:value}”, index);     //非IE

    doc1.styleSheets[0].deleteRule(index);                               //非IE

     

    doc1.styleSheets[0].addRule(“selector”,”attr:value”, index);      //IE

    doc1.styleSheets[0].removeRule(index);                               //IE 

    a) 插入函数 

    function insertRule(sheet,selectorText,cssText,position){
      if(sheet.insertRule){    sheet.insertRule(selectorText+'{'+cssText+'}',position);     }
      else if(sheet.addRule){  sheet.addRule(selectorText,cssText,position);     } 

    b) 删除函数

     function deleteRule(sheet,position){ 

      if (sheet.deleteRule)       sheet.deleteRule(position); //非IE ,假设这样的方式存在 
      else if(sheet.removeRule){  sheet.removeRule(position);  } 

    c) 赋值,改动CSS样式

    rules[0].style.color='green';             //链接CSS样式中改动详细的属性
      oDiv1.style.color='blue';                 //行内样式 

    4 单个操作 或 批量操作

    a) 某元素Style属性的单个操作

    obj.style.backgroundColor="red";  //注意,如果原来样式中有-,需要去掉,然后将后面的单词首字母大写

    b) 某元素Style属性的批量操作

    不仅有单个 CSS 属性的访问方式,如cssText属性 

    doc1.head.style.csstext="h3 {color:green;}"        //网页的Style元素结点内容的修改

    oV1.Style.cssText = " height:200px; width: 200px"

    oV1.setAttribute('style', ' height:100px; width:100px');

    oV1.removeAttribute('style');

    obj.style="height:500px;color:red;"; //直接设置style对象,注意style的格式

    obj.className="test";          //指定obj的className属性,给它类选择器名                      

    obj.className="test demo";     //使用className设置属性  //注意空格 ,可以指定多个类

    obj.className="";              //删除样式

     

    5 多重样式的计算(Multiple Styles):

    由于外部样式、内部样式和行内样式可能同时作用于某一个元素,此外如DIV,P等元素内部还可能有子元素节点而产生的样式嵌套现象,于是就有了多重样式。

    此种情况下,样式就有了优先级,一般(行内)Inline style  > (内部样式)Internal style sheet >(Css外部样式)External style sheet。有一套比较复杂的计算优先级的方法。

    有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

    对于多种样式的复合情况下真实的样式信息,就需要通过计算,来获得样式,即计算样式(当然也就只读了)。

    原生JS获取CSS样式的方法

    (非IE)window对象下提供了getComputedStyle()方法。接受两个参数,需要计算的样式元素,第二个伪类(:hover),如果没有伪类,就填null。 window.getComputedStyle 还有另一种写法,就是 document.defaultView.getComputedStyle 。

    (IE)使用 currentStyle 属性,IE 中使用 getAttribute 。currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性,那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值,就必须将属性名转为驼峰形式。

    // IE 下将 CSS 命名转换为驼峰表示法 // font-size --> fontSize // 利用正则处理一下就可以了
    function camelize(attr) {
        // /\-(\w)/g 正则内的 (\w) 是一个捕获,捕获的内容对应后面 function 的 letter
        // 意思是将 匹配到的 -x 结构的 x 转换为大写的 X (x 这里代表任意字母)
        return attr.replace(/\-(\w)/g, function(all, letter) {
            return letter.toUpperCase();});
      }
    element.currentStyle.getAttribute(camelize(style)); // 获取元素 element 的 style 属性样式
    <style type="text/css">
         <!--
           div { width: 100px; }
           #id3{ width: 100px; height: 100px; }

     

     

        --> 
    </style> 
    <div id='id3'>test style</div>

    function getStyle(oDiv, attr)
        { if (oDiv.currentStyle)
           {return oDiv.currentStyle[attr];                  //IE浏览器 }
          else
           {return getComputedStyle(oDiv, false)[attr]; }  //Firefox浏览器 
        }

    var test = document.getElementById('id3');   //得到某元素的样式
      var a = getStyle(test, 'width');

         
    获取最终样式(只能获取,不能操作)
     oDiv1.currentStyle.attr                           // ( IE )  
     window.getComputedStyle(oDiv1,null).attr          //( W3C ) 
     

    6 使用脚本添加样式与浏览器的差异

    当在连接外部样式后,再在其后面使用JavaScript 脚本插入内部样式时(即内部样式使用脚本创建),

    <html><head>
      <title> demo </title>   
      <link rel="stylesheet" href="styles.css" type="text/css" />       // <!-- 添加外部CSS 样式 -->
        <!--   在外部的styles.css文件中,代码如下:
            h3 {color:blue;}
        -->       
    <script type="text/javascript">        //  <!-- 使用javascript 创建内部CSS 样式 -->
    <!--
    (function(){
      var agent = window.navigator.userAgent.toLowerCase();
      var is_op = (agent.indexOf("opera") != -1);
      var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;
      var is_ch = (agent.indexOf("chrome") != -1);

      var cssStr="h3 {color:green;}";                             //样式
      var s=document.createElement("style");                       //新建<stylr>元素
      var head=document.getElementsByTagName("head").item(0);      //取Head元素
      var link=document.getElementsByTagName("link");              //取Link
      link=link.item(0);

    if (is_ie){
      if (link)   head.insertBefore(s,link);
      else        head.appendChild(s);
      document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;    //最后一个Style所有内容
      }
    else if(is_ch){
      var tn=document.createTextNode();
      tn.nodeValue=cssStr;
      s.appendChild(tn);                //在IE中非法
      head.insertBefore(s,link);
      }
    else {
      s.innerHTML=cssStr;               //在IE中非法
      head.insertBefore(s,link);
      }
    })();
    //-->
    </script>
    </head> <body>
      <h3>在IE中我是绿色,非IE浏览器下我是蓝色!</h3>
    </body></html>
    结果:在Firefox / Chrome / Safari / Opera 中,文字都是蓝色的。而在IE 浏览器中,文字却是绿色的。


    展开全文
  • 文章目录内容速览Methodsframework损失函数StyleGAN 域的好处实验StyleGAN 反转Face Frontalization(人脸转正)条件图像合成Face From SketchFace from Segmentation MapExtending to Other ApplicationsGoing ...

    在这里插入图片描述

    内容速览

    pixel2style2pixel(pSp):

    • 一种通过的image-to-image的转化框架
    • 基于encoder 网络, 可以直接生成许多 style vectors ,这些vectors 传递给预训练的StyleGAN 生成器,形成拓展的 w+ latent space。
    • encoder可以直接嵌入真是图像到w+ 中,而没有任何附加的优化。
    • 使用encoder直接来解决image-to-image的转换任务, 把它定义为从输入域到latent 域的编码问题。 所以最后的image也属于latent域?
    • 通过样式的重采样支持多模态合成

    contributions

    • 创新的StyleGAN encoder, 用来之前编码真实的图像到 w+ latent domain。
    • 使用预训练的StyleGAn 生成器来解决 image-to-image转换任务的新的方法。

    源码地址: https://github.com/eladrich/pixel2style2pixel.

    框架图
    在这里插入图片描述

    • 在ResNet的基础上,使用标准的feature pyramid 来提取特征映射。
    • 对于18个目标风格中的每一个, 都有一个小的mapping net 被训练来 从对应的特征映射中提取学习到的风格。 其中,0-2 风格 是从small 特征映射中生成的,3-6 风格是从 medium 特征映射中生成的, 7-18 是从largest 特征映射中生成的。
    • mapping net map2style, 是一个小的全卷积网络, 空间尺寸逐渐缩小。最后得到一个512的 w vector。
    • 每个 512的 vector 喂给stylegan, 从它的匹配仿射变换A开始。

    Methods

    framework

    在这里插入图片描述

    • 我们用 w ˉ \bar{w} wˉ 表示与预训练生成器的 平均风格向量。
    • 对于输入的图像 x , 整个模型的输出定义如下:
      在这里插入图片描述
      其中,E和G分别表示encoder 和 StyleGAN的生成器。

    损失函数

    • 像素级的 L2 损失
      在这里插入图片描述

    • 为了学习感知相似性,我们使用了LPIPS 损失
      在这里插入图片描述
      其中 F 表示perceptual feature extractor

    • 为了鼓励编码器输出的潜在风格向量更接近于平均潜在向量,我们定义了一下正则损失。
      在这里插入图片描述
      这个损失可以提高图像的质量而不伤害输出的保真度。

    • 在考虑处理特定的face图像时, 我们结合 dedicated recognition loss 测量真是图像和原图像余弦相似性
      在这里插入图片描述
      其中 R表示预训练的 ArcFace 网络。

    • 整体损失表示如下:
      在这里插入图片描述

    StyleGAN 域的好处

    ** Style-mixing**
    在这里插入图片描述

    实验

    StyleGAN 反转

    将我们提出的encoder 和其他的几个 encoder进行对比。 结果如图4所示。
    在这里插入图片描述

    将我们提出的psp架构和两个相似的变种相比。

    • 一种是单一的 512维的风格向量。
    • 在第一种的基础上,增加层来转换512 到 18x 512 。
    • 图5展示对比效果在这里插入图片描述
    • 第二种方法的效果提升了, 但不如psp 那么细节。
    • 图6 展示了身份损失的重要性在这里插入图片描述

    量化评估展示在了表一当中。 这些指标是如何计算的

    在这里插入图片描述

    • 在感知相似性和一致性方面,pSp能够更好地保存原始图像。
    • 为了确保相似度评分与我们的损失函数无关,我们使用了courseface[15]方法进行评估。

    Face Frontalization(人脸转正)

    我们展示了我们基于风格的翻译机制能够克服这些挑战(Face Frontalization),即使在没有标记数据的情况下进行训练。

    方法

    • 我们在训练过程中随机翻转目标图像,有效地迫使模型输出一个既接近原始图像又接近镜像图像的图像。这种增强背后的基本思想是,它引导模型收敛到一个固定的正面姿态。
    • 我们增加Lid并减少图像外部的L2和LLlpip损失。这一变化是基于这样一个事实:与面部区域和面部特征相比,我们对保留背景区域不太感兴趣。
    • 实验结果如图 7所示在这里插入图片描述
    • 我们的方法能够成功地处理任务,生成真实的正面脸,这可以与更复杂的R&R方法相媲美。
    • 这显示了使用预先训练过的StyleGAN进行图像翻译的好处,因为它允许我们即使在监督薄弱的情况下也能获得令人满意的视觉效果
    • 表2提供了FEI数据库[37]的定量评价在这里插入图片描述
      我们的简单方法提供了一种快速而优雅的替代方法,不需要专门的模块

    条件图像合成

    Face From Sketch

    在这里插入图片描述

    Face from Segmentation Map

    在这里插入图片描述

    Human Perceptual Study.

    在这里插入图片描述

    Extending to Other Applications

    我们还展示了通过在中等级别特征上进行风格混合来实现超分辨率的多模态支持,并评估了一些图像编辑任务的pSp,包括图像插值和局部补丁编辑。

    Going Beyond the Facial Domain

    在这里插入图片描述

    讨论

    • 利用预先训练的StyleGAN生成的高质量图像是有代价的,该方法仅限于StyleGAN可以生成的图像。因此,如果在训练StyleGAN模型时没有这些示例,生成不接近正面或具有特定表情的面孔可能是具有挑战性的。
    • pSp的全局方法虽然对许多任务有利,但在保存输入图像的细节(如耳环或背景细节)方面存在挑战。
    • 图11展示了此类重构失败的一些示例
      在这里插入图片描述

    总结

    • 我们提出了一种新的编码器架构,可以用于直接映射真实图像到W+潜在空间,而不需要进行优化
    • 将我们的编码器与StyleGAN解码器相结合,我们提出了一个解决各种图像到图像翻译任务的通用框架
    • 与以往依赖于专门架构来解决单一翻译任务的作品不同,我们展示了pSp能够解决各种各样的问题,只需要对训练损失和方法做出最小的改变。
    展开全文
  • CSS是Cascading Style Sheets(层叠样式表单)的简称利用它可以对布局字体颜色背景和其它文图效果实现更加精确的控制而且它不仅可以控制当前文档的格式还可以控制多个文档的格式;任务二创建样式表 ; 标签重新定义HTML...
  • CSS 指层叠样式表 (Cascading Style Sheets)

    千次阅读 2018-09-18 09:43:48
    CSS 指层叠样式表 (Cascading Style Sheets) CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的...
  • 利用css样式定义页面样式,将会大大减少设计工作量。一些好的css样式表的建立,可以很好的美化页面 精确定制页面的布局 css的语法解析 <style type="text/css"> p{ font-family:"宋体"; color:red; ...
  • 外部样式表怎么写

    千次阅读 2021-06-11 01:19:57
    1.css内部样式表怎么写1、创建使用css样式表有三种,分别是外部样式表,内部样式表和内联样式。下面通过一个小demo演示它们的用法。首先新建一个html文件,放入3个button按钮,给前两个按钮分百别设置class属性为btn...
  • 为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观。为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会 随着...
  • StyleGAN 架构解读(重读StyleGAN )精细

    万次阅读 多人点赞 2021-05-01 16:29:50
    StyleGAN 的前身——ProGAN 上图是 ProGAN 的网络结构图。这项技术首先通过学习即使在低分辨率图像中也可以显示的基本特征,来创建图像的基本部分,并且随着分辨率的提高和时间的推移,学习越来越多的细节。低...
  • HTML的基本标记

    千次阅读 2021-06-10 21:15:24
    定义网页的背景色(bgcolor) 我们在浏览网页时会发现,大部分网页背景都是白色或者灰色,所以我们利用bgcolor属性来标记整个网页的背景色。 基本语法: ..... 语法说明: 背景颜色的俩种表现形式:(1)使用颜色指定...
  • ArcGIS系统中的样式可能不能满足实际生产需要,为了实现快速制图,可自定义...添加样式打开菜单栏自定义-在弹出的样式管理器中单击"样式…"-"将样式添加至列表"-选择需要的样式文件,如:边界样式.style,最后确认,...
  • ArcGIS中定义图框样式

    千次阅读 2020-12-20 11:56:30
    ArcGIS系统中的样式可能不能满足实际生产需要,为了实现快速...添加样式打开菜单栏自定义-在弹出的样式管理器中单击"样式…"-"将样式添加至列表"-选择需要的样式文件,如:边界样式.style,最后确认,关闭。使用样式...
  • ArcGIS系统中的样式可能不能满足实际生产需要,为了实现快速制图,可自定义一些...添加样式打开菜单栏自定义-在弹出的样式管理器中单击"样式…"-"将样式添加至列表"-选择需要的样式文件,如:边界样式.style,最后确...
  • Matplotlib风格与样式

    千次阅读 多人点赞 2022-04-30 07:48:41
    Matplotlib 是 Python 生态系统的一个重要组成部分,是用于可视化的绘图库,它提供了一整套和 ...本节主要介绍 Matplotlib 中预定义的不同风格,同时也可以通过控制 Matplolib 的绘图颜色与样式来自定义所需风格。
  • Gan 和 StyleGAN 架构

    千次阅读 2022-01-02 09:34:20
    StyleGAN 架构解读 目录 #StyleGAN 的前身——ProGAN #StyleGAN 算法总体预览 1.2 StyleGAN 架构解读 1.2.1 增加映射网络Mapping Network==》为输入向量的特征解缠提供一条学习的通路 1.2.2 样式模块(AdaIN)==》...
  • 标签的基本样式设置

    千次阅读 2021-06-14 08:07:49
    断行在html中,换行符无法在一般标签内作为布局控制显示,包括xml实体和 均表现为white-space...样式若在项目中使用了样式框架,则预定义样式可能不能满足标签的特殊需求。此时可清除继承样式后,自行设置必要的样式...
  • 定义样式用的卷标,其中TargetType这个属性是用来指定你设定的组件,但是TargetType因为指定组件,所以全部在这个XAML页面下的组件都会被套用。   <Style TargetType="TextBlock">   已上面这段程序...
  • } </style> </head> <body> <p> 定义下画线样式</a> </p> </body> </html> 在浏览器中浏览即可看见添加的下画线效果,如图9-2所示。 图9-2 下画线效果 9.1.3 未访问过的链接a:link 设置a 对象在未被访问前(未点击过...
  • css设置列表样式的实现方法发布时间:2020-08-31 11:09:23来源:亿速云阅读:131作者:小新小编给大家分享一下css设置列表样式的实现方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!list-style...
  • Style Tokenss摘要 摘要 在这里,我们提出一个“global style token”,在Tacotron(最先进的端到端语音合成系统)中经过共同训练的一堆嵌入内容。嵌入没有明确的标签,就学会了大规模的声学表示。 ...
  • 1. 揭秘 `<script setup>` 语法糖的神秘面纱——全面的使用说明、语法糖剖析、使用注意点 2. 探究 `<style> v-bind` 是如何实现组件状态驱动动态 CSS 值的
  • 1.wpf注释标记 1.1 概述:  xaml全称为Extensible Application Markup Language,即可扩展应用程序标记语言。XAML的注释继承自XML ... Style="{StaticResource for_noresize_window}"> &...
  • 网页字体样式华文黑体:STHeiti网页字体样式华文楷体:STKaiti网页字体样式华文宋体:STSong网页字体样式华文仿宋:STFangsong网页字体样式黑体:SimHei网页字体样式宋体:SimSun 7、网关于HTML中字体样式和颜色设置...
  • 学习CSS:完整指南 ... 完成演示的构建后,我们将看一些利用CSS计数器的真实示例站点。 目标:样式化有序列表 第一步,让我们看一下将要构建的布局: 没什么好看的,对吧? 不过,这是一个挑战:我们...
  • Form表单中的各种样式

    千次阅读 2018-04-13 23:45:38
    很多时候,我们仅仅为了实现数据采集这个功能来使用表单,常看到的... 1、CSS魔法CSS,就是大家知道的层叠样式单,它可以定义页面元素的外观,包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等...
  • 前台布局如下:前台基于mvvm,利用自定义的json传到后台解析,我重点说样式生成。如ogc wms规范可从后台获取bbox范围内的图层,后台写入图片时可渲染样式,产生视觉良好的图。日前配图层sld样式主要...
  • Qt Qss样式表详解

    千次阅读 2020-09-24 13:58:23
    使用Qss设置QT程序界面的样式和皮肤 1.1  Qss的功能 Qt程序界面中控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性可以通过Qss文件来设置,美化UI界面。实现界面和程序的分离,快速切换皮肤...
  • 接上一部分,我们可以用Filter来区分多个Rule,SLD除了可以设置要素...所有上述代码,很轻松就可以实现各种形式的SLD样式,只要定义一种前台传来JSON格式,后台就可以实现样式的生成,web端图层样式设置就方便很多。
  • 2015年6月 HTML综合考试题

    千次阅读 2021-06-09 10:55:12
    外部式</p><p>58)CSS分层是利用什么标记构建的分层( )。</p><p>A.〈dir〉B.〈div〉C.〈dis〉D.〈dif〉</p><p>59)在CSS语言中下列哪一项是“上边框”的语法( )。</p><p>A.letter-spacing: <值>B.border-top:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,055
精华内容 10,422
热门标签
关键字:

利用style标记定义样式