CSS 지식 요약(1)

1.CSS의 이해

　1. CSS란?

CSS(Cascading Style Sheet) 캐스케이딩 스타일시트

은 웹 페이지의 스타일을 제어하고 웹 콘텐츠에서 스타일 정보를 분리하는 데 사용되는 마크업 언어입니다.

CSS 속성 또는 규칙은 아직 W3C 표준의 일부가 되지 않았고 브라우저의 개인 속성이므로 브라우저마다 다른 접두사가 필요할 수 있습니다.

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

　2. CSS는 무엇을 할 수 있나요?

CSS를 사용하여 페이지 레이아웃을 효과적으로 구성하세요.

　CSS 스타일을 사용하면 페이지 글꼴, 색상, 배경 및 기타 효과를 정확하게 설명할 수 있으며 수정 및 제어가 더 빨라집니다.

CSS는 CSS 파일을 사용하여 사이트의 모든 웹 페이지 스타일을 제어할 수 있습니다. CSS 파일의 해당 코드가 수정되면 전체 사이트의 모든 페이지가 그에 따라 변경됩니다.

CSS는 휴대폰, PDA, 프린터, TV, 게임 콘솔 등 다양한 장치를 지원할 수 있습니다.

*목적: 추후 유지보수를 용이하게 하기 위해 구조물과 성능을 분리합니다.

　

　3.CSS 구문구조

CSS 구문은 selector, property 및 value

의 세 부분으로 구성됩니다.

　선택기 {속성:값;}

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

각 선택기는 세미콜론으로 구분된 여러 속성 값을 가질 수 있습니다. ";"

예:

<span style="color: #800000;"><style type="text/css">
    body </span>{<span style="color: #ff0000;">background-color</span>:<span style="color: #0000ff;">#ccc</span>;}<span style="color: #800000;">
</style></span>

　4. CSS를 어떻게 소개하나요?

CSS를 웹페이지에 적용하는 방법은 3가지가 있습니다. (인라인 스타일시트, 내부 스타일시트, 외부 스타일시트)

　a. 인라인 스타일 시트(html 요소 내부에 위치)

　인라인 스타일이란 HTML 태그의 스타일 속성에 CSS 스타일 인코딩을 직접 작성하는 것을 말합니다.

*참고: 인라인 스타일에는 선택기가 필요하지 않습니다.

예:

<span style="color: #0000ff;"><</span><span style="color: #800000;">body </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="background-color:#ccc;"</span><span style="color: #0000ff;">></span>

　b. 내부 스타일 시트( 태그 내부에 위치)

내부 스타일은 페이지의 별도 부분이며 태그 내에 위치합니다.

예:

<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;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

　c. 외부 스타일시트

외부 스타일 시트는 CSS 스타일 코드를 외부 파일 ".css"에 별도로 배치한 후 웹페이지 파일 ".html"에서 호출합니다.

　*HTML 구조와 프리젠테이션을 분리하기 위해 외부 스타일 시트를 최대한 사용하세요

<span style="color: #000000;">/* "style.css"代码 */
body{
    background-color:#cccccc;
}

</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;"> type</span><span style="color: #0000ff;">="text/css"</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>

 

 

　5.样式优先级

　　a.写法优先权（就近原则）

　　　行内样式表 > 内部样式表 > 外部样式表

　　b.选择符优先权

　　　选择符的比较（从低到高）:

　　　通配符"*"

　　　类型选择符"标签名为选择符名称的"

　　　子选择符">"

　　　包含选择符

　　　class选择符

　　　属性选择符

　　　id选择符

　　　行内样式

　　　!important[慎用]

 

　6.样式继承

　　HTML中的标签会继承部分父标签的样式。

　　比如 body { color:red;} ，那么body中的所有标签及标签下的所有子标签的文本都将变成红色。

 

　　*!important的用法

　　在两个相同类型的css样式定义中，优先执行后面一个

　　例如：

<span style="color: #800000;">p</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">15px</span>; <span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">20px</span>;}

　　这种情况下，执行"font-size:20px;" 。

　　但是可以通过!important语法,提升某一句样式表的重要性,使及优先执先 !important标注的语句

　　例如：

<span style="color: #800000;">p</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">15px!important</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">20px</span>;}

 

　　这时，执行"font-size:15px" 。

 

　7.CSS代码注释（快捷键：Ctrl+/）

　　例如：

<span style="color: #008000;">/*</span><span style="color: #008000;"> 头部样式开始 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
#header</span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#ccc</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 头部样式结束 </span><span style="color: #008000;">*/</span>

 

　　CSS代码注释可以帮助我们对自己写的CSS样式进行说明，如说明某段CSS代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便性；

　　同时在团队开发的时候合理适当的注解有利于团队看懂css样式对应html的位置，以便顺利快速开发网页。