您的位置：首页 > Web前端 > CSS

CSS常用属性

2015-07-29 12:10 686 查看
常用的字体属性如表所示：

常用字体属性

属性属性值描述
font-sizen（单位px），如36px设置字体大小
font-family如宋体···设置字体类型
font-weightnormal设置字体正常
lighter设置字体加细
bold设置字体加粗
bolder设置字体更粗
font-stylenormal设置字体正常
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-indentn（单位 pt）设置文字的首行缩进
line-heightn（单位 pt）定义行间距
letter-spacingn（单位 px）定义字符间距
text-decorationunderline下划线
overline上划线
line-through删除线
none无任何修饰
text-alignleft左对齐
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-positionoutside列表贴近左侧边框显示
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-repeatrepeat-x设置图像横向重复
repeat-y设置图像纵向重复
repeat设置图像横向及纵向重复
no-repeat设置图像不重复
background-positionleft背景图像左放置
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 层属性

层属性如表所示：

层属性

属性属性值描述
positionabsolute　　　　　　　　　　　　对元素进行绝对定位
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 鼠标属性

鼠标属性如表所示：

鼠标属性

属性属性值描述
cursorhand设置鼠标为手形状
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航