Front-end HTML&CSS study notes 5 (based on Shang Silicon Valley teaching video)

Forty-one episodes (font style one)

1.设置字体前景色 color
例如：color:red;

2.设置字体大小：font-size（一般浏览器中默认字体大小都是16px）
例如：font-size:20px;
注：其设置的并不是文字本身的大小，而是字体虚拟边框的大小

3.设置文字字体：font-family（且可以同时指定多个字体，优先使用前面那个,如果前面没有则用下一个，字体库默认使用计算机中的字体）
例如：font-family:华文彩云，arial;

Forty-three episodes (font classification)

1.serif（衬线字体）
2.sans-serif（非衬线字体）
3.monospace（等宽字体）
4.cursive（草书字体）
5.fantasy（虚幻字体）

6.可以将字体设置为这些大的分类，当设置为大的分类后，浏览器会自动选择指定字体应用

7.一般会将字体的大分类指定为font-family中的最后一个字体（类似于作为最后方案）
例如：font-family:宋体，微软雅黑，serif;

Forty-four episodes (font style 2)

1.font-style：可以设置文本样式
可选值：
	normal：默认值
	italic：斜体

2.font-weight：可以设置文本加粗	 
可选值：
	normal：默认值
	bold：加粗

3.font-variant：可以设置小型大写字体
注：小型大写字体是指将所有字母转换成大写，但是 小写字母的大写 要比 大写字母的大写 小一些
可选值：
	nomal：默认值，正常显示
	small-caps：以小型大写字母显示

1.以上几种样式可直接合起来一起写，利用font样式
例如：font:italic bold small-caps 50px "微软雅黑"
注意：
	斜体 加粗 大小转换 这三种可写可不写，没有顺序要求
	但是大小和字体必须写，而且顺序必须是倒数第二和倒数第一

Forty-five episodes (line height/line spacing)

1.行高：类似于单线本，线与线之间的距离就是行高，文字会默认在行高中垂直居中显示
2.行间距 = 行高 - 字体大小
3.利用 line-height 来设置行高
可设置的值：
	像素大小
	百分数：会根据 字体大小乘以百分数 计算相应行高
	数值：会根据 字体大小乘以数值 计算行高
例如：
#p1{
	font-size:30px;
	line-height:50px;
}

#p1{
    font-size:30px;
    line-height:200%;
}

#p1{
    font-size:30px;
    line-height:2;
}

4.对于单行文本来说，可以将行高设置为与父元素高度相同，这样可以使文本在父元素中垂直居中显示

5.在font中也可以设置行高
格式：font:大小/行高 字体;
例如：font:20px/40px "微软雅黑";

注：这里面的行高是可选的，如果不写则会采用默认值，因此line-height不能写在font前面，否则line-height所设置的行高值将会失效

Forty-six episodes (text style)

1.text-transform可以用来设置文本大小写

2.text-decoration可以用来修饰文本（上划线，下划线，中间线等）
注：可以通过这个去除超链接的下划线

3.text-spacing: 10px; 可以设置字母与字母，字符与字符间的距离
  word-spacing: 10px; 可以设置词与词之间的距离
 
4.text-align: center; 设置文本的对齐方式

5.text-indent: 10px; 用于设置文本首行缩进（单位可以是px,也可以是em,值也可是负值，用于隐藏文字）

Episode forty-seven (Introduction to the box model)

1.页面中所有的元素都在一个一个的盒子里
2.盒子用于页面布局
3.盒子的组成部分：内容区，内边距，边框，外边距

Episode forty-eight (box model-border)

1.width,height 设置盒子内容区的宽高

2.边框必须设置三个样式，缺一不可
border-width
border-color
border-style
注：都可以分别指定 四个值（顺时针），三个值（上，左右，下），两个值（上下，左右），一个值（都一样）

Episode forty-nine (border abbreviation attribute)

1.大部分浏览器中边框width color 都有默认值，而style的默认值是none，所以换句话说，只要设置style就能体现出边框
2.边框样式简写：可以同时设置边框样式宽度颜色，且没有顺序要求
例如：border:red solid 10px;
3.设置三条边，有一条不设置的简写方式如下：
例如：border:red solid 10px;
      border-right:none;

Fifty episodes (box model-padding)

1.内边距会影响盒子可见区的大小，元素的背景会延伸到内边距
2.盒子的大小由内容区，内边距，边框共同决定
3.内边距简写：可以同时设置上下左右边距
注：可以指定 四个值（顺时针），三个值（上，左右，下），两个值（上下，左右），一个值（都一样）

Front-end HTML&CSS study notes 5 (based on Shang Silicon Valley teaching video)

Guess you like