所谓全栈,个体可以独立地完成系统的设计、开发、测试、部署以及运维。打通一个领域从无到有的全过程。
为什么会有 markdown 文本编辑显示工具呢,因为 html 太重了。markdown 是 html 的一种简化思路,css 则是另外一种。css 是对 html 其中部分工作的提取和分担,这部分的工作就在于 html 各种标签的属性以及 style 属性的定制等。使得 html 单纯用于文档结构格式和整体布局。
css 是 html 的一个辅助语言,用来描述网页样式,html 没有css也可以工作(可以通过标签的各种属性以及 style 属性定制样式),但 css 可以把样式做抽象,和 html 剥离,这样 html 单纯用作布局(css 与 html 的关系因此也可以看做,抽象和分离的关系)。
hello_world.html
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>hello world</h1> </body> </html>
style.css
h1 { color: red }
1. 设置标签样式
CSS 样式通常写在
<head></head>
下的<style></style>
下:<html> <head> <style type="text/css"> </style> </head> <body> ... </body> </html>
我们可以在 style 标签内将 body 标签的前景色设置为红色:
<style type="text/css"> body { color: red; } </style>
2. 设置 id 样式
比如我们在网页主体(body)中使用
<div>
标签(div,division,区块,用于划分版区),定义一个 id 为 swatch 的版区:<body> <div id="swatch"> </div> </body>
通过 # 进行索引,然后设置样式:
<style type="text/css"> #swatch { width: 150px; height: 100px; color: #fff; background-color:blue; } </style>
3. 设置 class 的样式
class 类属性用来标识一组具有相同性质的元素;
<body> <p class="marker">....</p> <p> <span class="marker">....</span> <span class="marker">....</span> </p> </body>
通过 . 进行选择定位:
<style type="text/css"> .marker { background-color:#ff; } </style>
4. 复合选择器(compound selector)
<div id="bt">
<a >....</a>
</div>
<p>
<a ...></a>
</p>
这时如何定位<div>
下的 <a>
而不是<p>
下的呢?就要用到 compound selector 的概念了:
#bt a {
text-decoration: none;
}