CSS/CSS3共通スタイルのまとめ_html/css_WEB-ITnose

1. テキストを強制的に 1 行で表示します:

white-space:nowrap;

複数行テキストの最後の省略記号:

display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis;

2 .オーバーフローテキストを次のように設定します省略記号として表示されます:

text-overflow:ellipsis;

(注: text-overflow:clip | ellipsis | ellipsis-word; (css3 で新たに追加)
ここで、clip は溢れているテキストを直接カットすることを意味します。
値 ellipsisテキストがオーバーフローした場合、省略マーク (.. .)、省略マークが最後の文字を置き換えることを意味します。
値 ellipsis-word は、テキストがオーバーフローした場合、省略マーク (...) も表示されることを示します。違いは、省略マークが最後の単語を置き換えることです)

3. たとえば、コードの一部:
a タグ内の画像をクリックすると、点線のボックスが表示されます。IE の画像にはまだ枠線が表示されます。これを解決するにはどうすればよいですか?
解決策:

a{outline:none;}//主要是针对火狐等浏览器，但IE不行img{border:0;}a:active{noOutline:expression(this.onFocus=this.blur());}//解决IE6，IE7中的虚线框。

a タグの場合、一般的に簡単な解決策は次のとおりです。
a タグにフォーカスがあるときに、フォーカスを強制的にキャンセルします。タグは当然のことながら破線ボックスはありません。

<a href="#"onfocus="this.blur();">测试</a>

しかし、接続が多すぎる場合、このコードを 1 つずつ追加するのは現実的ではありません

4.html の 2 つの図にある水平方向の改行によって隙間が生じます。これを削除するにはどうすればよいですか。ギャップフリーにしますか？

例: div width 300px; img width 100px; border:0px;

<div><img /><img /><img /></div>

//上記の状況では、ちょうど 3 つの写真が表示されます

<div><img /><img /><img /></div>

return 車のせいで 2 つの画像の間にギャップが生じました。
解決策は、画像を浮遊させることです。

5.css オーバーフロー:ie6 および ie7 の無効な解決策が隠されています

原因:
親要素の直接の子要素または下位の子要素のスタイルにposition:relative属性がある場合、親要素：hidden属性は無効となります。

解決策:
IE 6 および 7 では、親要素に overflow:hidden が設定されている場合でも、子要素が親要素によって設定された高さを超えることがわかりました。
このバグを解決するには、親要素で *position:relative; を使用します

6. テーブル構文

...表の位置、左
...表の位置、中央
<表背景=画像パス>...背景画像のURL=はパス URL
...表の境界線のサイズを設定します (数値を使用します)
...テーブルの背景を設定しますtable Color
...表の境界線の色を設定します
...濃い色の境界線の色を設定しますテーブルの
...テーブルの明るい境界線の色を設定します
...間のスペースを指定しますコンテンツとグリッド 間隔 (数字を使用)
...グリッド線間の距離を指定します(数字を使用)
...< table>表の列数を指定
...表のアウトラインの表示方法を設定
...テーブルの幅を指定します (数字を使用します)
...テーブルの高さを指定します(数字を使用します)
...< td>セル結合列の列数を指定します (数字を使用します)
...セル結合列の列数を指定します (数字を使用します)

7 .CSS text-transform

text-transform プロパティは、テキストの大文字化を制御します。

なし デフォルト。小文字と大文字を使用して規格を定義するテキスト。

大文字にする テキスト内のすべての単語は大文字で始まります。
uppercase は大文字のみを定義します。
小文字の定義には大文字は含まれず、小文字のみが含まれます。
inherit は、text-transform 属性の値が親要素から継承されることを指定します。

8. Letter-spacing

letter-spacing プロパティは、文字間の間隔 (文字間隔) を増減します。

例: Letter-spacing: 2px;

9.textarea 右スクロール バーを削除し、右下隅のドラッグを削除します

コード:

<TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>

10.css中透明度兼容代码：

filter: alpha(opacity=80);opacity:0.8;

11.根据input的type来控制css样式

a. 用css中的type选择器

