CSS常用样式（上）

• 尺寸样式 (width min-width max-width height min-height max-height)
• 字体样式 (font font-style font-variant font-weight font-size.....)
• 文本样式 (text-transform white-space tab-size word-wrap.......)
• 边框样式（border-width border-style border-color border-radius）
• 边距样式（margin padding......）
• 背景样式（background-image background-repeat background......）
• 列表样式（list-style-type list-style-position list-style-image....）
• 鼠标样式（url default auto crosshair pointer move ne-resize......）
• 布局样式（文档流 display float clear overflow overflow-x overflow-y.....）
• 定位样式（position z-index top right bottom left.......）
• 多列样式（column-width column-count column-gap column-rule.....）
• 伸缩盒样式（flex flex-grow flex-shrink flex-basis flex-flow.....）
• 手册

尺寸样式

<div class="demo"></div>

.demo{
    width:100px;
    min-width:100px;
    max-width:200px;
    height:100px;
    min-height:100px;
    max-height:200px;
    background-color:red;
}

字体样式

<div class="demo">demo</div>

.demo{
    font-style:normal;  /* 指定文本字体样式为正常的字体 */
    font-style:italic;    /* 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique */
    font-style:oblique; /* 指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字 */

    font-variant:normal; /* 正常的字体 */
    font-variant:small-caps; /* 小型的大写字母字体 */

    font-weight:normal; /*正常的字体。相当于数字值400*/
    font-weight:bold; /* bold粗体。相当于数字值700*/
    font-weight:bolder; /* bolder：定义比继承值更重的值 */
    font-weight:lighter; /* lighter：定义比继承值更轻的值 */
    font-weight:900;  /* 用数值来表示 100-900*/

    font-size:20px;  /* 设置字体大小 */
    font-family:'微软雅黑'; /* 设置字体类型 */

    font:italic small-caps bolder 20px/30px '微软雅黑';
}

文本样式

<div class="demo">XXXX</div>

text-align:left;  /*内容左对齐*/
text-align:center;    /*内容居中对齐*/
text-align:right;    /*内容右对齐*/
text-align:justify;    /*内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理*/
text-align:start;    /*内容对齐开始边界*/
text-align:end;        /*内容对齐结束边界*/

letter-spacing:30px;    /*字与字之间的间距*/

text-indent:30px;    /*首行缩进*/

line-height:30px;    /*行高*/

text-shadow:10px 20px 30px red;        /* 水平方向的值 垂直方向的值 阴影模糊的值 模糊的颜色 */

text-decoration:underline solid red; /* 线的位置 线的类型 线的颜色*/

text-transform:none;  /*无转换*/
text-transform:capitalize; /*将每个单词的第一个字母转换成大写*/
text-transform:uppercase; /*将每个单词转换成大写*/
text-transform:lowercase; /*将每个单词转换成小写*/

white-space:normal; /*默认处理方式*/
white-space:pre; /*用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。*/
white-space:nowrap; /*强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象*/
white-space:pre-wrap; /*用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行*/
white-space:pre-line; /*保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行*/

边框样式

<div class="demo"></div>

.demo{
    width:100px;
    height:100px;

    border-width:20px;  /*设置元素边框宽度*/
    border-style:solid;    /*设置元素边框样式*/
    border-color:red;    /*设置元素边框颜色*/
    border:1px solid red; /*复合属性。设置元素边框的特性*/
    border-radius:20px;    /*设置元素使用圆角边框*/
    box-shadow:10px 20px 30px 40px green;    /*设置元素阴影*/
}

边距样式

<div class="demo"></div>

.demo{
    width:100px;
    height:100px;

    background-color:red;

    margin:10px;
    margin:10px 20px;
    margin:10px 20px 30px;
    margin:10px 20px 30px 40px;

    padding:10px;
    padding:10px 20px;
    padding:10px 20px 30px;
    padding:10px 20px 30px 40px;
}

背景样式

<div class="demo"></div>

.demo{
    width:100px;
    height:100px;

    background-color:red;        /*设置元素的背景颜色*/

    background-image:url('pic.png');    /*设置元素的背景图像*/

    background-repeat:repeat-x;        /*设置元素的背景图像如何铺排填充*/

    background-position:right top;    /*设置元素的背景图像位置*/

    background:url(test1.jpg) no-repeat  10px 20px/110px 130px      #aaa;
    /*image repeat  position size  color */
}

列表样式

<ul class="demo">
    <li>demo</li>
    <li>demo</li>
</ul>


.demo{
    list-style-type:circle;    /*空心圆*/
    list-style-type:disc;    /*实心圆*/
    list-style-type:square;    /*实心方块*/
    list-style-type:none;    /*不使用项目符号*/

    list-style-position:outside;  /*列表项目标记放置在文本以外，且环绕文本不根据标记对齐*/
    list-style-position:inside;      /*列表项目标记放置在文本以内，且环绕文本根据标记对齐*/
}

鼠标样式

<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto - 默认。浏览器设置的光标。</span><br />
<span style="cursor:crosshair">Crosshair - 光标呈现为十字线。</span><br />
<span style="cursor:default">Default -  默认光标（通常是一个箭头）</span><br />
<span style="cursor:pointer">Pointer - 光标呈现为指示链接的指针（一只手）</span><br />
<span style="cursor:move">Move - 此光标指示某对象可被移动</span><br />
<span style="cursor:e-resize">e-resize - 此光标指示矩形框的边缘可被向右（东）移动</span><br />
<span style="cursor:ne-resize">ne-resize - 此光标指示矩形框的边缘可被向上及向右移动（北/东）</span><br />
<span style="cursor:nw-resize">nw-resize - 此光标指示矩形框的边缘可被向上及向左移动（北/西）</span><br />
<span style="cursor:n-resize">n-resize - 此光标指示矩形框的边缘可被向上（北）移动</span><br />
<span style="cursor:se-resize">se-resize - 此光标指示矩形框的边缘可被向下及向右移动（南/东）</span><br />
<span style="cursor:sw-resize">sw-resize - 此光标指示矩形框的边缘可被向下及向左移动（南/西）</span><br />
<span style="cursor:s-resize">s-resize - 此光标指示矩形框的边缘可被向下移动（南）</span><br />
<span style="cursor:w-resize">w-resize - 此光标指示矩形框的边缘可被向左移动（西）</span><br />
<span style="cursor:text">text - 此光标指示文本</span><br />
<span style="cursor:wait">wait - 此光标指示程序正忙（通常是一只表或沙漏）</span><br />
<span style="cursor:help">help - 此光标指示可用的帮助（通常是一个问号或一个气球）</span><br />
<span  style="cursor: url('GerardTalbot.cur'), default;">url - 需使用的自定义光标的 URL</span><br />