css中repeat-x与repeat-y什么意思。结合例子给我说明一下,谢谢

html-css015

css中repeat-x与repeat-y什么意思。结合例子给我说明一下,谢谢,第1张

repeat-x是横向铺满,就是在#header.nav-box中,图片nav-box-bg.gif会横向重复,直到铺满。

repeat-y是纵向,就是在#header.nav-box中,图片nav-box-bg.gif会竖向重复,直到铺满。

如果想要横轴和竖轴都平铺的话,直接用background-repeat:repeat就可以了。

扩展资料:

css参考函数

attr() 返回所选元素的属性值

hsl() 使用Hue-Saturation-Lightness模型(HSL)定义颜色

hsla() 使用Hue-Saturation-Lightness-Alpha模型(HSLA)定义颜色

linear-gradient() 将线性渐变设置为背景图像。 定义至少两种颜色(从上到下)

radial-gradient() 将径向渐变设置为背景图像。 定义至少两种颜色(中心到边缘)

参考资料来源:百度百科-CSS (层叠样式表)

如果网页中一个

id为“no”的标签,暂且当div标签来tell;

想要在js中设置这个div的css样式,很一般的做法是:

var

obj

=

document.getElementByIdx_x_x('no')

obj.style.width

=

'400px'

obj.style.height

=

'300px'

如果要设置一堆又一堆的css样式呢,太麻烦了把、

一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create一个元素,难道还想这样简单点?那就要想别的办法了~

于是大家就写了一个又一个的函数,经典的两个是:

var

obj

=

document.getElementByIdx_x_x('no')

function

setStyle(obj,

css)

{

for(var

attr

in

obj){

obj.style[attr]

=

css[attr]

}

}

setStyle(obj,{width:"400px",height:"300px"})

当然还有更简单的,cssText:

var

obj

=

document.getElementByIdx_x_x('no')

obj.style.cssText

=

"width:400px

height:300px"

当然这种方法对于create的元素初始化css样式来说很简单很方便。

以上就是小编为大家带来的js中用cssText设置css样式的简单方法的全部内容了,希望对大家有所帮助,多多支持脚本之家~

1.后代选择器:E F 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

  <style>ul  li{

            color: red   } </style>

<ul>

        <li>我是ul里面的li</li>

        <li>我是ul里面的li</li>

        <li>我是ul里面的li</li>

    </ul>  li是ul的孙子级别

    <ul>

       <p><li>我是ul里面的li</li></p>

        <p><li>我是ul里面的li</li></p>

        <p><li>我是ul里面的li</li></p>

    </ul>  li是ul的孙子级别

后代选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入,空格可以多 但是不可以插入其他的符号以免造成干扰。 li 被 ul包裹的情况下 颜色变红

2.子选择器:E>F 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素

  <style>div span{

            color: red   }

        h2 >span{ color: green} </style>

 <div>

     <p><span>早上好</span></p>

        <p><h1><span>我是标题</span></h1></p>

        <h2><span>晚上好</span></h2>

    </div>

div元素中包裹的子元素span 显示为红色,h2元素中包裹的子元素span显示为绿色,>左右可以添加空格

3.相邻选择器: E+F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面

 <style>.main+p{

            background: green} </style>

<div>     <p>我是谁</p>

        <p class="main">我是谁</p>

        <p>我是谁</p>     </div>

类选择器main相邻的下一个p背景色变绿

4.通用选择器:E~F 通用兄弟选择器 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

<style>  .ab~p{

    background: red} </style>

<div>    <p class="ab">111</p>

        <p>222</p>

        <p >333</p>

        <p>444</p>

        <p>555</p>    </div>

类选择器ab下面的所有p标签都会变成红色

1.E[attr]属性选择器: E[attr]  选择匹配具有属性attr的E元素

<style>  dd[class]{

      background: red}  </style>

 <dl>  <dt>汽车</dt>

        <dd>宝马</dd>

        <dd class>奔驰</dd>

        <dd>奥迪</dd>   </dl>

 [ ]表示属性的意思 里面写具体属性的名称比如 [id]

2.E[attr=val]属性选择器:E[attr=val]  选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)

<style>   dd[class=two]{

            background: red   } </style>

<dl>  <dt>标题</dt>

        <dd class="one">我是定义列表1</dd>

        <dd class="one">我是定义列表1</dd>

        <dd class="two">我是定义列表2</dd>   </dl>

E[attr=val]属性选择器中,属性和属性值必须完全匹配才能被选中,dd元素中class的值为two的背景颜色变成红色

3.E[attr*=val]属性选择器: 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”

   dd[class=two]{<style>p[class*=b]

属性后面的值加不加引号(包括单引号和双引号)都可以 当时遇到特殊符号需要加引号

            background: red   } </style>

<div>  <p >111</p>

        <p class="b1">222</p>

        <p class="b2">333</p>   </div>

p元素中class的值只要包含b的背景色都会变成红色,

4.E[attr^=val]属性选择器:E[attr^=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串

<style>  a[href^='http://']{

            background:red  } </style>

在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号(单引号和双引号)包裹一下

<a href="http://www.baidu.com">跳转百度</a>

    <a href="www.baidu.com">不能跳转百度</a>

表示 属性href是以http开头的a元素 背景色变成红色

5.E[attr$=val]属性选择器:E[attr$=val]  选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串

  a[href^='http://']{<style>a[href$=".cm"]

            background:red  } </style>

在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号(单引号和双引号)包裹一下

<a href="http://www.baidu.com">能跳百度</a>

    <a href="http://www.baidu.cn">因为百度把.cm的域名也买了所以也能跳了</a>

表示 属性href是以cn结尾的a元素 背景色变成红色