简单易懂的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

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容