前端編寫頁面HTML、CSS常用屬性方法匯總

這篇具有很好參考價值的文章主要介紹了前端編寫頁面HTML、CSS常用屬性方法匯總。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

不太常用的屬性：

        text-decoration:underline;下劃線，text-decoration:line-through;刪除線 ， font-style:normal;去掉斜體     
        text-align：justify；將文本兩端對齊邊框，border:1px  dashed  #000;  dashed虛線    dotted點線                        
        list-style-image：url(“圖片地址”); li樣式加圖片
        cursor:wait    鼠標加載樣式   url(可添加圖片)     move 拖動形狀     url自己寫     help鼠標帶問號

box-shadow的：

        box-shadow: h-shadow v-shadow blur spread color inset; 橫向和縱向都設(shè)置為0  為四邊都有陰影（豎向偏移，橫向偏移，模糊程度，大小，顏色，內(nèi)外）
        box-shadow:0 0 0 #ffedd0 inset,/*左邊陰影*/0 0 0 #ffedd0 inset, /*右邊陰影*/0 -10px 10px #ffedd0 inset, /*上部陰影*/0 10px 10px #ffedd0 inset; /*下邊陰影*/
        text-shadow:2px 0px 0px #000,-2px 0px 0px #000,0px 2px 0px #000,0px -2px 0px #000;   文字描邊 
        -webkit-text-stroke: 2px red;     css3文字描邊 
        text-shadow: 5px 5px 5px #e5829a; 文字陰影   X Y 模糊程度 顏色
        //  當一個塊元素里包含多個行內(nèi)元素  字體之間出現(xiàn)間距【使用font-size：0】解決
        position：static    定位 默認值 ；

CSS3動畫的點：

        transition:all 2s linear 1s;最后一個是等待時間   cubic-bezier(1,4,1,1)這是第三個參數(shù)  設(shè)置動畫方式
        border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;   border-radius八值大乘期
        //  border-radius: 左上角水平圓角半徑大小 /右上角水平圓角半徑大小 /右下角水平圓角半徑大小 /(左下角水平圓角半徑大小/左上角垂直圓角半徑大小)/右上角垂直圓角半徑大小 /右下角垂直圓角半徑大小 /左下角垂直圓角半徑大小;
        transform-style ：preserve-3d  
        css3：旋轉(zhuǎn)：rotate()   扭曲：skew(30deg,20deg)  縮放：scale(2,4)  移動：translate()     
        所有的2D轉(zhuǎn)換方法組合在一起： matrix()  matrix(scale.x ,, , scale.y , translate.x, translate.y)  
        綜合起來使用：transform: 30deg 1.5 30deg 20deg 100px 200px;
        @media  響應(yīng)式一定要在and 和 （min-width：1400px） 中間加空格   媽的坑死老子了

控制文字行數(shù)：

        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;   超出的文字顯示省略號
        overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical; display: -webkit-box;必須加這個  三種寫法 flex迭代   超出幾行顯示省略號......
        white-space: pre-wrap;word-break:break-all;  強制換行    white-space:nowrap;強制不換行

CSS3的一些冷知識：

        filter: blur(9px);     css3模糊程度
        backface-visibility:hidden;      圖片轉(zhuǎn)過去后隱藏，百度錢包的效果
        border-image: url(../../../img/border.png) 30 30 stretch;   // 后面參數(shù)為srretch的時候表示邊框圖片拉伸填充    為round的時候規(guī)格的鋪滿整個區(qū)域
        //  邊框圖片：1.路徑  2.邊框向內(nèi)偏移屬性  可以是四個值 也可以兩個  3.三個值   一個是重復(fù)repeat   一個平鋪round  一個填充  st 什么東西
        background:#000 url(1.jpg) 0 0/cover no-repeat/cover;      background屬性簡寫
        -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 20%,rgba(250,250,250,1)); 倒影
        // css3倒影必須加前綴：第一個值是倒影方向 above上below下 左右屬性不變（需要給倒影留一個空白區(qū)域）， 第二個值是與原圖間隔距離，第三個值是遮罩效果 可以背景圖片也可以是漸變生成的透明圖像
        -webkit-text-stroke:2px red; css文字描邊  -webkit-text-fill-color:transparent;  兩個配合在一起用將形成鏤空文字   <font color=#00ffff size=72>   ←   無意間發(fā)現(xiàn)強大的很吶</font>
        background-image:-webkit-linear-gradient(#eee,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;   漸變文字
        column-count:4;column-gap:140px;column-rule:20px solid #000; css3多列文本布局  // 簡寫：間距、樣式、顏色
        //>   第一個表示要分成幾塊   第二個表示每個塊之間的間距  第三個表示在間距之間的樣式  和border一樣

        <link rel="stylesheet" media="screen and (max-width:800px)"  href="midia800.css">    按media寬度引入css
        first-letter   first-line等偽類    必須是塊元素||行內(nèi)塊元素
        filter:brightness(.5);        調(diào)整圖片亮度  相當于蓋個黑色背景框          
        mix-blend-mode: difference;  顏色差值  相當于正片疊底  具體上收藏夾看
        L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}      改變a鏈接訪問過后的順序
        @medio    響應(yīng)式如果是1366的分辨率    在寫min-width{}寫1400px
        one.style.height=tu[0].offsetHeight+li[0].offsetHeight+"px";       原聲一定要加px
        text-transform ：css控制字母大小寫     Capitalize 英文拼音的首字母大寫        Uppercase 英文拼音字母全大寫        Lowercase 英文拼音字母全小寫
        div::-webkit-scrollbar {display:none}       pc和移動端隱藏scroll滾動條
        //   偽元素里after里換行：\A--------------------------white-space: pre-wrap；和這個配合使用
        @font-face{font-family: "自定義";src: url('/example/css3/Sansation_Light.ttf'),url('/example/css3/Sansation_Light.eot'); }         引入css3字體
        $(".box")[0].style.setProperty("--y",y)；transform: rotate(calc(20deg - 10deg * var(--y))); 必須var     !!!css調(diào)用js變量的方法：

