四、CSS常用属性

1. 像素的概念

• 概念：我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。

• 规律：像素点越小，呈现的内容就越清晰、越细腻。

  注意点：如果电脑设置中开启了缩放，那么就会影响一些工具的测量结果，但这无所谓，因为我们工作中都是参考详细的设计稿，去给元素设置宽高。

2. CSS 长度单位

1. px：像素。
2. em：相对元素font-size的倍数。
3. rem：相对根字体大小，html标签就是根。
4. %：相对父元素计算。

注意：CSS中设置长度，必须加单位，否则样式无效！

3. 颜色的表示

3.1 表示方式一：颜色名

• 编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：

  1. 红色：red
  2. 绿色：green
  3. 蓝色：blue
  4. 紫色：purple
  5. 橙色：orange
  6. 灰色：gray

  1. 颜色名这种方式，表达的颜色比较单一，所以用的并不多。

  2. 具体颜色名参考MDN官方文档：

  https://developer.mozilla.org/en-US/docs/Web/CSS/named-color

3.2 表示方式二：rgb 或 rgba

• 编写方式：使用 红、黄、蓝 这三种光的三原色进行组合。

  • r 表示 红色
  • g 表示 绿色
  • b 表示 蓝色
  • a 表示 透明度

• 举例：

  /* 使用 0~255 之间的数字表示一种颜色 */
  color: rgb(255, 0, 0);/* 红色 */
  color: rgb(0, 255, 0);/* 绿色 */
  color: rgb(0, 0, 255);/* 蓝色 */
  color: rgb(0, 0, 0);/* 黑色 */
  color: rgb(255, 255, 255);/* 白色 */
  /* 混合出任意一种颜色 */
  color:rgb(138, 43, 226) /* 紫罗兰色 */
  color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
  /* 也可以使用百分比表示一种颜色（用的少） */
  color: rgb(100%, 0%, 0%);/* 红色 */
  color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
  
  

• 小规律：

  1. 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。

  2. rgb(0, 0, 0)是黑色，rgb(255, 255,255)是白色。

  3. 对于rgba来说，前三位的rgb形式要保持一致，要么都是0~255的数字，要么都是 百分比。

3.3 表示方式三：HEX 或 HEXA

HEX 的原理同与 rgb 一样，依然是通过： 红 、 绿 、 蓝色 进行组合，只不过要用 6 位（分成 3 组） 来 表达，

格式为： #rrggbb

每一位数字的取值范围是：0 ~ f ，即：（0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,d, e, f）

所以每一种光的最小值是： 00 ，最大值是：ff

/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb( 255 , 0 , 0 );/* 红色 */
color: rgb( 0 , 255 , 0 );/* 绿色 */
color: rgb( 0 , 0 , 255 );/* 蓝色 */
color: rgb( 0 , 0 , 0 );/* 黑色 */
color: rgb( 255 , 255 , 255 );/* 白色 */

/* 混合出任意一种颜色 */
color:rgb( 138 , 43 , 226 ) /* 紫罗兰色 */
color:rgba( 255 , 0 , 0 , 0.5);/* 半透明的红色 */

/* 也可以使用百分比表示一种颜色（用的少） */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

注意点：IE浏览器不支持HEXA，但支持HEX。

3.4 表示方式四：HSL 或 HSLA

• HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hsl(色相,饱和度,亮度)

  • 色相：取值范围是0~360度，具体度数对应的颜色如下图：

  • 饱和度：取值范围是0%~100%。（向色相中对应颜色中添加灰色，0%全灰，100%没有灰）

  • 亮度：取值范围是0%~100%。（0%亮度没了，所以就是黑色。100%亮度太强，所以就是白色了）

• HSLA其实就是在HSL的基础上，添加了透明度。

4. CSS字体属性

4.1 字体大小

font-family: 字体类型
font-size:   字体大小
font-style:  normal：正常（默认值） 
             italic：斜体（使用字体自带的斜体效果）
             oblique：斜体（强制倾斜产生的斜体效果）
font-weight: 粗细 lighter(100-300)  normal(400-500)  bold(600以上)  

• 属性名：font-size

• 作用：控制字体的大小。

• 语法：

    div {
      font-size: 40px;
    }
  

• 注意点：

  1. Chrome浏览器支持的最小文字为12px，默认的文字大小为16px，并且0px会自动 消失。
  2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大 小。
  3. 通常以给 body 设置font-size属性，这样body中的其他元素就都可以继承了。

• 借助控制台看样式：

  