input[type="text"]{ background-color:#FFC;}

b.用css的expression判断表达式

input{ background-color:expression(this.type=="text"?'#FFC':'');}

c.用javascript脚本实现(觉得没必要，省略...)

12：text-stroke
[ text-stroke-width ]：设置或检索对象中的文字的描边厚度 [ text-stroke-color ]：设置或检索对象中的文字的描边颜色
text-stroke(文本描边)和text-fill-color(文本填充色)注意点：
目前这两个属性只有webkit内核的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color：颜色值，和color属性差不多都是文字的样式；
同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；
text-fill-color可以使用透明值，即：text-fill-color：transparent


13：text-shadow

text-shadow:0px 0px 0px #333333;

属性值依次：水平方向位移（支持负值）、垂直方向位移（支持负值）、模糊半径、阴影颜色
text-shadow对同一个text，可设置多个阴影，与box-shadow类似，使用逗号","分割，前一个设置效果在后一个设置效果之上。
box-shadow 参考：

14.css3设置字体

<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),    url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>

15. css强制性换行

{word-break:break-all; /*支持IE，chrome，FF不支持*/word-wrap:break-word;/*支持IE，chrome，FF*/} 

16.CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)
:nth-child(2)选取第几个标签，“2可以是你想要的数字”
:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

17. 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浏览器实现渐变只能使用IE自己的滤镜去实现

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

第一个参数：渐变起始位置的颜色

第二个参数：渐变终止位置的颜色

第三个参数：渐变的类型

0 代表竖向渐变 1 代表横向渐变

18.css3的RGB颜色和HSL颜色， IE8不识别rgba写法

其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。color:rgb(254,2,8);

其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);

如果需要设置透明背景 则可以用到他们：

background-color:hsla(0,0%,100%,0.8);

background-color:rgba(255,255,255,0.8);

不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。

background-color:rgba(0,0,0,0.5)，此写法解决opacity带来的元素也透明问题，单IE8低版本浏览器不支持。

19.初始化em，u的斜体

em,u{font-style: normal;}

20.取消手机页面点击a中图片出现的虚线框问题

-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;

21.媒体查询功能:

一般写法：

