前言

终究还是要走这一步，以前这些都不屑于学，需要的时候临时查，复制粘贴着用。

最近自己比较正式地在捣鼓个界面程序，用到HTML+CSS，在忙碌的欢乐斗地主中抽出时间跟着教程走了一遍，好记性不如烂笔头。

对照教程来自表严肃：https://biaoyansu.com/9.14

语法

1
2
3
4
5
6
7
8
9
10
11
//直接写在HTML中小范围用，一般放css文件中再引用
<style> 
  div { //选择器，{}包围属性值
    backgroud: black; //属性: 值，以;换行结尾
    border: 2px solid red;
  }

.news-input {
     color: green;
  }
</style>

选择器

用于限定样式作用的范围

元素选择器

1
2
3
4
div { //选择器，{}包围属性值
    backgroud: black; //属性: 值，以;换行结尾
    border: 2px solid red;
  }

多个选择器使用同一样式用 , 分隔：

1
2
3
div, p, h1 {
    backgroud: black;
  }

类选择器&ID选择器

  1. . 类选择器：用来定义一类元素
  2. # ID选择器：一般用来定位页面中唯一的元素

属性选择器

1
2
3
4
5
6
7
8
<div>
   <p class="text-white" title="此处有显示">白色字体</p>
   <p class="bg-dark">黑色背景</p>
   <div class="input-group news-input">
     <input type="text" class="form-control" placeholder="请输入你的邮箱" />
     <button title="点击此处" class="btn btn-dark btn-lg">注册</button>
   </div>
</div>

使用 [] 包含元素选择器：

1
2
3
[title="点击此处"] {
  color: green;
}
  1. [title^="点击"]：匹配 title 中的值以 点击 开头
  2. [title*="此"]：匹配 title 中的值包含 此
  3. [title$="此处"]：匹配 title 中的值以 此处 结尾

后代选择器

1
2
3
4
5
6
<div class="a">这是A
  <div class="b">这是B
    <div class="c">这是C1</div>
    <div class="c">这是C2</div>
  </div>
</div>

后代选择器以 空格 隔开，如 .a .b {...}

1
2
3
4
5
6
7
8
9
10
11
12
div {
  padding: 10px;
  background: rgba(255, 0, 0, .2); //a表示不透明度，1完全不透明，0完全透明
}

.a {
  border: 2px solid black;
}

.a .b { //匹配a类下的b
  background: rgba(0, 255, 0, .2);
}

相邻选择器&通用相邻选择器

两者都只能从上往下选：

  1. + 相邻选择器： .a + div {...} ，以 a 类为基准，选择之后一个 div
  2. ~ 通用选择器： .a ~ div {...} ，以 a 类为基准，选择之后所有同级 div

伪类选择器

1
2
3
4
5
6
button:hover {
  background: #fff;
  -webkit-transition: color 200ms;
  -o-transition: color 200ms;
  transition: color 200ms; //200ms颜色过渡
}

: 为标志，可以定义某个元素对应的动作状态，常用的有：

  1. :focus ：可以输入的，具有焦点输入的元素
  2. :link ：未访问的
  3. :visited ：已访问过的
  4. :hover ：鼠标移动到上面
  5. :active ：鼠标点击时

伪元素选择器

1
2
3
4
<body>
<p>it is a test</p>
<a class="help">点这里注册</a>
</body>

css3开始以 :: 标记，区分伪类选择器

1
2
3
4
5
6
7
p::first-letter {  //定义第一个文字
  font-size: 50px;
}

.help::after { //在help类内容后头添加[?]
  content: [?]
}
  1. ::first-letter：第一个文字
  2. ::before：段落前
  3. ::after：段落最后 (content加内容)
  4. ::first-child：第一个元素
  5. ::last-child：最后一个元素
  6. ::nth-child(n)：选择第n子元素，详细说明可见：:nth-child

选择器权重

style 属性（内联） > ID 选择器 > 类选择器 / 属性选择器 / 伪类选择器 > 元素选择器

1
2
3
div {
  color: red !important; /* 最高级别 */
}

可以覆盖行内样式的只有 !important ，我们一般不会首先使用这类核武器，它会碾压所有的样式规则，因为他拥有终极的权重，这也意味着 !important 是最不灵活的。

权重的计算

我们可以将纵轴的四级用数字的方式记录为 0, 0, 0, 0，即行内样式, ID选择器, 类选择器, 元素选择器。这样无论选择器有多复杂我们都可以精确的计算出来，比如说如下例子中的 <a> 元素我们可以有很多中选择方式，但不同的选择方式的权重是不同的。

1
2
3
4
5
<p>
 <span>
   <a id="sober" class="black">我是个清醒的链接</a>
 </span>
</p>
选择器 权重
a 0,0,0,1（最低）
p a 0,0,0,2
p > span a 0,0,0,3
.black 0,0,1,0
[class=“black”] 0,0,1,0
a.black 0,0,1,1
#sober 0,1,0,0
a#sober.black 0,1,1,1
p a#sober.black 0,1,1,2（最高）

属性

字体属性

1
2
3
4
5
6
p {
  font-family: "微软雅黑", "Microsoft Yahei";
  //优先使用微软雅黑，不存在就往后找，都没有则启用浏览器默认字体
  font-weight: 600; //粗体，100-900
  font-size: 18px; //也可以用百分比，按父元素大小比例显示
}

文本属性

1
2
3
p {
  text-align: center;
}

主要是文本排版相关，主要有以下属性：

  1. text-align：文本对齐方式
  2. line-height：行高，即行间距
  3. text-decoration：文本装饰：默认为 none，常用 underline，overline，line-through

display 属性

1
2
3
.block-box {
    display: block; 
}
  1. block：块，默认占整宽，气场最足，哪怕限制了宽度，他依然会用 margin 填充剩下的部分。
  2. inline：行内元素，指定 padding： 10px 时只会左右推开，上下不受影响
  3. inline-block：行内块，指定 padding： 10px 时会上下左右推开
  4. none：隐藏不显示

盒子模型

懒得码字，盗一张aardio论坛看到的图：

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
  .g-pa {
    font-size: 25px;
  }

  .pa {
    color: royalblue;
  }
</style>

<div class="gg-pa">
  曾爷爷：本尊展示
  <div class="g-pa">
    爷爷：我要祖传 font-size
    <div class="pa">
      爸爸：我要祖传 color，继承 font-size
      <div class="me">
        Yo，这行继承 color + font-size
      </div>
    </div>
  </div>
</div>