简述：
此笔记是学习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;}
网友评论