文本属性高级选择器精灵图

Posted wangke0917

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文本属性高级选择器精灵图相关的知识,希望对你有一定的参考价值。

1.字体设置

‘‘‘
text-align:center; # 水平居中方式
color:red; # 字体颜色
font:900 30px/120px ‘STSong‘; # 字重 大小/行高 字族

# 了解
# em(自身->父->html) | rem(html)
text-indent: 2em;

#字划线
# underline | line-through | overline
text-decoration: overline;
‘‘‘

2.reset操作

# what|why: 大多系统预定义标签, 有默认样式, 不满足实际开发需求, 反倒影响布局, 通常在开发前, 将需要用到的预定义标签的默认样式清除, 该操作就称之为 reset操作

‘‘‘
body, h1, h6, p {
    margin: 0;
}
ul {
    margin: 0px;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}
‘‘‘

3.高级选择器

/*1.群组选择器:
        同时控制多个
        选择器之间用逗号隔开
        每一个选择器位均可以替换为任意基础选择器或高级选择器
        */
        .div1, .p1 {
            color: red;
        }

/*2.后代子代选择器
        通过关系层次控制一个目标选择器
        >代表父子关系 | 空格代表后代关系
        */
        .sup1 > .sub {
            color: orange;
        }
        /*sub是body的后代,但不是子代*/
        body .sub {
            color: pink;
        }

/*3.兄弟选择器
        通过关系层次控制一个目标选择器
        */
        /* + 相邻 */
        .b2 + .b3 {
            color: blueviolet;
        }
        /* ~ 兄弟 */
        .b1 ~ .b3 {
            color: brown;
        }

/*4.伪类选择器 - 位置*/
        ul:nth-child(10) > li:nth-child(2n) {
            color: green;
        }

高级选择器优先级

"""
优先级和个数(权重)相关

基础选择器优先级占主导: id 无限大于 class 无限大于 标签
选择器优先级相同时, 和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
"""
技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高级选择器优先级</title>
    <style>
        /* 优先级和个数(权重)相关
        基础选择器优先级占主导: id 无限大于 class 无限大于 标签
        选择器优先级相同时, 和顺序有关
        高级选择器类型不会影响优先级
        伪类选择器相当于class
        */
        .div {
            font-size: 100px;
            color: red;
        }

        div > .div {
            color: orange;
        }
        div ~ div ~ .div {
            color: brown;
        }
        div .div {
            color: pink;
        }

        .div:nth-child(3) {
            color: yellowgreen;
        }
        .sup .div {
            color: darkgreen;
        }
    </style>
    <style>
        /*多类名*/
        .div.div1 {
            color: black;
        }
        /* div.div#dd.div1 */
    </style>
</head>
<body>
<div>
    <div class="sup">
        <div>
            <div>
                <div></div>
                <div></div>
                <div class="div div1" id="dd">123</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
View Code

4.边界圆角

#左上为第一个角, 顺时针赋值, 不足找对角
#border-radius: 30px 60px;

#border-radius: 150px;
#border-radius: 50%;

#横向第一个角50px, 第二个角10px, 不足找对角*/
#纵向均是150px
#border-radius: 50px 10px / 150px;

5.a标签的四大伪类

‘‘‘
:link  链接初始状态 
:hover  鼠标悬浮状态 *****
:visited  链接访问后的状态 
:active  鼠标按下时的状态 ***
‘‘‘

# 注:hover和active普通标签也可以使用

6.背景图片之精灵图

‘‘‘
div {
    background: url("img/bg.png") no-repeat 10px 20px;
    图片地址 不平铺 x轴偏移 y轴偏移
}
精灵图操作本质: 控制背景图片的位置
backgroud-position-x
backgroud-position-y
div:hover {
    backgroud-position-y: -20px;
}
‘‘‘
技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        a {
            color: #333;
            text-decoration: none;
        }
        h1 {
            width: 500px;
            height: 100px;
            border: 1px solid black;
        }
        h1 a {
            width: 500px;
            height: 100px;
            display: block;
            background-color: yellow;

            background: url("img/bg.png") no-repeat 0 -150px;
        }
        h1 a:hover {
            background-position-y: -250px;
        }
    </style>
    <style>
        .li {
            width: 157px;
            height: 48px;
            border: 1px solid black;
            background: url("img/bg.png") no-repeat -155px 0;
        }
        .li:hover {
            cursor: pointer;
            background-position-y: -48px;
        }
    </style>
</head>
<body>
<h1><a href=""></a></h1>

<div class="li"></div>

</body>
</html>
View Code

 

以上是关于文本属性高级选择器精灵图的主要内容,如果未能解决你的问题,请参考以下文章

如何在片段着色器中平铺部分纹理

HTML5新增多媒体属性(加入视频音频)CSS3高级应用(过渡变形动画)精灵图

jQuery 高级选择器

片段着色器中的OpenGL点精灵旋转

7.27 行内元素和块状元素 * 精灵图

CSS高级技巧