前端学习_css笔记（2）文本与背景

前端学习_css笔记（2）文本与背景

1.font文本

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素
font-family	字体	如1.1所注明
font-weight	字体粗细	加粗为 700 或者 bold 不加粗 是 normal 或者 400 数字表示时不需要单位
font-style	字体样式	属性 倾斜：italic 不倾斜：normal 工作中常用 normal
font	字体连写	1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现

1.1 font-family:定义字体

p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}

注意：
1. 各种字体之间使用英文逗号隔开。
2. 中文字体需要加英文引号，英文字体一般不需要引号。
3. 当需要设置英文字体时，英文字体名必须位于中文字体名之前。
3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

1.2 font-weight:字体粗细

属性值	描述
normal	默认值（不加粗）
bold	定义粗体（加粗）
100~900	400 等同于 normal，而 700 等同于 bold

平时更常用数字来表示加粗和不加粗

1.3 font:综合设置字体样式

• 基本语法格式如下：（风格 粗细 字号 字体 ）

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

• 注意：
  • 不能更换顺序，各个属性以空格隔开。
  • 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

2.行高的特殊用法 （line-height）

行高利用最多的一个地方是让单行文本在盒子中垂直居中对齐。

**文字的行高等于盒子的高度。**行高 = 上距离 + 内容高度 + 下距离

行高和高度的三种关系

• 如果 行高等于高度 文字会 垂直居中

  （上距离和下距离总是相等的，因此文字看上去是垂直居中的）

• 如果行高大于高度 文字会 偏下

• 如果行高小于高度 文字会 偏上

3. CSS文本外观属性

属性	表示	注意点
color	颜色	color属性用于定义文本的颜色，我们通常用 十六进制的简写形式 #fff
line-height	行高（行间距）	一般情况下，行距比字号大7.8像素（px）左右就可
text-align	水平对齐	可以设定文字水平的对齐方式 属性值： left right center
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em; （em字符宽度的倍数）
text-decoration	文本修饰	属性 添加下划线 underline 取消下划线 none

4. CSS 背景(background)

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径) none:无背景图（默认的）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y 纵向横向平铺/不平铺/横向平铺/纵向平铺
background-position	背景位置	length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll 背景随内容滚动/fixed 固定
背景简写	更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

1) 背景位置(position) 重点

• 语法：

background-position : length || length

background-position : position || position 

参数	值
length	百分数 | 由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right 方位名词

• 注意：
  • 必须先指定background-image属性
  • position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
  • 如果指定两个值都是方位则两个值前后顺序，比如left top和top left效果一致
  • 如果只指定了一个方位名词，另一个值默认居中对齐。
  • 如果position 后面是精确坐标， 那么第一个是 x 第二是y
  • 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
  • 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

2) 背景简写

• background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议如下写：
• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
• 语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;