文本属性高级选择器精灵图
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>
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>
以上是关于文本属性高级选择器精灵图的主要内容，如果未能解决你的问题，请参考以下文章