unit5 CSS3 웹 페이지 요소를 아름답게
1. 스팬 태그
서식
이 없는 줄 수준 레이블 은 특정 단어 나 단어를 강조 표시 할 수 있습니다.
2. 글꼴 스타일
글꼴 스타일 속성
글꼴 스타일 설정 : 기울임 꼴 경사 \ 기울임 꼴, 보통
글꼴 두께 속성
글꼴 두께 설정 : 보통, 굵게, 굵게, 더 밝게
100, 200, 300, 400 (일반), 500, 600, 700, 800, 900
글꼴 크기 속성
글꼴 크기 설정 : 12px
절대 단위 : px (픽셀)
상대 단위 : em, rem
글꼴 모음 속성
글꼴 유형 설정 : "kaishu"
폰트
하나의 문에서 모든 글꼴 속성을 설정합니다.
글꼴 속성 순서 : 글꼴 스타일 → 글꼴 두께 → 글꼴 크기 → 글꼴 유형
순서 : 바람과
굵은 글꼴 : 기울임 꼴 굵은 글꼴 36px "Song Ti";
3. 텍스트 스타일
색상 속성
텍스트 색상 설정 :
color : # A983D8;
color : rgb (0,255,255);
color : rgba (0,0,255,0.5);
- RGB
1. 16 진수 방식은 색상을 나타냅니다 : 처음 두 자리는 빨간색 성분을, 중간 두 자리는 녹색 성분을, 마지막 두 자리는 파란색 성분을 나타냅니다.
2. rgb (r, g, b) : 양의 정수 값은 0 ～입니다. 255
- RGBA
RGB를 기준으로 알파 투명도를 제어하는 매개 변수를 추가하고이 투명도 채널의 값은 0 ~ 1입니다.
텍스트 정렬 속성
요소의 수평 정렬을
왼쪽으로 설정 : 텍스트를 왼쪽으로 정렬합니다. 기본값 : 브라우저에 의해 결정
오른쪽 : 오른쪽 정렬
중앙에 텍스트 : 중간 정렬에
텍스트 양쪽 맞춤 : 텍스트 양쪽 맞춤이 효과적인
결과입니다.
텍스트 들여 쓰기 속성
텍스트 들여 쓰기의 첫 줄
들여 쓰기 설정 : em 또는 px
line-height 속성
텍스트
줄 높이 설정 : px
텍스트 장식 속성
텍스트 의 텍스트 장식 속성 설정 :
없음 : 기본값, 정의 된 표준 텍스트
밑줄 : 텍스트의 밑줄 설정
윗줄 : 텍스트 윗줄 설정 : 텍스트
의 취소 선 설정
수직 정렬 속성
수직 정렬 :
수직 정렬 속성 : 중간, 상단, 하단
4. 텍스트 그림자
텍스트 그림자 속성
text-shadow ： 색상 x-offset y-offset blur-radius ；
5. 의사 유형 스타일
태그 이름 : 의사 클래스 이름 {declaration;}
의사 클래스의 순서를 설정합니다. a : link-> a : visited-> a : hover-> a : active
링크
클릭하지 않았을 때의 하이퍼 링크 스타일
: a : link {color : # 9ef5f9;}
a : 방문
클릭하면 하이퍼 링크 스타일
a : visited {color : # 333;} 를 방문합니다 .
a : hover
마우스가있는 하이퍼 링크의 스타일
a : hover {color : # ff7300;}
a : 활성
릴리스되지 않은 하이퍼 링크 스타일
a : active {color : # 999;}를 마우스로 클릭합니다 .
6. 목록 스타일
1. 목록 스타일 유형 속성
- 없음
표시
되지 않은 기호 목록 스타일 유형 : 없음;
- 디스크
채워진 원, 기본 유형
목록 스타일 유형 : 디스크;
- 원
빈 원;
목록 스타일 유형 : 원
- 광장
단색 정사각형
목록 스타일 유형 : 정사각형;
- 소수
숫자
목록 스타일 유형 : 십진수
2. 목록 스타일 위치 속성
목록 스타일 위치 : 내부 / 외부
- 내부
목록 항목 마커는 텍스트 내에 배치되고 주변 텍스트는 마커에 따라 정렬됩니다.
- 외부
기본값. 텍스트 왼쪽에 표시를 유지하십시오. 목록 항목 마커는 텍스트 외부에 배치됩니다.
3. 목록 스타일 이미지 속성
목록 스타일 이미지 : url ( "bang.gif");
- URL
이미지 경로
- 없음
기본. 그래픽이 표시되지 않습니다.
4. 목록 스타일 속성
li { list-style : decimal inside url ( "bang.gif"); }
"list-style : circle inside;"와 같은 값 중 하나를 설정할 필요도 없습니다. 설정되지 않은 속성은 기본값을 사용합니다.
기본값 : 디스크 외부 없음
7. 배경 스타일
1, 배경색 속성
배경색
- 배경색 값 : 16 진법
- 투명한
2. 배경 이미지 속성
배경 이미지
background-image : url ( "image path");
- 없음
기본값. 배경 이미지 없음
- URL ( 'URL')
이미지 경로
3. 배경 위치 속성
배경 위치
1. Xpos Ypos : 단위 : px, Xpos는 수평 위치, Ypos는 수직 위치를 의미합니다.
2. X % Y % : 배경의 위치를 백분율로 표시
3. X 및 Y 방향의
키워드 : 1) 수평 방향의 키워드 :
왼쪽, 중앙, 오른쪽
2) 수직 방향의 키워드 :
상단, 중앙, 하단
4. 배경 반복 속성
배경 반복 모드 :
반복 : 기본값, 가로 및 세로 방향을 따라 타일링
없음 반복 없음 : 배경 이미지가 한 번만 표시됨
반복 -x : 배경 이미지가 가로 방향으로 반복됩니다.
repeat-y : 배경 이미지가 수직 방향으로 반복됩니다.
5. 배경 속성
background : # C00 (배경색) url (../ image / arrow-down.gif) (배경 이미지) 205px 10px (배경 위치 지정) 반복 안 함 (배경이 반복 표시되지 않음);
순서가 맞지 않게 설정할 수 있습니다 .
6, 배경 크기 속성
- 자동
기본값, 배경 이미지를 그대로 사용
- 백분율
백분율 값을 사용하는 경우 배경 이미지의 너비와 높이를 상위 요소의 백분율로 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다.
- 덮개
전체 배경 이미지가 전체 요소를 채우기 위해 확대됩니다.
- 있다
배경 이미지가 자체 종횡비를 유지하고 정의 된 배경 영역에 맞게 배경 이미지를 너비 또는 높이로 조정합니다.
- 길이
배경 이미지의 높이와 너비를 설정합니다.
첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다.
8. CSS3 그라디언트
선형 그래디언트
색상은 직선을 따라 전환됩니다 : 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로, 위에서 아래로, 등
선형 그라디언트 (위치 (그라데이션 방향), color1 (첫 번째 색상), color2 (두 번째 색상), ...)
Webkit 커널과 호환되는 브라우저
-webkit-linear-gradient (position, color1, color2, ...)
- linear-gradient () 함수
- 위치
• 왼쪽
왼쪽으로 : 오른쪽에서 왼쪽으로 그라데이션을 설정합니다.
• 오른쪽으로
오른쪽으로 : 왼쪽에서 오른쪽으로 그라디언트를 설정합니다.
• 상단으로
to top : 아래에서 위로 그라디언트를 설정합니다.
• 아래로
to bottom : 위에서 아래로 그라디언트를 설정합니다.
방사형 그래디언트
원형 또는 타원형 그라디언트, 색상이 더 이상 직선을 따라 변경되지 않고 시작점에서 모든 방향으로 혼합됩니다.
브라우저 호환성
- IE 브라우저
IE 브라우저는 Trident 커널입니다. 접두사 추가 : -ms-
- Chrome 브라우저
Chrome 브라우저는 Webkit의 핵심입니다. 접두사 추가 : -webkit-
- Safari 브라우저
Safari 브라우저는 Webkit의 핵심입니다. 접두사 추가 : -webkit-
- 오페라 브라우저
Opera 브라우저는 Blink 커널입니다. 접두사 추가 : -o-
- Firefox 브라우저
Firefox 브라우저는 Mozilla 커널입니다. 접두어 추가 : -moz-