2019年，我踏上了css这条漫长的道路，计划沿途学一下markdown。这种文章我猜估计没人看，就当自娱自乐玩 :-)
教程
我是跟着W3School的CSS教程来学，目前看来上面的教程只需要HTML和CSS即可，还不需要JavaScript。
插件
由于我不想每次保存HTML都要手动刷新，我就买了一个Google Chrome的extension LivePage。只要3.99加币，所以还能接受。（后来发现好像有免费的 (`Д´*)9 比如说Auto Refresh）
语法
h1 {
color: blue;
}
h1 是selector，color 是property， blue是value
如果要在html里面载入css的话就写<link rel="stylesheet" href="styles.css"> 在<head>里面
selector的语法
p {
color: blue;
}
p指的是 这一页所有的<p>
#param1 {
color: blue;
}
#param1 指的是这一页有id="param1" 的tag，例如<h1 id="param1">。注意，param1在这一页只应该出现一次。虽然说有多个id=param1 好像也可以。。？
.center {
text-align: center;
}
.center 指的是这一页里面有class="center"的selector。
p.center {
text-align: center;
color: red;
}
p.center 指的是只有<p> 里面有class="center"的selector会拥有这个css。
h1 {
color: red;
}
h2 {
color: red;
}
...
h1, h2 {
color: red;
}
如果你的selector有相同的value的话，最好把他们组在一起。
如何引用CSS
有三种方法：
- External Style Sheet
- Internal Style Sheet
- Inline Style
External Style Sheet
就是在head里面引用CSS，比如
<link rel="stylesheet" href="styles.css">
这样你就可以把CSS和HTML分开了，一般都是用这种
Internal Style Sheet
就是在HTML里面写入Style，比如
<head>
...
<style>
h1 {
color: red;
}
</style>
</head>
...
Inline Style
可以在Selector里面加入style，比如
<h3 style="color:red; margin-top: 30px">哭唧唧o(TωT)o</h3>
比如说你的external 和internal css都有同一个selector，那最后一个被读取的css将会被用。比如
# styles.css
h1 {
color: blue;
}
...
#index.html
<style>
h1 {
color: orange;
}
</style>
<h1>猜猜我是不是皮卡丘</h1>
那这里的h1 就是橘（猫）色的。如果internal是在external 之前 define的话就用的是external。
权重顺序
- Inline Style （最高）
- External / Internal
- 浏览器默认 （最低）
不过如果有 !important 在CSS里面，这个权重为最高！
颜色
背景色
h1 {
background-color: red;
}
字体颜色
h1 {
color: red;
}
边框颜色
h1 {
border: 2px solid red;
}
颜色值
h1 {
color: #ff6347;
}
h2 {
color: rgb(255, 99, 71);
}
可以用hex 也可以用rgb,hsl,rgba,hsla，rgba的a 是alpha，也就是透明度 [0, 1]。
背景
background-color 上面讲过了
背景图片
body {
background-image: url("image/background1.jpg");
}
比如如果你只想横着repeat的话，那就 background-repeat: repeat-x 他还有这些
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
如果要固定一个地方的话，可以用background-position: right top;
position可以有
# 方向
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
# %横着 %竖着
%40 %30
#初始值
initial
#集成
inherit
教程上说 100% 100%是右下角，不过为啥我自己做的时候就编程这样了。。。
网友评论