20가지 공통 CSS/CSS3 속성 통합

여기에는 제가 프로젝트에서 자주 사용하는 20가지 CSS 스타일이 요약되어 있습니다. 모두 개인적인 경험이므로 모두에게 도움이 되기를 바랍니다.

1. 한 줄에 표시하려면: white-space:nowrap;

2. 줄임표로 표시할 오버플로 텍스트를 설정합니다: text-overflow:ellipsis;
(참고: text-overflow: Clip | ellipsis-word ; (css3에 새로 추가됨)
여기서 클립은 넘치는 텍스트를 직접 자르는 것을 의미합니다.
값은 텍스트가 넘칠 때 생략 표시(...)가 표시된다는 것을 의미합니다. 생략 기호는 마지막 문자를 대체합니다.
값 ellipsis-word는 텍스트가 넘칠 때 생략 기호(...)도 표시된다는 의미입니다. 차이점은 생략 기호가 마지막 단어를 대체한다는 것입니다.

3. 코드의 예: e1b56a1c06f517d8a0e17306668ca118237108f1ef7d7a41515987f25c0284995db79b134e9f6b82c0b36e0489ee08ed
a 태그의 이미지를 클릭하면 점선 프레임이 있고 IE의 이미지에도 테두리가 있는데 어떻게 해결합니까?
해결책:
a{outline:none;}//주로 Firefox와 같은 브라우저에 해당하지만 IE에는 해당되지 않습니다.
img{border:0;}
a:active{noOutline :expression (this.onFocus=this.blur());}//IE6 및 IE7에서 점선 상자를 해결합니다.

a 태그의 경우 일반적으로 간단한 해결 방법은 다음과 같습니다.
a 태그에 js 컨트롤을 추가하면 이때 포커스가 강제로 취소됩니다. a 태그는 자연스럽게 점선 상자로 표시되지 않습니다.

024db780eb8416657e62fa483f255092Test5db79b134e9f6b82c0b36e0489ee08ed
그러나 연결이 너무 많으면 이 코드를 하나씩 추가하세요. 실용적이지 않습니다.

4.html의 두 그림에서 가로 캐리지 리턴이 틈을 발생시킵니다. 어떻게 제거하고 틈이 없게 만들 수 있나요?

예: p width 300px; img width 100px; border:0px;

코드는 다음과 같습니다.

e388a4556c0f65e1904146cc1a846bee
1eaaf10debc01a4318506e0d001e42db53faedac456a1536a2726f80512ef6d06ed09268cbdd0015bce8dcbbdfa9bfe4
94b3e26ee717c64999d7867364b1b4a3
//위 상황은 정확히 세 장의 사진을 보여줍니다94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee
                                                         🎜>
이 경우 캐리지 리턴으로 인해 두 그림 사이에 간격이 발생하므로 세 장의 그림을 가로로 표시할 수 없습니다. .
해결책은 이미지를
떠다니게
만드는 것입니다.

5. 오버플로: CSS ie6 및 ie7에 숨겨진 잘못된 솔루션

원인: 상위 요소의 직계 하위 요소 또는 하위 하위 요소의 스타일에 위치가 있는 경우

:relative

속성

을 사용하면 상위 요소의 Overflow:hidden 속성이 유효하지 않게 됩니다.

해결책: IE 6 및 7에서는 상위 요소에 Overflow:hidden이 설정된 경우에도 하위 요소가 상위 요소에서 설정한 높이를 초과하는 것으로 나타났습니다. 이 버그를 해결하는 방법은 매우 간단합니다. 버그를 해결하려면 상위 요소에 *position:relative;를 사용하세요.6.

테이블

구문

코드 다음과 같습니다:

e1a2987cda5204009bbef731f8064959...f16b1740fad44fb09bfe928bcc527e08테이블 위치, 왼쪽

97aaabdc3e1ae66003636b0a55f0177f...< ;/table> 테이블 위치, 중앙

676b7f683bfb5b28034140203e89b3c4...f16b1740fad44fb09bfe928bcc527e08배경 이미지의 URL=경로 URL입니다de0ccbbf377618d453281a5fe183b826...f16b1740fad44fb09bfe928bcc527e08표 테두리 크기 설정(숫자 사용)595fbdba6efc01af42878d7c67f4bef3...f16b1740fad44fb09bfe928bcc527e08표 배경색 설정

...f16b1740fad44fb09bfe928bcc527e08표 테두리 색상 설정
d049e7beff2206fc930287a674513079...f16b1740fad44fb09bfe928bcc527e08테이블의 밝은 테두리 색상을 설정합니다74f71ca7431619376116659478911e30. ..f16b1740fad44fb09bfe928bcc527e08 콘텐츠와 그리드 사이의 거리 지정(숫자 사용)
b810894dd7c5d556e7742d0ce48a59da...f16b1740fad44fb09bfe928bcc527e08그리드와 그리드 사이의 거리 지정(숫자 사용) )
< ;table cols=parameters>...f16b1740fad44fb09bfe928bcc527e08테이블의 열 수 지정
8fec285d5e6ec0fbd9cc886cdbc569d7...f16b1740fad44fb09bfe928bcc527e08표시 방법 설정 테이블 윤곽선
7d95fb2318aa58e907d9ad8cb180d66e...f16b1740fad44fb09bfe928bcc527e08테이블의 너비 크기 지정(숫자 사용)
7c8a09dafa7ce0f2e57d391e8f5b71d2..f16b1740fad44fb09bfe928bcc527e08테이블 높이 지정(숫자 사용)
e33b5ade3a6ac21f238a29bd370df005...b90dd5946f0946207856a8a37f441edf셀 병합 열의 열 수 지정 (숫자 사용) b901786a6377c9b8e80942735d640559...b90dd5946f0946207856a8a37f441edf셀을 병합할 열 수 지정 (숫자 사용)

