찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >#8.8.16요약# 난이도: 관계 선택기

#8.8.16요약# 난이도: 관계 선택기

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

1. CSS란 무엇인가요?

CSS(Cascading Style Sheets):Cascading Style Sheets, 웹 페이지 표현과 콘텐츠를 분리하는 스타일 디자인 언어입니다.

2. CSS는 무엇을 할 수 있나요?
a. 일부 애니메이션 효과
b. 페이지 레이아웃
c. 전체 웹사이트의 테마를 제어합니다
3. CSS 구문 구조?
4. CSS를 어떻게 소개하나요?
a. 인라인 HTML 코드에 CSS 스타일 코드를 직접 작성합니다 
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:#F00;"</span><span style="color: #0000ff;">></span>这里文字是红色<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

b. 임베디드 태그 사이에 CSS 스타일 코드를 작성합니다. 일반적으로 삽입된 CSS 스타일은

사이에 작성됩니다. 
<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;">
span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
      color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">red</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>

c.외부 css 스타일, 별도의 파일로 작성

<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="appearance.css"</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: #0000ff;">/></span>
5. CSS 우선순위
a. 가중치는 동일 근접성 원칙(설정되는 요소에 가까울수록 우선순위가 높음)

우선순위: 인라인 > 임베디드> 외부 (전제: 삽입된 CSS 스타일의 위치는 외부 스타일 뒤에 있어야 합니다. )

b. 가중치가 다릅니다

  • A. 인라인 스타일 시트의 최대 무게는 1000
  • B. 아이디 선택자의 가중치는 100
  • C. 클래스 선택자의 가중치는 10
    • 입니다.
  • D. HTML 태그 선택기의 가중치는 1

CSS 우선순위 규칙:

선택자에는 가중치가 있으므로 가중치가 클수록 우선순위가 높습니다.

B 가중치가 같을 때 나중에 나타나는 스타일 시트 설정이 먼저 나타나는 스타일 시트 설정보다 좋습니다

C 제작자의 규칙은 시청자의 규칙보다 높습니다. 즉, 웹 페이지 작성자가 설정한 CSS 스타일이 브라우저가 설정한 스타일보다 우선순위가 높습니다.

D 상속받은 CSS 스타일이 나중에 지정하는 CSS 스타일만큼 좋지 않습니다.

E 동일한 속성 설정 집합에서 "!important"로 표시된 규칙의 우선순위가 가장 높습니다.

6. CSS 댓글
a. 한 줄 주석 코드 //...
<span style="color: #800000;">//我是一个萌萌哒小男孩！</span>

b. 여러 줄 주석 코드 /*...*/

<span style="color: #008000;">/*</span><span style="color: #008000;">我是一个萌萌哒
小男孩！
嘿嘿嘿~</span><span style="color: #008000;">*/</span>

7. 선택자
와일드카드 선택기
와일드카드 문자는 "모두"를 의미하는 별표 *로 표시됩니다.
예: * { color : red } 여기에서는 모든 요소의 글꼴을 빨간색으로 설정합니다.
b. 요소 선택기
HTML 스타일을 지정하려는 경우 선택기는 일반적으로 p, h1, em, a 또는 html 자체와 같은 HTML 요소입니다.
c.그룹 선택기
일반적으로 동일한 설정을 사용해야 하는 CSS 스타일의 여러 위치가 있는 경우 하나씩 작성하는 것은 피곤한 작업이고 너무 반복적이고 길며 관리하기 어렵습니다. CSS에서는 이러한 선택기를 동일한 설정으로 병합하고, 여러 선택기에 동일한 정의를 적용하고, 선택기를 쉼표로 구분된 그룹으로 결합할 수 있습니다. 예: p,div,a{color:red;}
관계 선택기
A. DIV P  
元素中所有

元素

B. DIV>P  
元素中所有直接子元素

C.DIV+P   所有位于
元素后的第一个

元素

D.DIV~P    
元素的所有相邻兄弟元素

举例：
A.DIV P
<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</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;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>关系选择符<span style="color: #0000ff;"></</span><span style="color: #800000;">title</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;">
        div p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</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>
<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;">p</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;">div</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: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</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: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</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: #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: #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: #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;">html</span><span style="color: #0000ff;">></span>

 

 
 
 
 
 
 
 
 
B.DIV>P
  <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;">
        div>p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</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>

C.DIV+P

<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;">
        div+p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</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>

D.DIV~P

<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;">
        div~p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</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>

 

 

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS를 사용하여 삼각형 만들기다음 기사：CSS를 사용하여 삼각형 만들기

관련 기사

더보기