前端HTML5 +CSS3 4.CSS基础 3 字体和文本样式 && 4 Chrome调试工具 && 5 拓展 颜色常见取值

前端HTML5 +CSS3

老师：黑马程序员

三. CSS基础

3 字体和文本样式

3.1 字体样式

3.1.1 字体大小

属性名: font-size

取值:数字+px

注意点:

• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效

3.1.2 字体粗细

属性名: font-weight

取值:

注意点：

• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以:正常、加粗两种取值使用最多。

3.1.3 字体样式(是否倾斜)

属性名:font-style

取值:

• 正常（默认值) : normal
• 倾斜:italic

3.1.4 常见字体系列

• 无衬线字体(sans-serif)
  • 1.特点:文字笔画粗细均匀，并且首尾无装饰
  • 2.场景:网页中大多采用无衬线字体
  • 3.常见该系列字体:黑体、Arial
• 衬线字体(serif)
  • 1.特点:文字笔画粗细不均，并且首尾有笔锋装饰
  • 2.场景:报刊书籍中应用广泛
  • 3.常见该系列字体:宋体、Times New Roman
• 等宽字体(monospace)
  • 1.特点:每个字母或文字的宽度相等
  • 2.场景:一般用于程序代码编写，有利于代码的阅读和编写
  • 3.常见该系列字体:Consolas、fira code

3.1.5 字体系列font-family

属性名: font-family

常见取值:

具体字体1,具体字体2,具体字体3,具体字体4…字体系列

• 具体字体:“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
• 字体系列: sans-serif、serif、monospace等…

渲染规则:

• 1.从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
• 2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点:

• 1.如果字体名称中存在多个单词，推荐使用引号包裹
• 2.最后一项字体系列不需要引号包裹
• 3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

3.1.6 样式的层叠问题

给同一个标签设置了相同的样式，此时浏览器会如何渲染呢?

答：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖)，写在最下面的会生效

3.1.7 字体font相关属性的连写

属性名: font(复合属性)

取值:

• font : style weight size family;

省略要求:

• 只能省略前两个，如果省略了相当于设置了默认值

注意点:

• 如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面

3.1.8 字体相关属性总结

• 字体大小: font-size·数字+px
• 字体粗细: font-weight
  正常: normal 或400加粗: bold 或700
• 字体样式: font-style
  正常:normal倾斜: italic
• 字体系列: font-family
  ·具体字体1,具体字体2,具体字体3,具体字体4…字体系列
• 字体连写: font
  font : style weight size family;

3.2 文本样式

3.2.1 文本缩进

属性名: text-indent

取值:

• 数字+px
• 数字+em(推荐:1em =当前标签的font-size的大小)

3.2.2 文本水平对齐方式

属性名:text-align

取值:

注意点:如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素）设置

3.2.4 水平居中方法总结

text-align : center能让哪些元素水平居中?

• 1.文本
• 2.span标签、a标签
• 3. input标签、img标签

注意点:如果需要让以上元素水平居中,text-align : center需要给以上元素的父元素设置

3.2.3 文本修饰

属性名: text-decoration

取值:

注意点：开发中会使用text-decoration : none;清除a标签默认的下划线

3.2.5 文本样式总结

3.3 line-height行高

3.3.1 行高

作用:控制一行的上下行间距

属性名:line-height

取值:

• 数字+px
• 倍数（当前标签font-size的倍数)

应用：

• 让单行文本垂直居中可以设置line-height :文字父元素高度
• 网页精准布局时，会设置line-height : 1可以取消上下间距

行高和font连写时的注意点：

• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family;

4 Chrome调试工具

4.1 Chrome调试工具操作

4.1.1 打开方式

4.1.2 选择元素

4.1.3 控制样式

4.1.4 特殊情况

5 拓展 颜色常见取值

5.1 取值类型：① 关键字

常见颜色取值:

• red:红色
• green:绿色
• blue:蓝色
• yellow:黄色
• orange:橘色
• skyblue:天蓝色
• pink:粉色

5.2 取值类型：② rgb表示法

每项取值范围:0~255

常见颜色取值:

• rgb ( 255,0，0)∶红色
• rgb (0,255,0)∶绿色
• rgb ( 0,0，255 ):蓝色
• rgb ( 0,0，0 )∶黑色
• rgb ( 255,255，255)∶白色

5.3 取值类型：③ rgba表示法

其实，比rgb表示法多个一个a,a表示透明度

a的取值范围:0~1

• 1:完全不透明
• 0∶完全透明

省略写法:
rgba ( 0 , 0，0，0.5)可以省略写成rgba ( 0 , 0,0, .5 )

5.4 取值类型：④ 十六进制

取值范围:

两个数字为一组，每个数字的取值范围:0~9 , a , b , c , d , e , f

省略写法:
如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字

正确写法:#ffaabb改写成#fab

常见取值:

• #fff :白色
• #000:黑色

注意点

• 1.类似于:#ffaabc不能改写成#fabc
• 2．实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色