怎么给按钮添加CSS样式?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么给按钮添加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;(居中)
参考技术A给按钮添加css样式有以下三种方法：
1、直接在元素上定义style，如下：
<input type="button" style="这里定义样式">
2、页面中内嵌样式，如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>怎么给按钮添加CSS样式</title>
<style>
.btn需要添加的CSS样式
</style>
</head>
<body >
<input type="button">
</body>
</html>
3、外部引用css文件，如下：
<link rel="stylesheet" type="text/css" href="这里是css文件的路径">
扩展资料
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;(居中)
参考技术B给按钮添加css样式有以下三种方法：
1，直接在元素上定义style，如下：
<input type="button" style="这里定义样式">2，页面中内嵌样式，如下：
<style>.btn需要添加的样式
</style>
<input type="button" class="btn">
3，外部引用css文件，如下：
<link rel="stylesheet" type="text/css" href="这里是css文件的路径"> 参考技术C 引用（有人回答过了）：.btn
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
<button class=btn title="CSS样式按钮">CSS样式按钮</button>
以上是一个典型的CSS控制的按钮样式。我分别作一下简单的解释与说明：
.btn
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 底边线
本回答被提问者采纳 参考技术D
给按钮添加css样式的方法：
添加方法：
1、.btn BORDER-RIGHT: #7b9ebd 1px solid; 右边线
2、PADDING-RIGHT: 2px; 内边距 右
扩展资料
js添加按钮样式
firefox等可以使用
var dom=document.getElementById("name");
dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;") ;
IE中则必须使用style.cssText
var dom=document.getElementById("name");
dom1.style.cssText = "width:10px;height:10px;border:solid 1px red;";
补充一下，目前style.cssText类似innerHTML了，已经成为一个web开发的事实标准。因此测试显示firefox浏览器也支持这种方式。
jquery 给按钮添加样式
增加class：$("button").addClass("aa");
删除class：$("button").removeClass("aa");
CSS样式部分
大小 font-size: 12px，x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
行高 line-height: normal;(正常) 单位：PX、PD、EM
大小写 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;(居中)
如何用JS给div添加样式
用JS给div添加样式是通过js操作css来实现的。
用js方法找到div的dom对象
通过js操作css的style属性来改变div的样式
具体举例如下：
定义div:<div id="myDiv" style="color:red">改变样式测试</div>
编写js代码：
var color = document.getElementById("myDiv").style.color;
if (color == "red")
document.getElementById("myDiv").style.color="black";
else
document.getElementById("myDiv").style.color="red";
执行js代码后，div原来是红色会变成黑色，原来是别的颜色会变成红色
参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>box</title>
<script>
window.onload = function()
var mydiv = document.getElementById("box");
mydiv.style.height = "100";
mydiv.style.border = "1px solid #000"
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
以上是关于怎么给按钮添加CSS样式?的主要内容，如果未能解决你的问题，请参考以下文章