XHTML CSS 웹페이지 제작에 아름다운 스타일시트 적용_HTML/Xhtml_웹페이지 제작

이 글은 오래 전에 쓰여진 글입니다. 이제 그 안에 담긴 아이디어는 배울 가치가 있는 것 같습니다. jb51.net에서 사례를 공부하는 동안, 여러분의 지식에도 획기적인 발전이 있을 것입니다. 돕다. 모두들 어서!

젤드만 선생님의 걸작 '웹 표준으로 디자인하기'를 읽은 후, 중국어 버전이 '웹사이트 재구성'(2판)이었는데, 웹 활용에 대한 생각이 확고해졌습니다. 표준을 개발하고 구현합니다. 하지만 웹 표준이 무엇인지, 이를 실제 프로젝트에 적용하는 방법을 조금 아는 것만으로는 충분하지 않습니다. 웹표준의 각 구성요소를 하나씩 배우고 적용하며, 하나씩 분해하여 그 본질을 찾아내야 합니다! 저와 같은 웹 개발자와 디자이너들은 이 원칙을 이해하고 목표에 맞는 연구와 실습을 수행한다면 더 많은 것을 얻을 수 있을 뿐만 아니라 동시에 중국의 웹 표준 적용에 기여할 수 있다고 믿습니다! (하하, 좀 자랑일지도 모르지만, 사실 우리 대부분의 소프트웨어 실무자들의 이상향입니다.)

이제는 web2.0, 심지어 3.0의 시대, XHTML, XML, CSS의 시대입니다. , ECMAScript 및 DOM. 비록 최종 기술은 아니지만 결합하여 솔루션이 됩니다. 이는 이전 버전과 호환되는 웹 사이트를 구축하려는 우리의 계획의 기초이자 웹 표준을 준수하는 웹 사이트를 만드는 데 필요한 기술 기반이기도 합니다. 우리는 더 많은 사용자의 지지와 방문을 얻고자 할 뿐만 아니라 오랫동안 사용자의 관심을 끌 수 있는 오래 지속되고 아름다운 웹사이트를 구축하고 싶습니다. 저는 웹사이트를 개선하기 위해 CSS를 사용하는 방법을 배우는 것이 그들의 관심을 끌 수 있는 좋은 방법이며, 이는 또한 web2.0 시대의 유행하는 개발 추세라고 믿습니다. 아래에서는 CSS 기술을 통해 얻은 경험에 대해서만 이야기하겠습니다.

CSS 전문가가 되려면 CSS 선택기 사용에 능숙한 것만으로는 충분하지 않습니다. 또한 작업의 전반적인 계획, 작업 흐름 마스터, 스타일 시트의 유지 관리 가능성 및 효율성 향상에도 있습니다. 우리는 CSS를 사용하여 우리가 원하는 멋진 웹사이트를 만들 수 있으며, CSS를 작성하는 것 자체가 즐거움입니다. 그렇다면 좀 더 매력적인 스타일 시트를 어떻게 만들어야 할까요? 스타일 시트에는 어떤 기능이 있어야 합니까? 내 자신의 업무 경험을 배우고 결합하여 아름다운 스타일 시트를 만드는 좋은 방법을 요약했습니다.

1. CSS에 태그를 너무 많이 사용하지 마세요.

스타일 시트를 연결하거나 가져오는 것이 무의미한 작업처럼 들릴 수 있습니다. 많은 웹사이트 개발자들이 CSS 문서를 깔끔하고 잘 정리한 것을 보았는데, 단시간에 빠르게 업데이트하지 못하거나, 관리하기 너무 게을러서 천천히 이전에 만들었던 절묘한 스타일 시트가 되어버렸습니다. 쓰레기. 수백 개의 콘텐츠를 게시해야 하는 거대한 웹사이트에서 작업하는 경우. 시간이 제한되어 있기 때문에 CSS를 중첩하거나 배열하여 빠른 변경이나 업데이트가 필요합니다. 시간이 지남에 따라 이 습관은 어느 날 사이트가 완전히 재설계될 것이라는 말을 듣고(그러나 콘텐츠는 여전히 동일함) 사이트를 만드는 데(테스트 포함) 일주일밖에 남지 않을 때까지 계속됩니다. 일반적으로 스타일시트를 업데이트하는 것은 매우 간단한 방법입니다. 웹사이트의 흩어져 있는 부분을 오랫동안 수정하지 않으면 웹사이트 스타일시트의 구조를 전체적으로 파악할 수 없습니다.