7.CSS text-transform

text-transform 속성은 텍스트의 대소문자를 제어합니다.
가능한 값
값 설명
없음 기본값. 소문자와 대문자로 표준을 정의하는 텍스트입니다.
capitalize 텍스트의 각 단어는 대문자로 시작됩니다.
대문자는 대문자만 정의합니다.
소문자 정의에는 대문자가 없고 소문자만 있습니다.
inherit는 text-transform 속성의 값이 상위 요소 에서 상속되어야 함을 지정합니다.

8. letter-spacing

letter-spacing 속성은 문자 사이의 간격(문자 간격)을 늘리거나 줄입니다.
예: letter-spacing: 2px;

9.textarea 오른쪽의 스크롤 막대를 제거하고 오른쪽 하단의 드래그를 제거합니다

코드: 90d745d2c50cb8b1d9bd0212f35ff180 fee6a593242f1bb4d528b906132ca264

10. CSS의 투명도 호환 코드: filter: alpha(opacity=80);opacity:0.8;

11. 입력 유형에 따라 CSS 스타일을 제어하려면

a. CSS에서 유형 선택기를 사용하세요

input[type="text"] { background-color: #FFC; }
b. CSS 표현식을 사용하여 표현식

input{ background-color:expression(this.type=="text"?'#FFC':' '); }
c. 자바스크립트 스크립트를 사용하여 구현합니다(불필요하다고 느끼면 생략하세요...)

12: text-Stroke
[ text-Stroke-width]: 설정 또는 검색 object [text-Stroke-color]에 있는 텍스트의 획 두께: 개체에 있는 텍스트의 획 색상을 설정하거나 검색합니다.

13: text-Stroke
text-Stroke ( 텍스트 스트로크) 및 text -fill-color(텍스트 채우기 색상) 참고:
현재 이 두 속성은 Safari 및 웹킷 커널의 Chrome에서만 지원됩니다. 예: -webkit-text- 스트로크: 3.3px #2A75BF;
text-fill-color: 색상 속성과 거의 동일한 색상 값입니다.
text-fill-color 속성과 색상 속성을 동시에 사용하세요. color는 색상 속성의 색상 값을 덮어씁니다.
text-fill-color는 투명 값, 즉 text-fill-color: transparent

14:text-shadow를 사용할 수 있습니다.
text-shadow:0px 0px 0px #333333 ;
속성 값은 다음과 같습니다: 수평 변위(음수 값 지원), 수직 변위(음수 값 지원), 흐림 반경, 그림자 색상
text-shadow 동일한 텍스트에 대해 여러 그림자를 설정할 수 있으며 상자 -그림자는 유사하며 쉼표 ","로 구분되며 이전 설정 효과가 후자 설정 효과 위에 있습니다.

15. 글꼴 설정

코드는 다음과 같습니다.

<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 줄바꿈 필수

코드는 다음과 같습니다.

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

17. CSS :first-child 선택기,:last-child 선택기,:nth-child(IE7,8은 유효하지 않으며 인식되지 않음)
:nth-child(2) 어떤 레이블을 선택합니다. "2는 원하는 숫자가 될 수 있습니다."
:nth-child(2n)는 짝수 레이블을 선택하고, 2n은 짝수일 수도 있습니다
:nth-child(2n-1) 홀수 레이블을 선택하고, 2n- 1은 홀수일 수 있습니다
:nth-child(3n+1)는 선택 레이블을 사용자 정의하고, 3n+1은 "2개 중 하나를 선택"을 의미합니다

CSS3은 배경색 그라데이션을 구현합니다

코드는 다음과 같습니다:

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient( 상단,#FFF,#cb1919) ;
배경:-ms-linear-gradient(top,#FFF,#cb1919);
배경:-moz-linear-gradient(top,#FFF,#cb1919) ;
background:linear-gradient(top,#FFF,#cb1919);

첫 번째 매개변수: 그라데이션의 시작 위치 설정

두 번째 매개변수: 그라데이션의 색상 설정 시작 위치

세 번째 매개변수: 끝 위치의 색상 설정
IE 브라우저

IE 브라우저 그라데이션은 IE 자체 필터를 통해서만 얻을 수 있습니다

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

첫 번째 매개변수: 그라데이션 시작 위치의 색상

두 번째 매개변수 : 그라데이션 종료 위치의 색상

세 번째 매개변수 : 그라데이션 종류

0은 세로 그라데이션을 나타냅니다. 1은 가로 그라데이션을 나타냅니다.
19 IE8에서는 인식하지 못합니다. RGBA 쓰기

CSS3의 20가지 RGB 색상과 HSL 색상
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使里面的元素也透明了，而上面的不会。

20.初始化em，u的斜体

em,u{
font-style: normal;}

【相关推荐】

1. CSS3免费视频教程

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

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

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

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

위 내용은 20가지 공통 CSS/CSS3 속성 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!