Integrate 20 common CSS/CSS3 properties

Here I have summarized 20 commonly used CSS styles that I often use in projects. They are all personal experiences. I share them with you here, hoping to be helpful to everyone

1. Force text to be displayed in a single line: white-space:nowrap;

2. Set the overflow text to be displayed as an ellipsis mark: text-overflow:ellipsis;
(Note: text-overflow:clip | ellipsis | ellipsis-word ; (newly added in css3)
where clip means directly cutting the overflowing text;
value ellipsis means when the text overflows, an omission mark (...) is displayed, and the omission mark replaces the last character;
value ellipsis-word means that when the text overflows, the omission mark (...) is also displayed. The difference is that the omission mark replaces the last word)

3. For example, a piece of code:
When you click on the picture in the a tag, there is a dotted frame, and the picture in IE also has a border ,How to solve?
Solution:
a{outline:none;}//Mainly for browsers such as Firefox, but not IE
img{border:0;}
a:active{noOutline :expression(this.onFocus=this.blur());}//Solve the dotted box in IE6 and IE7.

For the a tag, the generally simple solution is:
Add js control to the a tag. When the a tag is focused, the focus is forced to be cancelled. At this time, the a tag will naturally not There will be a dotted box.

Test
But when there are too many connections, add this code one by one Unpractical

4.html There is a gap caused by horizontal carriage returns in the two images in 4.html. How can I remove it so that there is no gap?

For example: p width 300px; img width 100px; border:0px;

The code is as follows:

< img />

;
;
;
##In this case, it is impossible to display three pictures horizontally because the carriage return causes a gap between the two pictures.
The solution is to make the image

.

5.css overflow:hidden invalid solution in ie6 and ie7Cause:

position

Attribute
, the overflow:hidden attribute of the parent element will be invalid. Solution: We found in IE 6 and 7 that the child element will exceed the height set by the parent element, even if the parent element has overflow:hidden set. Solving this bug is very simple. Use *position:relative; in the parent element to solve the bug

6.
Table
Syntax

The code is as follows:

>...

7.CSS text-transform

The text-transform property controls the case of text.
Possible values
Value Description
none Default. Text that defines standards with lowercase and uppercase letters.
capitalize Each word in the text begins with a capital letter.
uppercase defines uppercase letters only.
lowercase definition has no uppercase letters, only lowercase letters.
inherit specifies that the value of the text-transform attribute should be inherited from the parent element .

8. letter-spacing

The letter-spacing property increases or decreases the space between characters (character spacing).
For example: letter-spacing: 2px;

9.textarea removes the right scroll bar and removes the drag in the lower right corner

Code:

10.Transparency compatibility code in css: filter: alpha(opacity=80);opacity:0.8;

11.According to the input type To control css style

a. Use the type selector in css

input[type="text"] { background-color:#FFC; }
b. Use css expression to judge Expression

input{ background-color:expression(this.type=="text"?'#FFC':''); }
c. Use javascript script to implement (feel unnecessary, omit...)

12: text-stroke
[ text-stroke-width]: Set or retrieve object The stroke thickness of the text in [ text-stroke-color ]: Set or retrieve the stroke color of the text in the object

13: text-stroke
text-stroke (text stroke) and text -fill-color (text fill color) Note:
Currently these two properties are only supported by Safari and Chrome of the webkit kernel, for example: -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color: Color value, which is almost the same as the color attribute.
Use text-fill-color and color attributes at the same time, text-fill-color will overwrite the color value of the color attribute;
text-fill-color can use transparent values, that is: text-fill-color: transparent

14:text-shadow
text-shadow:0px 0px 0px #333333 ;
The attribute values ​​are: horizontal displacement (supports negative values), vertical displacement (supports negative values), blur radius, shadow color
text-shadow can set multiple shadows for the same text, and box -Shadow is similar, separated by commas ",", the previous setting effect is on top of the latter setting effect.

15. Set the font

The code is as follows:

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

16. css mandatory line break

The code is as follows:

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

17. CSS :first-child selector,:last-child selector,:nth-child (IE7,8 is invalid, not recognized)
:nth-child(2) selects which label, "2 can be the number you want"
:nth-child(2n) selects even labels, 2n can also be even
:nth-child(2n-1) selects odd labels, 2n-1 can be odd
:nth-child(3n+1) customizes the selection label, 3n+1 means "pick one out of every two"

18. CSS3 realizes background color gradient

The code is as follows:

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

The first parameter: Set the starting position of the gradient

The second parameter: Set the color of the starting position

The third parameter: Set the color of the termination position
IE Browser

IE BrowserYou can only use IE's own filter to achieve gradients

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

The first parameter: the color of the starting position of the gradient

The second The first parameter: the color of the gradient end position

The third parameter: the type of gradient

                    0 represents the vertical gradient         1 represents the horizontal gradient
19 IE8 does not recognize the rgba writing method

20 RGB color and HSL color of css3
The principle of RGB color is to form a color by defining different red, green and blue values. color:rgb(254,2,8);
HSL declares color through hue, saturation, and brightness modes. color:hsl(359,99%,40%);

If you need to set a transparent background, you can use them:

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

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

20.初始化em，u的斜体

em,u{
font-style: normal;}

【相关推荐】

1. CSS3免费视频教程

2. h5和css3制作带提示文字的输入框

3. 分享几个常用的最新的css3属性

4. 用CSS制作聊天框小尖角、气泡效果

5. 浏览器实现移动端高性能css3动画

The above is the detailed content of Integrate 20 common CSS/CSS3 properties. For more information, please follow other related articles on the PHP Chinese website!