CSS를 처음부터 시작하기(1 2016/9/21)

1.기본문법

CSS 규칙은 두 가지 주요 부분, 즉 선택기와 하나 이상의 선언으로 구성됩니다.

<span style="color: #800000;">selector </span>{<span style="color: #ff0000;">declaration1; declaration2; ... declarationN </span>}

선택기는 일반적으로 스타일을 지정해야 하는 HTML 요소입니다.

각 선언은 속성과 값으로 구성됩니다.

속성은 설정하려는 스타일 속성입니다. 각 속성에는 값이 있습니다. 속성과 값은 콜론으로 구분됩니다.

<span style="color: #800000;">selector </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}

다음 코드 줄은 h1 요소 내의 텍스트 색상을 빨간색으로 설정하고 글꼴 크기를 14픽셀로 설정합니다.

이 예에서 h1은 선택기이고, 색상과 글꼴 크기는 속성이고, 빨간색과 14px는 값입니다.

<span style="color: #800000;">h1</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">14px</span>;}

대부분의 스타일 시트에는 둘 이상의 규칙이 포함되어 있으며 대부분의 규칙에는 둘 이상의 선언이 포함되어 있습니다. 여러 선언과 공백 사용으로 스타일시트를 더 쉽게 편집할 수 있습니다.

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #000</span>;<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #fff</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: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> Georgia, Palatino, serif</span>;
  }

2. 고급 구문

① 선택자를 그룹화합니다. 그룹화된 선택기가 동일한 선언을 공유하도록 선택기를 그룹화할 수 있습니다. 그룹화해야 하는 선택기를 구분하려면 쉼표를 사용하세요. 아래 예에서는 모든 제목 요소를 그룹화했습니다. 모든 제목 요소는 녹색입니다.

<span style="color: #800000;">h1,h2,h3,h4,h5,h6 </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> green</span>;
  }

②상속

CSS에 따르면 하위 요소는 상위 요소로부터 속성을 상속받습니다. 하지만 항상 이런 식으로 작동하는 것은 아닙니다. 이 규칙을 살펴보세요.

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
     font-family</span>:<span style="color: #0000ff;"> Verdana, sans-serif</span>;
     }

위 규칙에 따라 사이트의 본문 요소는 Verdana 글꼴을 사용합니다(방문자 시스템에서 사용할 수 있다고 가정).

CSS 상속을 통해 하위 요소는 최상위 요소(이 경우 body)가 소유한 속성을 상속받습니다. 이러한 하위 요소는 p, td, ul, ol, ul, li, dl, dt, 그리고 dd) . 추가 규칙은 필요하지 않습니다. 본문의 모든 하위 요소는 Verdana 글꼴과 하위 요소의 하위 요소를 표시해야 합니다. 그리고 대부분의 최신 브라우저에서는 실제로 그렇습니다.

3.CSS 파생 선택기

요소 위치의 맥락에 따라 스타일을 정의하여 마크업을 더욱 간결하게 만들 수 있습니다.

다음 예에서는 li 요소의 Strong 요소만 이탤릭체로 표시되었습니다. Strong 요소에 대해 특별한 클래스나 ID를 정의할 필요가 없으며 코드가 더 간결해졌습니다.

<span style="color: #800000;">li strong </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;
  }

<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是斜体字。这是因为 strong 元素位于 li 元素内。<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>我是正常的字体。<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>

4 아이디 선택기

id 선택기는 특정 ID로 표시된 HTML 요소에 대해 특정 스타일을 지정할 수 있습니다. ID 선택기는 "#"으로 정의됩니다.

아래 두 ID 선택기의 경우 첫 번째 선택기는 요소 색상을 빨간색으로 정의할 수 있고 두 번째 선택기는 요소 색상을 녹색으로 정의할 수 있습니다.

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

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span>这个段落是红色。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="green"</span><span style="color: #0000ff;">></span>这个段落是绿色。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

① ID 선택자와 파생 선택자

최신 레이아웃에서는 ID 선택기를 파생 선택기를 만드는 데 사용하는 경우가 많습니다.

위 스타일은 ID가 사이드바인 요소 내에 나타나는 단락에만 적용됩니다. 이 요소는 div 또는 테이블 셀일 가능성이 높지만 테이블 또는 기타 블록 수준 요소일 수도 있습니다.

<span style="color: #800000;">#sidebar p </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 0.5em</span>;
    }

② 개별선택기

id 선택기는 파생 선택기를 생성하는 데 사용되지 않더라도 독립적으로 작동할 수 있습니다.

<span style="color: #800000;">#sidebar </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px dotted #000</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 10px</span>;
    }

5. 클래스 선택기

CSS에서 클래스 선택자는 마침표와 함께 표시됩니다.

아래 예에서는 center 클래스가 있는 모든 HTML 요소가 중앙에 배치됩니다.

<span style="color: #800000;">.center </span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;"> center</span>}

아래 HTML 코드에서 h1과 p 요소 모두 중앙 클래스를 갖습니다. 이는 둘 다 ".center" 선택기의 규칙을 준수한다는 것을 의미합니다.

<span style="color: #0000ff;"><</span><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This heading will be center-aligned
</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;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This paragraph will also be center-aligned.
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

① id와 마찬가지로 클래스도 파생 선택자로 사용할 수 있습니다.

클래스 이름이 fancy인 더 큰 요소 내의 테이블 셀은 회색 배경에 주황색 텍스트를 표시합니다. (fancy라는 이름의 더 큰 요소는 테이블이나 div일 수 있습니다.)

<span style="color: #800000;">.fancy td </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f60</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #666</span>;
    }

② 클래스에 따라 요소를 선택할 수도 있습니다.

클래스 이름이 fancy인 테이블 셀은 회색 배경에 주황색으로 표시됩니다.

<span style="color: #800000;">td.fancy </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f60</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #666</span>;
    }

6.CSS 속성 선택기

지정된 속성을 가진 HTML 요소의 스타일을 설정합니다. class 및 id 속성뿐만 아니라 지정된 속성을 가진 HTML 요소의 스타일을 설정할 수 있습니다.

① 속성 선택기

제목 속성을 사용하여 모든 요소의 스타일을 지정합니다.

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

② 속성 및 값 선택기

제목이 "W3School"인 모든 요소의 스타일 지정:

<span style="color: #800000;">[title=W3School]
</span>{<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;">5px solid blue</span>;
}

 

③ 属性和值选择器 - 多个值

为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

<span style="color: #800000;">[title~=hello] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }

 

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

<span style="color: #800000;">[lang|=en] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }

 

7.如何插入CSS

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部，内部，内联。

① 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：

<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;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mystyle.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

 

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

<span style="color: #800000;">hr </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> sienna</span>;}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;"> 20px</span>;}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">background-image</span>:<span style="color: #0000ff;"> url("images/back40.gif")</span>;}

 

 

② 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用