>  기사  >  웹 프론트엔드  >  CSS와 HTML 사용에 대한 오해

CSS와 HTML 사용에 대한 오해

高洛峰
高洛峰원래의
2017-02-28 13:47:451220검색

신화 1. 폴립병

<p class="nav">
    <ul>
       <li><a href="/home/">Home</a></li>
       <li><a href="/about/">About</a></li>
       <li><a href="/concact/">Concact</a></li>
    </ul>
</p>

위에서 p 태그를 중복하여 사용하는 상황을 " "Polyplasia"를 다음과 같이 단순화해야 합니다.

<ul class="nav">
      <li><a href="/home/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/concact/">Concact</a></li>
</ul>

신화 2. 다중 유형의 계급 증후군 참고 클래스는 페이지의 여러 요소에 적용될 수 있으며, 이는 콘텐츠 유형이나 기타 유사한 항목을 식별하는 데 매우 적합합니다.

뉴스(뉴스 제목, 뉴스 세부정보)

<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<p class="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

news-head와 news-text를 사용한 위의 클래스 이름은 "다중 카테고리" 성능이라고 하며, 너무 많은 클래스 구분이 필요함 요소 스타일

은 의미가 없는 것보다 부분을 표현하기 위해 p(pision)를 사용하는 것이 더 좋습니다(대부분의 사람들은 p에 의미가 없다고 오해합니다!!!) , 실제로 p는 문서를 여러 의미 있는 영역으로 나눌 수 있습니다.

클래스 이름 뉴스는 전체 뉴스 항목을 식별합니다. 그런 다음 캐스케이드 스타일을 사용하여 뉴스 제목과 텍스트를 식별할 수 있으며 다음과 같이 수정해야 합니다.

<p class="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p>

그룹으로 확장 또는 인라인 요소 식별

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <span class="date">Februray 22nd, 2009</span>
    By <span class="author">Harry Knowles</span>
</p>

오해 3. id 사용에 대한 오해는 페이지의 특정 요소를 식별하는 데 사용됩니다( 사이트 탐색, 머리글, 페이지 바닥 등) 고유해야 하며 지속적인 구조 요소(예: 기본 탐색, 콘텐츠 영역)를 식별하는 데에도 사용할 수 있습니다.

/*大量的使用id,很难找到唯一名称混乱*/
#andy, #rich, #jeremy, #james-box, #sophie {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}
/*只需一个普通类替代它*/
.staff {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}

은 페이지의 특정 요소(예: 사이트 탐색, 머리글, 바닥글)를 식별하는 데 사용되며 고유해야 하며 지속적인 구조 요소(예: 기본 탐색, 콘텐츠 영역)를 식별하는 데에도 사용할 수 있습니다.

CSS와 HTML 사용에 대한 오해


CSS, HTML 사용에 대한 오해와 관련된 더 많은 글은 PHP 중국어 홈페이지를 참고해주세요!


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