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

2627 단어
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;        /
    ASP.NET Core3.X 터미널 중간부품을 끝점 루트로 변환하여 실행
    ASP.NET MVC 전편의 확장 방법, 체인 프로그래밍

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage