CSS总结

CSS 文本属性可定义文本的外观：




通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。


属性名称       属性值         说明


font-style    normal         正常显示
              italic         斜体 
font-variant  normal         正常显示


              small-caps     将英文大小写字母写调为同宽


font-weight   normal         正常显示


              bold           粗体


font-size     像素           字体大小


              百分比         字体大小


font-family   字体名称       设置字体名称
.......................................................................................................................................................................
CSS 中的文本属性：
属性名称          属性值         说明
color             十六进制       颜色


                  英文名称       颜色


                  三原色单位     颜色


letter-spacing    normal         正常显示
                  长度           文本间隔   


word-spacing    normal         正常显示


                  数字           单词间距


white-space       normal         文本自动处理换行


                  pre            换行和空白受保护
                  nowrap         强制在同一行显示
text-align        left           文字靠左


                  right          文字靠右


                  center         文字靠中


text-decoration   none           正常显示


                  underline      加上下划线




                  overline       加顶线
            
                  line-through   加删除线




text-indent       长度           首行缩进


                  百分比         同上


line-height       像素           行高


                  数字 / 百分比  行高
text-transform    none           正常显示可以包含大，小字符


                  capitalize     字符串第一个字符大 写
                  uppercase      设置大写字符


                  lowercase      设置小写字符


vertical-align    sub            设置文字为下标。


                  super          设置文字为上标。
                  top            元件往上端靠齐。


                  middle         设置文字是在中线位置。


                  bottom         元件往下端靠齐。


.......................................................................................................................................................................
属性名称                 属性值       说明


background-attachment     scroll                 设置背景图像会随视条的移动而移动。


                                fixed                  设置背景图像不会随视窗滚动条的移动而移动。


background-color                十六进制               background-color:#ff0000;


                                英文名称               background-color:red;
                                三原色                 background-color:rgb(255,0,0)
                                transparent            background-color:transparent;透明
background-image                URL                    background-image:url("bg.jpg")背景图片


background-position             none              不设置背景图片
                                top left          设置背景图案出现在上左方。


                                top center        设置背景图案出现在上方中间。


                                top right         设置背景图案出现在上右方。


                                center left       设置背景图案出现在中间左方。


                                center center     设置背景图案出现在 IE 中间。


                                center right      设置背景图案出现中间右方。
                                bottom left       设置背景图案出现在下左方。


                                bottom            设置背景图案出现在正下方。


                                bottom right      设置背景图案出现在下右方。
background-repeat               repeat            将背景图案填满整个背景。


                                repeat-x          将背景图案在水平方向添满。
                                repeat-y          将背景图案在垂直方向添满。


                                no-repeat         图案只出现一次。
     


背景图案简化方案：
        
background: 颜色 背景图片 repeat attachment position;
background-attachment -- 定义背景图片随滚动轴的移动方式取值: scroll | fixed | inherit


scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承


初始值:scroll


继承性: 否适用于: 所有元素


background:背景.attachment:附着.








.......................................................................................................................................................................
CSS 中边框的使用
属性名称         属性值       说明


border-color     十六进制     可依序设置上，右，下，左线颜色


                 英文名称      border-color:red( 四边均为红色 )
                 三原色        border-color:red green


                              ( 上下为红色，左右为绿色 )


                              border-color:red green blue
                              ( 上为红色、左右为绿色、下为蓝色 )


                              border-color:red green blue yell
 
                             ( 上右下左分别为红绿蓝黄 )


border-style  none            不显示边线


              dotted          点线


              dashed          虚线


              solid           实线


             double           双线


border-width   长度           border-width:0.2cm 0.3cm 0.4cm 0.5cm;


border-width:1 2 3 4;简化方案： border: 形态 长度 颜色


      例如 border: 1px solid black;
简写跟全部写法
border-bottom-style:dotted;


        border-bottom-color:#666;
        border-bottom-width:1px;


border-top:#666 solid 1px;(一条边的简写)
borde:#666 solid 1px;(四条边的简写)








.......................................................................................................................................................................


CSS 中边界的使用
属性名称        属性值             说明


padding-bottom  长度 / 百分比      元件下端边线的空隙


padding-left    长度 / 百分比      元件左端边线的空隙


padding-right   长度 / 百分比      元件右端边线的空隙


padding-top     长度 / 百分比      元件上端边线的空
隙
简易写法： 
    
padding:10px
    
padding:2 px 4p x
    
padding:2p x 6p x 10p x
    
padding:1p x 2p x 3p x 4p x






.......................................................................................................................................................................
margin 系列属性介绍
    
属性名称              属性         说明
    
margin-bottom         auto       自动调整空隙


                  长度 / 百分比  设置下端空隙
    
margin-left           auto       自动调整空隙


                  长度 / 百分比  设置左端空隙
    
margin-right         auto        自动调整空隙


                  长度 / 百分比  设置右端空隙
    
margin-top           auto        自动调整空隙


                 长度 / 百分比   设置上端空隙
    
简化方案： 
        
margin:2p x 4p x
        
margin:2p x 6p x 10p x
        
margin:1 px 2 px 3 px 4 px
    
常用网页顶格设置：margin:0;


         
                                
.......................................................................................................................................................................
CSS 中区块的使用
属性名称           属性值                  说明
 
width           像素 / 百分比           区块的宽度
    
auto
height      像素 / 百分比           区块的 高度
    
auto
min-height  像素 / 百分比           区块最小高度
    
