집 > 기사 > 웹 프론트엔드 > CSS 계단식 스타일 시트에 대한 자세한 설명

CSS 계단식 스타일 시트에 대한 자세한 설명

高洛峰원래의: 2017-03-14 15:56:052191검색

=======================

CSS 캐스케이딩스타일 시트

= =======================

이름 지정 규칙: 문자, 숫자 또는 밑줄과 빼기 기호를 사용하세요. 구성, 숫자로 시작하지 마세요

1. CSS 구문

----------------- - -----------

형식: 선택기 {속성:값;속성:값;속성:값;....}

선택기는 선택기라고도 합니다

CSS의 주석 : /* ... */

2. HTML에서 CSS 스타일을 사용하는 방법(html에 CSS를 삽입하는 방법)

------------------- -- ---------------------

1. 인라인 모드(인라인 스타일)

CSS 스타일을 설정하려면 HTML 태그의 스타일 속성을 사용하세요.

형식: <html 태그 style="attribute:value;attribute:value;. ..."> ;수정된 콘텐츠

font-family:official script"> HTML에서

에서 CSS 스타일을 사용하는 방법 기능: 이 태그에만 적용됩니다.

2. 내부 방식(임베디드 스타일)

은 head 태그에 CSS 스타일을 설정하는 태그

형식:

기능: 현재 페이지 전체에 적용

3. 외부 가져오기 방법(external link in)

3.1(권장)은 head 태그에 태그를 사용하여 CSS 파일을 가져온 후 여기에 적용하는 것입니다. CSS 스타일 설정 구현 페이지

형식:

3.2에서도 import를 사용할 수 있으며 스타일 태그에서 CSS 파일을 가져옵니다.

예:

기능: 웹사이트 전체에서 작동

우선순위 : 스타일이 충돌할 때 근접성 원칙이 채택됩니다. CSS 속성 수정된 내용에 가장 가까운 속성이 우선적으로 적용됩니다.

스타일 충돌이 없으면 오버레이 효과가 사용됩니다.

3. **css2 선택기:

---- ------------------------------------------------

1. html 선택기( 태그 선택기)

는 html 태그를 p{....}와 같은 선택기

로 사용하는 것입니다. 모든 p 웹 페이지 태그에서 이 스타일을 사용합니다

h2{....} 웹 페이지의 모든 h2 태그가 이 스타일을 사용합니다

2. class 클래스 선택기( 포인트를 사용합니다. 선택기를 사용하여 사용자 정의 이름(클래스 이름) 정의)

정의: .클래스 이름 {style....} 익명 클래스

기타 기호 이름 선택.클래스 이름{style....}

사용: ...

.mc{color:blue;} /* 클래스 속성 값이 mc인 모든 항목은 이 스타일을 채택합니다*/

p.ps{color:green;} / *p 태그의 class 속성 값만 ps입니다. 이 스타일이 사용됩니다.*/

참고: 클래스 선택기는 웹 페이지

3. ID 선택기

정의: #id 이름 {style....}

사용: ... < ;/html 태그>

참고: ID 선택기는 웹페이지에서 한 번만 사용됩니다.

선택기의 우선순위: from 가장 큰 것 작은 것으로 이동 [ID 선택기]->[클래스 선택기]->[html 선택기]->[

html 속성]

4. 관련 선택자(선택자 포함)

형식: 선택자 1 선택자 2 선택자 3...{Style....}

예: 테이블 a{. ...} /*table 태그의 a 태그만 이 스타일을 채택합니다*/

h1 p{color:red} /*h1 태그의 p 태그만 이 스타일을 채택합니다*/

5. 선택자 조합(선택자 그룹)

형식: 선택자 1, 선택자 2, 선택자 3...{스타일....}

h3 ,h4,h5,#one,.one{color:green;} /*h3, h4 및 h5는 모두 이 스타일을 사용합니다*/

의사 클래스 선택(의사 요소) 선택기:

형식: 태그 이름: 의사 클래스 이름 {style....}