@media screen and (max-width: 960px){    body{        background: #000;    }}

应该有人会发现上面这段代码里面有个 screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){    body{        background: #000;    }}

其中css2的媒体查询：

我们想知道移动设备是不是纵向放置的显示屏，可以这样写：

我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

但是上面这个方法， 最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

下面的写法是实现尺寸等于480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){

//自己添加的样式

}

其中对于-webkit-min-device-pixel-ratio作如下解释：

-webkit-min-device-pixel-ratio为1.0

1. 所有非Retina的Mac

2. 所有非Retina的iOS设备

3. Acer Iconia A500

4. Samsung Galaxy Tab 10.1

5. Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3

1. Google Nexus 7

-webkit-min-device-pixel-ratio为1.5

1. Google Nexus S

2. Samsung Galaxy S II

3. HTC Desire

4. HTC Desire HD

5. HTC Incredible S

6. HTC Velocity

7. HTC Sensation

-webkit-min-device-pixel-ratio为2.0

1. iPhone 4

2. iPhone 4S

3. iPhone 5

4. iPad (3rd generation)

5. iPad 4

6. 所有Retina displays 的MAC

7. Google Galaxy Nexus

8. Google Nexus 4

9. Google Nexus 10

10. Samsung Galaxy S III

11. Samsung Galaxy Note II

12. Sony Xperia S

13. HTC One X

22.CSS美化Placeholder提示信息的样式兼容：

input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}

手机对Placeholder提示信息都基本带有默认的样式，要修改其样式需要这样添加：

/* WebKit browsers */::-webkit-input-placeholder {color: #777;}

/* Mozilla Firefox 4 to 18 */:-moz-placeholder {color: #777;opacity: 1;}

/* Mozilla Firefox 19+ */::-moz-placeholder {color: #777;opacity: 1;}

/* Internet Explorer 10+ */:-ms-input-placeholder {color: #777;}

- 谷歌浏览器(Webkit): ::-webkit-input-placeholder pseudo-element;

- IE10: :-ms-input-placeholder pseudo-class;

- 火狐浏览器(Gecko18-): :-moz-placeholder pseudo-class;

- 火狐浏览器(Gecko19+): ::-moz-placeholder pseudo-element;

- Opera(Presto): 无。

23.清除IOS系统手机对input框的默认样式：

-webkit-appearance:none; 

24.取消点击a标签出现的高亮：

-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */

25.开发移动端页面时候，经常会设置滚动条的默认样式：

  /* 设置滚动条的样式 */    - ::-webkit-scrollbar {    - width:12px;    - }    - /* 滚动槽 */    - ::-webkit-scrollbar-track {    - -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);    - border-radius:10px;    - }    - /* 滚动条滑块 */    - ::-webkit-scrollbar-thumb {    - border-radius:10px;    - background:rgba(0,0,0,0.1);    - -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);    - }    - ::-webkit-scrollbar-thumb:window-inactive {    - background:rgba(255,0,0,0.4);    - }

26.为移动端页面中滑动滚动条的时候，添加惯性效果的方法：

首先设置：

div{height:100%;overflow-y:auto;}

但是实际在 iPhone 上测试时，发现 Safari（也包括很多 iOS App 内置浏览器使用的 UIWebView）竟然完全禁用掉了著名的「惯性滚动」效果。

但解决方法是有的，令人吃惊的是还非常简单：只有一条 CSS 属性即可解决问题：

-webkit-overflow-scrolling:touch;

有的同学添加了这一条属性后遇到了向下滑动后页面变成空白的问题，实际上可以通过一条 CSS 属性把页面加载到内存来解决：

-webkit-transform:translate3d(0,0,0);

注：如果设置了-webkit-overflow-scrolling: touch;那么在IOS系统下对于改变滚动条的默认样式将失效，即上面一条所述。

27.样式实现三角形：

position:absolute;left:50%;bottom:0;margin-left:-10px;width:0;height:0; border-width:10px;border-style:solid dashed dashed dashed;border-color:transparent transparent #71151c transparent;

28.移动端实现控制文本行数

display: -webkit-box;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;

29. css3水平垂直居中

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

30.Css--input输入框点击时去掉外框outline:medium;(chrome)

outline:medium;

31.移动端字体

/* 移动端定义字体的代码 */

body{font-family:Helvetica;}

<strong>32.禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片</strong>

.css{-webkit-touch-callout: none}

33.禁止ios和android用户选中文字

.css{-webkit-user-select:none}

<strong> </strong>

<strong>34.打电话发短信，发邮件的怎么实现</strong>

打电话：打电话给:0755-10086

发短信：winphone系统无效，发短信给: 10086

发邮件：10086@qq.com

35.css3属性 -webkit-filter(改变模糊度 亮度 透明度等方法)

　　-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。

现在规范中支持的效果有：

- grayscale 灰度 值为0-1之间的小数

- sepia 褐色　　　　　　 值为0-1之间的小数

- saturate 饱和度　　　　 值为num

- hue-rotate 色相旋转　　值为angle

- invert 反色　　　　　　 值为0-1之间的小数

- opacity 透明度　　　　　值为0-1之间的小数

- brightness 亮度　　　　 值为0-1之间的小数

- contrast 对比度　　　　 值为num

- blur 模糊　　　　　　 值为length

- drop-shadow 阴影

用法是标准的CSS写法，如：

使用方法：（配合动画使用）

.jaguar-con-show img.jaguar-con-imglast{                   -webkit-transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    -ms-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;    }.jaguar-con-show img.jaguar-con-imglast{       -webkit-filter: blur(3px) brightness(.6);    -moz-filter: blur(3px) brightness(.6);    -o-filter: blur(3px) brightness(.6);    -ms-filter: blur(3px) brightness(.6);        filter: blur(3px) brightness(.5);     -webkit-transform:scale(1.1,1.1);    -moz-transform:scale(1.1,1.1);    /*border: 3px solid #000;*/}

 

35.CSS pointer-events

Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。

如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素.

 

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。

 

 

作者：风雨后见彩虹

出处：http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助，请多支持与鼓励。