당신이 모르는 CSS 상용 속성 (계속 업데이트, 미완성)

6569 단어 CSS
색상
  • HEX(16진수 색상:color:#FF000).
  • RGB(빨간색, 녹색, 파란색:color:rgb(255255,0) 또는color:rgb(100%, 100%, 20%)).
  • RGBA(빨간색, 녹색, 파란색 투명도:color:rgba(255255,0,0.5).
  • HSL(CSS3 유효, H:색조, S:포화도, L:밝기. color:hsl(360100%, 50%).
  • HSLA(HSL과 비슷하고 A는 알파 투명도를 나타내며 0~1사이를 얻는다).
  • 투명도:color:transparent.
  • filter:alpha(opacity:20)), 초기의 IE 브라우저에만 적용됩니다.

    • 글꼴
  • 글씨체 크기(absolute-size): xx-small, x-small, small,medium,large,x-large,xx-large.
  • 글꼴 크기(relative-size): 부모 탭의 글꼴 크기에 따라 조절: smaller, larger.
  • 글꼴 크기(percentage): 백분율로 문자 크기를 지정합니다.
  • 글꼴 크기(length): 길이 값이 문자 크기를 지정합니다.
  • 글꼴 이름: font-family:one,two,three.우선 순위는 앞뒤로, 시스템에 현재 글꼴이 없으면 뒤로 찾습니다.

    • 텍스트 속성
    white-space: 요소의 공백 처리 방식을 설정합니다
  • normal, 기본값.
  • pre, 공백을 유지하며 문자가 경계를 넘을 때 줄을 바꾸지 않습니다.
  • nowrap, 공백을 남기지 않고 텍스트가 끝나거나 br 탭에 닿을 때까지 같은 줄에 모든 텍스트를 강제로 표시합니다.
  • pre-wrap, 공백을 보류하고 문자가 경계에 닿을 때 줄을 바꿉니다.
  • pre-line, 공백을 남기지 않고 문자의 줄을 바꾸며 문자가 경계에 닿을 때 줄을 바꿉니다.

    • direction:텍스트의 방향 지정
  • ltr,rtl, 텍스트는 왼쪽에서 오른쪽, 오른쪽에서 왼쪽입니다.

    • vertical-align: 텍스트가 있는 줄 높이의 수직 정렬
  • baseline, 기본값.
  • sub, 텍스트의 하단을 수직으로 정렬하여 라벨과 같은 효과를 냅니다.
  • super, 텍스트의 위 첨자를 수직으로 정렬하여 태그와 같은 효과를 냅니다.
  • top, 대상의 끝과 용기의 끝을 정렬합니다.
  • text-top - 객체의 위쪽이 행 문자의 위쪽과 정렬됩니다.
  • middle, 원소 대상은 기선을 맞추어 줍니다.
  • bottom, 대상의 밑부분은 줄의 텍스트 밑부분과 정렬됩니다.
  • text-bottom, 대상의 밑부분은 줄 문자의 밑부분과 정렬됩니다.

    • text-indent: 텍스트 들여쓰기.
    letter-spacing: 알파벳 사이의 공백을 추가합니다.
    word-spacing: 단어 사이의 공백을 추가합니다.
    text-transform: 속성 제어 텍스트의 대소문자
  • capitalize: 텍스트의 모든 단어는 대문자로 시작합니다.
  • uppercase: 모든 대문자.
  • lowercase: 모든 소문자.

    • text-overflow:텍스트 오버플로우 스타일
  • clip: 텍스트를 잘라냅니다.
  • ellipsis: 줄임표 보이기... 편집된 텍스트를 표시합니다.
  • string: 편집된 텍스트를 나타내는 문자열을 사용합니다.

    • text-shadow: 좌우, 위아래, 허화, 색깔;
    word-wrap:break-word;자동 줄 바꿈.
    목록 속성
    list-style
  • list-style-type:none 제거,decimal-leading-zero;02,square 네모난 테두리,circle 공심원, upper-aph,disc 실심원.
  • list-style-image: 그림을 목록 항목 표지로 설정합니다.
  • list-style-position: inside,outside, 목록 항목 표지의 위치.

    • 경계 속성
    border-radius 약자
  • 1개 매개 변수: 사각.
  • 2개 매개 변수: 왼쪽 위 오른쪽 아래, 왼쪽 아래 오른쪽 위.
  • 3개 매개 변수: 왼쪽 위, 왼쪽 아래, 오른쪽 위, 오른쪽 아래.
  • 4개 매개 변수: 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래(시계 방향)
    • box-shadow: 좌우, 위아래, 허화, 색상
    margin
  • 1개 매개 변수: 사변.
  • 2개 매개 변수: 상하, 좌우.
  • 3개 매개 변수: 위, 좌우, 아래.

    • display
  • list-item: 목록 요소.
  • run-in: 상하문에 따라 블록급 요소나 내연 요소로 표시됩니다.
  • table: 블록급 표 요소로 합니다.
  • inline-table: 내연 표 요소로 한다.
  • table-row-group: tbody와 유사하며 한 줄 또는 여러 줄의 그룹으로 표시됩니다.
  • table-header-group:thead와 유사하여 한 줄 또는 여러 줄의 그룹으로 표시합니다.
  • table-footer-group: tfoot와 유사하며 한 줄 또는 여러 줄의 그룹으로 표시됩니다.
  • table-row:tr와 유사하여 표 줄로 표시됩니다.
  • table-colunm-group:colgroup과 유사하여 한 개 이상의 열의 그룹으로 표시됩니다.
  • table-colunm:col과 유사하여 하나의 칸열로 표시됩니다.
  • table-cell: td와th와 유사하게 표 칸으로 표시됩니다.
  • table-caption:caption과 유사하여 표 제목으로 표시됩니다.

    • visibility
  • visible: 원소가 보입니다.
  • hidden: 요소가 보이지 않습니다.
  • collapse: 표 요소에서 사용할 때 이 값은 한 줄이나 한 열을 삭제할 수 있으며 표의 레이아웃에 영향을 주지 않습니다.

    • clip 자르기 이미지
    rect      ：clip：rect（0px,10px,10px,0px）;        。auto   ，   。          。    position:absolute。

    z-index 
    z-index         ：position:absolute

    zoom:normal、number、percentage
    cursor 마우스 유형 모양:
    Auto: 기본값Default: 기본값 e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Crosshair Pointer Move text wait help not-allowed
    Transition 전환
  • transition-property: 변환된 속성,none(속성 변경 없음),all(모든 속성 변경), 구체적인 속성.
  • transition-duration: 변환 지속 시간.
  • transition-timing-function: 변환된 속도(ease: 점점 느려짐), (liner: 고른 속도), (ease-in: 가속), (ease-out: 감속), (ease-in-out: 가속하고 감속), (cubic-bezier: 사용자 정의 시간 곡선).
  • transition-delay: 변환 지연 시간.
  • 속성 대응 유형 지정
     1、color：    、 、         （        ）， ：background-color，border-color，color，outline-color CSS  ；
 2、length：     ， ：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position   ；
 3、percentage：     ， ：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position   ；
 4、integer     （    ），        ，    floor()        ， ：outline-offset，z-index   ；
 5、number   （   ）  ， ：zoom，opacity，font-weight   ；
 6、transform list。
 7、rectangle：  x、 y、 width height（    ）  ， ：crop；
 8、visibility：    ， 0 1      ，0  “  ”，1    “  ”, ：visibility；
 9、shadow：   color、x、y、 blur（  ）  ， ：text-shadow；
 10、gradient：                 。          （         ）              ， ：background-image；
 11、paint server (SVG)：        ： gradient gradient  color color，         ；
 12、space-separated list of above：            ，                 ，     ；
 13、a shorthand property：                ，               。
  • transition 효과를 실행하는 속성을 지원하는 Property Name Type background-color as color background-position as repeatable list of simple list of length,percentage, or calc border-bottom-color as color border-bottom-width as length border-left-color as color border-left-width as length border-right-color as color border-right-width as length border-spacing as simple list of length border-top-color as color border-top-width as length bottom as length, percentage, or calc clip as rectangle color as color font-size as length font-weight as font weight height as length, percentage, or calc left as length, percentage, or calc letter-spacing as length line-height as either number or length margin-bottom as length margin-left as length margin-right as length margin-top as length max-height as length, percentage, or calc max-width as length, percentage, or calc min-height as length, percentage, or calc min-width as length, percentage, or calc opacity as number outline-color as color outline-width as length padding-bottom as length padding-left as length padding-right as length padding-top as length right as length, percentage, or calc text-indent as length, percentage, or calc text-shadow as shadow list top as length, percentage, or calc vertical-align as length visibility as visibility width as length, percentage, or calc word-spacing as length z-index as integer
    • 순수 css 동적 기차 실현
    수직 거중 css 실현의 4가지 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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