标签:
1.属性选择符:
a).E[att]:选择具有att属性的所有E元素。
<style>
input[name] {
color:red;
}
</style>
<body>
<p name="ipt">我是P标签</p>
<p name="ipt">我是P标签</p>
</body>
b).E[att=‘val‘]:选择具有att属性且属性值为val的所有元素E。
<style>
input[name=‘ipt‘] {
color:red;
}
</style>
<body>
<p name="ipt">我是P标签</p>
<p name="ipt">我是P标签</p>
</body>
c).E[att~=‘val‘]:选择具有att属性且属性的值为一用空格分隔的字词列表其中一个等于val的E元素。
<style>
u[class~="uu‘‘] {
background:pink;
}
</style>
<body>
<u class="uu UU">我是U标签<u>
</body>
d).E[att^=‘val‘]:选择具有att属性且属性值以val开头的字符串的E元素。
<style>
p[class^=‘p‘]{
font-szie:20px;
}
</style>
<body>
<p class=‘p_1‘>我是P标签</p>
<p class=‘p_2‘>我是P标签</p>
<p class=‘p_3‘>我是P标签</p>
</body>
e).E[att$=‘val‘]:选择具有att属性且属性值以val结尾的字符串的E元素。
<style>
p[class$=‘p‘]{
font-szie:20px;
}
</style>
<body>
<p class=‘11_p‘>我是P标签</p>
<p class=‘2_p‘>我是P标签</p>
<p class=‘3_p‘>我是P标签</p>
</body>
f).E[att*=‘val‘]:选择具有att属性且属性值包含val字符串的E元素。
<style>
p[class*=‘a‘]{
font-szie:20px;
}
</style>
<body>
<p class=‘pap‘>我是P标签</p>
<p class=‘pap‘>我是P标签</p>
<p class=‘pap‘>我是P标签</p>
</body>
g).E[att|=‘val‘]:选择具有att属性且属性值以val开头且用‘-’连字符分隔的字符串的E元素。
<style>
p[class|=‘p‘]{
font-szie:20px;
}
</style>
<body>
<p class=‘p-1‘>我是P标签</p>
<p class=‘p-2‘>我是P标签</p>
<p class=‘p-3‘>我是P标签</p>
</body>
2.伪对象选择符:选几个常用的。
<style>
p:first-letter{ //给第一个字符设置样式
font-szie:20px;
}
p:first-line { //给第一行设置样式
color:red;
}
</style>
<body>
<p>WEB前端|这是关于用css控制文本段落缩进2个字符的写法,用到了css的本文属性,通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进。缩进文本把Web页面上的段落的第一行缩进,这是...</p>
</body>
<style>
input:placeholder {
color:red;
}
</style>
<body>
<input type="text" placeholder>
</body>
3.font-family:设置文字名称,先后顺序。
<style>
p {
font-family:‘微软雅黑‘,‘宋体‘;
}
</style>
<body>
<p>我是P标签</p>
</body>
4.font-size:设置文字尺寸。
<style>
p {
font-size:20px;
}
</style>
<body>
<p>我是P标签</p>
</body>
5.font-weight:设置文字粗细。
<style>
p {
font-weight:‘微软雅黑‘,‘宋体‘;
}
</style>
<body>
<p>我是P标签</p>
</body>
6.font-style:控制字体是否倾斜。
<style>
p {
font-style:‘italic‘;
}
</style>
<body>
<p>我是P标签</p>
</body>
7.font:缩写形式。
<style>
p {
font:italic bold 14px/20px ‘微软雅黑‘;
}
</style>
<body>
<p>我是P标签</p>
</body>
8.colo:控制文本的字体颜色。
<style>
p {
color:red;
rgb(0-255,0-255,0-255);
rgba(0-255,0-255,0-255,0.5);
}
</style>
<body>
<p>我是P标签</p>
</body>
9.text-decoration:控制文本装饰线条。
<style>
p {
text-decoration:none/overline/line-through/underline
}
</style>
<body>
<p>我是P标签</p>
</body>
10.text-shadow:控制文字的阴影部分。
<style>
p {
text-shadow:2px 2px 2px red;
}
</style>
<body>
<p>我是P标签</p>
</body>
11.width:宽度。
<style>
p {
width:20px;
}
</style>
<body>
<p>我是P标签</p>
</body>
12.height:高度。
<style>
p {
height:20px;
}
</style>
<body>
<p>我是P标签</p>
</body>
13.margin:外边距。
<style>
div {
margin-left:20px;
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
}
</style>
<body>
<div>我是div标签</div>
</body>
14.padding:内边距。
<style>
div {
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
padding-left:20px;
}
</style>
<body>
<div>我是div标签</div>
</body>
标签:
原文地址:http://www.cnblogs.com/lss-bk/p/5758047.html