css选择器，背景渐变

来源：互联网发布：cad迷你看图软件编辑：程序博客网时间：2024/05/15 13:06

Css选择器

http://www.w3.org/TR/selectors/#selectors

1. 标签选择器，就是给常用的tag加上样式：

div{padding:0; margin:0}

2. ＊所有元素的选择器，整个文档内的所有元素都被设上该样式

3. class选择器：. 表示

.test{fontweight:bold} <div class=”test”></div>

4. id选择器：#表示

#hello{color:red} <div id=”hello”>world</div> world 将变成红色

5. 你还可以用方括号的形式指定其他属性,如

input[type=”text”]{background:yellow;color:green}/*把text里的背景色设为黄色了,如下，框中的green字样显示绿色，如果是［name＝“test”］效果一样*/

6. 伪类：:hover;:focus;:enabled;:checked…..见超链接。

例子：对于anchor a来说。有：a:visited{点击过超链接} a:hover{鼠标划过} a:active{点击时的样子，点过了就变成visited} a:link{最开始加载出来时}

a.homepage:link{
    padding: 1px 10px 1px 10px;
    color: #fff;
    background: #222;
    border-radius: 3px;
    border: 1px outset rgba(50,50,50,.5);
    font-family: georgia, serif;
    font-size: 14px;
    font-style: italic;
    text-decoration: none;
}
a.homepage:visited{
    background:forestgreen;
    color:white;
}

a.homepage:hover {
    background-color: #666;
}
    a.homepage:focus{}
    a.homepage:active {
    background:dodgerblue;
}

7. 基于关系的选择器：

常见的基于关系的选择器

选择器

选择的元素

A E

任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)

A > E

任何元素A的子元素

E:first-child

任何元素的第一个子元素E

B + E

任何元素B的下一个兄弟元素E

实例：带下拉菜单的导航，重点在：

.class ul ul{

display:none;

}

.class li:hover>ul{

display:block}

第一个ul li a加了>;为了让

.menubar{
    position:relative;
    height:50px;
    width:100%;
    background:#666666;
    text-align:center;
    line-height:50px;/*让内容垂直居中*/
     }
.menubar ul{
    height:100%;
    width:100%;
    list-style-type:none;
    position:absolute;
    overflow:visible;
}
.menubar ul li {
    display: block;
    float: left;
    height: auto;
    /* menu header's items width*/
    width: 200px;
    font-size:15pt;
}
.menubar ul li>a:link, .menubar ul li>a:active, .menubar ulli>a:visited{
    background:rgba(0,0,0,.3);
    display:block;
    cursor:pointer;
    color:#fff;
    text-decoration:none;
    width:100%;
    height:100%;
    border-bottom:2px solid wheat;

}
.menubar ul li>a:hover{
    background: palevioletred;
    color:#222
}
/*vertical menu*/
.menubar ul ul{
    background: lightblue;
    margin:0 auto;
    display: none;
    position: relative;
    height: auto;
    border-top:1px solid palevioletred;
    /* vertical-menus width */
    width: 150px;

}
.menubar li:hover>ul{
    display:block;
}

.menubar ul ul li {
    text-align:left;
    position: relative;
    float: none;
    display: block;
    height: 35px;
    line-height:35px;
    width: 100%;
    border: none;
    font-size:12pt;

}
.menubar ul ul li>a:link, .menubar ul ul li>a:visited,.menubar ul ulli>a:active{
    margin-left:4px;
    color:lightcoral;
    display:block;
    border-bottom:0px;
    background:transparent;
}
.menubar ul ul li > a:hover{
    text-decoration:underline;
    color:gray;
}
.menubar ul ul ul {
    position: absolute;
    top: 4px;
    left: 150px;
    margin: 0;
}
a.menu-bar:after {
    content: "\00BB";
    float: right;
    margin-right: 8px;
}

div如下：

<divclass="menubar">
    <ul>
        <li><ahref="mcd">HOME</a>
        </li>
        <li><ahref="mcd">CONTENT</a>
            <ul>
                <li><aclass="menu-nav" href="mcd.html">list1</a>
                    <ul>
                       <li>skfjakls</li>
                       <li>kljfklsajf</li>
                    </ul>
                </li>
                <li><ahref="mcd.html">list2</a>
                </li>
                <li><ahref="mcd.html">list3</a>
                </li>
            </ul>
        </li>
        <li><ahref="mcd">about</a></li>
    </ul>
</div>

背景

background 属性：

background-color, background-image,background-position, background-repeat, background-size, background-attachment。

Ø 对于background-image来说：也应该set一个background－color以免图像获取不到

.topbanner { background:url("topbanner.png") #00D repeat-y fixed; }

Ø 根据background-repeat, 图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。repeat;repeat-x;repeat-y;no-repeat;inheritd

Ø 背景图像根据background-position,来放置位置；

eg： background-position：50% 50% 意味着图像中描述为 50%50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。这就是让背景图像在元素内居中

Ø background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动.默认值：scroll可选fixed， inherit

Ø backgound－size：100% 100%会将背景图像从原来的大小拉伸到全屏

将内容重合在一起写：

background:<bg-image>||<position> [ / <bg-size> ]|| <repeat-style>|| <attachment>|| <background-color>

background-color在前在后都可以。

body

{

background:#ff0000 url(eg_bg_03.gif) no-repeat fixed center/100% 50%;

}

背景渐变

1. 有两种形式：linear-gradient()线性;radial-gradient()，放射状

background: linear-gradient(to bottom, blue, white); 上到下是从蓝到白的

background: linear-gradient(to right, blue, white); 从左到右是从蓝到白的

background: linear-gradient(to bottom right, blue, white); 从左上角到右下，蓝－白

-prefix-linear-gradient(top, blue, white); 这个是老浏览器的方法。注意和新的正好相反。

上面也可以用角度：linear-gradient(<90deg>,red, white)

2.可以多设几条渐变线：

background: linear-gradient(to bottom, blue, white 80%, orange);

一般第一个和最后一个的百分数不用写，默认为0 和100；写好中间就好。如果不懈写则平均分。如果颜色改用，rgba，配合图片，怎会呈现出渐隐等效果，

background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1)), url(http://foo.com/image.jpg);

参考网址，可以用css自己实现纹理效果，具体如下：真是太牛了。。。。。。。。。。。。。。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients

文本内容：

l CSS可以在元素的前后插入文本：在选择器的后面加上:before 或者 :after 。在声明中，指定 content 属性，并设置文本内容。

例子：在每个类名为test的元素前面加上Test:字样

.test:before { font-weight: bold; color: navy; content: "Test: ";}

content中的内容可以使用默认的utf－8也可使用，还可以通过转义机制（通过反斜杠转义）指定单个字符。比如， \265B 是国际象棋黑皇后的符号

l 可以通过将content 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。

a.gallory:after {content:" "url("../images/testicon.gif");}

0 0