auto
max-height  像素 / 百分比           区块最大高度
    
auto
min-width   像素 / 百分比           区块最小宽度
    
auto
max-width   像素 / 百分比           区块最大宽度
    
auto
......................................................................................................................................................................
CSS 中浮动的使用属性名称     属性值      说明
float        none     正常显示


             left     左浮动


             right    右浮动


clear        none    允许两边浮动
             left   不允许左边浮动


             right    不允许右边浮动


             both     不允许两边浮动
.......................................................................................................................................................................
CSS 中定位的使用
属性名称    属性值           说明
position   relative         设置区块基准点为左上角


           absolute         置网页的为基准点左上


           static           无设置


left        auto            以基准点定位在左边
          像素/百分比      定位在左边


top         auto           以 基准点定位在上边


          像素/百分比         定位在上边


right       auto           以 基准点定位在 右 边


         像素/百分比       定位在 右边


bottom     auto            以 基准点定位在 下 边


         像素/百分比         定位在 下边
z-index    auto            自动调整高度
    数字     数字越大越往上层
.......................................................................................................................................................................
CSS 中溢出的使用
属性名称   属性值      说明


overflow   visible     不剪切内容也不添加滚动条
           auto        在必需时对象内容才会被裁切或显示滚动条


           hidden      不显示超过对象尺寸的内容


           scroll     总是显示滚动条


overflow-x     ( 同上 )


overflow-y     ( 同上 )
.......................................................................................................................................................................
CSS 中滚动条的使用
属性名称                     属性值           说明


scrollbar-3dlight-color    颜色 / 十六进制    滚动条亮边框


scrollbar-highlight-color  颜色 / 十六进制    滚动条 3D 界面亮边
scrollbar-face-color      颜色 / 十六进制        滚动条 3D 表面


scrollbar-arrow-color      颜色 / 十六进制        滚动条方向箭头


scrollbar-shadow-color     颜色 / 十六进制    滚动条 3D 暗边


scrollbar-darkshadow-color 颜色 / 十六进制    滚动条暗边框


scrollbar-base-color      颜色 / 十六进制      滚动条基准颜色


scrollbar-track-color      颜色 / 十六进制     滚动条的拖动区域


.....................................................................................................................................................................
定位
相对定位
#myBox {
Position: relat ive; Top: 20px;
Left: 20px;
}
绝对定位
#myBox {Position:absolute;
Top: 20px;
Left: 20px;}       




浮动
.news img {
Float: left; }
.news p {
 Float: right; }


设定颜色


红色的几种合法定义：
                #f00;

                #ff0000;

                Red;

                Rgb(255,0,0);
  
                Rgb(100%,0%,0%);       


.......................................................................................................................................................................
使用 display 属性提供区块转换


inline-block,block,none
<style>


.inline{display:inline; width:100px; 
        height:100px; padding:5px; 
        background-color:#F00;}


.block{display:block; width:100px; 
       height:100px; padding:5px;background-color:#0f0;}


.inline-block{display:inline-block; 
             width:100px;height:100px; padding:5px;background-color:#00f;}


</style>


<body>
<span class="inline">
inline
</span>inline


<span class="block">
block
</span> block


<span class="inline-block">
inline-block
</span>inline-block


</body>
我们发现内联对象`inline`给它设置属性`height`和`width`是没有用的，致使它变宽变大的
原因是内部元素的宽高`+padding`。
观察inline对象的前后元素我们会发现`inline`不单独占一行，
其它元素会紧跟其后。
而块对象`block`是可以设置宽高的，但是它的实际宽高是本身宽高`+padding`。


观察`block`的前后元素我们会发现`block`要单独占一行。


然而，当我们即需要div有宽高，又不希望它独占一行怎么办？




这个时候我们就需要使用`inline-block`了，再观察一下上面的demo，
我们会发现`inline-block`
即具有`block`的宽高特性又具有`inline`的同行元素特性。


然而，在IE6/7下padding对inline的宽高是对其没影响的。


.......................................................................................................................................................................
perspective:200px; 放在父一级，当其值越大时，元素离观看者越近，视觉上元素放大，反之元素缩小。
transform新增函数 
rotateX():如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。 
rotateY():如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。 
rotateZ():rotateZ()函数指定元素围绕Z轴旋转，如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，并且效果和rotate()效果等同， 
translateZ();让元素在Z轴进行位移，当其值越大时，元素离观看者越近，视觉上元素放大，反之元素缩小。


.......................................................................................................................................................................
渐变：
直线渐变
background:linear-grdient(left,red,blue,yellow);直线颜色渐变。
background:linear-grdient(left bottom,red,blue,yellow);对角颜色渐变。
background:linear-grdient(left，rgba(255,255，255,0.5),rgba(241,266,233,0.8));透明颜色渐变。
background:linear-grdient(left，rgba(255,255，255,0.5),rgba(241,266,233,0.8),url(pic/mm.jpg));图片渐变透明。
background:linear-grdient(left,red 20%,blue 30%,yellow 50%);颜色百分比分布。
background: -webkit-linear-gradient(180deg, red, blue);带有指定的角度的线性渐变：
CSS3 径向渐变
background: -webkit-radial-gradient(red, green, blue);




.......................................................................................................................................................................
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
h1:before 
{
content:url(smiley.gif);
}


CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
h1:after
{
content:url(smiley.gif);
}
.......................................................................................................................................................................










.......................................................................................................................................................................












.......................................................................................................................................................................