标签:
E[att]:选择具有att属性的E元素。
1 /* 获取具有class属性的p元素 */ 2 p[class]{ 3 color: red; 4 } 5 6 <p class="a">class:a</p>
E[att="val"]:选择具有att属性且属性值等于val的E元素。
1 /* 获取class属性的值为"a"的p元素 */ 2 p[class="a"]{ 3 color: red; 4 } 5 6 <p class="a">class:a</p>
E[att~="val"]:选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
1 /* 获取class属性值里有以空格分隔的"a"的p元素 */ 2 p[class~="a"]{ 3 color: red; 4 } 5 6 <p class="b a c">class:b a c</p>
E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
1 /* 获取class属性值以"a"开头的p元素 */ 2 p[class^="a"]{ 3 color: red; 4 } 5 6 <p class="abc">class:abc</p>
E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。
1 /* 获取class属性值以"a"结尾的p元素 */ 2 p[class$="a"]{ 3 color: red; 4 } 5 6 <p class="bca">class:bca</p>
E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。
1 /* 获取class属性值包含"b"的p元素 */ 2 p[class*="b"]{ 3 color: red; 4 } 5 6 <p class="abc">class:abc</p>
E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
1 /* 获取class属性值以"a"开头并用连接符"-"分隔的字符串的p元素 */ 2 p[class|="a"]{ 3 color: red; 4 } 5 6 <p class="a-bc">class:a-bc</p>
font - family属性指定一个元素的字体。
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。
有两种类型的字体系列名称:
使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路。
注意: 每个值用逗号分开。
1 /* 设置p元素的字体 */ 2 p{ 3 font-family:"Times New Roman",Georgia,Serif; 4 } 5 6 <p>Times New Roman</p>
设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。浏览器默认的字体大小一般为16px左右。
1 /* 设置p元素的字体大小为16px */ 2 p{ 3 font-size: 16px; 4 } 5 6 <p>font-size: 16px</p>
设置文本的粗细,可取100~900的整百位的值,数字值 400 相当于 关键字 normal,700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗。
1 /* 设置p元素的字体粗细为"bold" */ 2 p{ 3 font-weight: bold; 4 } 5 6 <p>font-weight: bold</p>
该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲,用户代理可以根据正常字体计算一个斜体字体。
1 /* 设置p元素的字体为斜体 */ 2 p{ 3 font-style: italic; 4 } 5 6 <p>font-style: italic</p>
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。
注意: line - height属性设置行与行之间的空间。
1 /* 设置p元素的字体为斜体、加粗、大小16px、行高20px、微软雅黑字体 */ 2 p{ 3 font: italic bold 16px/20px "微软雅黑"; 4 } 5 6 <p>font: italic bold 16px/20px "微软雅黑"</p>
color 属性规定文本的颜色。
这个属性设置了一个元素的前景色(在 HTML 表现中,就是元素文本的颜色);光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框,除非被 border-color 或另外某个边框颜色属性覆盖。
1 /* 设置p元素的文字颜色为红色 */ 2 p{ 3 color: red; 4 } 5 6 <p>color: red</p>
text-decoration 属性规定添加到文本的修饰。
注释:修饰的颜色由 "color" 属性设置。
这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。
1 /* 设置p元素的文字修饰为下划线 */ 2 p{ 3 text-decoration: underline; 4 } 5 6 <p>text-decoration: underline</p>
text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。
可取值和说明如下:
值 | 描述 |
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
1 /* 设置p元素的文字阴影向右和下各偏移3px,模糊距离为2px,颜色为红色 */ 2 p{ 3 text-shadow: 3px 3px 2px red; 4 } 5 6 <p>text-shadow: 3px 3px 2px red</p>
width 属性设置元素的宽度。
说明:这个属性定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这个属性。
1 /* 设置p元素宽度为100px */ 2 p{ 3 width: 100px; 4 } 5 6 <p>width: 100px</p>
height 属性设置元素的高度。
1 /* 设置p元素高度为100px */ 2 p{ 3 height: 100px; 4 } 5 6 <p>height: 100px</p>
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值。
取四个值时分别代表:上、右、下、左。
取三个值时分别代表:上、左右、下。
取两个值时分别代表:上下、左右。
1 /* 设置p元素的外边距按上右下左依次为:5px、10px、15px、20px */ 2 p{ 3 margin: 5px 10px 15px 20px; 4 } 5 6 <p>margin: 5px 10px 15px 20px</p>
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
padding属性的顺序规则和margin属性一致。
1 /* 设置p元素的内边距按上右下左依次为:5px、10px、15px、20px */ 2 p{ 3 padding: 5px 10px 15px 20px; 4 } 5 6 <p>padding: 5px 10px 15px 20px</p>
标签:
原文地址:http://www.cnblogs.com/nervdy/p/5759023.html