小白前端06-CSS字体/外观/背景

---

1.CSS字体样式

1.1 font字体

1.1.1 font-size：大小

• 作用：设置字号
• 语法：

  p{
    font-size:20px;
  }
  

• 单位：
  • 相对长度单位：em（相对于当前对象内文本的字体尺寸），px（像素）
  • 绝对长度单位（使用少）：in（英寸），cm，mm，pt（点）

注意：
1.谷歌浏览器默认文字大小为16px；
2.不同浏览器默认的字号大小不一样。

1.1.2 font-family：字体

• 作用：设置哪一种字体
• 语法：
  • 可以同时指定多个字体，中间用,逗号，如果第一个字体浏览器不支持，就尝试下一个，以此类推，实在没有，就用浏览器默认的字体。
  • 中文字体需要加""，英文字体一般不要加""，但如果字体名中包含空格、#、$等符号，必须加""。
  • 要设置英文字体时，英文字体名必须位于中文字体名之前。

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

• CSS Unicode字体
  • 作用：直接写中文字体名，在文件编码（GB2312、UTF-8）不匹配时会产生乱码的错误，且在XP系统不支持类似 微软雅黑的中文。
  • 解决：使用这些字体名对应的Unicode 编码来写，浏览器就可以正确的解析了。
  • 语法：font-family:"\5FAE\8F6F\96C5\9ED1"; 设置字体为微软雅黑。

1.1.3 font-weight：字体粗细

• 在HTML中用标签b strong来表示

• 在CSS中表示是没有语义的

  • 属性：

  属性值	描述
  normal	默认值（不加粗）
  bold	定义粗体
  100-900 (推荐使用)	400等同normal，700等同bold

用数字表示，注意没有单位的

1.1.4 font-style：字体风格

• 在HTML中用标签i em来表示倾斜
• 同样在CSS中表示是没有语义的。
  • 属性：

属性值	描述
normal	默认值（不倾斜）
italic	定义斜体

1.1.5 font的综合写法

• 语法：
  • 连写必须按照这个顺序，不能更改位置
  • 字号和字体不能省略，必须同时出现

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

注意： line-height属性，可以是有单位的，如font:12px/24px "宋体";行高为24px；也可以是无单位的，如font:12px/1.5 "宋体";，行高是12px的1.5倍。

1.2 font总结

属性	表示	注意点
font-size	字号	单位通常是 px 像素
font-family	字体	1.空格隔开 2.有些加引号 3.Unicode字体
font-weight	字体粗细	加粗：700或blod，不加粗：400或normal
font-style	字体样式	倾斜：italic，不倾斜：normal
font	字体连写	1.有固定顺序 2.字号和字体必须存在

---

2.CSS外观属性

2.1 文本颜色

• 作用：color属性定义文本的颜色
• 颜色的表示方式：
  • 预定义的颜色值：red，green等
  • 十六进制：#FF0000，#FF6600，#29D794（不区分大小写，可简写）
  • RGB代码：rgb(255,00,00)或rgb(100%,0%,0%)

注意：最常用的是16进制表示，可以简写如红色：#f00

三原色是 红 绿 蓝，用16进制表示就是#rrggbb，即#000000表示黑色，#ffffff表示白色

2.2 文本水平对齐方式

• 作用：text-align属性设置文本内容的水平对齐方式，相当于HTML中的align对齐属性。
• 属性值：
  • left：左对齐
  • center：居中对齐
  • right：右对齐

注意：是让盒子里面的内容居中对齐，不是让盒子居中对齐。

2.3 行间距

• 作用：line-height属性设置行间距，即行与行之间的距离，指的是字符的垂直距离，一般成为行高。
• 单位：常用的有三种，分别为像素px，相对值em，百分比%，最常用的是像素px。
• 技巧：
  一般情况下，行距比字号大7，8个像素就可以了。

2.3.1 单行文字垂直居中

• 解决方法：行高=盒子高度。
• 原理：
  • 行高：行高=上空隙 + 文字高度 + 下空隙
  • 当行高等于盒子高度时，是行高的上下空隙将文字挤到中间了。如果行高小于盒子高度，则文字偏上；大于盒子高度，则文字偏下。

2.4 首行缩进

• 作用：text-indent属性设置首行文本的缩进。
• 单位：em为字符宽度的倍数，%相对于浏览器窗口宽度的百分比%，允许使用负值。
• 建议：建议使用em为设置单位，1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度。

2.5 文本的装饰

