web developer bootcamp（二） CSS

发表于 | |

只有 HTML ，网页看起来很丑，加上了 CSS ，看起来就漂亮多了。将 HTML 与 CSS 分开，同一个 HTML 文件用不同的 CSS 会得到风格相差极大的网页。 csszengarden 在这个网站你可以体会到 CSS 得到的强大。

The General Rule

CSS 的格式为

1
2
3
4
selector {
	property: value;
	anotherProperty: value;
}

selector 选择 HTML 中的某个或某些元素，然后设置其中的字体、颜色等属性。

加入 CSS 的方法


第一种是没有 CSS 的时候用的，第二种调试的时候用，不用再新建一个 CSS 文件。
CSS 的注释为 /* 注释 */。
真正使用的时候是用一个 link 标签将 HTML 与 CSS 连接在一起

rel 代表 relationship，herf 代表 hypertext reference

Colors

  • 内置颜色，多到记不住，如color： red
  • 十六进制表示，如color: #4B0082，每两位分别代表 RGB ，最大值为 255
  • RGB ，如color： rgb(0,255,0)，每个值的范围是 0 - 255
  • RGBA ，如color： rgb(0,255,0，0.9)，最后一个值控制透明度，范围 0 - 1，1 为不透明

Background and Border

Background

给文字加一个背景颜色

背景也可以设置成图片

如果图片过小，会在网页上重复,这时可使用代码

1
2
background-repeat: no-repeat;
background-size: cover;

no-repeat 禁止图片重复显示，cover 使图片拉伸以覆盖整个网页。

Border


border 有三种可以设置的选项，width、color 和 style。图中的代码显示了两种设置 border 的方法，一般用后者。

Chrome Inspector

在 Chrome 中右键检查，就可以查看某个元素的相关代码，也可以修改。

More Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*Element直接知明元素 */
li {
}
/*class*/
.hello {
}
/*id*/
#name {
}
/*Star 全选*/
* {
	border: 1px solid lightgrey;
}
/*Descendant Selector 选择所有 li 中的 a 标签*/
li a {
	color: red;
}
/*Adjacent Selector 选择所有在 h4 之后的 ul 标签*/
h4 + ul {
	border: 4px solid red;
}
/*Attribute Selector 选择属性为某一值的标签*/
a[href="http://www.google.com"] {
	background: blue;
}
/*nth of type 选择某种类型的第几个标签,li:之后不能有空格*/
li:nth-of-type(odd){
	background: purple;
}

Inheritance and Specificity

Inheritance

继承的意思是如果我赋予一个元素某种属性，那么这个元素其中的所有元素也会有这种属性。举个栗子，我指明 body 为 red，那么 body 中的所有元素都是 red。

Specificity

1
2
3
4
5
6
p {
color: green;
}
body {
color: red;
}

如果有以上的代码，那么 p 的颜色会是绿色，因为 p 比 body 指向的元素更具体，优先级也就更高。Selector优先级的排序由低到高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*Type Selector*/
li {
}
li a {
}
li + a {
}
Class, Attribute, and Psedu-Class Selector
.hello {
}
input[type="text"] {
}
ID Selector
#hello {
}

字体

不同的的机器上拥有的字体往往不同，有的字体在 Windows 的机器上覆盖律很高但在 Mac 上覆盖率为 0，反之亦然。

一些字体的基本设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*font-family*/
p {
	font-family: "Arial";
}
/*font-size*/
body {
	font-size: 10px;
}
/*The size of an em value is dynamic, an em is equal to the
size of the font that applies to the parent of the element in question*/
h1 {
	font-size: 4.0em;
}
/*font-weight 字体有多粗*/
p {
	font-weight: bold;
	/*有的字体可以用数值 100 - 800*/
}
/*line-height 行间距*/
p {
	line-height: 2;
}
/*text-align*/
h1 {
	text-align: center;
}
/*text-decroation*/
p {
	text-decoration: line-through;
}

使用谷歌字体

在 Google Font 的网站上选择好之后会产生一行代码，将其放到 head 元素中，就可以在 CSS 中使用该字体。

Box Model


一些常用的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
p {
	/*Content - Width and Height*/
	width: 200px;
	/*width: 50%；*/
	/*父元素大小的 50% 可随窗口大小变化*/
	/*Border*/
	border: 2px solid blue;
	/*Padding*/
	/*padding: 100px;*/
	padding-left: 40px;
	/*Margin*/
	/*margin: 100px;*/
	/*margin-top: 500px;*/
	/*margin: top right bottom left;*/
	/*margin: 0 auto 0 auto; 左右居中*/
	/*0 可以省略 px*/
	/*margin: 0 auto; 上下 左右*/
	margin: 50px 20px;
}

快捷键及其他

  • 在 Sublime 中，按 control 并点击鼠标可以进行多行操作。
  • Ctrl + ← 单位性左移
  • Ctrl + → 单位性右移
  • 设置了float属性的元素会根据属性值向左或向右浮动。
  • 一个小影集
  • 一个小博客