css属性类型有:1、html标签;2、CSS文字属性;3、CSS符号属性;4、CSS背景样式;5、CSS表单运用;6、CSS边界样式。
本教程操作环境:windows7系统、css3版,DELL G3电脑。
css属性类型有:
一、html标签
e03b848252eb9375d56be284e690e873...bc5574f69a0cba105bc93bd3dc13c4ec文字格式化
dc6dce4a544fdca2df29d5ac0ea9906b......16b28748ea4df4d9c2150843fecfba68열 블록 컨테이너
글꼴 크기 변경8e90a99df7b1f4fc8e4aea52fedca7f2입력하고 싶은 단어e6e38b3c62e8df885fe2e3986461aa63
글꼴 색상bd05e4e06c2aea525a3f2c0d28d2600a입력하고 싶은 단어 Enter 3e8a6d5b6b330788204730ae79dcb76404e11139013d3ca73accef66348e2e58
가운데 맞춤ㄉgrammar0511ef35f46864c22a06c599220d1c6fcontent94b3e26ee717c64999d7867364b1b4a3
왼쪽 맞춤 ㄉgrammar< ;p align="left">Content94b3e26ee717c64999d7867364b1b4a3
오른쪽으로 정렬ㄉSyntax211e86be24691be96dcf6c7a347bafabContent94b3e26ee717c64999d7867364b1b4a3
글꼴 취소선2e44d2d3284d23d932e1fd85f3d4cf3a 입력하고 싶은 단어6cf51b1709551acbf4a696702deda05f
글꼴 설정0c8dd9e068f2feb9355915c2bd4db3c1입력하고 싶은 단어e6e38b3c62e8df885fe2e3986461aa63
타자기 글꼴78f983dbc27872ba42409adefe5049d9입력하고 싶은 단어 d7fe87ea940d624a3477eb6a70c77284
새 줄에 입력하고 싶은 단어를 입력하세요0c6dc11e160d3b678d68754cc175188a입력하고 싶은 단어
하이퍼링크e3bb20ab420ed57e2c19db94a36d8e3c링크 위치 이름5db79b134e9f6b82c0b36e0489ee08ed
28a8e8e2cd8a46a4632c8a03e0cce6f5표시하고 싶은 단어를 여기에 입력하세요5db79b134e9f6b82c0b36e0489ee08ed인터넷 메일링 라벨
이미지8163de44b40b573d3308dfd68f62315c
마키(루프) d87529c6a431b29eb24ed04e83af85f5입력하려는 단어7204e33a7a23f6efcc788532e245c31b
외부 파일 가져오기 형식 태그
<link rel="stylesheet" type="text/css" href="/css.css" />
직접 인용:
<style type="text/css"> <!-- id{...} --> </style>
<script type="text/javascript" src="/script.js"></script>2. CSS 텍스트 속성:
text-design:none; /*링크 밑줄 제거*/
text-transform: Capitalize; *첫 번째 텍스트 대문자*/IV. CSS 배경 스타일: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*/
background-color: #F5E2EC; /*배경 색상*/
background -position : center; /*center alignment*/배경:투명 배경 -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 : 오른쪽; */
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 양식 적용:
텍스트 상자1d4ff764ff0bebd2953d4c2fe5a65a83
버튼 f7919b7492ae3701ced5e89dd984686a
checkboxe692305e0b0f4c8955fd1c02a59e2bed
버튼 선택< ; 입력 유형="라디오" value="V1" 확인됨 name="R1">
여러 줄 텍스트 상자bd73ddb31108ea33e215184b86d11fddb91cd0da16d95456abbae4d92b91822b
드롭다운 메뉴e8d730ab2b4f5d6264ff729e0669f1855a07473c87748fb1bf73f23d45547ab8옵션 14afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8옵션 24afa15d3069109ac30911f04c56f333812a444272d549ac5add23bac6d2d3de6
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!