常用cssスタイルアレンジ

1.テキストの単行表示を強制し、オーバーフローしたテキストを省略記号で表示する

white-space:nowrap;//       
text-overflow:ellipsis;//          
overflow:hidden;
/*
text-overflow: clip | ellipsis | ellipsis-word       ：
clip:           ，       ，    。
ellipsis:    ，     （。。。）  ，            。
ellipsis-word: ellipsis  ，               。
*/

2.テキストの複数行表示を強制し、オーバーフローしたテキストを省略記号で表示する

display:-webkit-box;//               。
-webkit-box-clamp:2;//                。 
-webkit-box-orient:horizontal | vertical;//            。
text-overflow:ellipsis;
overflow:hidden;

3.css強制改行

word-break:break-all; /*  IE，chrome，Firefox   */
word-wrap:break-word;/*  IE，chrome，Firefox*/

4.文字間隔

letter-sapcing:2px; //           

5.段落の最初の行のインデントを設定する

text-indent:2em;//        

6.色透明値設定の問題

background:#012356;//    
opacity:0.8;//     
/*                            ，                 ，        ，     */
background:rgba(255,255,255,0.8)//             ，  IE8   。

7.input,textarea関連常用cssスタイル

textareaドラッグサイズを取り除き、スクロールバーを隠す

overflow:hidden;//     
resize:none;//      textarea  

inputのラベル属性1.listプロパティ:入力フィールドの事前定義オプションを含むdatalistを参照し、検索ボックスにプロンプト機能を備えて使用できます.

<form action="doSomething()">
    <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
        <option label="W3Schools" value="http://www.w3schools.com" />
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    datalist>
    <input type="submit" />
form>
//    w3school.

2.マルチピクチャ、ファイル選択機能.multiple

type="file" name="img" multiple="multiple" />

inputのスタイルプロパティ

background:transparent;//    ；
outline:medium;//          

//        input   
input[type="text"]{
    color:red;
}

8.親エレメントのサブエレメントのスタイルを設定する

parent:first-child{color:red}//               
parent:nth-child(2){color:red}//               
//             2n-1 odd(      ）、2n even（      ）、3n+1(    )

9.背景グラデーション

//css3
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
//    ：    ，    ，    

//IE           IE        
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
//grandientType : 0      ，1      

10.css 3水平垂直中央

display: box; 
display: -webkit-box; 
display: -moz-box; 
-webkit-box-pack:center; 
-moz-box-pack:center; 
-webkit-box-align:center; 
-moz-box-align:center;