HTML 시작 설명(하)

2241 단어

CSS 선택기


선택기
역할: 선택기를 통해 대응하는 탭 설정 스타일을 찾기;
1. 클래스 선택기

해당 사용
.high{
color:red;
}

2. id 선택기

해당 사용
#high{
color:red;
}

3. 복합 선택기
     


   div  


   div

해당 사용
div.high{
color:red;
}

4. 후대 선택기
   P  





div   P

해당 사용
div.p{
color:red;
}

5. 속성 선택기
   P  


fist


fist

对应的使用

div[name]{
color:red;
}

태그의 디스플레이 유형
  • 블록 레벨 레이블
  • 한 줄을 독점할 수 있는 라벨
  • 수시로 폭과 높이를 설정할 수 있다(예를 들어div,p,h1,ul,li)
  • 인라인 레이블(인라인 레이블)
  • 여러 행의 레이블을 한 행에 동시에 표시할 수 있음
  • 너비와 높이는 내용의 사이즈(예를 들어span, a, label)에 달려 있다
  • 인라인 - 블록 레벨 레이블(인라인 - 블록 레벨 레이블)
  • 여러 줄 - 블록 레벨 레이블을 같은 줄에 표시할 수 있음
  • 수시로 너비와 높이를 설정할 수 있다(예를 들어 input,button)

    • 태그 표시 유형 변경하기
    display 속성은 태그의 표시 유형을 변경할 수 있습니다.
  • display:block(탭 유형을 블록 레벨로 설정)
  • display: inline(탭 유형 인라인 설정)
  • display: inline-block(탭 형식을 줄-블록급으로 설정)
    • 일반적인 CSS 속성
  • overflow: auto로 설정하면 텍스트가 표시 길이의 범위를 초과하면 자동으로 숨겨집니다
  • background:body에 배경 그림을 설정할 수 있음
  • line - height: 내용 높이 설정, 내용의 수직 가운데
    • 설정 가능
  • border:20PX,solid,green 테두리 설정 스타일(테두리 너비 20,실선 사용,색 녹색)
  • border-radiu: 경계 원각 설정
    • 상자 모형
    웹 페이지의 모든 라벨은 첫 번째 상자이고, 상자마다 네 개의 속성이 있다
  • 내용(content): 웹 페이지에서는 일반적으로 문자와 그림을 가리킨다
  • height,width

  • 채우기(padding): 내부 여백
  • padding,padding-top,padding-right...

  • 테두리(border): 상자 자체
  • border:20px,solid,green

  • 경계 (margin):
  • margin,margin-top,margin-right...


    • 태그의 수평 가운데 맞춤
  • 수준이 중간이다
  • 인라인 라벨, 인라인 블록 라벨의 가운데:text-alig:center
  • 블록 레이블의 가운데: margin:0px, auto
  • 수직 가운데
  • 세 가지 라벨의 수직 가운데는 모두 라인-height 속성을 사용한다
    • [드래그 DIV] 블로그 시작하자마자 뭐 좀 썼어!

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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