4.2 字体族

• 属性名：font-family

• 作用：控制字体类型。

• 语法：

  div {
    font-family: "STCaiyun","Microsoft YaHei",sans-serif
  }
  

• 注意：

  1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。

  2. 如果字体名包含空格，必须使用引号包裹起来。

  3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）。

  4. windows系统中，默认的字体就是微软雅黑。

4.3 字体风格

• 属性名：font-style

• 作用：控制字体是否为斜体。

• 常用值：

  1. normal：正常（默认值）
  2. italic：斜体（使用字体自带的斜体效果）
  3. oblique：斜体（强制倾斜产生的斜体效果）

  实现斜体时，更推荐使用italic。

• 语法：

  div {
    font-style: italic;
  }
  

4.4 字体粗细

• 属性名：font-weight

• 作用：控制字体的粗细。

• 常用值：

  • 关键词

    1. lighter ：细
    2. normal： 正常
    3. bold：粗
    4. bolder：很粗 （多数字体不支持）
    

  • 数值：

    1. 100~1000且无单位，数值越大，字体越粗 （或一样粗，具体得看字体设计时的精确程度）。
    
    2. 100~300等同于lighter，400~500等同于normal， 600 及以上等同于bold。
    

• 语法：

  div {
    font-weight: bold;
  }
  div {
    font-weight: 600;
  }
  

4.5 字体复合写法

• 属性名：font，可以把上述字体样式合并成一个属性。

• 作用：将上述所有字体相关的属性复合在一起编写。

• 编写规则：

  1. 字体大小、字体族必须都写上。
  2. 字体族必须是最后一位、字体大小必须是倒数第二位。
  3. 各个属性间用空格隔开。

  实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用font-size属性。

4.6 细说 font-size

1. 由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能 小。

例如：font-size 设为40px ，最终呈现的文字，可能比 40px大，也可能比 40px小。

2. 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下 一些。

4.7 行高

• 属性名：line-height

• 作用：控制一行文字的高度。

• 可选值：

  1. normal：由浏览器根据文字大小决定的一个默认值。
  2. 像素(px)。
  3. 数字：参考自身font-size的倍数（很常用）。
  4. 百分比：参考自身font-size的百分比。

• 备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。

• 举例：

  div {
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
  }
  

• 行高注意事项：

  1. line-height过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数。
  2. line-height是可以继承的，且为了能更好的呈现文字，最好写数值。
  3. line-height和height是什么关系？
     • 设置了height，那么高度就是height的值。
     • 不设置height的时候，会根据line-height计算高度。

• 应用场景：

  1. 对于多行文字：控制行与行之间的距离。

  2. 对于单行文字：让height等于line-height，可以实现文字垂直居中。

  备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。

5. CSS文本属性

color:颜色
text-decoration： 文本修饰
                  none： 无装饰线（常用）
                  underline：下划线（常用）
                  overline： 上划线
                  line-through： 删除线

text-indent：文本缩进
text-align：文本水平对齐
line-height=height  文本垂直对齐
vertical-align:行内元素 对齐方式
letter-spacing：字符间距
word-spacing：单词间距（通过空格识别词）

5.1 文本颜色

• 属性名：color

• 作用：控制文字的颜色。

• 可选值：

  1. 颜色名
  2. rgb或rgba
  3. HEX或HEXA（十六进制）
  4. HSL或HSLA

  开发中常用的是：rgb/rgba 或 HEX/HEXA（十六进制）。

• 举例：

  div {
    color: rgb(112,45,78);
  }
  
  

5.2 文本间距

• 字母间距：letter-spacing

• 单词间距：word-spacing（通过空格识别词）

• 属性值为像素（px ），正值让间距增大，负值让间距缩小。

5.3 文本修饰

• 属性名：text-decoration

• 作用：控制文本的各种装饰线。

• 可选值：

  1. none： 无装饰线（常用）
  2. underline：下划线（常用）
  3. overline： 上划线
  4. line-through： 删除线

• 可搭配如下值使用：

  1. dotted：虚线
  2. wavy：波浪线
  3. 也可以指定颜色

• 举例：

  a {
    text-decoration: none;
  }
  
  

5.4 文本缩进

• 属性名：text-indent。

• 作用：控制文本首字母的缩进。

• 属性值：css中的长度单位，例如：px

• 举例：

  div {
    text-indent:40px;
  }
  

后面我们会学习css中一些新的长度单位，目前我们只知道像素(px)。

5.5 文本阴影

