CSS

CSS는 HTML 요소를 표시하는 브라우저가 스타일 시트를 읽을 때, 그것은이 스타일 시트를 따르도록 문서를 포맷하는 방법을 정의합니다.

CSS의 예

선택기와 선언 : 각 섹션에 대한 CSS 스타일은 두 가지 구성 요소로 구성되어 있습니다. 또한 포함 문은 속성과 속성 값을 포함한다. 각 문장 뒤에 세미콜론 (;)으로 종료합니다.

CSS 코멘트

/ * 이것은 주석입니다 * /

세 가지 방법의 CSS 도입

내부 스타일

초점은 페이지의 <head> </ head>의 <스타일>의 태그 </ 스타일> 태그 쌍에 기록 된 CSS 스타일을 포함됩니다. 다음과 같은 형식입니다 :

<머리> 
    <메타 문자 집합 = "UTF-8"> 
    <제목> 제목 </ 제목> 
    <스타일> 
        P { 
            배경 색 : #의 2b99ff ; 
        } 
    </ 스타일> 
</ head>

외부 스타일

외부 CSS 스타일은 별도의 파일에 작성하는 것입니다, 다음 페이지로 소개했다. 이 방법을 권장합니다.

<링크 HREF = "mystyle.css"REL = "스타일"TYPE = "텍스트 / CSS"/>

인라인 스타일

<P 스타일 = "색상 : 빨간색">. 안녕하세요 세계 </ P>

CSS 선택기

기본 선택

/ * 태그 선택 * / 
P { 색상 : "레드" ;} / * ID 선택 * / 
#의 I1 { 
  배경 색 : 빨강 ; 
} / * 클래스 선택 * / 
.c1 { 
  글꼴 크기 : 14px ; 
} 
p.c1 { 
  색상 : 빨강 ; 
} / * 
참고 : 
스타일 클래스 이름은 (일부 브라우저가 인식 할 수없는) 숫자로 시작하지 마십시오. 
태그 클래스 속성 여러 사용 공간이있는 경우. * /

선택자

* { 
  색상 : 흰색 ; 
}

조합 선택

/ * 다음과 같은 중첩 포함하는 모든 후손 선택기 사업부 범위 * / 
        DIV 범위 { 
            색상 : 레드 ; 
        } / * 아래 DIV 스팬 선택 아들, 중첩 포함하지 않는 * / 
        DIV> 범위 { 
            색상 : 아쿠아 ; 
        } / * 다음 선택 : 즉시 즉시 DIV 다음 첫 번째 스팬 다음 * / 
        DIV + 스팬 { 
            색상 : 오렌지 ; 
        } / * 형제 선택 : 다음 라벨 사업부의 모든 동일한 수준의 모든 다음 스팬 * / 
        DIV ~ 스팬 { 
            색상 : 브라운 ;}

선택기 속성

/ * 지정된 속성 요소를 선택. * / 
P [TITLE] { 
  색상 : 레드 ; 
} / * 지정된 속성 및 값을 갖는 요소를 선택. * / 
P [제목 = "213"] { 
  색상 : 그린 ; 
}

그리고 중첩 된 그룹

패킷

동일한 스타일의 복수의 요소는 우리가 스타일을 설정, 각 요소에 대해 반복 될 필요가없는 경우는, 소자가 선택기들 간의 균일 한 패턴을 배치 셀렉터 쉼표로 구분 패킷을 사용할 수있다.

예를 들면 :

DIV, P { 
  색상 : 빨강 ; 
} / * 빨간색 글꼴 세트의 상기 및 P는 DIV 태그 코드 라벨. 
일반적으로, 우리는 더 명확하게 작성하는 두 가지 라인으로 구분됩니다 * / 
DIV을, 
ρ- { 
  색상 : 빨강 ; 
}

중첩

여러 선택은 예를 들어, 조합하여 사용할 수 있습니다 . C1 모든 내부 클래스 P는 태그 빨간색으로 글꼴 색상을 설정합니다.

.c1 P { 
  색상 : 빨강 ; 
}

의사 클래스 선택기

/ * 링크는 방문하지 않은 * / 
링크, • { 
  색상 : #의 FF0000
 } / * 링크 (연결 상태) 위로 마우스를 이동 * / 
A : 가져가 { 
  색상 : #의 FF00FF
 } / * 선택된 링크 (일시 중지 마우스) * /  
A : 활성 { 
  색상 : #의 0000FF
 } / * 링크 (마우스 클릭 상태) 방문 * / 
A : 방문 { 
  색상 : # 00FF00
 } / * 취득 초점을 입력 입력 상자 스타일 * / 
입력 : 초점 { 
  개요 : 없음 , 
  배경 색







: #eee ; 
}

의사 요소 선택기

/ * 최초 편지 
일반적으로 특별한 스타일의 첫 번째 문자에 제공 * / 
P : 응급 편지 { 
  글꼴 크기 : 48px ; 
  색상 : 빨강 ; 
} / * 전 * / / * 각 <P> 요소 전에 내용을 삽입 * / 
P : 전 { 
  콘텐츠 : "*" ] 
  색상 : 레드 ; 
} / * 후 * / / * 각 <p> 요소 내용 뒤에 삽입 * / 
P : 후 { 
  함량 : "[?]" ] 
  색상 : 블루 ; 
}










/ * 이전과 이후 더 명확한 플로트보다 * /

우선 순위 선택

<! DOCTYPE HTML> 
<HTML LANG = "EN"> 
<head> 
    <메타 문자 집합 = "UTF-. 8"> 
    <제목> 제목 </ 제목> 
    <확인해 = "이 스타일 시트"href를 = "mycss.css"을 링크> 
    < 스타일> 
        / * 
            같은 상황에서 1. 선택 : 원칙 근처 
            2. 선택 서로 다른 경우 : 
            인라인> 아이디 선택> 클래스 선택> 태그 선택 
        * / 
        #의 D1 { 
            색상 : 빨강 ; 
        } 
        .c1 { 
            색상 : 오렌지 ; 
        } 
        P { 
            색상 : GreenYellow ;
        } 

    </ 스타일>
</ head> 
<body> 
<p 형 위에서 언급 한 id = "D1"클래스 = "C1"스타일 = "색상 : 그린"> 클래스에가는, 내가 먹고 싶은 끝난 </ ρ->! 
</ BODY> 
</ HTML>

요약 : 더 정확한 선택 범위를 더 우선 순위

도로 학습 CSS 기반 학습의 프런트 엔드

CSS