CSS 속성에는 어떤 유형이 있나요?

coldplay.xixi
풀어 주다: 2023-01-03 09:31:18
원래의
5819명이 탐색했습니다.

css属性类型有:1、html标签;2、CSS文字属性;3、CSS符号属性;4、CSS背景样式;5、CSS表单运用;6、CSS边界样式。

CSS 속성에는 어떤 유형이 있나요?

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css属性类型有:

、html标签

  • ...
    文字格式化

  • ......
    열 블록 컨테이너

  • 글꼴 크기 변경 <글꼴 크기="?"> 입력하고 싶은 단어

  • 글꼴 색상 <글꼴 색상="..."> 입력하고 싶은 단어 Enter입력하려는 단어에 밑줄

  • 가운데 맞춤ㄉgrammar

    content

  • 왼쪽 맞춤 ㄉgrammar< ;p align="left">Content

  • 오른쪽으로 정렬ㄉSyntax

    Content

  • 글꼴 취소선입력하고 싶은 단어

  • 글꼴 설정 입력하고 싶은 단어

  • 타자기 글꼴입력하고 싶은 단어


  • 새 줄에 입력하고 싶은 단어를 입력하세요
    입력하고 싶은 단어

  • 하이퍼링크링크 위치 이름

  • 표시하고 싶은 단어를 여기에 입력하세요인터넷 메일링 라벨

  • 이미지

  • 마키(루프) 입력하려는 단어

  • 외부 파일 가져오기 형식 태그

  • CSS 외부 가져오기 형식:
  • 로그인 후 복사

    직접 인용:

    로그인 후 복사
  • javascript - 외부 .js 독립 파일 로드:
  • 로그인 후 복사

    2. CSS 텍스트 속성:
  • color : #999999; /*텍스트 색상*/
  • Font-family : 송나라, sans- serif; /*텍스트 글꼴*/

    font-size : 9pt /*텍스트 크기*/
  • font-style:itelic; :small-caps; /*작은 글꼴 */

    letter-spacing : 1pt; /*단어 사이의 간격*/
line-height : 200%; /*줄 높이 설정*/

font-weight:bold; /*굵은 텍스트*/

Vertical-align:sub; /*subscript*/

vertical-align:super; - decoration :overline; /*맨 위 줄 추가*/

text-design:underline; /*밑줄 추가*/

text-design:none; /*링크 밑줄 제거*/

text-transform: Capitalize; *첫 번째 텍스트 대문자*/

text-transform : 대문자; /*영어 대문자*/

text-transform : 소문자; /*영어 소문자*/

text-align:right;

text -align:left; /*텍스트 왼쪽 정렬*/

text-align:center; /*텍스트 가운데 정렬*/

text-align:justify; /*텍스트 분산 정렬*/

vertical-align attribute

수직 정렬:top; /*수직 위쪽 정렬*/

vertical-align:bottom; /*수직 아래쪽 정렬*/

vertical-align:middle; /*가운데 수직 정렬*/

수직 정렬: text-top; /*텍스트를 수직으로 정렬*/

vertical-align:text-bottom; /*텍스트를 수직으로 정렬*/

3. CSS 기호 속성:

list- style-type :none; /*숫자 없음*/

list-style-type:decimal; /*아라비아 숫자*/

list-style-type:lower-roman; /*소문자 로마 숫자*/

list -style- type:upper-roman; /*대문자 로마 숫자*/

list-style-type:lower-alpha; /*소문자 영문자*/

list-style-type:upper-alpha; 영문자* /

list-style-type:disc; /*채운 원형 기호*/

list-style-type:circle; /*빈 원형 기호*/

list-style-type:square; 단색 정사각형 기호*/

list-style-image:url(/dot.gif) /*그림 기호*/

list-style-position:outside; :inside; /*indent*/

IV. CSS 배경 스타일:

background-color: #F5E2EC; /*배경 색상*/

배경:투명 배경 -image : url(/image/bg.gif); /*배경 이미지*/

Background-attachment : 고정; /*워터마크 고정 배경*/

Background-repeat : 반복 정렬 - 웹페이지 기본값 */

Background-repeat : no-repeat; /*반복 배열 없음*/

Background-repeat :peat-x; / *y축 배열 반복*/

배경 위치 지정

background-position : 90% 90% /*배경 이미지의 x축과 y축 위치*/

background- position : 위쪽 정렬 */

background-position : buttom; /*아래 정렬*/

background-position : 왼쪽; /*왼쪽 정렬*/

background-position : 오른쪽; */

background -position : center; /*center alignment*/

5. CSS 연결 속성:

a /*모든 하이퍼링크*/

a:link /*하이퍼링크 텍스트 형식*/

a:visited /*본 링크 텍스트 형식*/

a:active /*누른 링크 형식 */

a: hover /*마우스를 연결하세요*/

마우스 커서 스타일:

링크 손가락 CURSOR: 손

크로스 바디 커서:crosshair

아래쪽 화살표 커서:s-resize

크로스 화살표 커서: 이동

화살표 가리키기 오른쪽으로 커서: 이동

+ 물음표 커서: 도움말

왼쪽을 가리키는 화살표 커서: w-resize

위쪽을 가리키는 화살표 커서: n-resize

위쪽을 가리키는 화살표 오른쪽 커서: ne-resize

화살표 가리키기 위쪽 및 왼쪽 커서:nw-resize

Text I 유형 커서:text

오른쪽 대각선 아래쪽 화살표 커서:se-resize

왼쪽 대각선 아래쪽 화살표 커서:sw-resize

깔때기 커서:wait

커서 패턴( IE6 ) p {cursor:url("cursor file name.cur"),text;}

6. CSS 테두리 목록:

border-top : 1px solid #6699cc /*상단 테두리* /

border-bottom : 1px solid #6699cc; /*하단 테두리*/

border-left : 1px solid #6699cc; /*왼쪽 테두리*/

border-right : 1px 솔리드 #6699cc;

위는 권장 작성 방법이지만, 다음과 같은 기존 방법을 사용할 수도 있습니다.

border-top-color: #369 /*상단 테두리선의 상단 색상을 설정*/

border- top- width :1px /*상단 테두리의 상단 너비 설정*/

border-top-style : solid/*상단 테두리의 상단 스타일 설정*/

기타 테두리 스타일

solid /* 실선 테두리*/

점선 /*점선 프레임*/

이중 /*이중 프레임*/

홈 /*3차원 볼록 프레임*/

능선 /*3차원 입체 프레임*/

삽입 / *오목 프레임*/

아웃셋 /*볼록 프레임*/

7. CSS 양식 적용:

  • 텍스트 상자

  • 버튼

  • checkbox

  • 버튼 선택< ; 입력 유형="라디오" value="V1" 확인됨 name="R1">

  • 여러 줄 텍스트 상자

  • 드롭다운 메뉴

8. CSS 테두리 스타일:

margin-top:10px; /*상단 테두리*/

margin-right:10px /*오른쪽 테두리 값*/

margin-bottom: 10px ; /*하위 테두리 값*/

margin-left:10px; /*왼쪽 테두리 값*/

9. CSS 테두리 공백:

padding-top:10px; 공백* /

padding-right:10px; /*오른쪽 테두리를 비워 둡니다*/

padding-bottom:10px; /*아래쪽 테두리를 비워 둡니다*/

padding-left:10px; 테두리 공백*/

관련 튜토리얼 권장 사항:CSS 비디오 튜토리얼

위 내용은 CSS 속성에는 어떤 유형이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!