网页设计-CSS语法总整理
发表:2008-04-25 13:33
基本语法====================================
<style type=text/css>
<!--
body,table{
color : #999999 ; /*文字色彩*/
font-family : 细明体 ; /*文字字型*/
font-size : 9pt /*文字大小*/
}
-->
</style>
文字属性一览================================
color : #999999 /*文字色彩*/
font-family : 细明体 /*文字字型*/
font-size : 9pt /*文字大小*/
font-style:itelic /*文字斜体*/
font-variant:small-caps/*小字体*/
letter-spacing : 1pt/*字间距离*/
line-height : 200 /*设定行高*/
font-weight:bold /*文字粗体*/
vertical-align:sub /*下标字*/
vertical-align:super/*上标字*/
text-decoration:line-through/*加删除线*/
text-decoration:overline /*加顶线*/
text-decoration:underline /*加底线*/
text-decoration:none /*删除连结底线*/
text-transform : capitalize /*首字大写*/
text-transform : uppercase /*英文大写*/
text-transform : lowercase /*英文小写*/
text-align:right /*文字靠右对齐*/
text-align:left /*文字靠左对齐*/
text-align:center /*文字置中对齐*/
背景语法===================================
<style type=text/css>
<!--
body{
background-image : url(image/bg.gif); /*背景图片*/
background-repeat : no-repeat; /*不重复排列*/
background-position : 90 90; /*背景图片x与y轴的位置*/
background-attachment : fixed;/*固定背景*/
}
-->
</style>
背景属性一览================================
background-color:#F5E2EC /*背景色彩*/
background-image : url(image/bg.gif) /*背景图片*/
background-attachment : fixed /*固定背景*/
background-repeat : repeat /*重复排列-网页预设*/
background-repeat : no-repeat /*不重复排列*/
background-repeat : repeat-x /*在x轴重复排列*/
background-repeat : repeat-y /*在y轴重复排列*/
background-position : 90 90 /*背景图片x与y轴的位置*/
连结语法====================================
<style type=text/css>
<!--
A:link/*超连结*/
{color : #999999 ; /*文字色彩*/}
A:visited/*浏览过的超连结*/
{color : #999999 ; /*文字色彩*/}
A:active/*按下连结*/
{color : #999999 ; /*文字色彩*/}
A:hover/*滑鼠移至连结*/
color : #000000 ; /*文字色彩*/
font-weight:bold; /*文字粗体*/
-->
</style>
连结属性一览==================================
A/*所有超连结*/
A:link/*超连结文字格式*/
A:visited/*浏览过的连结文字格式*/
A:active/*按下连结的格式*/
A:hover/*滑鼠移至连结*/
text-decoration:none;/*删除连结线*/}
{cursor:s-resize;/*滑鼠指标样式*/
font-weight:bold; /*文字粗体*/
border : 1px dotted #cc3300 ; /*文字框线*/}
滑鼠指标样式一览===============================
cursor:crosshair 十字型 cursor:s-resize 箭头朝下
cursor:move 十字箭头 cursor:e-resize 箭头朝右
cursor:help 加一问号 cursor:w-resize 箭头朝左
cursor:n-resize 箭头朝上 cursor:ne-resize 箭头朝右上
scursor:nw-resize 箭头朝左上 cursor:text 文字I型
cursor:se-resize 箭头斜右下 cursor:sw-resize 箭头斜左下
cursor:wait 漏斗 cursor:nono 预设
彩色卷轴=======================================
<style type=text/css>
<!--
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF; /*卷轴颜色*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*卷轴左与上内边框*/
SCROLLBAR-SHADOW-COLOR: #336699;/*卷轴右与下内边框*/
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*卷轴左与上外边框*/
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*卷轴右与下外边框*/
SCROLLBAR-ARROW-COLOR: #336699; /*卷轴箭头*/
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*卷轴底色*/
}
-->
</style>
删除卷轴=====================================
<style type=text/css>
<!--
BODY{overflow:hidden; /*删除卷轴*/}
-->
</style>
<style type=text/css>
<!--
BODY{overflow-x:hidden; /*删除水平卷轴*/}
-->
</style>
<style type=text/css>
<!--
BODY{overflow-y:hidden; /*删除垂直卷轴*/}
-->
</style>
滑鼠移过连结位移============================
<style type="text/css">
<!--
a:hover{position:relative;top:1px;left:1px;}
-->
</style>
说明:
在a:hover 滑鼠移至连结的属性做文字位置的变化
top:1px;left:1px 位移数值
right:1px;bottom:1px 可改变位移方向
表格透明效果================================
<style type=text/css>
<!--
table{FILTER: Alpha(opacity=60);/*表格透明*/}
-->
</style>
说明:
opacity=60 设定透明度(值越小越透明)
外部呼叫================================
<link rel=stylesheet type="text/css" href="档名.css">
更改滑鼠================================
<style type="text/css">
<!--
body {cursor:url("滑鼠网址"),url("滑鼠网址"),text;}
-->
</style>
*须为ani档及cur档
【诚征荣誉会员】溪流能够汇成大海,小善可以成就大爱。我们向全球华人诚意征集万名荣誉会员:每位荣誉会员每年只需支付一份订阅费用,成为《看中国》网站的荣誉会员,就可以助力我们突破审查与封锁,向至少10000位中国大陆同胞奉上独立真实的关键资讯,在危难时刻向他们发出预警,救他们于大瘟疫与其它社会危难之中。
<style type=text/css>
<!--
body,table{
color : #999999 ; /*文字色彩*/
font-family : 细明体 ; /*文字字型*/
font-size : 9pt /*文字大小*/
}
-->
</style>
文字属性一览================================
color : #999999 /*文字色彩*/
font-family : 细明体 /*文字字型*/
font-size : 9pt /*文字大小*/
font-style:itelic /*文字斜体*/
font-variant:small-caps/*小字体*/
letter-spacing : 1pt/*字间距离*/
line-height : 200 /*设定行高*/
font-weight:bold /*文字粗体*/
vertical-align:sub /*下标字*/
vertical-align:super/*上标字*/
text-decoration:line-through/*加删除线*/
text-decoration:overline /*加顶线*/
text-decoration:underline /*加底线*/
text-decoration:none /*删除连结底线*/
text-transform : capitalize /*首字大写*/
text-transform : uppercase /*英文大写*/
text-transform : lowercase /*英文小写*/
text-align:right /*文字靠右对齐*/
text-align:left /*文字靠左对齐*/
text-align:center /*文字置中对齐*/
背景语法===================================
<style type=text/css>
<!--
body{
background-image : url(image/bg.gif); /*背景图片*/
background-repeat : no-repeat; /*不重复排列*/
background-position : 90 90; /*背景图片x与y轴的位置*/
background-attachment : fixed;/*固定背景*/
}
-->
</style>
背景属性一览================================
background-color:#F5E2EC /*背景色彩*/
background-image : url(image/bg.gif) /*背景图片*/
background-attachment : fixed /*固定背景*/
background-repeat : repeat /*重复排列-网页预设*/
background-repeat : no-repeat /*不重复排列*/
background-repeat : repeat-x /*在x轴重复排列*/
background-repeat : repeat-y /*在y轴重复排列*/
background-position : 90 90 /*背景图片x与y轴的位置*/
连结语法====================================
<style type=text/css>
<!--
A:link/*超连结*/
{color : #999999 ; /*文字色彩*/}
A:visited/*浏览过的超连结*/
{color : #999999 ; /*文字色彩*/}
A:active/*按下连结*/
{color : #999999 ; /*文字色彩*/}
A:hover/*滑鼠移至连结*/
color : #000000 ; /*文字色彩*/
font-weight:bold; /*文字粗体*/
-->
</style>
连结属性一览==================================
A/*所有超连结*/
A:link/*超连结文字格式*/
A:visited/*浏览过的连结文字格式*/
A:active/*按下连结的格式*/
A:hover/*滑鼠移至连结*/
text-decoration:none;/*删除连结线*/}
{cursor:s-resize;/*滑鼠指标样式*/
font-weight:bold; /*文字粗体*/
border : 1px dotted #cc3300 ; /*文字框线*/}
滑鼠指标样式一览===============================
cursor:crosshair 十字型 cursor:s-resize 箭头朝下
cursor:move 十字箭头 cursor:e-resize 箭头朝右
cursor:help 加一问号 cursor:w-resize 箭头朝左
cursor:n-resize 箭头朝上 cursor:ne-resize 箭头朝右上
scursor:nw-resize 箭头朝左上 cursor:text 文字I型
cursor:se-resize 箭头斜右下 cursor:sw-resize 箭头斜左下
cursor:wait 漏斗 cursor:nono 预设
彩色卷轴=======================================
<style type=text/css>
<!--
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF; /*卷轴颜色*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*卷轴左与上内边框*/
SCROLLBAR-SHADOW-COLOR: #336699;/*卷轴右与下内边框*/
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*卷轴左与上外边框*/
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*卷轴右与下外边框*/
SCROLLBAR-ARROW-COLOR: #336699; /*卷轴箭头*/
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*卷轴底色*/
}
-->
</style>
删除卷轴=====================================
<style type=text/css>
<!--
BODY{overflow:hidden; /*删除卷轴*/}
-->
</style>
<style type=text/css>
<!--
BODY{overflow-x:hidden; /*删除水平卷轴*/}
-->
</style>
<style type=text/css>
<!--
BODY{overflow-y:hidden; /*删除垂直卷轴*/}
-->
</style>
滑鼠移过连结位移============================
<style type="text/css">
<!--
a:hover{position:relative;top:1px;left:1px;}
-->
</style>
说明:
在a:hover 滑鼠移至连结的属性做文字位置的变化
top:1px;left:1px 位移数值
right:1px;bottom:1px 可改变位移方向
表格透明效果================================
<style type=text/css>
<!--
table{FILTER: Alpha(opacity=60);/*表格透明*/}
-->
</style>
说明:
opacity=60 设定透明度(值越小越透明)
外部呼叫================================
<link rel=stylesheet type="text/css" href="档名.css">
更改滑鼠================================
<style type="text/css">
<!--
body {cursor:url("滑鼠网址"),url("滑鼠网址"),text;}
-->
</style>
*须为ani档及cur档
短网址: 版权所有,任何形式转载需本站授权许可。 严禁建立镜像网站.
【诚征荣誉会员】溪流能够汇成大海,小善可以成就大爱。我们向全球华人诚意征集万名荣誉会员:每位荣誉会员每年只需支付一份订阅费用,成为《看中国》网站的荣誉会员,就可以助力我们突破审查与封锁,向至少10000位中国大陆同胞奉上独立真实的关键资讯,在危难时刻向他们发出预警,救他们于大瘟疫与其它社会危难之中。
看完这篇文章您觉得
评论
- 赖清德称台湾不会独立 预言曝中国将物归原主(图/视频)
- 起死回生妙手回春 中华医圣传奇的一生(图)
- 与道同游 逍遥自在 庄子养生悟道(组图)
- 金元足球崩坍声名狼藉 潮水退落北京一地鸡毛(组图)
- 龚家古厝的由来(组图)
- 亘古亘今 全世界出现的神秘巨兽(图)
今日重点文章
更多重点文章
72小时热门排行
- 中共第五代习近平与李克强竞赛 关键看今年(图)
- 爆料:曾庆红之子曾伟依靠合法勒索敛财(图)
- 北京今夜大搜捕
- 北京奥火传堪培拉 抗议不断 党旗遭焚(多图)
- 这么多的官员自杀,他们是真的自杀了吗?
- 女子眉心中弹头盖骨竟碰碎子弹片(图)
- 虎照事件:该到最后揭底牌的时候了
- 一生劳碌为了什么?
热门标签
- 中共肺炎(又称武汉肺炎)
- 拜登
- 病毒
- COVID-19
- 疫苗
- 川普
- 特朗普
- 国安法
- 贸易战
- 习近平
- 华为
- 台铁
- 三峡大坝
- 新疆棉
- 长江
- 洪水
- 袁弓夷
- 港版国安法
- 汉光演习
- 国民党
- 退党
- 弗洛伊德
- BLM
- 中共
- 阎丽梦
- 金正恩
- 王岐山
- 赖清德
- 孟晚舟
- 关税
- 边境墙
- 彭斯
- 美国
- 贸易谈判
- 刘鹤
- 王沪宁
- 江泽民
- 崔永元
- 中南海
- 内幕
- 中共
- 反送中
- 贪官
- 情妇
- 腐败
- 反腐
- 打虎
- 官场
- 看中国
- 一国两制
- 法广
- 社交媒体
- 往事微痕
- 出卖国土
- FB
- 六四
- 朝鲜
- 加拿大
- 脱欧
- 央行
- 债务
- 杠杆
- 美元
- 货币
- 人民币
- 欧元
- 日元
- 港币
- 房地产
- 楼市
- 财政
- 财富
- 中产
- 海参崴
- 台湾
- 蔡英文
- 北京
- 刘强东
- 大妈
- 房价
- 疫苗
- 非洲猪瘟
- 大陆
- P2P
- 雾霾
- 基因编辑
- 防火墙
- 维权
- 709律师
- 上访
- 法轮功
- 网络审查
- 活摘器官
- 江东六十四屯
- 唐努乌梁海
- 长白山
- 白龙尾岛
- 江心坡
- SARS
- 新疆劳改营
- 言论自由
- 女主播
- 央视
- 华人
- 移民
- 华人
- 留学
- 海关
- 遣返
- 签证
- 回国
- 入籍
- 绿卡
- 民生
- 海外
- 加拿大
- 澳洲
- 民国
- 桂军
- 抗战
- 孙中山
- 蒋介石
- 宋美龄
- 邓小平
- 林彪
- 刘少奇
- 中共
- 皇帝
- 诸葛亮
- 易经
- 幽默人生
- 智慧
- 感悟
- 手机
- 预言
- 奇闻
- UFO
- 外星人
- 寿命
- 文革
- 养生
- 紫凤
- 贯明
- 李道真
- 轶飞
- 李云飞
- 云中君
- 辛思
- 夏闻
- 时代漫谈
- 沧海
- 东方纵横
- 唐柏桥
- 王尚一
- 江枫
- 黄清
- 李唐风
- 园丁
- 今涛拍暗
- 李青城
- 秦就石
- 中经研
- 秦天靖
- 江浩
- Eagle Vision
- 李子壬
- 马新宇
- 马来启
- 紫君
- 秦山
- 陈破空
- 戴东尼
- 曹长青
- 邢仁涛
- 瑜正
- 简易
- 肖川
- 伍凡
- 顾言
- 归瑜
- 乙欣
- 陈泱潮
- 徐沛