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
:relativeAttribute
, 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
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 .
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('Sansation_Light.ttf'),</p>
<p> url('Sansation_Light.eot'); /* 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免费视频教程
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
