Home >Web Front-end >CSS Tutorial >Integrate 20 common CSS/CSS3 properties

Integrate 20 common CSS/CSS3 properties

Y2JOriginal: 2017-05-23 11:03:002189browse

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: e1b56a1c06f517d8a0e17306668ca118237108f1ef7d7a41515987f25c0284995db79b134e9f6b82c0b36e0489ee08ed
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.

024db780eb8416657e62fa483f255092Test5db79b134e9f6b82c0b36e0489ee08ed
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:

e388a4556c0f65e1904146cc1a846bee
6ed09268cbdd0015bce8dcbbdfa9bfe453faedac456a1536a2726f80512ef6d06ed09268cbdd0015bce8dcbbdfa9bfe4
94b3e26ee717c64999d7867364b1b4a3
//The above situation shows exactly three pictures94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee
; 6ed09268cbdd0015bce8dcbbdfa9bfe4
; 6ed09268cbdd0015bce8dcbbdfa9bfe4
;
##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:97d6082b45e67eec93444cd4ba00111e...f16b1740fad44fb09bfe928bcc527e08Table position, left

97aaabdc3e1ae66003636b0a55f0177f...f16b1740fad44fb09bfe928bcc527e08 Table position, centered

9bf863f03104f600c829dc53d6b87497...f16b1740fad44fb09bfe928bcc527e08The URL of the background image=is the path URL

595fbdba6efc01af42878d7c67f4bef3...f16b1740fad44fb09bfe928bcc527e08Set the background color of the table9b00471ed6e2430b3ab3b35d4c08b2ad...f16b1740fad44fb09bfe928bcc527e08Set the color of the table border9a5c242c21ac9fd837eb4533115d2693...f16b1740fad44fb09bfe928bcc527e08Set the color of the dark border of the table
d049e7beff2206fc930287a674513079...f16b1740fad44fb09bfe928bcc527e08Set the color of the bright border of the table
77fb8f1cfdb8674b1139d20ff2214b84...f16b1740fad44fb09bfe928bcc527e08 Specify the distance between the content and the grid (use numbers)
25b96734fbf1ea2dc9c8796c73b29fcd...f16b1740fad44fb09bfe928bcc527e08Specify the distance between the grid and the grid (use numbers)
< ;table cols=Parameters>...f16b1740fad44fb09bfe928bcc527e08Specify the number of columns in the tablebaf16e02d02e0b9e09ec73323f1581d7...f16b1740fad44fb09bfe928bcc527e08Set the display method of the table outlinecd103503fd90c8b2552a4265f0e504ed...f16b1740fad44fb09bfe928bcc527e08Specify the width size of the table (use a number)
4e624cb70089a2def2a28dc20c12c837. ..f16b1740fad44fb09bfe928bcc527e08Specify the height of the table (use numbers)93966c3b9fde097f1a742ee63f795237...b90dd5946f0946207856a8a37f441edfSpecify the number of columns in the cell merge column (use numbers)
b901786a6377c9b8e80942735d640559...b90dd5946f0946207856a8a37f441edfSpecifies 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: 90d745d2c50cb8b1d9bd0212f35ff180 fee6a593242f1bb4d528b906132ca264

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：h5 and css3 create input box with prompt textNext article：h5 and css3 create input box with prompt text

See more

Integrate 20 common CSS/CSS3 properties

Related articles