CSS基础（二）

CSS基础

字体样式

font-family

• 设置字体的类型，每种系统默认指代的字体不一致。

• 语法：

  font-family:"宋体"；
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
  

• 注意：

  • 如果设置多种字体，中间使用逗号隔开，先从系统中找第一种字体，如果有则使用，如果没有则找第二种字体，依次类推，最终找到最后一种字体serif，serif代表通用字体
  • 如果字体名为中文或者多个单词，需要使用引号包裹，可以是单引号，可以是双引号
  • 多种字体的风格一般类似

font-size

• 设置字体的大小 ，字号

• 语法：

  font-size:大小；
  

  • 数字越大，字号越大

font-weight

• 设置字体的加粗效果
• 取值：
  • 100~900：数字越大，加粗效果越好，不能带单位
  • normal：正常
  • lighter：更细
  • bold：加粗
  • bolder：更粗

font-style

• 设置字体的风格
• 取值：
  • narmal：正常
  • italic：斜体
  • oblique：倾斜

字体引用技术

• 将字体文件引入到代码，方便代码渲染时以字体文件的字体渲染，目的就是为了不同的系统都能正常显示

• 语法：

  @font-face{
      font-family：字体名称；
      src:url(字体文件格式1的文件路径)，url(字体文件格式2的文件路径);
  }
  

• 注意：

  • 需要将字体文件一起放在项目中
  • 为了不同浏览器的都能正常渲染，可以引入多种字体格式的文件，之间使用逗号隔开。

字体图标

• 字体是以图标的形式显示，设计师在设计字体的时候，字体形状就是图标
• 字体的相关样式都可以作用在字体图标
• fontawesone 官网：https://fontawesome.dashgame.com/
• 页面中引入字体图标的css文件，通过不同的class名作用不同的图标或者样式

超链接

• 给a标签添加样式

• 语法：

  /* 向未被访问过的超链接添加样式 */
  a:link {
     css代码样式代码
  }
  
  /* 向访问过的超链接添加样式 */
  a:visited {
      css代码样式代码
  }
  
  
  /* 鼠标移入超链接时添加到样式 */
  /* :hover 必须放在:link和:visited之后 */
  a:hover {
      css代码样式代码
  }
  
  /* 鼠标点击不放时添加的样式 */
  /* :active必须放在:hover之后 */
  a:active {
     css代码样式代码
  }
  

• 注意：:hover必须放在:link和:visited之后，:active必须放在:hover之后，顺序：L-V-H-A

列表样式

• 可以更改列表项标志的样式
• list-style-type：设置列表项标志类型
  • none:无
• list-style-position：设置列表项标志的显示位置
  • outside:将标志放在li标签内容区域以外
  • inside:将标志放在li标签内容区域里面
• list-style-image:将图片作为列表项标志，不常用，无法通过css控制图片的大小，只能更改图片文件本身大小
• list-style：复合属性
  • none:无

表格样式

• 更改表格的样式
• border-spacing:设置单元格之间的间距
• border-collapse:设置表格的边框合并为一
  • collapse:合并为一

link和@import

这两种方式都可以引入css文件，本质上linl为整个网页服务，@import是css服务

link

• 语法：

   <link rel="stylesheet" href="css文件路径">
  

@import

• 语法：

  <style>
      /* 通过css语法引入css文件 */
      @import url(css文件路径);
  </style>
  

区别

1. link是一种标签，@import是一种语法

2. link不仅仅可以引入css文件，还可以引入其他文件格式，@import只能引入css文件

3. 加载时间：link是随着页面的加载而加载，@import等页面加载完成之后再加载

4. 兼容问题：link的兼容比@import好

5. link可以被js控制，@import不能被js控制
   说明：本笔记主要根据网络视频教程进行整理。