• 在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。
• 语法

  text-shadow: h-shadow v-shadow blur color;
  

值	描述
h-shadow	必需写，水平阴影的位置。允许负值。
v-shadow	必需写，垂直阴影的位置。允许负值。
blur	可选，模糊的距离。
color	可选，阴影的颜色。

默认值： text-shadow:none 表示没有阴影。

5.6 文本换行

• 在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。
• 常用值如下：

值	含义
normal	文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
pre	原样输出，与 pre 标签的效果相同。
pre-wrap	在 pre 效果的基础上，超出元素边界自动换行。
pre-line	在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。
nowrap	强制不换行

5.7 文本溢出

• 在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
• 常用值如下： | 值 | 含义 | | - | - | | clip | 当内联内容溢出时，将溢出部分裁切掉。（默认值） | | ellipsis | 当内联内容溢出块容器时，将溢出部分替换为 ... 。 |

注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为 nowrap 值。

5.8 文本显示省略号

• 一行超出显示省略

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

<html>
   <div class="box-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
    .box-42b6{
        border: 1px solid #999;
        width: 200px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

• 两行（多行）超出显示省略号

overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

显示的行数由line-clamp样式的值决定。

<html>
   <div class="box2-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
    .box2-42b6{
        border: 1px solid #999;
        width: 200px;

        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

      }
</style>

• JS判断是否显示了省略号 有时候我们需要知道是否已经溢出，显示了省略号，可以用到clientHeight和scrollHeight的知识：

let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
      console.log("已经溢出显示省略号");
} else {
      console.log("没有溢出");
}

这里可以用于判断是否溢出显示展开收缩按钮。

• 知识点拓展 scrollHeight：元素内容的高度，包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。

clientHeight：元素内容的可视区的高度，包含内边距，但不包括水平滚动条、边框和外边距。

offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

5.9 vertical-align

• 属性名：vertical-align。

• 作用：用于指定 同一行元素之间 ，或 表格单元格 内文字的 垂直对齐方式 。

• 常用值：

  1. baseline（默认值）：使元素的基线与父元素的基线对齐。
  2. top：使元素的 顶部 与其 所在行的顶部 对齐。
  3. middle：使元素的 中部 与 父元素的基线 加上父元素 字母 x 的一半 对齐。
  4. bottom：使元素的 底部 与其 所在行的底部 对齐。

  特别注意：vertical-align不能控制块元素。

5.10 文本对齐_水平

• 属性名：text-align。

• 作用：控制文本的水平对齐方式。

• 常用值：

  1. left ：左对齐（默认值）
  2. right ：右对齐
  3. center ：居中对齐

• 举例：

  div {
    text-align: center;
  }
  

5.11 文本对齐_垂直

1. 顶部： 无需任何属性，在垂直方向上，默认就是顶部对齐。

2. 居中： 对于单行文字，让height=line-height即可。

问题：多行文字 垂直居中 怎么办？—— 后面我们用定位去做。

3. 底部： 对于单行文字，目前一个临时的方式：
   

   让line-height = (height × 2 ) - font-size - x。
   

   备注：x是根据字体族，动态决定的一个值。

问题：垂直方向上的底部对齐，更好的解决办法是什么？—— 后面我们用定位去做。

6. CSS列表属性

列表相关的属性，可以作用在 ul、ol、li 元素上。

CSS属性名	功能	属性值
list-style-type	设置列表符号	常用值如下： none ：不显示前面的标识（很常用！） square ：实心方块 disc ：圆形 decimal ：数字 lower-roman ：小写罗马字 upper-roman ：大写罗马字 lower-alpha ：小写字母 upper-alpha ：大写字母
list-style-position	设置列表符号的位置	inside ：在 li 的里面 outside ：在 li 的外边
list-style-image	自定义列表符号	url(图片地址)
list-style	复合属性	没有数量、顺序的要求

7. CSS表格属性

1. 边框相关属性（其他元素也能用）：

CSS属性名	功能	属性值
border-width	边框宽度	CSS 中可用的长度值
border-color	边框颜色	CSS 中可用的颜色值
border-style	边框风格	none 默认值 solid 实线 dashed 虚线 dotted 点线 double 双实线
border	边框复合属性	没有数量、顺序的要求

• 注意：

1. 以上 4 个边框相关的属性，其他元素也可以用，这是我们第一次遇见它们。

2. 在后面的盒子模型中，我们会详细讲解边框相关的知识。

2. 表格独有属性（只有 table 标签才能使用）：