스타일시트를 연결하거나 가져오는 것은 임의적이지 않습니다. 깨끗한 스타일 시트를 만들고 유지 관리하면 직장에서 더 행복해질 것입니다. 참고: 새 콘텐츠를 업데이트하거나 추가할 때마다 새 스타일시트를 만들려고 하면 확실히 문제가 발생하게 됩니다. 링크와 가져온 스타일 시트가 너무 많으면 버그 제거가 어렵고 스타일 시트 유지 관리가 어려워집니다. 대규모 웹사이트에서는 여러 부분에 대해 별도의 스타일 시트를 만드는 것이 이해됩니다. 극단적으로 가지 않도록 주의하세요. 스타일 시트를 많이 추가하면 http 요청이 늘어나고 후속 작업에 영향을 미칠 수 있습니다.

2. 의미적 정의가 명확하고 이해하기 쉽다

표현하기에 가장 적절하고 의미있는 요소를 선택하는 것 외에 클래스와 ID도 선택해야 한다 속성 값. 명확하게 정의하면 유지 관리가 더 쉬워지고 팀 구성원 모두가 이를 이해할 수 있습니다. 이 정의를 보세요:

　.l10k { color: #369; } , .left-blue { color: #369; } 내가 만든 것이라면 그게 무슨 뜻인지 알 수도 있겠지만, 다른 사람들과 같지는 마세요. 비록 당신이 오늘 그 의미를 안다고 해도, 지금으로부터 오랜 세월이 흐른 뒤에도 여전히 그 의미를 알 것이라고 장담할 수 있습니까? 클래스 속성에 색상이나 길이 및 너비 치수를 추가하지 않는 것이 가장 좋습니다. 보다 적절한 명명 규칙: . work-description { color: #369; }

3. 조건부 주석 및 적용 기술을 언제 추가해야 하는지 알아두세요

문제 해결 기술에 관해 많은 기사가 작성되었습니다. 조건부 주석은 IE 게시를 제어하는 ​​좋은 방법입니다. 나는 조건부 주석이 CSS 문서를 어지럽히는 것보다 훨씬 낫다는 데 동의합니다. 하지만 최근에는 이것이 최선의 해결책이 아니라는 많은 증거가 있다는 것을 깨닫게 되었습니다. 요소의 최소 높이를 설정하고 싶지만 IE6에서는 이를 구현하지 않으므로 사용할 수 있는 높이도 동일하게 처리된다는 것을 알 수 있습니다. 새 스타일시트를 만들고 마크업에 조건부 주석을 추가하면 됩니다. 이 규칙을 따르는 것뿐입니다. 최소 높이와 높이 규칙을 함께 유지하고 동일한 CSS 문서에서 트릭을 선택하는 것이 더 좋지 않을까요? 이런 경우에는 이 방법을 사용하기가 어렵습니다.

4. 웹 페이지에 CSS를 적용할 때 외부 스타일 시트를 사용해 보세요

장점이 있나요? 누구나 잘 알고 있습니다. 물론 한 가지는 코드 재사용을 극대화하고 웹 사이트 파일 구성을 최적화할 수 있다는 것입니다.
그렇습니다. 위 내용은 제 개인적인 의견입니다. 여러분의 제안이 제가 어려움에 도전할 수 있는 원동력이 되기를 바랍니다. 감사해요!

위 내용은 XHTML CSS 웹페이지 제작_HTML/Xhtml_ 웹페이지 제작에 아름다운 스타일시트를 적용한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!