HTML의 18가지 기본 개념 공유

5. 세 가지 CSS 스타일:

(1) 인라인 CSS 스타일:

여기 텍스트는 빨간색입니다

(2) 삽입된 CSS 스타일

삽입된 CSS 스타일은 사이에 작성해야 합니다.

(3) 외부 CSS 스타일(.css는 확장자)

외부 CSS는

CSS를 추가하려면 태그를 사용하세요. 스타일 파일은 HTML 파일에 연결됩니다

<link herf="   .css" rel="stylesheet" type="text/css"/>

CSS 스타일은 근접성 원칙을 따릅니다(단, 가중치의 크기는 판단해야 함)

.클래스 선택기 이름 {CSS 스타일 코드;}

예:

<span>胆小如鼠</span>
<span class="stress">胆小如鼠</stress>
.stress{color:red;}

ID 선택자는 클래스 이름 앞에 "." 대신 "#" 기호가 붙습니다

(1) ID 선택자는 문서 내에서 한 번만 사용할 수 있고, 클래스 선택자는 여러 번 사용할 수 있습니다.

(2) 클래스 선택자 하위 목록 방식을 사용하여 여러 개 설정할 수 있습니다. 동시에 하나의 요소에 대한 항목 스타일. ID 선택기가 작동하지 않습니다.

예:

.stress{color:red;}
.size{font-size:25px;}
<p>到了<span class="stress size">三年级</span>下学期。。。</p>

위 코드의 기능은 "third grade" 세 단어의 텍스트 색상을 빨간색으로, 글꼴 크기를 25px로 설정하는 것입니다

는 지정된 태그 요소의 1세대 하위 요소를 선택하는 데 사용되는 ">" 기호입니다.

예:

.aa > li {border:1px solid red;}

클래스 aa 포함 li 요소에 1px 빨간색 실선 테두리 추가

.first span {color:red;}
<p class="first">.......<span>胆小如鼠</span></p>

(1) 하위 선택자: 직계 자손 - ">"

(2) 하위 선택자 : 모든 하위 항목 - 공백

는 HTML의 모든 태그 요소와 일치

h1,span{color:red;}

은 다음에만 적용되지 않습니다. 특정 특정 HTML 태그 요소이며 해당 하위 항목에 적용됩니다.

예:

p{color:red;}
<p>我小时候<span>胆小如鼠</span></p>

어렸을 때 소심한 생쥐를 포함하여 글꼴이 모두 빨간색이었습니다. (상속관계)

예:

p{color:red;}
.first{color:green;}
<p class="first">我小时候<span>胆小如鼠</span></p>

참고:

p,. p 태그의 CSS 속성과 일치합니다. 브라우저는 가중치에 따라 사용할 CSS 스타일

을 결정합니다(태그의 가중치는 1, 클래스 선택자의 가중치는 10, ID의 가중치). selector is The Weight is 100)

예:

代码                                                                                                      权值
p{color:red;}                                                                                             1
p span{ color:green;}                                                                             1+1=2
.warning{ color:white;}                                                                           10
p span .warning { color:purple;}                                                             1+1+10=12
#footer .note p { color:yellow;}                                                               100+10+1=111

CSS 스타일은 가장 높은 가중치를 설정합니다. - important

예:

p { color:red !important;}
p { color:green;}

글꼴이 빨간색입니다

참고:

스타일 우선순위:

브라우저 기본 스타일< 웹 페이지 작성자 스타일<

HTML의 태그 요소는 일반적으로 세 가지 유형으로 구분됩니다.

(1 ) 블록 수준 요소: - 프레임워크를 구축하는 데 사용됩니다

每个块级元素都从新的一行开始，并且其后的元素另起一行。（独占一行）

元素的高度，宽度，行高以及顶和底边距都可设置。

元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

eg:

<p>   <p>   <h1>...<h6>   <ol>   <ul>   <dl>   <table>   <address>   <blockquote>   <form>

（2）内联元素：——修饰细节

自左向右排列，直到排不下自动换行。宽高无效，随内容而定。

eg:

<a>   <span>   <br>   <i>   <em>   <strong>   <label>   <q>   <var>   <cite>   <code>

（3）内联块级元素——,

和其他元素都在一行上

元素的高度、宽度、行高及顶和底边距都不可设置

18.

转换成块级元素：   a { display:block;}

转换成内联元素：   a { display:inline;}

转换成内联块级元素：   a { display:inline-block;}

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

위 내용은 HTML의 18가지 기본 개념 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!