CSS属性名	功能	属性值
table-layout	设置列宽度	auto ：自动（默认值），列宽度由单元格内容设定。 fixed ：固定列宽，平均分，列宽由表格宽度和列宽度设定。
border-spacing	控制单元格间距（生效的前提是：不能合并边框）	CSS 中可用的长度值。 生效的前提：单元格边框不能合并。
border-collapse	合并相邻的单元格的边框	collapse ：合并 separate ：不合并
empty-cells	隐藏没有内容的单元格（生效的前提是：不能合并边框）	show ：显示，默认 hide ：隐藏 生效前提：单元格不能合并。
caption-side	设置表格标题位置	top ：上面（默认值） bottom ：在表格下面

以上 5 个属性，只有表格才能使用，即： <table> 标签。

8. CSS背景属性

css 属性名	功能	属性值
background-color	设置背景颜色	符合 CSS 中颜色规范的值。 默认背景颜色是 transparent 。
background-image	设置背景图片	url(图片的地址)
background-repeat	设置背景重复方式	repeat ：重复，铺满整个元素，默认值。 repeat-x ：只在水平方向重复。 repeat-y ：只在垂直方向重复。 no-repeat ：不重复。
background-position	设置背景图位置	通过关键字设置位置： 写两个值，用空格隔开 水平： left 、 center 、 right 垂直: top 、 center 、 bottom 如果只写一个值，另一个方向的值取 center 通过长度指定坐标位置： 以元素左上角，为坐标原点，设置图片左上角的位置。 两个值，分别是 x 坐标和 y 坐标。 只写一个值，会被当做 x 坐标， y 坐标取center
background-origin	设置背景图的原点	padding-box ：从 padding 区域开始显示背景图像。—— 默认值 border-box ： 从 border 区域开始显示背景图像。 content-box ： 从 content 区域开始显示背景图像。
background-clip	设置背景图的向外裁剪的区域	border-box ： 从 border 区域开始向外裁剪背景。 —— 默认值 padding-box ： 从 padding 区域开始向外裁剪背景。 content-box ： 从 content 区域开始向外裁剪背景。 text ：背景图只呈现在文字上。
background-size	设置背景图的尺寸	1. 用长度值指定背景图片大小，不允许负值。 background-size: 300px 200px; 2. 用百分比指定背景图片大小，不允许负值。 background-size: 100% 100%; 3. auto ： 背景图片的真实大小。 —— 默认值 4. contain ：将背景图片等比缩放，使背景图片的宽或高， 与容器的宽或高相等，再将完整背景图片包含在容器内， 但要注意：可能会造成容器里部分区域没有背景图片。 background-size: contain; 5. cover ：将背景图片等比缩放，直到完全覆盖容器， 图片会尽可能全的显示在元素上， 但要注意：背景图片有可能显示不完整。—— 相对比较好的选择 background-size: cover;
background	复合属性	background: color url repeat position / size origin clip 注意： 1. origin 和 clip 的值如果一样，如果只写一个值， 则 origin 和 clip 都设置；如果设置了两个值， 前面的是 origin ，后面的 clip 。 2. size 的值必须写在 position 值的后面，并且用 / 分开。

• CSS3 允许元素设置多个背景图片

  /* 添加多个背景图 */
  background: url(../images/bg-lt.png) no-repeat,
  url(../images/bg-rt.png) no-repeat right top,
  url(../images/bg-lb.png) no-repeat left bottom,
  url(../images/bg-rb.png) no-repeat right bottom;

9. CSS鼠标属性

css 属性名	功能	属性值
cursor	设置鼠标光标的样式	pointer ：小手 move ：移动图标 text ：文字选择器 crosshair ：十字架 wait ：等待 help ：帮助

扩展：自定义鼠标图标

/* 自定义鼠标光标 */
cursor: url("./arrow.png"),pointer;

10. web字体

10.1 基本用法

可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字 体了。

• 语法（简写方式）

  @font-face {
    font-family: "情书字体";
    src: url('./方正手迹.ttf');
  }
  

• 语法（高兼容性写法）

  @font-face {
    font-family: "atguigu";
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,
    Android*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
  }
  
  

10.2 定制字体

中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。 可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont

10.3 字体图标

• 相比图片更加清晰。
• 灵活性高，更方便改变大小、颜色、风格等。
• 兼容性好， IE 也能支持。

字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，视频中我们是以使用最多 的阿里图标库作为演示。 阿里图标官网地址：https://www.iconfont.cn/