CSS 样式表大全（学习笔记）

简述：

此笔记是学习Qt开发时产生的，主要是对Qt组件样式设计学习的一个简单记录，仅供参考使用。

css样式被称为为“层叠样式表”，是一种网页制作做不可或缺的技术，是用于装饰网页，达到设计效果的一种样式语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS样式表：

字体属性（font）

{color : #999999;}                /*文字颜色*/

{font-family : 宋体,sans-serif;}  /*文字字体*/
{font-size : 9pt;}          /*文字大小，x-large(特大); xx-small(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD*/
{font-style:itelic;}        /*文字斜体, oblique(偏斜体) italic(斜体) normal(正常)*/
{font-variant:small-caps;} /*小字体、变体, small-caps(小型大写字母) normal(正常)*/
{font-variant:inherit|normal|small-cps }  /*字体变形*/
{font-size-adjust:inherit|none}  /*字体变形*/
{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}   /*字体*/
{font-weight:bold;}   /*文字粗体, bold(粗体) lighter(细体) normal(正常)*/

{letter-spacing:数值|inherit|normal}    /*字间距离*/
{word-spacing:数值|inherit|normal}      /*单词间距*/

{line-height : 200%;} /*设置行高, normal(正常) 单位：PX、PD、EM*/

{vertical-align:sub;}    /*下标字*/
{vertical-align:super;}  /*上标字*/

{text-decoration:line-through;} /*加删除线*/
{text-decoration: overline;}    /*加顶线*/
{text-decoration:underline;}    /*加下划线*/
{text-decoration:none;}         /*删除链接下划线*/
{text-decoration:blink;}        /*闪烁*/

{text-shadow : #000080;}          /*阴影颜色 {16位色值}*/
{text-transform:inherit|none|capitalize|uppercase|lowercase}  /*英文转换*/
{text-indent:数值|inherit}  /*段首空格*/

{text-transform : capitalize;} /*首字大写*/
{text-transform : uppercase;}  /*英文大写*/
{text-transform : lowercase;}  /*英文小写*/

{text-align:right;}   /*文字右对齐*/
{text-align:left;}    /*文字左对齐*/
{text-align:center;}  /*文字居中对齐*/
{text-align:justify;} /*文字分散对齐*/

//vertical-align属性
{vertical-align:top;}           /*垂直向上对齐*/
{vertical-align:bottom;}        /*垂直向下对齐*/
{vertical-align:middle;}        /*垂直居中对齐*/
{vertical-align:text-top;}      /*文字垂直向上对齐*/
{vertical-align:text-bottom;}   /*文字垂直向下对齐*/

{writing-mode:lr-tb|tb-rl}  /*书写方式*/

背景属性（background）

{background-color: #FFFFFF;} /*背景颜色*/
{background-image: url(URL)|none;} /*图片*/
{background:transparent;} /*透视(透明)背景*/
{background-attachment: fixed;} /*滚动,  fixed(固定), scroll(滚动)*/

{background-position : 90% 90%;}   /*背景图片x与y轴的位置*/
{background-position : top;}       /*向上对齐*/
{background-position : buttom;}    /*向下对齐*/
{background-position : left;}      /*向左对齐*/
{background-position : right;}     /*向右对齐*/
{background-position : center;}    /*居中对齐*/

{background-repeat : inherit;}   /*默认。背景图像将在垂直方向和水平方向重复。*/
{background-repeat : repeat;}     /*重复排列-网页默认*/
{background-repeat : no-repeat;}  /*不重复排列*/
{background-repeat : repeat-x;}   /*在x轴重复排列*/
{background-repeat : repeat-y;}   /*在y轴重复排列*/


{background:#000 url(..) repeat fixed left top;} /*简写方法 ·这个在阅读代码中经常出现，要认真的研究*/

边框属性（Border）

{border-style: dotted;}  /* 边框样式  dotted(点线) dashed(虚线) solid(实线框) double(双线) groove(槽线) ridge(脊状) inset(凹陷) outset(凸起按钮) */
{border-width:15px 5px 15px 5px);}  /*边框宽度 上、下、左、右*/
border-color:#999999;  /*边框颜色*/

{border：width style color;}   /*简写*/

//css边框空白
{padding-top:10px;}     /*上边框留空白*/
{padding-right:10px;}   /*右边框留空白*/
{padding-bottom:10px;}  /*下边框留空白*/
{padding-left:10px;}    /*左边框留空白 */

{margin-top:10px;}    /*上边界*/
{margin-right:10px;}  /*右边界值*/
{margin-bottom:10px;} /*下边界值*/
{margin-left:10px;}   /*左边界值*/

//举例样式：
1  边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2  补　　白 {padding:padding-top padding-right padding-bottom padding-left}
3  边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}　　

//宽度值： thin|medium|thick|数值
4  边框颜色 {border-color:数值 数值 数值 数值}　　数值：分别代表top、right、bottom、left颜色值
5  边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6  边　　框 {border:border-width border-style color}
   上 边 框 {border-top:border-top-width border-style color}
   右 边 框 {border-right:border-right-width border-style color}
   下 边 框 {border-bottom:border-bottom-width border-style color}
   左 边 框 {border-left:border-left-width border-style color}
7  宽　　度 {width:长度|百分比| auto}
8  高　　度 {height:数值|auto}
9  漂　　浮 {float:left|right|none}
10 清　　除 {clear:none|left|right|both}

//css框线一览表：
{border-top : 1px solid #6699cc;}    /*上框线*/
{border-bottom : 1px solid #6699cc;} /*下框线*/
{border-left : 1px solid #6699cc;}   /*左框线*/
{border-right : 1px solid #6699cc;}  /*右框线*/

//以上是建议书写方式,但也可以使用常规的方式 如下:
{border-top-color : #369;}     /*设置上框线top颜色*/
{border-top-width :1px;}       /*设置上框线top宽度*/
{border-top-style : solid;}    /*设置上框线top样式*/

超链接属性

a          /*所有超链接*/
a:link    /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active  /*按下链接的格式*/
a:hover   /*鼠标转到链接*/

//样式使用案例
a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

鼠标光标样式

链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}