CSS 프론트엔드에 대한 지식 요약

다음은 CSS 프런트엔드 지식 포인트를 요약한 것입니다. 내용이 꽤 괜찮아서 지금 공유해서 참고용으로 올려드리겠습니다.

1. CSS의 개념: (CascadingStyleSheet)

장점: 1. 콘텐츠와 성능의 분리. (

1. 태그 선택기

태그 이름 ｛ 속성: 속성 값; ｝

2. 클래스 선택기

. 클래스 이름 ｛ 속성: 속성 값을 사용하여 웹 페이지의 콘텐츠와 프레젠테이션을 분리할 수 있습니다. ; ｝< 태그 이름 class="클래스 이름 ”>태그 콘텐츠

3.id selector

#ID 이름｛속성: 속성 값;｝

4 . Union selector

tag Name,.Class name,#ID name｛Attribute:Attribute value;｝

5. Descendant selector

하위 항목 선택자는 앞에 외부 레이블을 작성하고 내부 라벨은 공백으로 구분하세요. 태그가 중첩되면 내부 태그가 외부 태그의 하위 태그가 됩니다. P 스팬{ 속성: 속성 값;}

태그가 태그 내에 중첩되어 있습니다.

태그의 자손이며 공백으로 구분됩니다. 6. 교차점 선택기(참고: 교차점 선택기 사이에는 공백이 없습니다) 이것은 확실히 특정 태그일 수 있습니다

태그 이름. ｛｝

7. 전역 선택자

*｛ 스타일; ｝ CSS의 주석은 /* 주석 */ 형식이어야 합니다.

CSS 스타일을 HTML로

1. 인라인 스타일,

<h1 style=”font-size:18px”></h1>

2. 내장 스타일,

스타일을 헤드에 작성

<style type=”text/css”>
H1{font-size:18px；}
</style>

3. 스타일 및 링크 스타일 가져오기, (외부 CSS 스타일)

링크 유형:

<link href=”style.css” rel=”stylelensheet” type=”text/css”/>

가져오기 유형:

<style type=”text/css”> @import”style.css”;</style>

두 가지의 차이점은 링크가 스타일을 먼저 로드한 다음 페이지를 로드하고 가져오기는 그 반대입니다.

4 스타일 우선순위

기본 선택기 간: ID 선택기 > 클래스 선택기 > 태그 선택기 스타일시트 사이: 인라인 스타일 > 인라인 스타일 > 외부 스타일

Css 스타일 사이: 동일한 선택기에서 두 개의 동일한 문이 이전 문을 덮어씁니다.

5. 박스 모델

박스 모델의 전체 크기 = 테두리-너비-패딩+여백+내용 크기(너비 또는 높이)

6. 플로팅 속성

Float: 값(왼쪽, 오른쪽, 없음, 상속(IE에서는 지원되지 않으며 권장되지 않음))

부동 속성인 클리어와 함께 사용되는 또 다른 속성은 요소의 어느 쪽이 다른 부동 요소를 허용하지 않는지 결정하는 데 사용됩니다. 클리어 속성에는 5개의 값이 있습니다. 다음과 같습니다:

Left는 왼쪽에 플로팅 요소를 허용하지 않습니다.

Right: 오른쪽에 플로팅 요소를 허용하지 않습니다.

Both: 왼쪽과 오른쪽에 플로팅 요소를 허용하지 않습니다.

None 기본값, 부동 요소가 양쪽에 표시되도록 허용

Inherit: Clear 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. IE 브라우저는 이를 지원하지 않으며 권장하지 않습니다. 일반적으로 부동소수점을 지우는 데 사용되는 두 속성 값은 다음과 같습니다. 즉,

7. 위치 지정 속성:

position:absolute; (겹치는 순서)

background-color : 배경색입니다. 투명은 투명한 배경색을 의미합니다.

배경 첨부: 배경 이미지가 클래스 콘텐츠와 함께 스크롤되는지 확인하고, 고정되도록 설정하고, 스크롤하도록 설정합니다.

2. . 컨트롤 요소 표시 방법

1. 표시 방법 표시: 값

2. 상자에서 오버플로 처리: 오버플로: 값

3 커서 모양 설정: 커서: 포인터(작은 손)4. 하이퍼링크 스타일:

a:link{color:#ff0000;} //방문하지 않은 링크

a: 방문함{color:#00CC00}//방문한 링크

a:hover{color:#000FF} //마우스 포인터 이동 링크

a:active{color:#FF00FF}//선택한 링크

정의 스타일은 다음과 같아야 합니다: linkàvisitedàhoveràactive

경험: 인라인 태그는 블록 수준 태그에 포함될 수 있으며 하위 요소가 됩니다. 반대는 사실이 아닙니다. display:block; 블록 수준 요소로 변환 위 내용은 모두의 학습에 도움이 되기를 바랍니다.

위 내용은 CSS 프론트엔드에 대한 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!