HTML5 3일차 노트

CSS

html: 구조

css: 성능

CSS: 캐스케이딩 스타일 시트

기능: html을 수정하고 아름답게 만듭니다. 구조와 스타일의 분리가 이루어집니다.

캐스케이딩 스타일 시트

DIV+CSS 사용의 장점:

1. 성능과 콘텐츠의 분리

2. 페이지 탐색 속도 향상

3. 유지 관리 및 수정 용이

스타일 시트

선택기

스타일

구문: 선택기 {스타일 1: 스타일 값 1; 2 : 스타일 값 2;}

스타일 시트 분류:

1, 인라인 스타일 시트(구조와 표현의 분리 없음, 최우선 순위)

구문: < ;p >123

2, 내부 스타일 시트(구조와 표현이 분리되지 않음)



3, 외부 스타일 시트(구조와 표현의 분리 실현;

1) 링크된 스타일 시트:





2) 가져온 스타일 시트(거의 사용되지 않음)

구문:

스타일 시트 우선순위:

근접성 원칙

인라인 스타일 시트가 가장 높은 우선순위를 가짐

댓글:

html 댓글

css 댓글/*CSS*/

댓글 중첩 불가

선택기:

기본 선택기:

1) 전역 선택기: *는 구문을 나타냅니다. *{style}

*는 모든 태그를 나타냅니다. 모든 레이블 스타일이 변경됩니다.

2) 라벨 선택기

p{ }

h1{ }

특징: 같은 라벨은 같은 스타일

3) 카테고리 선택기

먼저 정의한 후 인용

정의: .class 선택기 이름 {style}

인용: class="category Selection 장치 이름 "

특징: 한 번 정의하면 여러 번 사용할 수 있습니다. 카테고리 선택자를 2개 사용할 경우 공백을 사용하세요

4) ID 선택자

를 먼저 정의한 후 인용부호로 묶습니다

정의: #ID 선택자 이름 {style}

인용: id="ID 선택기 이름"

특징: 고유

같은 이름의 ID는 같은 페이지에 한 번만 나타날 수 있습니다

높음 우선순위

선택기 우선순위:

인라인 스타일 시트>id>.class>element(태그 선택기)>*(전역 선택기)

가중치: 1000 >100> ; 10 > 1 > 0

가중치 계산

색상값 표현:

1, 단어 표현 방법: red;green;blue;yellow; orange;pink;purple;black;white;

2, 16진수 표기: (0-9 a-f) #ff0000 #RedRedGreenGreenBlueBlue

#f00 #빨간색, 녹색 및 파란색

3, rgb 표현: (0-255)

배경색:rgb(255,0,0) rgb(빨간색, 녹색, 파란색)

rgb (255,255,255) 흰색

4, rgba 표기법:

a는 투명도를 나타냅니다(0-1 사이의 변경, 0은 완전히 투명함을 나타내고 1은 불투명함을 나타냄)

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

background-color:rgba(255,0,0,.5)

rgb가 같으면 회색을 나타냅니다

위 HTML5 3일차 노트 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!