a:link {color: #FF0000; 텍스트 장식: 없음} /* 방문하지 않은 링크*/

a:visited {color: #00FF00; text-꾸밈: 없음} /* 방문한 링크*/

a:hover {color: #FF00FF: underline} /* 마우스 오버 link*/

a:active {color: #0000FF; text-designation: underline} /* 링크 활성화*/

7. 속성 선택자:

...

8. 기타 유사 클래스 선택자

. ..

4. CSS3의 선택자(이해)

--- ------ ------------------------

1. 관계 선택기:

div>p는 모든 하위 요소 p를 선택합니다.

div+p는 div 요소 바로 뒤의 p 요소를 선택합니다.

div~p는

2. 속성 선택기:

[속성] 속성 속성을 가진 요소를 선택합니다.

[속성=값] 속성 속성 및 속성 값이 값과 동일한 요소를 선택합니다.

[속성~=값] 속성 속성이 있는 요소를 선택하세요. 속성 값은 공백으로 구분된 단어 목록이며 그 중 하나는 value와 같습니다.

[attribute|=value]는 att 속성이 있는 E 요소를 선택하고 속성 값은 val로 시작하고 커넥터 "-"로 구분된 문자열 입니다.

[attibute^=value] 속성 속성이 있고 값이 값으로 시작하는 E 요소와 일치합니다.

[attribute$=value] 속성 속성이 있고 값이 끝나는 E 요소와 일치합니다. 값

[속성*=값]은 속성 속성과 값을 포함하는 값

3. 구조적 의사 클래스 선택기:

::first-letter는 객체 내 첫 번째 문자의 스타일을 설정합니다.

::first-line은 개체 내 첫 번째 줄의 스타일을 설정합니다.

:before는 (객체 트리의 논리적 구조에 따라) 객체 이전에 발생하는 내용을 설정합니다.

:after 객체 이후에 일어나는 일을 설정합니다(객체 트리의 논리적 구조에 따라).

:lang(언어)는 특수 언어를 사용하여 E 요소와 일치합니다.

:element1~element2:

:first-of-type 동일한 유형의 첫 번째 형제 요소와 일치

:last- of-type동일한 유형의 마지막 형제 요소와 일치

:only-of-type은 동일한 유형의 유일한 형제 요소와 일치

:only-child는 유일한 하위와 일치 상위 요소의 요소

:nth-child(n)는 상위 요소의 n번째 하위 요소와 일치합니다.

:nth-last-child(n)는 상위 요소의 두 번째 n번째 형제 요소와 일치합니다. 동일한 유형

:last-child()는 상위 요소의 마지막 하위 요소와 일치합니다.

:root는 문서의 루트 요소와 일치합니다. HTML에서 루트 요소는 항상 HTML입니다

:empty는 하위 요소(텍스트 노드 포함)가 없는

요소와 일치합니다. 4. * 상태 의사 클래스 선택기

:link는 방문하기 전 하이퍼링크a의 스타일을 설정합니다.

:visited는 링크 주소를 방문했을 때 하이퍼링크 a의 스타일을 설정합니다.

:active는 요소가 활성화될 때 마우스 클릭과 놓기 사이에 발생하는 이벤트를 설정합니다. ) 스타일

*:hover는 요소에 마우스를 올렸을 때 요소의 스타일을 설정합니다.

*:focus는 요소에 요소를 올렸을 때 스타일을 설정합니다. 포커스를 얻습니다

:target 관련 URL이 가리키는 E 요소와 일치합니다.

:enabled 사용자 인터페이스에서 사용 가능한 상태의 요소와 일치합니다.

:disabled 요소와 일치합니다. 사용자 인터페이스의 비활성화된 상태

:checked 사용자 인터페이스에서 선택한 요소와 일치

:not(selector) 선택기 선택기가 포함되지 않은 요소와 일치

:: Selection 객체가 선택될 때 설정됩니다. 스타일

5. 기타 의사 클래스 선택자

E:not(s): { 속성}

단순 선택자 s와 일치하지 않는 모든 요소 E

와 일치합니다. >====================== ======================== ========================== =================

5. CSS에서 일반적으로 사용되는 속성:

---- -------------------------- ----------- -------------------------- ---------

1. 색상 속성 :

a. HSL 색상: 색상(H), 채도(S), 명도(L) 색상 채널의 변화와 중첩을 비교하여 다양한 색상을 얻습니다.

background-color: hsl( 240,100%,50%);색상:흰색;

b. HSLA 색상: 색상(H), 채도(S), 밝기(L), 투명도(A)

배경- 색상: hsla(0,100%,50%,0.2);

*c.RGB 색상: 빨간색(R), 녹색(G), 파란색(B)의 세 가지 색상 채널 변경

배경색: rgba(200,100,0);

d. RGBA 색상: 빨간색(R), 녹색(G), 파란색(B), 투명도(A)

background-color: rgba(0,0,0,0.5);

*e.

그림

투명도 설정 img{ opacity:0.25;}

2. 글꼴 속성: 글꼴

글꼴

font-size

: 글꼴 크기: 20px, 상위 개체의 비율 기준 60%

*font-family: 글꼴: 송나라, Arial

font-style

: 일반 일반 기울임꼴 기울임꼴

글꼴 -weight: 글꼴 굵게: 굵게

font-variant: small

-caps 작은 대문자 글꼴

font- Stretch: [이해] 텍스트의 늘이기는 브라우저에 표시되는 글꼴의 일반 너비에 상대적입니다(대부분의 브라우저에서는 지원되지 않음).

3. 텍스트 속성:

text-indent

: 첫 번째 줄 들여쓰기: text-indent:30px

text-overflow: 텍스트 오버플로에 생략 표시(...)를 사용할지 여부입니다. clip

|줄임표(생략표시 표시)

*text-align: 텍스트 위치: 왼쪽

가운데

오른쪽 text-transform: 객체의 텍스트 대소문자: capi

talize(첫 글자)|대문자 대문자|소문자 소문자

* text-꾸밈: 글꼴 선 그리기: 없음, 밑줄, 줄 관통 text-dress-line: [이해] 텍스트 장식 선의 위치(브라우저와 호환되지 않음)

text-shadow

: 텍스트에 그림자 및 흐림 효과가 있는지 여부

vertical-align: 텍스트의 수직 정렬

방향: 텍스트 흐름 방향. ltr | rtl

white-space

:nowrap /*모든 텍스트를 같은 줄에 표시하도록 합니다*/

letter-spacing

: 단어 또는 문자의 간격

word-spacing: 단어의 간격

line-height : 줄 높이

*color: 글꼴 색상

*4. Border:

border: 너비 스타일 color;

border-color

;

border-style 테두리 스타일: 실선 구현, 점선, 파선

테두리 너비:

테두리 왼쪽 색상;

테두리 왼쪽 스타일;

테두리 왼쪽 너비:

CSS3 스타일

border-radius: 둥근 모서리 처리

box-shadow: 객체 그림자 설정 또는 검색

배경 속성

: 배경

*배경색: 배경색

*배경이미지

: 배경 이미지

배경 반복: 반복할지, 반복할지(타일식)

*배경 위치: 위치 지정

배경 부착: 배경 고정 여부,

스크롤: 기본값. 배경 이미지 는 개체의 내용과 함께 스크롤됩니다.

고정: 배경 이미지가 고정됩니다. 🎜> *

배경 -크기

: 배경 크기, 예: 배경 크기 :100px 140px;

다층 배경:

background:url(test1.jpg) 반복 없음 스크롤 10px 20px,url( test2.jpg) 반복 없음 스크롤 50px 60px,url (test3.jpg) 반복 없음 스크롤 90px 100px; > box;

배경-클립

패딩

-box,padding-box, padding-box; background-size:50px 60px,50px 60px,50px 60px;

6. *내부 패딩(내부 패치) padding: padding:10px;

padding-top

과 같이 객체의 네 면에서 내부 여백을 검색하거나 설정합니다. 개체의 위쪽 가장자리

padding-right

: 개체의 위쪽 가장자리의 내부 여백을 검색하거나 설정합니다. 오른쪽 내부 패딩

padding -bottom: 객체 아래 내부 패딩을 검색하거나 설정

padding-left: 객체 하단의 내부 패딩을 검색하거나 설정 왼쪽 내부 여백

7. *외부 패딩(외부 패치)

margin: 개체의 네 면에 있는 외부 여백을 검색하거나 설정합니다. :10px; margin:5px auto;

margin-top

: 개체 위쪽 가장자리의 확장된 여백을 검색하거나 설정합니다.

margin-right: 개체 오른쪽의 확장 여백을 검색하거나 설정

margin-bottom: 개체 하단의 확장된 여백을 검색하거나 설정

margin-left: 개체 왼쪽의 확장된 여백을 검색하거나 설정합니다.

8. 위치 위치 지정

*위치: 위치 지정 방법 : 절대(절대 위치) , 고정(상대 위치 참조, 실내의 상대 절대 위치 지정에 활용 가능)

z-index

: 쌓이는 순서, 값이 클수록 높아집니다.

*top: 가장 최근에 배치된 상위 항목의 상단을 기준으로 개체 위치를 검색하거나 설정합니다. right: 가장 오른쪽에 있는 개체의 위치를 검색하거나 설정합니다. 최근에 배치된 상위 항목

하단: 가장 최근에 배치된 상위 항목의 하단을 기준으로 개체의 위치를 검색하거나 설정합니다. *left: 왼쪽을 기준으로 개체의 위치를 검색하거나 설정합니다. 가장 최근에 배치된 상위

9. 레이아웃

표시

: 표시 여부 및 방법: 숨김 없음, 블록 블록 표시.. .

float

: 객체의 상태와 방법을 나타냅니다.

float

: 값 없음 | 왼쪽 | 오른쪽 *

지우기

: clear float: 없음 | 왼쪽 | 오른쪽 | 양면

가시성

: 개체 표시 여부를 설정하거나 검색합니다. 보이는|숨겨진|접어집니다. 표시 속성과 달리 이 속성은 숨겨진 개체 클립이 차지하는 물리적 공간을 예약합니다. 개체의

가시 영역

을 검색하거나 설정합니다. 영역 밖의 부분은 투명합니다. ract(top-right-bottom-left) 예:clip:ect(auto 50px 20px auto) 위쪽과 왼쪽은 잘리지 않습니다. 오른쪽은 50, 아래쪽은 20입니다.

*overflow : 너머 숨김: 숨김, 표시: 내용 잘라내지 않음

overflow-x: 지정된 너비를 초과하는 경우 내용 관리 방법: 표시 숨김 | 🎜>

overflow-y

: 콘텐츠가 지정된 높이를 초과할 때 콘텐츠를 관리하는 방법

10. 유연한 상자 유연한 상자(자세한 내용은 설명서 참조)

box-orient: 유연한 상자 모델

객체의 하위 요소 배열을 설정하거나 검색합니다. horizontal(horizontal)|vertical(vertical)

box-pack은 유연한 상자 모델 객체의 하위 요소 정렬을 설정하거나 검색합니다.

box-align은 Flexbox 모델 객체의 하위 요소 정렬을 설정하거나 검색합니다.

box-flex는 플렉스 박스 모델 객체의 하위 요소가 남은 공간을 할당하는 방법을 설정하거나 검색합니다.

box-flex-group은 플렉스 박스 모델 객체의 하위 요소가 속하는 그룹을 설정하거나 검색합니다.

box-ordinal-group은 Flexbox 모델 객체의 하위 요소 표시 순서를 설정하거나 검색합니다.

box-direction은 유연한 상자 모델 객체의 하위 요소 순서가 반전되는지 여부를 설정하거나 검색합니다.

box-lines는 유연한 상자 모델 객체의 하위 요소가 새 줄에 표시될 수 있는지 여부를 설정하거나 검색합니다.

11. 사용자 인터페이스 사용자 인터페이스

*cursor 마우스 포인터가 채택하는 커서 모양은 미리 정의된 시스템입니다. 포인터 작은 손, URL 사용자 정의

Zoom 개체의 확대/축소 비율을 설정하거나 검색합니다: 보통|5배|200% 백분율

box-sizing 개체의 상자 모델 구성 모드를 설정하거나 검색합니다. 물체. content-box | border-box

content-box: 패딩과 테두리는 정의된 너비와 높이에 포함되지 않습니다.

border-box: 정의된 너비와 높이 내에 패딩과 테두리가 포함됩니다.

크기 조정은 개체의 영역에서 사용자가 요소의 크기를 확대/축소하고 조정할 수 있는지 여부를 설정하거나 검색합니다.

없음: 사용자가 요소의 크기를 조정하는 것을 허용하지 않습니다.

둘 다: 사용자가 요소의 너비와 높이를 조정할 수 있습니다.

가로: 요소의 너비를 사용자가 조정할 수 있습니다.

세로: 요소의 높이를 사용자가 조정할 수 있습니다.

outline 복합 속성: 객체 외부의 선 윤곽선을 설정하거나 검색합니다.

outline-width 객체 외부의 윤곽선 선 윤곽선의 너비

outline-style 객체 외부의 선 윤곽선의 스타일을 설정하거나 검색합니다

outline-color 객체 외부의 선 윤곽선을 설정하거나 검색합니다. 선 윤곽선의 색상

outline-offset 객체 외부의 선 윤곽선의 오프셋 위치 값을 설정하거나 검색합니다.

nav-index 개체의 탐색 순서를 설정하거나 검색합니다.

nav-up 객체의 탐색 방향을 설정하거나 검색합니다.

nav-right 객체의 탐색 방향을 설정하거나 검색합니다.

12. 다중 열

열 객체의 열 수와 각 열의 너비를 설정하거나 검색합니다.

열 너비 설정 또는 검색 개체의 각 열 너비

열-count 개체의 열 수를 설정하거나 검색합니다.

컬럼 간격 사이의 간격을 설정하거나 검색합니다. 객체의 열

column-rule 객체의 열 사이의 테두리를 설정하거나 검색합니다.

column-rule-width 객체의 열 사이의 테두리 두께를 설정하거나 검색합니다

컬럼 -rule-style 객체의 열 사이의 테두리 스타일을 설정하거나 검색합니다.

column-rule-color 객체의 열 사이의 테두리 색상

columns-span 이미지 요소가 모든 열에 걸쳐 있는지 여부

컬럼 채우기 개체의 모든 열 높이가 균일한지 여부

열-break-before 개체에 line break before

column-break -after 객체 뒤에서 줄이 끊어졌는지 여부

column-break-inside 객체 내부에서 줄이 끊어졌는지 여부

13. Table 관련 속성:

table-layout 테이블의 레이아웃 알고리즘을 설정하거나 검색합니다.

border- Collapse 테이블의 행과 셀 가장자리가 함께 병합되는지 또는 표준 HTML 스타일separate Separate |collapse

border-spacing 테이블 테두리가 독립된 경우 행과 셀 테두리의 가로 및 세로 간격을 설정하거나 검색합니다.

caption-side 캡션 개체가 있는 테이블의 측면을 설정하거나 검색합니다. 위쪽 | 오른쪽 | 아래쪽 | 왼쪽

빈 셀 셀에 내용이 없을 때 셀 테두리 표시 여부를 설정하거나 검색합니다.

14. 전환 전환:

전환 개체 검색 또는 설정

변환 중 전환 효과

전환 속성은 객체의 전환과 관련된 속성을 검색하거나 설정합니다.

전환 기간은 객체의 전환 기간을 검색하거나 설정합니다.

전환 타이밍-함수는 검색하거나 설정합니다. 객체의 전환

전환 지연 유형은 객체의 지연된 전환 시간을 검색하거나 설정합니다.

15. 애니메이션 애니메이션

animation 객체에 적용된 애니메이션 효과를 검색하거나 설정

animation-name 객체에 적용된 애니메이션 이름을 검색하거나 설정

animation-duration 애니메이션의 지속시간을 검색하거나 설정 객체 애니메이션

animation- timing-function은 객체 애니메이션의 전환 유형을 검색하거나 설정합니다.

animation-delay는 객체 애니메이션의 지연 시간을 검색하거나 설정합니다.

animation-iteration -count는 객체 애니메이션 루프Numbers

를 검색하거나 설정합니다. animation-direction은 객체 애니메이션이 루프

animation-play-에서 반대 방향으로 움직이는지 여부를 검색하거나 설정합니다. state는 객체의 상태를 검색하거나 설정합니다. animation

animation- fill-mode 애니메이션 시간 이외의 객체 상태를 검색하거나 설정합니다.

16. 2D 변환 2D 변환:

변환 객체의 상태를 검색하거나 설정합니다. Transform

변환-원점 객체의 변환이 참조하는 원점을 검색하거나 설정합니다

17. 미디어 쿼리 속성미디어 쿼리

너비는 출력 장치에서 페이지의 표시 영역 너비를 정의합니다.

높이는 출력 장치에서 페이지의 가시 영역 높이

device-width는 출력 장치 화면의 가시 너비를 정의합니다.

device-height는 화면의 가시 높이를 정의합니다. 출력 장치

방향은 '높이'가 '너비'보다 크거나 같은지 여부를 정의합니다. 세로 값은 예, 가로는 아니오를 나타냅니다.

aspect-ratio는 '너비'와 '높이'의 비율을 정의합니다.

device-aspect-ratio는 '장치'를 정의합니다. -width' ''장치 높이'의 비율입니다. 일반적인 모니터 비율: 4/3, 16/9, 16/10

device-aspect-ratio는 'device-width'와 'device-height'의 비율을 정의합니다. 예를 들어 일반적인 모니터 비율: 4/3, 16/9, 16/10

색상은 각 출력 장치 세트의 색상 원본 수를 정의합니다. 컬러 장치가 아닌 경우 값은 0

입니다. 컬러 인덱스는 출력 장치의 색상 조회 테이블에 있는 항목 수를 정의합니다. 색상 조회 테이블을 사용하지 않는 경우 값은 0입니다.

monochrome는 단색 프레임 버퍼에 포함된 픽셀당 흑백 원본 수를 정의합니다. 흑백 장치가 아닌 경우 값은 0입니다

해상도는 장치의 해상도를 정의합니다. 예: 96dpi, 300dpi, 118dpcm

스캔은 TV 장비의 스캔 프로세스를 정의합니다.

그리드는 출력 장치가 래스터 또는 도트 매트릭스를 사용하는지 쿼리하는 데 사용됩니다. 1과 0만 유효한 값입니다. 1은 예, 0은 아니요를 나타냅니다.

위 내용은 CSS 계단식 스타일 시트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS 상자 모델과 블록 수준 및 인라인 요소에 대한 자세한 설명다음 기사：CSS 상자 모델과 블록 수준 및 인라인 요소에 대한 자세한 설명