집 >웹 프론트엔드 >CSS 튜토리얼 >잘 알려지지 않은 CSS 사용 팁

잘 알려지지 않은 CSS 사용 팁

巴扎黑원래의: 2017-08-09 15:50:341233검색

1. 배경 작성 방법에 대하여

DIV.comment{Background:#f0f0f0 url(url 주소) repeat- x 왼쪽 위 }

1) 배경의 첫 번째 정의는 색상 값이라는 것을 알 수 있습니다. 즉, 배경 이미지가 비활성화되면 색상이 적용됩니다.

2)url括号中的引号是没有必要的,我们可以不写引号

2. 关于Border的写法，如果您想义div样个边的颜color不同，而粗島와样式， 마찬가지로 다음과 같이 작성할 수 있습니다:

DIV.special{border:1px solid; border-color:color1 color2 color3color color4 }

4가지 색상은 위쪽, 오른쪽, 아래쪽, 왼쪽이 한 번에

3. 모든 브라우저와 호환되도록 반투명 효과를 표시할 수 있습니다

.tranparent{

필터 ;0.5;

불투명도: 50%;

위치:절대;/*

절대적이어야 합니다*/ top

100px; Left: p100px;

} 4._height, _width의 역할

알려지지 않은 Float의 div 문제를 해결하려면 _height를 사용하세요. _Height 속성을 제거할 수 있습니다. 제거하면 됩니다. #wrap{ border

6px #ccc

solid

;

overflow:auto

;

_height

1%;} .column_left{ float:왼쪽; 너비:20%; padding:10px;}

.column_right{ float:right; width:75%; padding:10px; #eee 단단함;}

div

id="wrap"> <

div class="column_left"> <

h1>왼쪽으로 띄우기h1>

div > <

div class="column_right"> <

h1>플로트 오른쪽h1 > < ;/

div & gt;

& lt;/

div

& gt;

요소의 높이를 고정해야 하는 경우가 있는데, Firefox나 Opera에서는 높이만 설정되어 있는 경우가 있는데, 이때는 min-height

를 사용하면 원하는 효과를 얻을 수 없습니다.

6 . 스타일 우선순위를 변경하려면 !important를 사용하세요소위 스타일 우선순위는 스타일을 적용할 때 브라우저가 항상 근접 원칙에 따라 스타일을 적용한다는 것을 의미합니다. 페이지 정의는 외부 CSS 파일에 있고, 인라인 CSS는 파일의 head 태그에 정의되어 있으며, 다른 하나는 이 요소의 태그 내에 있습니다. 그런 다음 근접 원칙에 따라 이 요소에서 사용되는 최종 스타일이 됩니다. 태그 내에 정의된 스타일에 있습니다. 이 규칙을 깨야 하는 경우 !important 지시문a.test

{

color

red!important

}

이 방법을 사용할 수 있습니다. A 요소 내에 정의됩니다. 색상은 적용되지 않지만 위의 정의가 적용됩니다🎜🎜 🎜🎜7.🎜 미디어 지시어를 사용하여 두 가지 유형의 CSS(인쇄 버전 CSS와 화면 표시 CSS)를 소개합니다. 🎜

=" 인쇄 "Charset ="UTF-8 " /& 8. & GT; 기호(현재 IE는 지원되지 않음) 첫 번째 A 태그만 정의하려는 경우 div 아래 범위의 div를 포함하여 div의 모든 A 태그 스타일을 정의하는 방법으로 DIV A를 사용할 수 있습니다. DIV 아래의 레벨 하위 노드에서는 ">" 기호를 사용할 수 있습니다. 예: DIV>A{color:red}이제 A 라벨의 색상만 DIV의 직계 자식 노드는 빨간색입니다9. :first-child :last-child IE 이외의 브라우저에서는 이 두 표시기를 사용하여 상위 요소의 첫 번째 요소 또는 마지막 요소를 가져올 수 있습니다

20070412 21:05 Added10.: 의사 클래스 hover는 다음과 같이 사용할 수 있습니다

<h1>Buy widgets

16. 피하기 위해 다른 태그를 사용하는 다른 브라우저 패딩과 여백에 대한 다른 해석은 스타일 시트 앞에서 정의할 수 있습니다

*{}{margin:0px

;

padding

0px}20070422 12:0017에 추가됨 비밀번호 입력과 마찬가지로 영어 상태의 문자만 입력할 수 있도록 합니다

입력 {ime-mode: 비활성화됨 ;}

20070423 09 :08
18. 죽을 때까지 줄을 끊지 마세요, 발췌( 작성자)
1) 공백:nowrap; 오버플로: 숨겨진; 너비: 17em !important ; 너비: 18em;
참고: 공백은 td, th 등을 지원하지 않습니다.
2) .fixTable{ table-layout:fixed;overflow:hidden; }을 사용하고 nobr 태그를 추가하여 숨깁니다.
nobr 태그는 비표준입니다.
20070426 0848
19. 전년 대비 이미지 크기 변경
img.style.zoom = 0.5;

.menu{

}{}

.menu ul{

}{ 디스플레이:none}

.menu:hover{

}{}

.menu :hover ul{

}{ display:block}

& lt; & lt; class
= "메뉴"

& GT; < ul> ㅠㅠ

li>

ul>이 방법으로 CSS로만 제어되는 메뉴를 만들 수 있으며 테스트는 ie6, ie7, firefox1.5, Opera9.0 11에서 통과됩니다. page-break-after, page-break-인쇄 중 페이징 제어 전

20070413 12:1312 * html{}의 기능은 IE 6.0 이하 버전과 호환됩니다. html에 적합하지 않습니다 노드 선택과 관련하여 다른 브라우저에서는 html 태그가 문서의 루트 노드라고 생각하지만 ie6 이하의 IE 버전에서는 html 태그 위에 루트 노드가 있다고 생각합니다---Thanks to Calmzeal에 대한 설명13. CSS 클래스는 여러 값을 가질 수 있으므로 여러 값을 공백으로 구분하기만 하면 됩니다14. 색상 약어의 경우 #ff0033을 #f03으로 줄여서 사용할 수 있습니다. 15. 텍스트 들여쓰기를 사용하여 이미지를 표시하고 숨겨진 텍스트를 사용합니다(이 방법은 SEO에 도움이 된다고 합니다)

h1 { background: url(widget-image.gif) no-repeat; height: 이미지 높이 텍스트 들여쓰기: - 2000픽셀 }

위 내용은 잘 알려지지 않은 CSS 사용 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS 코드 형식다음 기사：CSS 코드 형식