CSS 선택기, 글꼴/텍스트, 배경

CSS의 기본 사용

태그에 직접 쓰기

스타일 탭에 쓰기

외부를 사용합니다.css 파일

@import(이 방식은 권장하지 않음)

link

CSS 선택기

우선순위: id 선택기 >class 선택기 > 라벨 선택기

태그 선택기: 태그 이름 {}

class 선택기("."기호):.class 이름 {}

id 선택기("#"기호, id 선택기 유일): #id 이름 {}

그룹 선택기(", 쉼표 분리):

그룹 선택기는 여러 탭을 동시에 선택할 수 있음

p,div{...}

차원 선택기

자식(기호 ">"): div>p{...}

후손(공백): div p {...}

인접(기호 "+"): #pid~span {...}

형제(기호 "~"):#pid~p {...}

위조 선택기(기호 ":")

link: 방문하지 않은 스타일

a:link {...}

visited: 방문한 후의 스타일

a:visited {...}

hover: 그어진 스타일

a:hover {...}

active: 활성화된 스타일

a:active {...}

글꼴

글꼴: font-family

글꼴 크기: font-size

글꼴 스타일: font-style

글꼴 굵기: font-weight

글씨체 작은 대문자: font-variant(소문자를 작은 글씨체로 바꾸는 대문자)

복합 스타일: font(기본 순서: style variant weight size/height family)

텍스트

정렬 방식:text-align

첫 줄 들여쓰기:text-indent

텍스트 선:text-decoration

자간:letter-spacing

어간:word-spacing

행 높이: line-height

배경.

배경색: background-color

배경 그림:background-image

배경 덮개:background-repeat

배경 크기: background-size

배경 포지셔닝:background-position

복합 양식:background

backgroud:red url("") no-repeat center;

일반 스타일

1. font-family:  ，eg: Microsoft-Yahei
2. font-size/color:  /  
3. font-weight:bold   
4. font-style:italic   
5. text-decoration:underline    
6. text-decoration:line-through    
7. text-indent:2em      2   
8. line-height:1.5em    : 1.5     
9. letter-spacing:50px    ，    
10.word-spacing:50px        
11.text-align:center/left/right   /  /  
12.color：rgb(255,255,255);    0-255  ，     
13.backgroud-image:url("1.png");    
14.backgroud-repeat:repeat-y/repeat-x/no-repeat;     / /  
15.backgroud-position:right center/center center;         
16.      : backgroud: red url("1.png") no-repeat center;
17.border:solid 1px red;    
18.ul, ol{list-style: 。。。。}    
19.display:block/inline/none;        /