CSS 常用语法

文字风格样式 CSS文字风格样式范例

color: #0f0f0f; /*文字颜色*/
font-family: Arial, Tahoma; /*文字风格字型*/
font-size: 13px; /*文字大小*/
font-weight: bold; /*文字粗体*/
font-style: italic; /*文字斜体*/
font-variant: small-caps; /*小字体*/
letter-spacing: 1px; /*字体间距离*/
line-height: 18px; /*设定行高*/
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; /*文字置中对齐*/
text-align: justify; /*文字分散对齐*/
vertical-align: sub; /*下标字*/
vertical-align: super; /*上标字*/
vertical-align: top; /*垂直向上对齐*/
vertical-align: bottom; /*垂直向下对齐*/
vertical-align: middle; /*垂直置中对齐*/
vertical-align: text-top; /*文字垂直向上对齐*/
vertical-align: text-bottom; /*文字垂直向下对齐*/
word-spacing: 5px; /*设定词的间距(词间需有空白)*/
word-wrap: break-word; /*任意断字，适用于英文*/
word-wrap: nowrap; /*强制水平排序不断行*/

背景样式 CSS背景样式范例

background-color: #5f5f5f; /*背景色彩*/
background: transparent; /*透明背景*/
background-image: url(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 轴的位置*/
background-position: top; /*向上对齐*/
background-position: bottom; /*向下对齐*/
background-position: left; /*向左对齐*/
background-position: right; /*向右对齐*/
background-position: center; /*置中对齐*/

指定滑鼠游标的型态 CSS滑鼠样式范例

cursor: crosshair; /*十字线型*/
cursor: cell; /*十字小方格*/
cursor: move; /*十字箭头*/
cursor: all-scroll; /*四方捲动*/
cursor: n-resize; /*箭头朝上*/
cursor: s-resize; /*箭头朝下*/
cursor: e-resize; /*箭头朝右*/
cursor: w-resize; /*箭头朝左*/
cursor: nw-resize; /*箭头朝左上*/
cursor: sw-resize; /*箭头斜左下*/
cursor: se-resize; /*箭头斜右下*/
cursor: ne-resize; /*箭头朝右上*/
cursor: col-resize; /*改变直行数*/
cursor: row-resize; /*改变横栏数*/
cursor: text; /*I 输入文字符号*/
cursor: vertical-text; /*垂直文字*/
cursor: help; /*协助加一问号*/
cursor: wait; /*等待中；漏斗*/
cursor: progress; /*进行中；作业中*/
cursor: pointer; /*手型，表示超连结*/
cursor: not-allowed; /*无法使用*/
cursor: context-menu; /*选单*/

框线样式 CSS框线样式范例

border-top:/*上框线*/
border-bottom:/*下框线*/
border-left:/*左框线*/
border-right:/*右框线*/
border:/*四边框线*/
border-style: solid /*实线框*/
border-style: dotted /*点线框*/
border-style: dashed /*分段线*/
border-style: double /*双线框*/
border-style: groove /*立体内凸框*/
border-style: ridge /*立体浮凸框*/
border-style: inset /*凹框*/
border-style: outset /*凸框*/

容器外缘及边框空白(边界)样式 CSS边界样式范例

margin-top: 10px; /*上外缘值*/
margin-right: 10px; /*右外缘值*/
margin-bottom: 10px; /*下外缘值*/
margin-left: 10px; /*左外缘值*/
margin:10px; /*四边外缘值*/
padding-top: 10px; /*上边框空白*/
padding-right: 10px; /*右边框空白*/
padding-bottom: 10px; /*下边框空白*/
padding-left: 10px; /*左边框空白*/

物件定位 CSS物件定位范例

物件定位允许将元素从正常的文档流中脱离出来，让物件表现不同于文档流的固定方式，例如使模块物件在浏览器视窗内部始终停留在相同的地方。或是浮动排列根据指定的元素来计算呈现的方式。

position: static; /*依照正常流程佈局*/
position: relative; top: 10px; left: 10px; /*物件左上角开始位置*/
position: absolute; top: 10px; left: 10px; /*网页左上角开始位置*/
position: fixed; top: 10px; left: 10px; /*固定在参考物上*/

项目符号及编号 CSS项目样式范例

list-style-type: none; /*没有标志，不编号*/
list-style-type: disc; /*实心圆形符号*/
list-style-type: circle; /*空心圆形符号*/
list-style-type: square; /*实心方形符号*/
list-style-type: decimal; /*阿拉伯数字*/
list-style-type: decimal-leading-zero; /*阿拉伯数字(十进制前置零)*/
list-style-type: lower-roman; /*小写罗马数字*/
list-style-type: upper-roman; /*大写罗马数字*/
list-style-type: lower-alpha; /*小写英文字母*/
list-style-type: upper-alpha; /*大写英文字母*/
list-style-type: lower-greek; /*希腊语*/
list-style-type: armenian; /*亚美尼亚*/
list-style-type: georgian; /*格鲁吉亚语*/
list-style-image: url(dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排(预设值)*/
list-style-position: inside; /*缩排*/

超连结的连结样式

a /*加入所有超连结样式*/
a:link /*加入超连结文字样式*/
a:visited /*加入浏览过的连结文字样式*/
a:hover /*加入滑鼠指标指着连结样式*/
a:active /*加入按下启用连结的样式*/

CSS 规范描述网页核心语言开发设计、设定网页样式及佈局文件的结构化元素如何美化呈现，在 HTML 套用 CSS 实现更加灵活和高效的样式处理。条件化样式、允许开发者根据不同的条件来应用样式，使得页面可以根据不同设备、媒体特性或用户偏好来呈现不同的样式，实现跨平台的样式兼容性。