찾다

집  >  기사  >  웹 프론트엔드  >  CSS (1): CSS 이해하기

CSS (1): CSS 이해하기

WBOY
WBOY원래의
2016-08-10 08:49:401228검색

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><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><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><span style="color: #800000;">body</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;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></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;"><head>
　　<link rel="stylesheet" type="text/css" href="style.css">
</head></span>

　4.2 내부 스타일 시트

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