이것은 오래 전의 기사입니다. 이제 아이디어는 배울 가치가있는 것 같습니다. VEVB.com의 학습 사례는 이론적 인 지식을 배우는 것이 지식의 획기적인 혁신에 매우 도움이 될 것입니다. 여러분, 모두!
중국어 버전의 "웹 사이트 리팩토링"(2 판)을 사용하여 Zeldman의 걸작 설계를 읽은 이후, 나는 웹 표준을 사용하여 프로젝트를 개발하고 연습하는 것에 대한 깊은 느낌을 가지고 있다고 생각했습니다. 그러나 웹 표준이 무엇인지, 실제 프로젝트에 적용하는 방법을 아는 것만으로는 충분하지 않습니다. 웹 표준의 각 구성 요소는 하나씩 배우고 적용해야하며 본질을 발견하기 위해 하나씩 패배해야합니다! 나와 같은 웹 개발 디자이너에게는이 원칙을 이해하고 대상 학습과 실습을 수행함으로써 더 많은 것을 얻을 것이라고 생각하며, 또한 중국의 웹 표준 적용에 기여한 것입니다! (하하, 이것은 약간 자랑 할 수도 있지만 실제로 대부분의 소프트웨어 실무자들에게 이상적입니다.)
이제 Web2.0 및 3.0의 시대이며 XHTML, XML, CSS, ECMAScript 및 Dom의 시대입니다. 그들은 최종 기술이 아니지만 함께 솔루션이됩니다. 우리는 뒤로 호환 가능한 웹 사이트와 웹 표준을 충족하는 웹 사이트를 만드는 데 필요한 기술 기반을 구축 할 계획입니다. 우리는 더 많은 사용자 지원 및 액세스를 얻기를 원할뿐만 아니라 장기적이고 아름다운 웹 사이트를 구축하여 오랫동안 관심을 끌기를 원합니다. 웹 사이트를 개선하기 위해 CSS를 사용하는 법을 배우는 것은 웹 2.0 시대에 관심과 패션 트렌드를 유치하는 좋은 방법이라고 생각합니다. 아래는 CSS 기술에서 얻은 경험에 대해서만 이야기 할 것입니다.
CSS 전문가가 되려면 CSS 선택기를 사용하는 데 능숙하기에 충분하지 않습니다. 또한 작업의 전반적인 계획, 작업 프로세스의 숙달 및 스타일 시트의 유지 관리 및 효율성 향상도 포함됩니다. CSS를 사용하면 우리가 원하는 훌륭한 웹 사이트를 만들 수 있으며 CSS를 작성하는 것이 그 자체로 기쁨입니다. 그렇다면 어떻게 더 매력적인 스타일 시트를 만들어야합니까? 스타일 시트는 어떤 특성을 가져야합니까? 내 자신의 업무 경험을 배우고 결합하여 아름다운 스타일 시트를 만드는 좋은 방법을 요약했습니다.
1. CSS에 너무 많은 마크가 없도록하지 마십시오스타일 시트를 연결하거나 가져 오는 것은 단서가없는 직업처럼 들립니다. 나는 깔끔하고 잘 조직 된 CSS 문서를 가진 많은 웹 사이트 개발을 보았지만 천천히 말하지만, 단기적으로 빠르게 업데이트되지 않거나 관리하기에는 너무 게으르기 때문에 이전에 생성 된 절묘한 스타일 시트가 쓰레기가됩니다. 수백 개의 콘텐츠를 게시 해야하는 거대한 웹 사이트에서 작업하는 경우. 시간이 제한되어 있으므로 빠른 수정 또는 업데이트를 위해 CSS를 중첩하거나 정리해야합니다. 시간이 지남에 따라,이 습관은 언젠가 사이트가 완전히 뒤집어지고 재 설계되었다고들을 때까지 지속되며 (콘텐츠는 여전히 동일합니다) 생성하는 데 일주일 만 있습니다 (테스트 포함). 일반적으로 스타일 시트 업데이트는 매우 간단한 방법입니다. 웹 사이트의 흩어진 영역을 오랫동안 수정하지 않으면 웹 사이트 스타일 시트 구조를 전반적으로 파악할 수 없습니다.
스타일 시트를 연결하거나 가져 오는 것은 임의의 것이 아닙니다. 깨끗하고 깔끔한 스타일 시트를 만들고 계속 진행하면 일하는 것이 더 행복해질 것입니다. 참고 : 새 콘텐츠를 업데이트하거나 추가 할 때마다 새로운 스타일 시트를 만들려고하면 확실히 문제를 요구합니다. 스타일 시트를 너무 많이 연결하고 가져 오면 버그를 제거하기가 매우 어려워서 스타일 시트를 유지하기가 어렵습니다. 더 큰 웹 사이트는 서로 다른 부품의 스타일 시트를 별도로 생성한다는 것을 이해할 수 있습니다. 극단으로 가지 않도록 조심하십시오. 많은 스타일 시트를 추가하면 더 많은 HTTP 요청이 추가되며 이는 후속 작업에도 영향을 줄 수 있습니다.
2. 시맨틱 정의는 명확하고 이해하기 쉽습니다표현할 가장 적절하고 가장 의미있는 요소를 선택하는 것 외에도 클래스 및 ID 속성 값 선택을 결정해야합니다. 명확한 정의는 유지 보수를 간단하게 만들 수 있으며 그룹 구성원은이를 이해할 것입니다. 이 정의 참조 :
.l10k {색상 : #369; }, .left-blue {색상 : #369; }, 그것이 나에 의해 끝났다면, 그것이 무엇을 의미하는지 알 수 있지만 다른 사람들과 자신을 비교하면 이해하지 못할 수도 있습니다. 오늘 그것이 무엇을 의미하는지 알고 있더라도, 몇 년 후에 그것이 여전히 의미하는 바를 알 수 있다고 보장 할 수 있습니까? 클래스 속성에 색상 또는 길이 및 너비 치수를 추가하지 않는 것이 가장 좋습니다. 보다 적절한 이름 지정 사양 :. 작업 설명 {색상 : #369; }
3. 조건부 의견 및 응용 기술을 언제 추가 해야하는지 알고 있습니다.많은 기사가 문제 해결에 대한 몇 가지 팁을 작성했으며 조건부 주석은 IE 릴리스를 제어하는 좋은 방법입니다. 나는 조건부 의견이 당신의 CSS 문서에서 그것들을 낙서하는 것보다 훨씬 낫다는 데 동의하지만, 많은 증거가 이것이 최선의 해결책이 아니라는 것을 천천히 깨닫기 시작했습니다. 요소에서 최소 높이를 설정하고 싶지만 IE6 브라우저는 실행되지 않으므로 사용할 수있는 높이가 동일한 방식으로 처리 될 것임을 알고 있습니다. 스타일 시트를 재현하고 로고에 조건부 댓글을 추가하십시오. 귀하의 모든 요구는이 규칙을 따르는 것입니까? 최저 높이와 높이 규칙을 함께 유지하고 동일한 CSS 문서에서 약간의 트릭을 선택하면 더 나을까요? 이 경우이 방법으로 작업하기가 어렵다고 생각합니다.
4. 외부 스타일 시트를 사용하여 웹 페이지에 CSS를 적용하십시오.좋은가요? 모두가 분명합니다. 물론 한 가지는 부인할 수 없으므로 코드 재사용을 극대화하고 웹 사이트 파일의 구성을 최적화 할 수 있습니다.
좋아요, 위는 제 개인적인 의견입니다. 여러분 모두 나에게 더 많은 의견을주기를 바랍니다. 귀하의 제안은 어려움에 도전하려는 동기입니다! 감사해요!