CSS (1): CSS 이해하기

1. CSS란

CSS Cascading Style Sheets(영어 정식명: Cascading Style Sheets)는 HTML이나 XML 등의 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS3은 CSS2의 업그레이드 버전이며, 3은 CSS2.1을 기반으로 하는 강력한 새 기능을 많이 추가한 것입니다. 현재 주류 브라우저인 Chrome, Safari, Firefox, Opera 및 심지어 360도 이미 CSS3의 대부분의 기능을 지원하고 있으며, IE10도 CSS3를 완벽하게 지원하기 시작할 것입니다. 브라우저마다 다른 접두사가 필요할 수 있습니다. 이는 CSS 속성 또는 규칙이 아직 W3C 표준의 일부가 되지 않았으며 브라우저의 개인 속성이라는 것을 의미합니다. 현재 최신 버전의 브라우저에는 접두사가 필요하지 않지만 더 나은 호환성을 위해서는 여전히 접두사가 필수입니다.

<span style="color: #800000;">-moz-transform:translateX(20px);
-webkit-transform:translateX(20px);
-ms-transform:translateX(20px);
transform:translateX(20px);</span>

Transform은 CSS3의 새로운 속성이며, 각 브라우저는 이를 지원하기 위해 접두사를 추가해야 합니다.

2.CSS가 할 수 있는 일

• 스타일은 HTML 요소가 표시되는 방식을 정의합니다.
• CSS는 이전에 이미지와 스크립트를 사용해야 했던 많은 효과는 물론, 단 몇 줄의 코드만으로 애니메이션 효과까지 얻을 수 있습니다. 예를 들어 둥근 모서리, 그림 테두리, 텍스트 그림자 및 상자 그림자, 전환, 애니메이션 등이 있습니다.
• CSS는 프런트엔드 개발자의 디자인 프로세스를 단순화하여 보다 유연한 페이지 레이아웃과 더 빠른 페이지 로딩 속도를 제공합니다.
• 사이트의 모든 웹페이지 스타일은 CSS 파일을 사용하여 제어할 수 있습니다. CSS 파일의 해당 코드를 수정하면 전체 사이트의 모든 페이지가 그에 따라 변경됩니다.
• 목적: 성능과 구조를 분리합니다.

<span style="color: #008000;">/*</span><span style="color: #008000;"> style.css </span><span style="color: #008000;">*/</span><span style="color: #800000;">

body</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#ccc</span>;
}<span style="color: #800000;">
h1</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">"微软雅黑"</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">normal</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> index.html </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="./style.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>这是标题<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span></span>

3.CSS 구문 구조

CSS 규칙은 두 가지 주요 부분, 즉 일반적으로 스타일을 변경하려는 HTML 요소인 선택기와 하나 이상의 선언으로 구성됩니다. 각 선언은 속성과 값으로 구성됩니다. 속성은 설정하려는 스타일 속성입니다. 각 속성에는 값이 있습니다. 속성과 값은 콜론으로 구분됩니다.

<span style="color: #800000;">p</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择器 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">      
    color</span>:<span style="color: #0000ff;">red</span>;      <span style="color: #008000;">/*</span><span style="color: #008000;"> 属性:值; </span><span style="color: #008000;">*/</span>
}

4. CSS 소개

스타일 시트를 소개하는 세 가지 방법이 있습니다.

• 외부 스타일시트
• 내부 스타일시트
• 인라인 스타일

　4.1 외부 스타일 시트

외부 스타일 시트는 스타일을 여러 페이지에 적용해야 할 때 이상적입니다. 외부 스타일 시트를 사용하면 파일 하나를 변경하여 전체 사이트의 모양을 변경할 수 있습니다. 각 페이지는 태그를 사용하여 스타일 시트에 연결됩니다. (문서의) 헤드에 있는 태그:

<span style="color: #800000;">
　　<link rel="stylesheet" type="text/css" href="style.css">
</span>

　4.2 내부 스타일 시트

단일 문서에 특별한 스타일이 필요한 경우 내부 스타일 시트를 사용해야 합니다. 내부 스타일 시트는

<span style="color: #800000;">
    <style>
        p </style></span>{<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
    
        </span>

　4.3 인라인 스타일

인라인 스타일이란 HTML 태그의 스타일 속성에 CSS 스타일을 직접 작성하는 것을 말합니다. 이런 방식으로 CSS를 도입할 때는 선택기를 작성할 필요가 없습니다.

<span style="color: #800000;"><p style="color:red;">这是一个段落</p></span>

　4.4 3가지 도입방식 우선순위 비교

동일한 HTML 요소가 둘 이상의 스타일로 정의된 경우 어떤 스타일이 사용됩니까? 일반적으로 모든 스타일은 다음 규칙에 따라 새로운 가상 스타일시트로 계단식으로 배열되며, 4번이 가장 높은 우선순위를 갖습니다.

1. 브라우저 기본 설정
2. 외부 스타일 시트
3. 내부 스타일시트( 태그 내부에 위치)
4. 인라인 스타일(HTML 요소 내부)

따라서 인라인 스타일(HTML 요소 내부)이 가장 높은 우선순위를 가집니다. 즉, 태그, 외부 스타일 시트의 스타일 선언 또는 브라우저 스타일 선언(기본값)의 스타일 선언보다 우선순위가 높습니다.

5.CSS 코드 주석

/*로 시작하고 */로 끝나는 CSS 코드 주석입니다.

<span style="color: #008000;">/*</span><span style="color: #008000;"> 公共样式</span><span style="color: #008000;">*/</span><span style="color: #800000;">

body </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">0px</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;">0px</span>;}    
    
<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式开始</span><span style="color: #008000;">*/</span><span style="color: #800000;">
    
#nav </span>{<span style="color: #ff0000;">
      ……
    </span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式结束</span><span style="color: #008000;">*/</span>    

6.CSS 선택기

CSS 선택기는 스타일을 지정하려는 요소의 패턴을 선택하는 데 사용됩니다.

　6.1 와일드카드 선택기

　 * 선택자는 모든 요소를 ​​선택합니다. * 선택기는 다른 요소 내의 모든 요소를 ​​선택할 수도 있습니다:

<span style="color: #800000;">*</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;
}<span style="color: #800000;">
div *</span>{              <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择div元素下的所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">blue</span>;
}

　6.2 요소 선택기

소위 요소 선택자(element selector)는 웹 페이지에 존재하는 기존 태그 이름을 이름으로 사용하는 선택자를 말합니다.

<span style="color: #800000;">body</span>{               <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为body的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;
}<span style="color: #800000;">
a</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为a的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">none</span>;
}

　6.3 그룹 선택기

단일 태그에 대한 스타일을 지정하는 것 외에도 태그 그룹에 대해 동일한 스타일을 정의할 수도 있습니다. 선택기를 구분하려면 쉼표를 사용하세요. 동일한 스타일을 사용해야 하는 페이지 요소의 경우 스타일을 한 번만 작성하면 됩니다.

<span style="color: #800000;">h1,h2,h3,p</span>{<span style="color: #ff0000;">         
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">red</span>;
}