ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
## CSS 是WEB页面的美容师 层叠样式表 — 也就是CSS,用于设计风格和布局。比如,我们可以使用CSS来更改内容的字体、颜色、大小、间距,将内容分为多列,或者添加动画及其他的装饰效果。 ## 入门示例 还是以chapter01中的hello.html为例 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> ``` 用浏览器打开这个hello.html后,显示如下 ![](https://box.kancloud.cn/02f75dd63981aae9d0d94c7cb760302d_713x155.jpg) 如果我们想让“世界!” 这两个字的字体变大,变红,并且整行居中,我们该如何处理呢? 很简单,添加css样式! **方式一:直接在标签中,添加style属性** 修改body中的`<h1>你好,世界!</h1>`如下 ```html <h1 style="text-align: center">你好,<span style="color: red;font-size: 50px">世界!</span></h1> ``` 重新用浏览器访问这个hello.html后,显示如下 ![](https://box.kancloud.cn/d2a8ea5ec665aa99bf9ddac11385ab68_1424x171.jpg) **方式二:在html页面中,添加style样式** 首先给需要调整样式的元素,添加class或id ```html <h1 class="head_title">你好,<span id="world">世界!</span></h1> ``` 然后在html中,添加style样式,一般我们会在head中添加,如下 ```html <style> .head_title{ text-align: center } #world{ color: red; font-size: 50px } </style> ``` 重新用浏览器访问这个hello.html后,显示如 ![](https://box.kancloud.cn/d2a8ea5ec665aa99bf9ddac11385ab68_1424x171.jpg) **方式三:在css文件中添加style样式** 首先同方式二,给需要调整样式的元素,添加class或id ```html <h1 class="head_title">你好,<span id="world">世界!</span></h1> ``` 然后在css文件中添加style样式,如hello.css ```css .head_title{ text-align: center } #world{ color: red; font-size: 50px } ``` 然后在html中,引入hello.css,我们一般也是在head中引入 ```html <link href="hello.css" rel="stylesheet"> ``` 重新用浏览器访问这个hello.html后,显示如 ![](https://box.kancloud.cn/d2a8ea5ec665aa99bf9ddac11385ab68_1424x171.jpg) ## 那些必须了解的CSS知识 推荐一个学习网站,请务必要认真学习并且掌握。 [https://developer.mozilla.org/zh-CN/docs/Learn/CSS](https://developer.mozilla.org/zh-CN/docs/Learn/CSS)