잘 알려지지 않은 CSS 사용 팁

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;

5.

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

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

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

{

color

:

red!important

}

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

<link type="text/css" rel="stylesheet" href="url " media="화면" 문자셋 ="utf-8" /> =" url " dMedia

=" 인쇄 "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

h1

>

>

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

2 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

3 몇 주 전 By DDD

R.E.P.O. 저축 설명 (및 파일 저장)

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 섀도우 - 대장장이를 찾고 무기 및 갑옷 커스터마 화 잠금 해제 방법

4 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7564

15

Cakephp 튜토리얼

1386

52

Steam의 계정 이름 형식은 무엇입니까?

86

11

Win11 활성화 키 영구

61

19

NYT 연결 힌트와 답변

28

99

더보기