IT를 표현

또 빠른 차다. 여기 간단하고 CSS의 전원을 사용하여 좋은 일이에요 ..하지만 처음부터 어려운 concieve (그리고 그것이 반드시 내가 아냐)했습니다. Dropshadow를 추가하면, 포토샵 anf 불꽃놀이 등 편집 도구를 몇 가지 이미지를 사용, 우리 중 많은 케이크 peice 수도
제가 CSS를 이용한 드롭 섀도우를 위해 사용하도록 선택한 이유는 일반적으로 응용 프로그램의 페이지 디자인 / HTML을 만드는 동안, 요건 iterating 유지한다는 것입니다. 제가 freinds 목록 또는 이미지 갤러리를 표시하는 것과 같은 다양한 이미지와 기존의 웹 사이트에 가서는 무슨 뜻인지, 그것을 위해, 재처리 이미 추가하거나 그림자를 제거하는 언로 드했던 이미지의 전체 하중에 어려울 것입니다 문제.
이러한 여분의 부서 또는 추가할 HTMLS을 만드는 동안 좀 성급 생각했을 그렇다면 일반적으로 상황이 당신이 XSL, PHP에서 이러한 아이콘 / 축소판을 생성 루프 로직을 가지고있다는 것입니다. 자바 또는 다른 프로그래밍 / 스크립트 언어 당신이 언제든지 추가할 수 있습니다 다음, 연기 토록 요구 사항을 변경하는 클라이언트에 따라, CSS의 디스플레이 속성을 사용하여 이러한 그림자를 숨기고의 문제가 ... 내가 앞으로 생각하고 이런 일을 havn't 전에도 ...하지만 ahev 지금 시작!

아래 예제에서 원본 이미지는 그림자 무료이며 dropshadows이 필요한 경우 적용됩니다! 또한, 생각을 내 앞에서 혀를의 기술 (Well! 이들은 아마 자습서의 짧은 다양하므로 그것만이 그들을 '차다'의 호출 정당)을 사용하여, 약간의 여분을 간 CSS 클립 속성을 사용 과시에 대해서만

원본 이미지

CSS의 DropShadow 결과

데모보기 | 다운로드 sourcefiles을

상단에 스타일 시트를 넣어

당신이 점차적으로로드 페이지를 원한다면, 우리는 최대한 빨리이 어떤 내용을 표시할 수있는 브라우저가 필요합니다 즉, 문서의 헤드 내부 페이지 상단의 CSS를 넣어. 이 페이지는이 페이지의 진보적인 렌더링을 용이하게 같이 빠른 로딩 것으로 나타날 수 있습니다. 이것은 내용의 많은와의 느린 인터넷 연결에 대한 사용자의 페이지에 특히 중요합니다.

그것은 전반적인 사용자 경험을 향상시킬 수있는 문서화된 사실, 그것은 진행 표시기 및 시각적 피드백을 제공하는 것이 중요합니다. , 페이지의 요소를 다시 그리기하는 수고를 경우 즉, 페이지 단위의 렌더링을 포함하여 자신의 스타일 변경, 일부 브라우저는 CSS를 완전히 로드될 때까지 경우. 이 때문에, 사용자가 보이게 빈 흰색 페이지입니다.

W3 HTML 사양 '는 또한 CSS는 HTML 페이지의 HEAD 섹션에 저를 포함해야한다고 명시되어 있습니다. at the bottom of the page, so it's best not to use it. 또한 IE에서합니다 @import 사용하는 것과 동일하게 동작 <link> 페이지 하단에 있으므로 그것을 사용하는 것이 아니에요.

브라우저 특정 기능을 사용하지 마십시오

필터 사용 필터 메모리 소모를 증가하고 요소별로 적용이 아닌 이미지는 당, 문제 곱한되도록. 또한, 필터는 IE의 독점이며, 따라서 다른 브라우저에서는 의도한대로 작동하지 않습니다. 당신은 투명 또는 그라데이션 배경을 원한다면 이미지 1Pixel을 사용합니다.
표현식 : CSS의 표현은 CSS에서 경험하는 좋은 기능이지만, 여전히 IE의 특정 기능입니다. 또한,이 표현이 점에 유의하는 것이 중요하다 페이지가 렌더링하고 크기를 조정할 때 평가, 스크롤하고 사용자가 페이지 위로 마우스를 이동해도. 이 페이지의 성능에 영향을 줄 수도 말할 필요도없이. 당신이 그 프로 '는 자사의 죄수보다 더 무겁죠'느껴지지 않으면 그러므로 단순 단어에서, CSS의 표현을 사용하지 마십시오

