Css属性

边框样式

border-style:

   {border-style:none;}无边框
   {border-style:dotted;}点线边框
   {border-style:dashed;}虚线边框
   {border-style:solid;}实线边框
   {border-style:double;}双边框
   {border-style:groove;}凹槽边框
   {border-style:ridge;}垄装边框
   {border-style:inset;}嵌入边框
   {border-style:outset;}外凸边框
   {border-style:hidden;}隐藏边框

border-width:指定长度值或关键字,必须使用border-style才可用border-width

    {border-width:thick}
    {border-width:medium}
    {border-width:thin}

border-color:必须使用border-style才可使用border-color

单独设置各边的样式,顶部,右部,下部,左部

    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;

轮廓outline

元素周围的一条线,起突出作用,使用方法同boeder

 1.outline是不占空间的,既不会增加额外的width或者height(这样不会导致浏览器渲染时出现reflow或是repaint)
 2.outline有可能是非矩形的(火狐浏览器下)

外边距margin

    margin:auto;设置浏览器边距,依赖浏览器
    margin:length;固定的长度
    margin:top,right,bottom,left;

填充padding

    padding:length,&;
    padding:top,right,bottom,left;

行高

 line-height:normal;默认,合理的行间距
 line-height:inherit;从父元素继承line-height属性的值
 line-height:number数字设置  line-height:2
 line-height:length,%

diaplay显示visibility可见性

块级元素(block)特性:

 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性:

 和相邻的内联元素在同一行;
 宽度(width)、高度(height)、内边距的top/bottom(padding-top/ padding-bottom)和外边距的top/bottom(margin-top/margin-     bottom)都不可改变,就是里面文字或图片的大小;

主要用的CSS样式有以下三个:

 display:block  -- 显示为块级元素
 display:inline  -- 显示为内联元素 
 display:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性

我们常将ul元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。
visibility: hidden 相当于 display:none,能把元素隐藏起来,但两者的区别在于:

 1、display:none 元素不再占用空间。
 2、visibility: hidden 使元素在网页上不可见,但仍占用空间。

poition定位

 position:static;静态
 position:relative;相对其正常位置
 position:fixed;相对于浏览器窗口是固定的
 position:absolute;绝对定位
 position:sticky;基于滚动条的定位

  div.sticky {
     position: -webkit-sticky; /* Safari */
     position: sticky;
     }
   
     z-index:-1;堆叠属性,负值,在后面,正值,在前面
 img 
   {
    position:absolute;
    clip:rect(0px,60px,200px,0px);剪裁元素大小
   }
  div.ex1 {
      background-color: lightblue;
      width: 110px;
      height: 110px;
      overflow: scroll;使用滚动条显示溢出内容
      overflow:hidden;隐藏溢出内容
      overflow:auto;浏览器自动处理溢出内容
      overflow:visible;默认,溢出内容显示
      overflow:inherit;
    }

Overflow-x指定是否要剪辑的左/右边缘的内容.

Overflow-y指定是否要剪辑的顶部/底部边缘的内容

     visible    不裁剪内容,可能会显示在内容框之外。
     hidden     裁剪内容 - 不提供滚动机制。
     scroll     裁剪内容 - 提供滚动机制。
     auto       如果溢出框,则应该提供滚动机制。
     no-display 如果内容不适合内容框,则删除整个框。
     no-content 如果内容不适合内容框,则隐藏整个内容。

鼠标光标

请把鼠标移动到单词上,可以看到鼠标指针发生变化:

auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait

浮动

float:left,right,none,inherit;指定盒子(元素)可以浮动
clear:left,fight,both,none,inherit;不允许元素周围有浮动元素

对齐

 div 水平居中 margin:auto;
 文本水平居中 text-align:center;
 img{margin:auto;}图片居中
 左右对齐:
 position:absolute;
 flow:right;
 垂直居中padding:top,right,bottom,left
 line-height:200px;
 水平和垂直都居中:
 padding:
 text-align:center;
或
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);

导航栏标准代码

 
  • aaaaaaa
  • li {color:}设置点的颜色 li span {color:}设置字的颜色

    垂直导航栏

    
     
    
      
       
     

    水平导航栏

    使用内联(inline)或浮动(float)的列表项。

    这两种方法都很好,但如果你想链接到具有相同的大小,你必须使用浮动的方法。

    横向导航栏
     li
      {
        display:inline;
      }
    
    
         
        
        
    浮动列表项
       li
         {
           float:left; 
         }

    背景

     background-color背景颜色
     background-image:url('');背景图片
     background-repeat:no-repeat;不平铺
     repeat-x;水平方向平铺
     background-attachment:scroll;默认,背景图片随页面其余部分滚动
                            fixed;背景图像固定
                            inherit;从父元素继承
     background-position:定位图像的位置

    背景属性简写

    body {background:#ffffff url('img_tree.png') no-repeat right top;}

    当使用简写属性时,属性值的顺序为:

    background-color
    background-image
    background-repeat
    background-attachment
    background-position

    文本

    当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

       {text-align:justify;}

    上划线 中划线 下划线

      {text-decoration:overline;}
      {text-decoration:line-through;}
      {text-decoration:underline;}

    删除链接下面的下划线

     
     
    
       

    链接到: runoob.com

    全部大写 全部小写 首字母大写

     {text-transform:uppercase;}
     {text-transform:lowercase;}
     {text-transform:capitalize;}

    文本左缩进

     {text-indent:50px;}

    链接

    a:link {color:#000000;}      /* 未访问链接*/
    a:visited {color:#00FF00;}  /* 已访问链接 */
    a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
    a:active {color:#0000FF;}  /* 鼠标点击时 */

    四种链接形式

      

    表格中文字

    txet-align水平对齐,left,right,center

       td
     {
       text-align:right;
     } 

    vertical-align垂着对齐,top,middle,bottom

      td
    {
       height:50px;
       vertical-align:bottom;
    }

    表格空隙,每个格之间的空隙

      td
    {
      padding:15px;
    }

    表格背景色绿色,字体白色

      th
    {
       background-color:green;
       color:white;
    }

    caption-side设置表格标题top,bottom

      
     
     
       

    块元素

    h1-h6,p,div,ul,li,dl,dt,dd

    内联元素

    span,a,b,strong,em,input

    两种元素转换

    块-内联
       display:inline;
    内联-块
       display:block;
       display:inline-block;

    同一行的内容,前面内容与后面对齐方式

       vertical-align: top/middle/bottom;

    使内容始终固定在一个地方,不随页面动

    <外盒子 style="margin:0 auto;width:200px;height:200px;">
       <内盒子 style="position:fixed;left: 50%;top:50%;margin-top:-100px;margin-left:-100px;border:1px solid #000;text-align: center ">              
        
    

    你可能感兴趣的:(Css属性)

    Table 1.1 Customers
    Company