zoukankan      html  css  js  c++  java
  • 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-指定长度值或关键字,必须使用border-style才可用border-width

        {border-thick}
        {border-medium}
        {border-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;
           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	如果内容不适合内容框,则隐藏整个内容。
    

    鼠标光标

    <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:e-resize">e-resize</span><br>
    <span style="cursor:help">help</span><br>
    <span style="cursor:move">move</span><br>
    <span style="cursor:n-resize">n-resize</span><br>
    <span style="cursor:ne-resize">ne-resize</span><br>
    <span style="cursor:nw-resize">nw-resize</span><br>
    <span style="cursor:pointer">pointer</span><br>
    <span style="cursor:progress">progress</span><br>
    <span style="cursor:s-resize">s-resize</span><br> 
    <span style="cursor:se-resize">se-resize</span><br>
    <span style="cursor:sw-resize">sw-resize</span><br>
    <span style="cursor:text">text</span><br>
    <span style="cursor:w-resize">w-resize</span><br>
    <span style="cursor:wait">wait</span><br> 
    

    浮动

    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%);
    

    导航栏标准代码

     <li><span>aaaaaaa</span></li>
     li {color:}设置点的颜色
     li span {color:}设置字的颜色
    

    垂直导航栏

    <head>
     <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
         200px;
        background-color: #f1f1f1;
          }
    li {
        text-align: center;
        border-bottom: 1px solid #555;
       }每个链接居中,并给每个列表选项添加边框。
      li a {
        display: block; 显示块元素的链接,让整体变为可点击链接区域(不只是文本),它允许我们指定宽度
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
          }
     /* 鼠标移动到选项上修改背景颜色 */
    li a:hover {
       background-color: #555;
       color: white;
        }
     li a.active {
        background-color: #4CAF50;
        color: white;
        }在点击了选项后,我们可以添加 "active" 类来标准哪个选项被选中
      </style>
    </head>
      <body>
       <ul>
         <li><a class="active" href="#home">主页</a></li>
         <li><a href="#news">新闻</a></li>
         <li><a href="#contact">联系</a></li>
         <li><a href="#about">关于</a></li>
       </ul>
     </body>
    

    水平导航栏

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

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

    横向导航栏
     li
      {
        display:inline;
      }
    
    <style>
    	ul
    	{
    		list-style-type:none;
    		margin:0;
    		padding:0;
    		padding-top:6px;
    		padding-bottom:6px;
    	}
    	li
    	{
    		display:inline;
    	}
    	a:link,a:visited
    	{
    		font-weight:bold;
    		color:#FFFFFF;
    		background-color:#98bf21;
    		text-align:center;
    		padding:6px;
    		text-decoration:none;
    		text-transform:uppercase;
    	}
    	a:hover,a:active
    	{
    		background-color:#7A991A;
    	}
    	
    	</style>
    	</head>	
    	<body>
    	<ul>
    	<li><a href="#home">主页</a></li>
    	<li><a href="#news">新闻</a></li>
    	<li><a href="#contact">联系</a></li>
    	<li><a href="#about">关于</a></li>
    	</ul>
    浮动列表项
       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;}
    

    删除链接下面的下划线

     <style>
       a {text-decoration:none;}
     </style>
     <body>
    
       <p>链接到: <a href="http://www.runoob.com/">runoob.com</a></p>
     </body>
    

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

     {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;}  /* 鼠标点击时 */
    

    四种链接形式

      <style>
        a:link,a:visited
             {
               display:block;
               font-weight:bold;
               color:#FFFFFF;
               background-color:#98bf21;
               120px;
               text-align:center;
               padding:4px;
               text-decoration:none;
             }
       a:hover,a:active
             {
               background-color:#7A991A;
             }
       </style>
    

    表格中文字

    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

      <style>
      caption {caption-side:bottom;}
      </style>
     </head>
     <body>
       <table border="1">
          <caption>Table 1.1 Customers</caption>
       <tr>
         <th>Company</th>
       </tr>
    

    块元素

    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;200px;height:200px;">
       <内盒子 style="position:fixed;left: 50%;top:50%;margin-top:-100px;margin-left:-100px;border:1px solid #000;text-align: center ">              
        </div>
    </div>
  • 相关阅读:
    堆栈学习
    需要阅读的书籍
    Rust Book Lang Ch.19 Fully Qualified Syntax, Supertraits, Newtype Pattern, type aliases, never type, dynamic sized type
    Rust Lang Book Ch.19 Placeholder type, Default generic type parameter, operator overloading
    Rust Lang Book Ch.19 Unsafe
    Rust Lang Book Ch.18 Patterns and Matching
    Rust Lang Book Ch.17 OOP
    Rust Lang Book Ch.16 Concurrency
    Rust Lang Book Ch.15 Smart Pointers
    HDU3966-Aragorn's Story-树链剖分-点权
  • 原文地址:https://www.cnblogs.com/HQY110/p/9889921.html
Copyright © 2011-2022 走看看