稻米鼠的编程漫谈（更新至 0010）

大家的板块 稻米鼠的频道🐹
17

0010

做点什么呢，做个按钮吧，为什么是按钮呢，我不知道，反正就是玩。

第一次会很慢，把涉及的东西都捎带讲一讲，反正当聊天，不会很强的线索感。你也放轻松，别老想着一下子学会什么，咱就边走边聊~

按钮呢是一个元素，这个元素有内容，然后点击它要执行点什么动作，诶，这就比较全面，那我们先来写个按钮：

<button>这就是一个按钮</button>

完全是我们前面接触过的知识，单词也很明确，十分简单。不要觉得无聊嘛，点了没有任何反应的按钮也很好玩的：

<p>请点击下方按钮领取我的祝福，如果没有反应，说明……你笨！</p>
<button>点击这里，聪明的人会获得大大的祝福</button>

看得懂吧，稍微有点娱乐效果的，只是太简单了，而且效果也太……朴素了。如果这个界面很华丽，大概能提升那么点娱乐效果。说到这里，那位设计师朋友立刻做了一张华丽的图片，反正都是点击没反应，图片也可以！只不过鼠标放在按钮上没有变成手型标志，有点穿帮。

哪怕只会一句代码，我也要想方设法用它玩耍，要不然学这劳神子干嘛。

按钮不好看，我们怎么办？当然是给它设定样式了，对，就是写 CSS，你立刻就写出了如下代码：

<style>
  button {
    color: red;
  }
</style>
<button>这就是一个按钮</button>

都讲过，对不对，就是组合一下嘛，搭积木一样啦。

不过这是所有按钮都这个样子，我们要精准一点，只针对这个按钮。一对一，用 id，于是：

<style>
  #this-button {
    color: red;
  }
</style>
<button id="this-button">这就是一个按钮</button>

还是讲过的吧。不过提醒大家哦：HTML 的代码是不区分大小写的，但是 JS 是区分的。然后 HTML 里面的命名可以用短划线，就像上面这样，而且好多也是这么设定的，还有 CSS 属性名里也可以用，后面会看到的。但是 JS 里面命名就不能用，因为会被当成减号。

诶，有点绕？！那简单，你跟我学，只要是命名，我只用字母和数字，我不管它是否区分大小写，我自己严格区分大小写，然后第一位一定是字母，就基本上不会出错了。

然后老鼠眼神不好，鼠目寸光，所以咱们把按钮的文字弄大一点：

<style>
  button {
    color: red;
    font-size: 32px;
  }
</style>
<button>这就是一个按钮</button>

看 CSS 的命名里有短划线吧，这俩单词应该都认识吧，文字的尺寸，大概是吧，我英文不好，我猜的……

px 是像素，反正初学先用这个就行。默认文字一般 16px 这样，我也不知道。不过这个数值不能调的太小，一两像素都没法表现一个文字了。所以浏览器会有一个限定，小于 12px 的文字强制按照 12px 进行显示，不能再小啦。不过这个值（12px）在一些浏览器里是可以自己修改的。

这次先到这里，好像，也没讲啥新东西。

你不点个赞，我怎么知道有人看呢？

或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电

1 个赞