【CSS学习】起点

2019-01-07 本文已影响0人甘甘茶

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%是右下角，不过为啥我自己做的时候就编程这样了。。。