css

一、CSS基本格式化

【一】CSS基本格式化属性大致为两类：

1、基本格式化属性：字体属性、文本属性、背景属性；

2、布局性属性：框属性、定位属性、布局属性、列表属性、表格属性；

【二】基本格式化属性：

1、属性值分类：

    单词：“font-style:italic;” ; 数字值：“font-size:12px” ; 颜色值：“color:red;” ;

2、数字值单位：

    相对单位：像素(px)、当前字体中m字母的宽度(em)、当前字体中x字母的高度(ex)、百分比(%);

　  绝对单位：厘米(Cm)、英寸(In)、毫米(Mm)、磅(pt)、1pc=12磅(pc);

3、颜色值：

　  颜色名：16种标准颜色名，aqua/cyan/black/blue/fuchsia/magenta/gray/green/lime/maroon/navy/purple/red/silver/teal/white/yellow;

    #RRGGBB:取值范围：00~FF ； rgb(r,g,b):取值范围：0~255； rgb(r%,g%,b%)；

4、常见字体属性：

　　<p style="font-family:宋体,Arial,Helvetica,sans-serif;">JS</p>;

　　<p style="font-size:48pt">JS</p>;

　　<p style="font-style:italic">JS</p>;

　　<p style="font-weight:bold">JS</p>;

　　<p style="font-variant:small-caps">JS</p>;

　　按顺序一次性设置,空格分隔：

< font-weight font-variant font-style font-size line-height font-family>;

5、常见文本属性：

   <p style="text-transform:uppercase">JS</p>;

　　<p style="text-decoration:line-through">JS</p>;

　　<p style="text-align:center">JS</p>;

　　<p style="vertical-align:super">JS</p>;

　　<p style="text-indent:2em">JS</p>;

　　<p style="line-height:2.5">JS</p>;

　　<p style="letter-spacing:1pt">JS</p>;

　　<p style="word-spacing:1em">JS</p>;

　　<p style="white-space:pre">JS</p>;

6、常见背景属性：

　　<p style="background-color:silver">JS</p>;

　　<p style="background-image:url(bg.gig)">JS</p>;

　　<p style="background-image:url(bg.gig); backgound-position:left top;">JS</p>;

　　<p style="background-image:url(bg.gig); backound-repeat:no-repeat;">JS</p>;

　　<p style="background-image:url(bg.gig);backgound-attachment:fixed">JS</p>;

【三】布局性属性：

  1、框

  元素框模型：每一个可现实的页面元素，都显示为一个矩形框，包括内容区、内边距(padding)、边框(border)和外边距(margin)；

　框属性:元素边框设置包括3项，边框颜色、边框样式、边框宽度；边框包括是个方向；方向和边框设置结合就构成CSS边框的属性；

　内边距属性：padding-top; padding-right;  padding-bottom; padding-left;

　外边距属性：margin-top; margin-right; margin-bottom; margin-left;　

 外边距外边距重叠后的外边距高度等于两个发生重叠的外边距的高度中的较大者；

　框大小：用户可以使用width和height属性明确指定元素的宽度和高度，或者使用max-width;

min-width、max-height和min-height；

　内容区大小和框大小：内容区大小可以由属性width和height设置；

 框大小 框宽度=width+(左内边距+左边框+左外边距)+(右内边距+右边框+右边距框)；

　2、元素定位

   在默认情况下，每个可显示元素以元素框的形式，按照元素在HTML代码中的位置依次显式，从而构成一个文档流；

  要改变元素框在文档流中的位置，使用定位方式属性(position)；及其相关的偏移属性

(top、bottom、left、right)和堆叠属性(Z-index)；

   使用position属性时可以指定4种定位方式：static、relative、absolute、fixed;

3、元素布局

　CSS除了定位元素属性之外，还提供了一些用于元素布局的属性；

　常见的有：浮动方向(float)、是否允许元素的侧面紧贴浮动元素(clear)、是否及如何显示元素(display)、元素是否可见(visibility)、

　指定如何处理溢出内容区的元素内容(overflow)、指定元素的裁剪形状(clip)、指定当鼠标指向元素之上时显示的指针的类型(cursor);

4、列表样式

　　list-style-type:

   none/disc/circle/square/decimal/lower-roman/upper-roman/lower-alpha/upper-alpha;

　　

   list-style-position:outside/inside;

　　list-style-image:url/none;

　　list-style:该属性可同时指定以上属性；

   若同时指定list-style-type和list-style-image属性，则只有当浏览器不能显示指定图像时，         list-style-type才有效；

内容生成器：可以使用content属性为指定的元素添加自定义内容；

     content：必须与伪元素配合使用，从而在相应元素之前或之后添加指定内容；

　　　a:after{content:"【"url(aaa.gif)  attr(href) "】"}

　　　/*url:外部资源 attr：指定相应元素的某个属性值 除此还有计数器值分为：

      counter(name)、 counter(name,list-style-type)、counters(name,string)、

　　　或counters(name,string,list-style-type)等函数，返回指定类型的编号；

      name是计数器名；list-style-type:编号类型，string是自嵌套多级编号分隔符 */

    counter-reset:当出现相应元素时，计数器复位；

　   counter-increment：当出现相应元素时，计数器按指定增量计数；

    自定义编号：主要就是通过配合使用content、counter-reset和counter-increment属性实现；

    多级编号：使用计数器生成多级编号，主要就是content属性的应用；

5、表格制作

　　制作常规表格:<table width="" border="" cellspacing=" " cellpadding="" >、

　　　　　　　　 <tr addr="" align="" valign="" colspan="" rowspan="">、<td>;

　　表格行分组：<thead>、<tbody>、<tfoot>

   备注：将其他元素显示为表格，借助与CSS其他技术；

　　CSS表格属性：

   caption-side:top/bottom将标题定位上方或者下方；

　  table-layout：auto/fixed　指定表格算法；

   border-collapse：separate/collapse 指定是否将表格中单元之间的相邻边框合并为单一边框；

　  border-spacing：length length;前者是设置水平间距，后者是设子垂直间距；指定相邻边框之间的距离；

　  empty-cells:hide/show 指定是否显示表格中的空单元格；