• 作用：text-decoration通常用来给超链接修改装饰效果。
• 属性值：
  • none：默认。定义标准的文本，取消下划线（最常用）
  • underline：定义文本的下划线，链接自带下划线（常用）
  • overline：定义文本的上划线。（不用）
  • line-through：定义穿过文本的一条线。（不常用）

2.6 CSS外观属性总结

属性	表示	注意点
color	颜色	通常使用16进制，可以简写#fff
line-height	行高	控制行与行之间的距离（比字号大7或8个px）
text-align	水平对齐	设置文本水平对齐方式
text-indent	首行缩进	通常首行缩进2个字符，text-indent:2em;
text-decoration	文本修饰	取消下划线：none，加下划线：underline

---

---

3.CSS的背景

• 作用：通过CSS背景属性，给页面元素添加背景样式
• 设置：背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

3.1 背景颜色

• 作用：background-color属性定义了元素的背景颜色。
• 语法： background-color:颜色值;
  • 颜色值：颜色值默认是transparent（透明），也可以手动设置背景颜色为透明色。
  • 设置具体的颜色：直接是颜色的单词，如red、blue等；或者是rgb(红,绿,蓝)，每一个取值是0~255；或者是十六进制表示。

3.1.1 背景颜色半透明（CSS3）

• 语法：background:rgba(红,绿,蓝,透明度);
  • 最后一个参数是 alpha透明度，取值在 0~1之间
  • 习惯把最后一个中0.？中的0去掉，写成为background:rgba(0,0,0,.3);
  • 背景颜色半透明指的是盒子背景半透明，盒子里面的内容不受影响
  • 是CSS3新增的属性，是IE9+版本浏览器才支持的

3.2 背景图片

• 作用：background-image属性描述了元素的背景图片。常见于logo、装饰小图片和超大图片，优点是便于控制位置。
• 语法：background-image: none | url
  • none：无背景图（默认的）
  • url：图片所在的路径

3.3 背景平铺

• 作用：background-repeat属性对背景图片进行平铺设置。
• 语法：background-repeat: repeat | no-repeat | repeat-x | repeat-y ;
  • repeat：平铺满整个盒子
  • no-repeat：不平铺
  • repeat-x：在横轴上平铺
  • repeat-y：在纵轴上平铺

3.4 背景位置

• 作用：background-position属性可以改变图片在背景中的位置。
• 语法：background-position: x y ;
  • x y：x坐标和y坐标，可以使用 方位名词或精确单位。
  • position：top | center | bottom | left | right （方位名词）
  • length：百分数 | 由浮点数字和单位标识符组成的长度值

3.4.1 参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关。即left top和top left效果一样。
• 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

3.4.2 参数是精确单位

• 如果参数是精确单位，则第一个肯定是x坐标，第二个肯定是y坐标。
• 如果只指定一个数值，则该数值一定是x坐标，另一个默认垂直居中。

3.4.3 混合单位

• 方位名词和精确单位一起使用，放在第一个的一定是x坐标的，放在第二个的一定是y坐标的。
• 5px bottom：水平往右移动5px，垂直在底部。center 5px：水平居中，垂直距离顶部5px。

3.5 背景固定（背景附着）

• 作用：background-attachment属性设置背景图像是否随着页面的其余部分滚动。后期可以通过这个属性来制作视差滚动效果。
• 语法：background-attachment : scroll | fixed ;\
  • scroll :背景图像随对象内容滚动
  • fixed：背景图像固定

3.6 背景复合写法

• 作用：简化背景属性的代码，将这些属性简写合并在同个属性background中。
• 语法：一般约定顺序为：
  background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置;
  实际开发中更提倡

3.7 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图像	none/url(图像路径)
background-repeat	是否平铺	repeat/repeat-x/repeat-y
background-position	背景位置	length/position/混合 精确值分别是x和y值
background-attachment	背景附着	scroll/fixed
背景简写	书写简化	背景颜色 图像位置 是否平铺 是否滚动 背景位置；
背景色半透明	背景颜色半透明	rgba(红,绿,蓝,透明度)；后面必须是4个值

背景图片：实际开发常见于logo或者一些装饰性的小图片或者是超大图片，和<img href="" alt="">比，背景图片更便于控制位置。

3.8 背景实际开发注意

1. 首先必须是在盒子容器内进行设置背景，不是盒子容器的如a标签之类的，要用display属性进行转换属性。
2. 然后必须设置盒子容器的大小即宽高，否则直接设置背景不显示。
3. 在一个选择器内，如果先设置background-color属性再设置background-image属性，则背景图像覆盖住背景颜色；如果先设置background-image属性再设置background-color属性，则背景图像下显示背景颜色。

---