CSS 코드 서식의 다양한 표현 방법 소개

이 기사에서는 CSS를 구성하는 다양한 방법인 CSS 형식 지정 방법에 초점을 맞출 것입니다. 관련 개념일 뿐입니다. 구성은 항목을 그룹화하고 정렬하는 것과 더 관련이 있는 반면 형식 지정은 간격 및 들여쓰기와 관련이 있다고 생각합니다.

형식 지정은 CSS의 기능과 관련이 없습니다. 이는 프로그래머 자신의 선택일 뿐이지만, 화가에게 캔버스 선택이 중요하지 않다는 말처럼 CSS에 서식이 중요하지 않다는 의미는 아닙니다. 읽기가 얼마나 쉬운지, 탐색이 얼마나 쉬운지, 이전에 작성된 CSS를 다시 방문하고 다시 익히는 것이 얼마나 쉬운지.

CSS 형식 지정에 대한 옵션이 너무 많은 이유는 간격 및 줄 바꿈에 관한 엄격한 구문 규칙이 없기 때문입니다. 예:

div      {                width:             50px             }

는 아래 두 코드와 동일합니다.

div{width:50px}

div 

{ 
      width: 50px 
      
}

다중 행 형식

.navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}

읽기용 짧은 코드 조각에 있어서는 이것이 가장 일반적이고 가장 쉬운 코드라고 감히 말할 수 있습니다. , 이것이 바로 서면 튜토리얼에서 이 형식을 가장 자주 사용하는 이유입니다. 위의 예에서는 닫는 중괄호와 다음 선택자 사이에 빈 줄이 없지만 이 역시 일반적입니다.

들여쓰기가 있는 여러 줄 형식

.navigation_rss_icon {
    position: absolute;
    left: 940px;
    bottom: 0px;
}
#navigation_rss {
    position: absolute;
    left: 720px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #897567;
    line-height: 2.5em;
    }
    #navigation_rss li {
        display: inline;
    }
        #navigation_rss li a:link, #navigation_rss li a:visited {
            color: #fffffe;
            text-decoration: none;
            padding: 0px 2px;
            letter-spacing: -0.05em;
        }
        #navigation_rss li a:hover {
            color: #eed2a1;
            text-decoration: none;
        }

들여쓰기 블록은 선택기가 위의 상위 요소보다 더 구체적임을 나타내며 해당 선택기의 하위 요소를 가리킵니다.

한 줄 형식

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

이 방법은 모든 공백과 줄 바꿈을 제거하기 위한 전체 압축 없이 아마도 공간과 크기 측면에서 가장 효율적인 형식일 것입니다. 이 기술을 사용하려면 CSS를 작성하고 편집할 때 최소한의 수직 및 수평 스크롤이 필요하지만 번거로워 보이고 탐색하고 원하는 내용을 찾는 것이 다소 어려울 수 있습니다.

탭 키가 있는 한 줄 형식

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }

들여쓰기가 있는 한 줄 형식

#content-area ol                    { margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol             { list-style: lower-alpha; }
#content-area ul                    { margin: 0 0 0 5px; list-style: none; }
    #content-area ul li             { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul             { margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li     { background: none; padding: 0; }

들여쓰기 선택기는 그 위에 있는 선택기의 하위 요소를 대상으로 한다는 의미입니다.

주로 한 줄 서식

내가 가장 좋아하는 것은 한 줄 서식입니다. 왜냐하면 텍스트 편집기에서 Soft-Wrap을 사용하므로 긴 줄이 영원히 지속되지 않고 창 가장자리를 감싸기 때문입니다. 따라서 선택기가 많은 매우 긴 줄의 경우 새 속성 줄에 하드 리턴과 탭을 추가했습니다.

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1                                    { font-size: 36px; }
h2                                    { font-size: 30px; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        text-align: left; }

Variation

한 줄 서식 지정은 여는 괄호를 자신의 줄로 이동하여 한 단계 더 발전할 수 있습니다. PHP에서 꽤 많이 본 내용입니다.

div
{
    padding: 10px;
}

레이블이 있는 여러 줄 서식에서는 곱슬곱슬한 부분이 보입니다. 구분 벽으로 사용되는 괄호:

#content-area ol                 {       margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol          {       list-style: lower-alpha; }
#content-area ul                 {       margin: 0 0 0 5px; list-style: none; }
    #content-area ul li          {       padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul          {       margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li  {       background: none; padding: 0; }

구성

관련 속성의 단일 및 다중 행 그룹을 단일 행으로 결합:

.navigation_rss_icon {
    position: absolute;
    top: 10px; left: 10px; bottom: 10px; right: 10px;
    font-size: 12px; font-weight: bold;
}

선택하는 형식은 가독성에 따라 결정됩니다. CSS를 빠르게 탐색하고 원하는 내용을 찾고 빠르게 변경할 수 있어야 합니다. 찾고 있는 속성을 눈으로 찾기 어렵기 때문에 한 줄 형식이 어렵다면 이 형식을 사용하지 않는 것이 좋습니다.

개인적으로 여러 줄 형식은 읽기 쉽지만 길이(실제 줄 수와 마찬가지로)가 5~8배 늘어납니다. 실제로 모든 수직 스크롤로 인해 전체 문서를 읽기가 어렵습니다. 모니터가 약간 좁은 경우 단일 라인 형식으로 인해 가로 스크롤이 발생할 수 있으며 때로는 더 악화될 수 있습니다.

스크롤을 최소화하면서 가독성을 최대화하는 완벽한 서식입니다. 게다가 좀 더 추상적인 의미에서는 옳다고 느껴질 필요가 있습니다.

위 내용은 CSS 코드 서식의 다양한 표현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!