前端

颜色表示方法

rgb或rgba

rgb(0到255或0%到100%)代表红绿蓝三个颜色深度，a(0到1或0%到100%)代表不透明度(0代表完全透明)。我更喜欢直接数字表示而不是百分比。

1
2
3
4
5
6
#id1 {
  color: rgb(255,37,90);
}
#id2 {
  color: rgba(100,30,90,0.5);
}

16进制

这是我比较喜欢的表示方法，格式为#rrggbbaa，rr,gg,bb分别代表红绿蓝的颜色深度，aa代表不透明度，其范围都是00~ff的16进制数。最后的aa位置可以不写，默认是完全不透明。

1
2
3
4
5
6
#id1 {
  color: #abcd09;
}
#id2 {
  color: #bc07fbaf;
}

HSL或HSLA

我不太喜欢用这种方法(因为我不熟悉)，所以懒得说了，以后如果遇见”color:”后面跟个”hsl”那么就是这种颜色表示方法，不知道什么意思的话，现查现学就行了。掌握那么一两种颜色表示方法已经够用了。但这都不是最重要的，重要的是见到”color”就知道是修改颜色的意思就行了。

字体属性

这些东西感觉都不太重要，也比较容易理解，而且东西又多又杂，全背下来不太可能，现查现学现用就行。
一共有这么几个常用的属性：

1
2
3
4
5
6
div {
  font-size: 40px;/*字体大小。*/
  font-family: "Micorsoft YaHei";/*字体类型，默认微软雅黑，最好写双引号加英文。*/
  font-style: italic;/*字体风格，这里是意大利斜体，我最喜欢的英文书法。*/
  font-weight: lighter;/*字体粗细。*/
}

还有一种符合写法，但是有规则：

  1. 字体大小、字体族必须都写上。
  2. 字体族必须是最后一位、字体大小必须是倒数第二位。
  3. 各个属性间用空格隔开。
1
2
3
div {
  font: italic lighter 40px "Micorsoft Yahei";
}

文本属性

这部分内容也是比较简单繁琐，要用什么现查现用。

文本颜色

1
2
3
4
div {
  color: #a90cb9;
  /*color: rgb(78,79,90);*/
}

文本间距

1
2
3
4
5
div {
  /*单位px，可正可负，负数是减小间距。*/
  letter-spacing: 20px;/*字母间距*/
  word-spacing: 50px;/*单词间距(通过空格识别单词或汉字词语)*/
}

文本修饰

1
2
3
4
5
6
7
8
div {
  text-decoration: line-through;
  /*
  none ： 无装饰线
  underline ：下划线
  overline ： 上划线
  line-through ： 删除线*/
}

文本缩进

1
2
3
div {
  text-indent: 40px;
}

文本水平对齐

1
2
3
4
5
6
7
div {
  text-align: center;
  /*left ：左对齐（默认值）
    right ：右对齐
    center ：居中对齐
  */
}

行高

line-height有继承性。

1
2
3
4
5
div {
  line-height: 100px;
  /*line-height: 2.5px;*/
  /*line-height过小文字会重叠。*/
}

当已经设置了height时，元素的高度就是height，否则会根据line-height计算height。

垂直对齐

指定同一行元素之间，或表格单元格内文字的垂直对齐方式。

1
2
3
4
5
6
7
div {
  vertical-align: middle;
  /*baseline （默认值）：使元素的基线与父元素的基线对齐。
  top ：使元素的顶部与其所在行的顶部对齐。
  middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
  bottom ：使元素的底部与其所在行的底部对齐。*/
}

列表属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ol,
ul {
  list-style-type: lower-roman;
  /*设置列表符号
    none ：不显示前面的标识
    square ：实心方块
    disc ：圆形
    decimal ：数字
    lower-roman ：小写罗马字
    upper-roman ：大写罗马字
    lower-alpha ：小写字母
    upper-alpha ：大写字母*/
  list-style-position: inside;
  /*设置列表符号的位置
  inside ：在 li 的里面
  outside ：在 li 的外边*/
  list-style-image: url(图片链接);/*自定义列表符号。*/
  /*list-style,复合属性没有数量、顺序的要求。*/
}

表格属性

1
2
3
4
5
6
7
8
9
10
11
table {
  border-width: 10px; /*边框宽度*/
  border-color: red; /*边框颜色*/
  border-style: dashed; /*边框风格*/
  /*none 默认值
  solid 实线
  dashed 虚线
  dotted 点线
  double 双实线*/
  /*border: 20px blue dashed;复合属性*/
}

上面几个不仅可以用于表格，还可以用于其他元素。
下面几个属性是table独有的。

1
2
3
4
5
6
7
8
9
10
11
12
13
table {
  table-layout: auto;/*设置列宽*/
  /*auto ：自动，列宽根据内容计算（默认值）。
  fixed ：固定列宽，平均分。*/
  
  border-spacing: 10px;/*单元格间距*/
  border-collapse: separate;/*合并单元格*/
  /*collapse ：合并
  separate ：不合并*/
  
  empty-cells: show; /*隐藏没有内容的单元格，可选show和hide。*/
  caption-side: top; /*设置标题位置，可选top和bottom。*/
}

背景属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div {
  background-color: pink;
  background-image: url(图片链接);
  background-repeat: no-repeat;/*
  设置背景重复方式。可选：
  repeat ：重复，铺满整个元素，默认值。
  repeat-x ：只在水平方向重复。
  repeat-y ：只在垂直方向重复。
  no-repeat ：不重复。*/
  background-position: 20px 10px;/*
  设置背景图片位置，左上角为原点。还有关键词可选值：
  写两个值，用空格隔开
  水平： left 、 center 、 right
  垂直: top 、 center 、 bottom
  如果只写一个值，另一个方向的值取 center。*/
  /*background: 复合属性;*/
}

鼠标属性

设定鼠标放在某个元素上时的样式。

1
2
3
4
5
6
7
8
9
body {
  cursor: pointer;
  /*pointer ：小手
  move ：移动图标
  text ：文字选择器
  crosshair ：十字架
  wait ：等待
  help ：帮助*/
}

上面这些作用不大，我觉得最重要的是自定义鼠标图标。

1
2
3
4
body {
  cursor: url(图片链接),pointer;
  /*注意图片的大小不要超过30×30，最好是png格式，因为需要透明。*/
}