일반적인 CSS 스타일 효과 요약

CSS 스타일 학습 우리가 할 필요가 더 많은 경우, 생각, 생각, 더 많은 연습을 할 필요 하지만 때로는 수집 및 데이터의 데이터 정렬에 대 한 관심 또한 매우 중요 하다, 비록 실제 개발에서 자주 재생 됩니다 승수 효과. 리치 콘텐츠는 또한 Www.phpq.net의 설명서에서 사용할 수 있습니다. 단추, 텍스트 상자, 및 형태에 대 한 몇 가지 일반적인 CSS 스타일 같습니다. 우리는 그것을 참조할 수 있습니다.

하나, 버튼 스타일

. buttoncss 없음;
글꼴-가족: "굴림", "노래"; / * www.phpq.net * /
글꼴-크기: 9pt; 색상: # 003399;
국경: 1px #003399 고체;
색상: # 006699;
국경-하단: #93bee2 1px 고체;
국경-왼쪽: #93bee2 1px 고체;
국경-오른쪽: #93bee2 1px 고체;
국경-가기: #93bee2 1px 고체;
배경-이미지: url (. / images/bluebuttonbg.gif);
배경-색상: #e8f4ff;
커서: 손;
글꼴-스타일: 정상;
폭: 60px;
높이: 22px;
}

2, 블루 버튼

. bluebuttoncss 없음;
글꼴-가족: "굴림", "노래"; / * www.phpq.net * /
글꼴-크기: 9pt; 색상: # 003366;
테두리: 0px # 93bee2 고체;
국경-하단: #93bee2 1px 고체;
국경-왼쪽: #93bee2 1px 고체;
국경-오른쪽: #93bee2 1px 고체;
국경-가기: #93bee2 1px 고체; * /
배경-이미지: url (. / images/blue_button_bg.gif);
배경-색상: #ffffff;
커서: 손;
글꼴-스타일: 정상;
}

3, 빨간 버튼

. redbuttoncss 없음;
글꼴-가족: "굴림", "노래"; / * www.phpq.net * /
글꼴-크기: 9pt; 색상: # 0066cc;
국경: 1px # 93bee2 고체;
국경-하단: #93bee2 1px 고체;
국경-왼쪽: #93bee2 1px 고체;
국경-오른쪽: #93bee2 1px 고체;
국경-가기: #93bee2 1px 고체;
배경-이미지: url (. / images/redbuttonbg.gif);
배경-색상: #ffffff;
커서: 손;
글꼴-스타일: 정상;
}

4. 선택 버튼

. selectbuttoncss 없음;
글꼴-가족: "굴림", "노래"; / * www.phpq.net * /
글꼴-크기: 9pt; 색상: # 0066cc;
국경: 1px # 93bee2 고체;
국경-하단: #93bee2 1px 고체;
국경-왼쪽: #93bee2 1px 고체;
국경-오른쪽: #93bee2 1px 고체;
국경-가기: #93bee2 1px 고체;
배경-이미지: url (. / images/blue_button_bg.gif);
배경-색상: #ffffff;
커서: 손;
글꼴-스타일: 정상;
}

5, 녹색 버튼

. greenbuttoncss 없음;
글꼴-가족: "굴림", "노래"; / * www.phpq.net * /
글꼴-크기: 9pt; 색상: # 0066cc;
국경: 1px # 93bee2 고체;
국경-하단: #93bee2 1px 고체;
국경-왼쪽: #93bee2 1px 고체;
국경-오른쪽: #93bee2 1px 고체;
국경-가기: #93bee2 1px 고체;
배경-이미지: url (. / images/greenbuttonbg.gif);
배경-색상: #ffffff;
커서: 손;
글꼴-스타일: 정상;
}

Vi입니다. 이미지 버튼

. imagebutton 없음
커서: 손; / * 변경 마우스 모양 www.phpq.net * /
}

7입니다. 페이지 본문

몸 없음
스크롤바-얼굴-색상: #ededf3;
스크롤 막대-하이라이트-색상: #ffffff;
스크롤바-그림자-색상: # 93949f;
스크롤 막대-3dlight-색상: #ededf3;
스크롤바-화살표-색상: # 082468;
스크롤바-트랙-색상: #f7f7f9;
스크롤 막대-darkshadow-색상: #ededf3;
글꼴-크기: 9pt; / * www.phpq.net * /
색상: # 003366;
오버플로: 자동;
}
td {글꼴-크기: 12PX}
일 없음
글꼴-크기: 12px;
}
8, 드롭 다운 선택 상자

선택 없음
국경-오른쪽: #000000 1px 고체;
국경-가기: #ffffff 1px 고체;
글꼴-크기: 12px; / * www.phpq.net * /
국경-왼쪽: #ffffff 1px 고체;
색상: # 003366;
국경-하단: #000000 1px 고체;
배경-색상: #f4f4f4;
}

9, 선 텍스트 편집 상자

. 편집 상자 없음
배경: #ffffff;
국경: 1px 단단한 #b7b7b7;
색상: # 003366;
커서: 텍스트;
글꼴-가족: "굴림";
글꼴-크기: 9pt;
높이: 18px;
패딩: 1px; / * www.phpq.net * /
}

10, 여러 줄 텍스트 상자

. multieditbox 없음;
배경: #f8f8f8;
국경-하단: #b7b7b7 1px 고체;
국경-왼쪽: #b7b7b7 1px 고체;
국경-오른쪽: #b7b7b7 1px 고체;
국경-가기: #b7b7b7 1px 고체;
색상: # 000000;
커서: 텍스트;
글꼴-가족: "굴림";
글꼴-크기: 9pt;
패딩: 1px; / * www.phpq.net * /
}

Xi. 음영된 스타일 양식

. 그림자 없음
위치: 절대;
z-인덱스: 1000;
상단: 0px;
왼쪽: 0px; / * www.phpq.net * /
배경: 회색;
배경-색상: #ffcc00;
Filter:progidximagetransform.microsoft.dropshadow (색상 #ff404040, offx = = 2, offy = 2, 긍정 = true);
}

12, 입력된 상자의 가로줄만

. logintxt 없음;
국경-오른쪽: #ffffff 0px 고체;
국경-가기: #ffffff 0px 고체;
글꼴-크기: 9pt; / * www.phpq.net * /
국경-왼쪽: #ffffff 0px 고체;
국경-하단: #c0c0c0 1px 고체;
배경-색상: #ffffff
}

13, 입력된 상자 테두리 없음

. noneinput 없음;
텍스트-정렬: 센터;
폭: 99%; 높이: 99%;
국경-가기-스타일: 없음;
국경-오른쪽 스타일: 없음;
국경 왼쪽 스타일: 없음;
배경-색상: #f6f6f6;
국경-하단-스타일: 없음;
}