怎么给按钮添加CSS样式?
给按钮添加css样式的方法：
添加方法：
1、.btn {BORDER-RIGHT: #7b9ebd 1px solid; 右边线
2、PADDING-RIGHT: 2px; 内边距 右
3、BORDER-TOP: #7b9ebd 1px solid; 上边线
4、PADDING-LEFT: 2px; 内边距 左
5、FONT-SIZE: 12px; 文字大小
6、BORDER-LEFT: #7b9ebd 1px solid; 左边线
7、CURSOR: hand; 鼠标移上去时，变成手形。
8、COLOR: black; 颜色黑 （表示文字颜色）
9、PADDING-TOP: 2px; 内边距 上
10、BORDER-BOTTOM: #7b9ebd 1px solid }底边线
扩展资料
CSS样式部分
大小 {font-size: 12px}，x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性： (background)
色彩 {background-color: #FFFFFF;}
图片 {background-image: url();}
重复 {background-repeat: no-repeat;}
滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
位置 {background-position: left;}(水平) top(垂直);
字间距 {letter-spacing: normal;} 数值 /*这个属性有用，多实践下*/
对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
绛旓細1銆佹柊寤轰竴涓猦tml鏂囦欢锛屽懡鍚嶄负test.html锛岀敤浜庤瑙ｃ2銆佸湪test.html鏂囦欢鍐咃紝浣跨敤button鏍囩鍒涘缓涓涓寜閽紝鐢ㄤ簬娴嬭瘯銆3銆佸湪test.html鏂囦欢鍐咃紝缁檅utton鎸夐挳娣诲姞涓涓猧d灞炴э紝鐢ㄤ簬鏍峰紡鐨勮缃4銆佸湪test.html鏂囦欢鍐咃紝缂栧啓鏍囩锛岄〉闈㈢殑css鏍峰紡灏嗗啓鍦ㄨ鏍囩鍐呫5銆佸湪css鏍囩涓紝閫氳繃id璁剧疆button鐨勬牱寮忥紝瀹氫箟鍏...
绛旓細BORDER-RIGHT: #7b9ebd 1px solid;PADDING-RIGHT: 2px;BORDER-TOP: #7b9ebd 1px solid;PADDING-LEFT: 2px;FONT-SIZE: 12px;BORDER-LEFT: #7b9ebd 1px solid;CURSOR: hand;COLOR: black;PADDING-TOP: 2px;BORDER-BOTTOM: #7b9ebd 1px solid } CSS鏍峰紡鎸夐挳 浠ヤ笂鏄竴涓吀鍨嬬殑CSS鎺у埗鐨鎸夐挳...
绛旓細 鍦╯tyle涓鍔犲叆css灏卞彲浠ワ紝闇瑕佹敞鎰忕殑涓鐐规槸锛屽姞鑳屾櫙鍥剧墖鐨勬椂鍊欙紝杈规鎸夎嚜宸遍渶姹傛樉绀猴紝榛樿鏄湁杈圭嚎鐨勶紝鍗砨order:鐨勮缃
绛旓細1.鍙互鍒╃敤css鐨勫畾浣嶅厓绱犳潵瀹炵幇銆.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:...
绛旓細缁欐寜閿姞涓偣鍑讳簨浠讹紝鍏堣幏鍙栧埌浣犺淇敼css鐨勫厓绱,鐒跺悗鎶婅鏀圭殑鍔犲埌浜嬩欢閲屽氨鍙互浜 var box = document.getElementById("box");var btn = document.getElementById("btn");btn.onclick = function () { box.style.color = "#fff";}
绛旓細button{ width:70px; height:30px; color:#fff; text-align: center; background-color:#c00; color:#fff; line-height: 28px; border-radius:15px; border:0; outline: 0; transition: background 0.2s } button:hover{ background:#666}Go ...
绛旓細褰鎸夐挳鐨 type="submit"锛堟彁浜わ級鍜 type="reset"锛堥噸缃級鏃讹紝鍙互鍔犺儗鏅佷慨楗拌竟妗嗭紝鍋氫换浣曟兂瑕佺殑鏍峰紡锛屼絾濡傛灉鏁堟灉鏄病鏈夎竟妗嗭紝涔熷氨鏄border:none鏃讹紝鍏跺畠娴忚鍣ㄤ腑鏄剧ず姝ｅ父锛屼絾鍦↖E6涓篃鏄笉璧蜂綔鐢ㄧ殑锛岃繕鏄細瀛樺湪榛戣壊杈规銆傝В鍐虫闂寰堢畝鍗曪紝鎴戜滑鍙渶瑕佹妸type璁剧疆鎴button锛岃繖鏍峰氨鏄彲浠ュ仛鍒板吋瀹...
绛旓細璨屼技浣犲啓鐨勬湁闂鍚э紝涓嶇敤鍐檛ype="button"杩欏彞锛屽洜涓烘湰鏉ュ氨鏄痓utton鏍囩銆傞夐」涓 濡傛灉涓嶅姞class鎴栬卛d锛屽彲浠ヨ繖鏍峰啓锛歜utton{ background-color:#ff0000; } 閫夐」涓 濡傛灉鍔犱釜class锛屽彲浠ヨ繖鏍峰啓锛.btn1{ background-color:#ffff00;}
绛旓細濡傛灉瑕佸湪HTML鏂囦欢涓簲鐢CSS鏍峰紡锛屾渶甯哥敤鐨勬湁涓夌鏂规硶锛1.鍐呴儴寮曠敤 鎵璋撳唴閮ㄥ紩鐢ㄥ氨鏄繍鐢╯tyle鏍囩寮曠敤鍦ㄥ悓HTML椤靛唴<HEAD></HEAD>閮ㄥ垎鐨刢ss瀹氫箟銆傚锛 .cssstyle { font:12px;color:#339966;border:1px #e1763d solid;} THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART ...
绛旓細骞舵坊鍔犱簡btn2鏍峰紡銆傚浜庡唴閮ㄦ牱寮忚〃绠鍗曠殑HTML鏂囦欢锛屽唴閮ㄦ牱寮忓緢鏂逛究锛屼絾鏄鏉傜殑HTML鏂囦欢鍙兘浼氳浜烘贩娣:5.鏈鍚庢槸浣跨敤鍐呰仈鏍峰紡锛岀洿鎺ュ湪绗笁涓爣绛句腑浣跨敤鏍峰紡灞炴ф潵娣诲姞鏍峰紡鍙互:6.鏈鍚庯紝淇濆瓨HTML鏂囦欢锛屾墦寮娴忚鍣ㄥ苟鏌ョ湅鎵鏈変笁涓鎸夐挳鐨勬牱寮忋傝繖灏辨槸CSS鏍峰紡琛ㄧ殑鍒朵綔鏂规硶:...
