CSS常用属性
常用的字体属性如表所示：
| 属性 | 属性值 | 描述 |
| font-size | n（单位px），如36px | 设置字体大小 |
| font-family | 如宋体··· | 设置字体类型 |
| font-weight | normal | 设置字体正常 |
| lighter | 设置字体加细 | |
| bold | 设置字体加粗 | |
| bolder | 设置字体更粗 | |
| font-style | normal | 设置字体正常 |
| italic | 设置字体为斜体 | |
| oblique | 与italic效果一样 |
【示例】CSS字体属性应用
<html>
<head>
<meta charset="utf-8">
<title>CSS字体属性示例</title>
<style type="text/css">
table{
font-family: verdana,geneva,sans-serif;
font-size: 36px;
font-style: normal;
font-weight: bold;
}
</style>
</head>
<body>
字体属性
<table width="1254" border="1">
<tr>
<td width="144">常用字体属性</td>
<td width="244">woaini</td>
</tr>
</table>
</body>
</html>
1.2 文本属性
常用的文本属性如表所示：
| 文本属性 | 属性值 | 描述 |
| text-indent | n（单位 pt） | 设置文字的首行缩进 |
| line-height | n（单位 pt） | 定义行间距 |
| letter-spacing | n（单位 px） | 定义字符间距 |
| text-decoration | underline | 下划线 |
| overline | 上划线 | |
| line-through | 删除线 | |
| none | 无任何修饰 | |
| text-align | left | 左对齐 |
| center | 居中对齐 | |
| right | 右对齐 | |
| justify | 两端对齐 |
【示例】CSS文本属性应用
<html>
<head>
<meta charset="utf-8">
<title>w文本属性示例</title>
<style type="text/css">
table{
text-align: left;
text-indent: 25pt;
text-decoration: underline;
line-height: 20pt;
letter-spacing: 1px;
}
</style>
</head>
<body>
<p>常用文本属性</p>
<table width="254" border="1">
<tr>
<td width="244">常用文体属性博客园是面向开发者的知识分享社区，不允许发布任何推广、广告、政治方面的内容。博客园首页（即网站首页）只能发布原创的、高质量的、能让读者从中学到东西的内容。如果博文质量不符合首页要求，会被工作人员移出首页，望理解。如有疑问，请联系contact@cnblogs.com。</td>
</tr>
</table>
</body>
</html>
1.3 列表属性
常用的列表属性如表所示：
| 属性 | 属性值 | 描述 |
| list-style-image | 选择图像作为列表项的引导符号 | |
| list-style-position | outside | 列表贴近左侧边框显示 |
| inside | 列表缩进显示 | |
| list-style-type（设定引导列表项目的符号类型） | disc | 在列表项前添加“●”实心圆点 |
| circle | 在列表项前添加“○”空心圆点 | |
| square | 在列表项前添加“▆”实心方体 | |
| decimal | 在列表项前添加普通的阿拉伯数字 | |
| lower-roman | 在列表项前添加小写的罗马数字 | |
| upper-roman | 在列表项前添加大写的罗马数字 | |
| lower-alpha | 在列表项前添加小写的英文字母 | |
| upper-alpha | 在列表项前添加大写的英文字母 | |
| none | 在列表项前不添加任何的项目符号或编号 |
【示例】CSS列表属性应用
<html>
<head>
<meta charset="utf-8">
<title>列表属性示例</title>
<style type="text/css">
ul li{
list-style-type: decimal;
}
</style>
</head>
<body>
<p>列表属性</p>
<ul>
<li>常用</li>
<li>列表</li>
<li>属性</li>
</ul>
</body>
</html>
1.4 颜色和背景属性
颜色和背景属性如表所示：
| 属性 | 属性值 | 描述 |
| color | 设置颜色 | |
| background-color | 设定一个元素的背景颜色 | |
| background-image | 设定一个元素的背景图像 | |
| background-repeat | repeat-x | 设置图像横向重复 |
| repeat-y | 设置图像纵向重复 | |
| repeat | 设置图像横向及纵向重复 | |
| no-repeat | 设置图像不重复 | |
| background-position | left | 背景图像左放置 |
| right | 背景图像右放置 | |
| center | 背景图像居中放置 | |
| top | 背景图像向上对齐 | |
| bottom | 背景图像向下对齐 |
【示例】CSS颜色和背景属性应用
<html>
<head>
<meta charset="utf-8">
<title>CSS颜色和背景属性示例</title>
<style type="text/css">
h1{
background: red;
}
body{
background-image: url(img/glyphicons-halflings.png);
/*background-repeat: no-repeat;*/
background-color: blue;
background-position: left;
}
</style>
</head>
<body>
<h1>颜色和背景属性</h1>
</body>
</html>
1.5区块属性
区块属性如表所示：
| 属性 | 描述 |
| width | 设定对象的宽度 |
| height | 设定对象的高度 |
| float | 让文字环绕在一个元素的周围 |
| clear | 禁止浮动元素出现在所属对象旁边 |
| padding | 设置内边距，即区块边框与内容之间的间距，它包括了top、right、bottom和left4个属性，分别用于设定上右下左方向的填充距离 |
| margin | 设置外边距，即区块与周围元素之间的间距，它也包括了top、right、bottom和left4个属性，分别设定边框与上右下左方向对象之间的距离 |
【示例】CSS区块属性应用
<html>
<head>
<meta charset="utf-8">
<title>CSS区块属性示例</title>
<style type="text/css">
p{
width: 500px;
height: 100px;
margin-top: 200px;
margin-left: 300px;
}
</style>
</head>
<body>
<p>区块属性示例</p>
</body>
</html>
1.6 层属性
层属性如表所示：
| 属性 | 属性值 | 描述 |
| position | absolute | 对元素进行绝对定位 |
| relative | 对元素进行相对定位 | |
| top | 设置层距离顶点纵坐标的距离 | |
| left | 设置层距离顶点横坐标的距离 | |
| width | 设置层的宽度 | |
| height | 设置层的高度 | |
| Z-index | 决定层的先后顺序和覆盖关系，值高的元素会覆盖值较低的元素 | |
| clip | 限定只显示裁切出来的区域，裁切出的区域为矩形。只要设定两个点即可，一个是矩形左上角的顶点，由top和left两项的设置完成，一个是右下角的顶点，由bottom和right两项的设置完成 | |
| overflow | visible | 当层内的内容超出超出层所能容纳的范围时，显示层大小及内容 |
| hidden | 当层内的内容超出层所能容纳的范围时，隐藏超出层内容大小的内容 | |
| scrol | 不管层内容是否超出层所能容纳的范围，层总是显示滚动条 | |
| auto | 当层内的内容超出层所能容纳的范围时，层才能显示滚动条 |
【示例】CSS层属性应用
<html>
<head>
<meta charset="utf-8">
<title>层属性示例</title>
<style type="text/css">
p{
position: absolute;
top: 10px;
left: 50px;
width: 250px;
height: 200px;
overflow: auto;
background-color: #0000FF;
color: #000000;
font-size: 30px;
z-index: 1;
visibility: visible;
}
div{
position: absolute;
top: 10px;
left: 50px;
width: 250px;
height: 200px;
z-index: 2;
background-color: #0000FF;
}
</style>
</head>
<body>
<div>覆盖</div>
<p>CSS层属性示例</p>
</body>
</html>
1.7 鼠标属性
鼠标属性如表所示：
| 属性 | 属性值 | 描述 |
| cursor | hand | 设置鼠标为手形状 |
| crosshair | 设置鼠标为十字交叉形状 | |
| text | 设置鼠标为文本选择形状 | |
| wait | 设置鼠标为windows的沙漏形 | |
| default | 设置鼠标为默认的形状 | |
| help | 设置鼠标为带问号的形状 | |
| e-resize | 设置鼠标为指向东的箭头 | |
| ne-resize | 设置鼠标为指向东北的箭头 | |
| n-resize | 设置鼠标为指向北的箭头 | |
| nw-resize | 设置鼠标为指向西北的jiant | |
| w-resize | 设置鼠标为指向西的箭头 | |
| sw-resize | 设置鼠标为指向西南的箭头 | |
| s-resize | 设置鼠标为指向南的箭头 | |
| se-resize | 设置鼠标为东南的箭头 |
【示例】CSS鼠标属性应用
<html>
<head>
<meta charset="utf-8">
<title>鼠标属性示例</title>
<style type="text/css">
p#auto
{cursor: auto;}
p#crosshair
{cursor: crosshair;}
p#text
{cursor: text;}
</style>
</head>
<body>
<p id="auto">auto正常鼠标</p>
<p id="crosshair">crosshair十字鼠标</p>
<p id="text">text文本鼠标</p>
</body>
</html>
1.8 滤镜属性
滤镜属性如表所示：
| 属性 | 描述 |
| mask | 为对象建立一个覆盖于表面的膜 |
| blur | 设置模糊的效果 |
| chroma | 设置对象中指定的颜色为透明色 |
| dropShadow | 对对象设置阴影效果 |
| flipH、flipV | 设置翻转效果，flipH代表水平翻转，flipV代表垂直翻转 |
| glow | 设置光晕效果 |
| invert | 设置对象的可视化属性全部翻转，包括色彩、饱和度和亮度值 |
| shadow | 在指定的方向建立物体的投影 |
| wave | 用来把对象按照垂直的波纹样式打乱 |
| xray | 使对象产生X光片的效果 |
| alpha | 设置透明度效果 |
【示例】CSS滤镜属性应用
<html>
<head>
<meta charset="utf-8">
<title>CSS滤镜属性示例</title>
<style type="text/css">
body{
filter: blur(add=true,direction=135,strength=200);
}
</style>
</head>
<body>
<div class="try">
<font color="#0000FF">CSS滤镜属性示例</font>
</div>
<div>
<img src="img/glyphicons-halflings.png"/>
</div>
</body>
</html>
浙公网安备 33010602011771号