당신에게 CSS를 Externalise

외부 CSS를 사용하는 것은의 빠른 로딩집니다 페이지 자바 스크립트와 CSS 파일이 브라우저에 의해 캐시됩니다 때문입니다. HTML 문서의 인라인 CSS는 HTML 문서를 요청 때마다 다운로드 하죠. 이것은 실제로 만들어진 HTTP 요청의 개수를 줄일 수 있지만 이후 HTML 문서의 크기를 증가시킵니다. 외부 CSS는 브라우저에 의해 캐시, HTML 문서의 크기는 HTTP 요청의 수를 증가하지 않고 줄어 듭니다.

귀하의 사이트에 사용자 세션 당 여러 페이지뷰를 가지고 귀하의 페이지에 다시 사용 동일한 스크립트와 스타일 시트의 많은 경우, 캐시된 외부 파일에서 큰 잠재적 이익이된다는 점에 유의해주십시오.

귀하의 CSS 파일을 싸

포장이나 CSS를 재정하면로드 시간을 개선함으로써 크기를 줄이기 위해 코드에서 불필요한 문자를 제거하는 관행이다.

CSS는 나를 뉴라인 등 공백과 같은 모든 의견과 불필요한 문자를 제거하여 났구요 수

CSS의 재설정 / CSS는 다양한 브라우저에 걸쳐 일관성을 만들어 특정 기준에 요소 스타일의 수를 설정할 수 있습니다된다.

우리 모두 크로스 브라우저 CSS의 쓰기의 악몽을 통해 왔습니다. 그래서 우리가 CSS를 쓰기 시작하면, 그것은 어떤 크로스 브라우저 불일치를 제거 / 재설정하는 것이 먼저 재설 정할 수있는 연습입니다. CSS를 재설정, 당신은 당신에게시 구축을 시작하는 깨끗한 기지를 제공하여 CSS를 시작하는 CSS의 간단한 몇 줄 수 있습니다.

제가 정상적으로 사용하는 경향이있는 CSS를 리셋은 다음과 같습니다

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

마셨다, UL {
목록 스타일 : 없음;
}

H1, H2, H3, H4, H5, h6 {
글꼴 크기 : 100 %;
글꼴 두께 : 정상;
}

브라우저 글꼴 크기를 재설정
또한 다음과 같은 라인에있는 브라우저의 글꼴 크기에 적용되었습니다 재설정합니다 ...

html {font-size: 76%;}

위의 CSS를 재설정 브라우저 글꼴 크기를 10 픽셀로, 이것은 가능한 상대적인 글꼴 크기 (prespective WAI 준수의 모든 중요한지) 작업할 수
예를 들어, 다음 정의에서, 스팬의 글꼴 크기는 10 픽셀과 그 paragarph에 14 픽셀로 설정되어로 설정됩니다 ...

span {font-size: 1em;}
p {font-size: 1.4em;}

예.
이렇게 CSS 속성을 지정,

여백 : 5px 0;

실제로 의미

여백 : 5px 0px 5px 0px;

그 첫 번째 여백 속성을 의미합니다 :

위쪽과 아래쪽 여백 = 5px | | 왼쪽 및 오른쪽 여백 = 0px

그래서 '더 이상 속기'는 것입니다

여백 : 5px 0px 5px 0px; (T, R, B, L)

당신도 셋 값을 사용할 수

여백 : 5px 5px 0;

어떤 수단

상단 = 5px | | 오른쪽과 왼쪽 = 0px | | 아래쪽 = 5px

인터넷 익스플로러가 자동으로 HTML 양식의 단추에 패딩을 추가합니다.
이 공간은 버튼의 텍스트의 길이에 따라 속합니다.

해결책은 스타일에 오버플로우를 추가할 것입니다 .... 즉

. 버튼 {
오버플 : 보이는;
여백 왼쪽 : 10px 중요한;
패딩 오른쪽 : 10px 중요한;
이 버튼을 다른 스타일 ...
}

또는

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;