html5 加上魔法,简单易懂的React魔法(28):是时候添加一些CSS样式了

现在的页面超级难看，你我都知道。因为这只是一些HTML ,还是3.2版本的。如果我开始教你CSS的话就超出这本书的范围了。但是在继续之前，我想稍微加点样式让整个程序看起来好看一点。

在dist文件夹中创建名为style.css的新文件。添加一些CSS规则进去。

dist/style.css

body {

line-height: 1.428571429;

font-family: sans-serif;

}

h1 {

font-weight: 100;

font-size: 250%;

margin-bottom: 0;

color: #0275d8;

}

a {

color: #0275d8;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

a.active {

color: black;

}

button {

padding: 5px 20px;

background-color: white;

margin: 10px;

border: 1px solid #aaaaaa;

border-radius: 5px;

outline-width: 0;

}

button:active {

background-color: #dcdcdc;

}

然后再在index.html中引入它：

dist/index.html

你要是想多添加一些CSS进去也可以，但是最好还是继续往下看吧，毕竟React才是重点，不然你可能会半途而废。