@keyframes：

        animation:6個屬性（名字，時間，動畫方式，延遲，次數(shù)，是否反向）aa 2s ease 1s infinite [alternate normal];   
        animation-fill-mode:both;  
        animation-fill-mode: forwards;停留在最后一幀
        animation-play-state:paused;      利用hover動畫暫停  離開將從暫停位置繼續(xù)播   
        js控制動畫開始running         both停留在動畫中
        jquery里需要這樣寫$(".clip-p").css("-webkit-animation-play-state","paused");  屬性不用大寫，直接 -

HTML5：

        <progress>   html5加載新屬性    <meter>進度條新屬性
        mouseenter 事件。對應(yīng)mouseleave    //  相當于mouseover，只有當穿過元素時才會觸發(fā)
        <a href="1.jpg" download="下載之后的圖片名字"><img src="1.jpg" alt="W3School"></a>     //   html5 的下載屬性 ，不兼容IE
        $(".content").delegate(".div span","click",function(){})   //   與on不同的是【on是事件寫在前面。這個是元素寫在前面】要區(qū)分清楚
        <a href="tel:13546698741">電話</a>  移動端直接撥打電話的
        <p contenteditable="true">這是一段可編輯的段落。請試著編輯該文本。</p>

html+css亂七八糟的：

        select { 去除下拉框默認樣式 border: solid 1px #000;/*很關(guān)鍵：將默認的select選擇框樣式清除*/appearance:none;-moz-appearance:none;-webkit-appearance:none;}
        background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat calc(100% - .2rem) center/.5rem .5rem;
        //  *清除ie的默認選擇框樣式清除，隱藏下拉箭頭
        select::-ms-expand { display: none; }
        user-select：none；禁止頁面文字被選中
        first-letter   在火狐下不支持￥符號  我擦  不能用了，慎用啊
        vertical-align: text-top;    這個屬性是給行元素設(shè)置垂直居中的，屬性值較多    先在父元素上設(shè)置line-height   以免引起反作用
        <link rel="SHORTCUT ICON" href="images/22.ico"/>   改變網(wǎng)頁顯示的圖標icon 
        //  使用after偽類添加序列號  ------------------
        //  ol {list-style-type:none;counter-reset:sectioncounter;}
        //  ol li:before { content:"美女" counter(sectioncounter) "： ";counter-increment:sectioncounter;}
        \\  js改變after偽類問題，給元素加一個類名，類名里添加content attr
            p:after {content: "111111111111111";}
            p.change:after {content: attr(aa);}
            $("p").addClass('change').attr("aa","content111111111111");
            //  另一種修改方法
            var css=function(t,s){
                    s=document.createElement('style');
                    s.innerText=t;
                    document.body.appendChild(s);
           };
           document.οnclick=function(){
              css('p:after{content:"5565442321"}');
        \\ }       
        window.open("https://www.baidu.com/s?wd=" + val );  //  網(wǎng)站搜索功能
        //  第三方登錄實現(xiàn)：1  注冊成為QQ互聯(lián)平臺開發(fā)者，http://connect.qq.com/; 2  準備一個可訪問的域名，如dev.foo.com;3  創(chuàng)建網(wǎng)頁應(yīng)用，配置必要信息，其中包括域名以及回調(diào)地址；其中域名需要驗證，需確保對域名主機有足夠的控制權(quán)限;4  獲取應(yīng)用appID、appKey進行開發(fā);
        //  360使用低版本兼容模式IE內(nèi)核，加這兩句轉(zhuǎn)換為webkit<!--避免IE使用兼容模式--><metahttpequiv="X-UA-Compatible" content="IE=edge">
        //  <meta name="renderer" content="webkit">    <!--使用webkit內(nèi)核-->

    animate.css:  第三方動畫庫常用的幾個類名，都要添加一個共同類名：animated

JavaScript：

        window.getComputedStyle(objs[0],null).width,   
        // 獲取元素的實際寬度的  null為偽元素  如果沒有就null（你會用到的  哼哈）
        getPropertyValue方法可以獲取CSS樣式申明對象上的屬性值（直接屬性名稱），例如：
        window.getComputedStyle(element, null).getPropertyValue("float");
        event.stopImmediatePropagation();  阻止事件捕獲   dom3新出的
        //  javascript：父元素.insertBefore(要插入的,插入到我前面);
        //  jquery:  $("<span>插入到p元素前面</span>").insertBefore("p");