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 />

//The above situation shows exactly three pictures

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

float

.

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

When the style of the direct child element or subordinate child element of the parent element has

position

:relative

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:

left

>...

Table position, left

... Table position, centered

background=Picture path>...The URL of the background image=is the path URL
Set the table border size (use numbers)
...Set the background color of the table...Set the color of the table border...Set the color of the dark border of the table
...Set the color of the bright border of the table
padding
=Parameters>... Specify the distance between the content and the grid (use numbers)
...Specify the distance between the grid and the grid (use numbers)
< ;table cols=Parameters>...Specify the number of columns in the table...Set the display method of the table outlinewidth
=Width>...Specify the width size of the table (use a number)
height=Height>. ..Specify the height of the table (use numbers)...Specify the number of columns in the cell merge column (use numbers)
...Specifies the number of columns (using numbers) for the merged columns of the cell

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!