W.T.的博客

Every day to be a little better

前端-CSS学习笔记02-CSS属性

发表于 更新于 分类于
本文字数： 12k 阅读时长 ≈ 11 分钟
属性文档，文字属性，字体属性，display，overflow，背景相关属性

1. CSS属性文档

2. 常见CSS属性

2.1. width

  • 宽度

  • 默认值为 auto，由浏览器决定大小

2.2. height

  • 高度

2.3. color

  • color属性用来设置文本内容的前景色
    • 包括文字、装饰线、边框、外轮廓等的颜色

3. CSS颜色的表示方法

  • 在CSS中，颜色，有以下几种表示方法
    • 颜色关键字
    • RGB表示法

3.1. 颜色关键字

3.2. RGB的表示方法

  • RGB是一种色彩空间，通过R(red，红色)、G(green，绿色)、B(blue，蓝色)三原色来组成了不同的颜色

  • 也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色

  • RGB各个原色的取值范围是 0~255

  • RGB颜色可以通过以#为前缀的十六进制字符，函数(rgb()、rgba())标记表示

  • 方式一：十六进制符号

    • #RRGGBB[AA]

    • R(红)、G(绿)、B (蓝)和A (alpha)是十六进制字符(0–9、A–F)；A是可选的

    • 比如，#ff0000等价于#ff0000ff;

  • 方式二：十六进制符号

    • #RGB[A]

    • R(红)、G(绿)、B (蓝)和A (alpha)是十六进制字符(0–9、A–F)

    • 三位数符号(#RGB)是六位数形式(#RRGGBB)的减缩版

      • 比如，#f09和#ff0099表示同一颜色

    • 四位数符号(#RGBA)是八位数形式(#RRGGBBAA)的减缩版

      • 比如，#0f38和#00ff3388表示相同颜色

  • 方式三：函数符

    • rgb[a](R, G, B[, A])
    • R(红)、G(绿)、B (蓝)可以是<number>(数字)，或者<percentage>(百分比)，255相当于100%
    • A(alpha)可以是0到1之间的数字，或者百分比，数字1相当于100%(完全不透明)

4. 文字属性

4.1. text-decoration

  • 用于设置文字的装饰线

    • decoration是装饰/装饰品的意思

  • text-decoration有如下常见取值

    • none：无任何装饰线
      • 可以去除a元素默认的下划线
    • underline：下划线
    • overline：上划线
    • line-through：中划线(删除线)

  • a元素有下划线的本质是被添加了text-decoration属性

4.2. text-transform

  • 用于设置文字的大小写转换

    • Transform单词是使变形/变换(形变)

  • text-transform有几个常见的值

    • capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
    • uppercase：(大写字母)将每个单词的所有字符变为大写
    • lowercase：(小写字母)将每个单词的所有字符变为小写
    • none：没有任何影响

  • 实际开发中用JavaScript代码转化的更多

4.3. text-indent

  • 用于设置第一行内容的缩进

    • text-indent: 2em;
    • 刚好是缩进2个文字
    • em：相对于字体的大小

  • 可以操作的元素

    • textarea，span，a，input，img

4.4. text-align

  • 直接翻译：设置文本的对齐方式

  • MDN：定义行内内容(例如文字)如何相对它的块父元素对齐

  • 常用的值

    • left：左对齐
    • right：右对齐
    • center：正中间显示
    • justify：两端对齐

  • 注意点：

  • 如果需要让文本水平居中，text-align属性设置在文本所在标签的父元素

  • W3C中的解释

    • This shorthand property sets the ‘text-align-all’ and ‘text-align-last’ properties and describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill
    • 定义行内级元素的对齐方式
    • text-align-last设置最后一行的对齐方式

4.4.1. 图像居中

1
2
3
4
5
6
7
8
9
10
<style>
  div{
    width: 200px;
    height: 200px;
    text-align: center;
  }
</style>
<div>
  <img src="./photo.png" />
</div>

4.4.2. div居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
  .box{
    text-align: center;
  }
  .content {
    /* 方式一：改为行内级元素 */
    display: inline-block;
    /* 方式二：添加外边距 */
    margin: 0 auto;
  }
</style>
<div class="box">
  <div class="content"></div>
</div>

4.4.3. justify值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .box {
    background-color: red;
    width: 200px;
    height: 200px;
    color: white;
    /* 文字两端贴边 */
    text-align: justify;
    /* 最后一行贴边 */
    text-align-last: justify;
  }
</style>

<div class="box">
  W3C publishes a range of technical reports (Standards and supporting Notes) which help move the web forward.
</div>

4.5. text-shadow

  • text-shadow 用于给文字添加阴影效果

  • shadow的常见格式如下

    1
    text-shadow = none | [ <color>? && <length>{2,3} ]#
    • 每个阴影都有两到三个 <length> 参数，以及一个与阴影颜色相关的 <color> 参数
    • 前两个 <length> 参数，是以“文字中心”为原点的坐标轴，分别为 x 轴 <offset-x> 和 y 轴 <offset-y> 的值
    • 如果有第三个 <length> 参数，则第三个数值为形成阴影效果的半径的数值 <blur-radius>

  • offset-x

    • 必选。指定水平偏移量，若是负值则阴影位于文字左侧

  • offset-y

    • 必选。指定垂直偏移量，若是负值则阴影位于文字上方

  • blur-radius

    • 可选。如果没有指定，则默认为 0。值越大，模糊半径越大，阴影越大越淡

  • color

    • 可选。阴影的颜色。可以在偏移量之前或之后指定

  • 举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* offset-x | offset-y | blur-radius | color */
    text-shadow: 1px 1px 2px black;

    /* color | offset-x | offset-y | blur-radius */
    text-shadow: #fc0 1px 0 10px;

    /* offset-x | offset-y | color */
    text-shadow: 5px 5px #558abb;

    /* color | offset-x | offset-y */
    text-shadow: white 2px 5px;

    /* offset-x | offset-y
    /* Use defaults for color and blur-radius */
    text-shadow: 5px 10px;

  • 测试文字的阴影

  • 拓展

    • 阴影可以叠加设置，每组阴影取值之间以逗号隔开
    1
    2
    /* 右下方向添加阴影 */
    text-shadow: 13px 20px 12px red,20px 30px 10px green;

4.6. letter-spacing

  • 设置单词字母之间的间距
    • 默认是0，可以设置为负数

4.7. word-spacing

  • 设置单词之间的间距
    • 默认是0，可以设置为负数

5. 字体属性

5.1. font-size

  • 决定文字的大小

  • 常用的设置

    • 具体数值+单位

      • 比如100px

      • 也可以使用em单位(不推荐)

        • 页面1个字符大小的基准值，基准值根据浏览器，用户自定义标准的不同而不同

        • 1em代表100%，2em代表200%，0.5em代表50%

    • 百分比

      • 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

  • 注意点

    • chrome默认文字大小是16px
    • 单位需要设置，否则无效
1
2
3
4
h1{
  font-size: 3.5em;
  font-size: 30px;
}

5.2. font-family

  • 用于设置文字的字体名称

    • 可以设置1个或者多个字体名称
    • 浏览器会选择列表中第一个该计算机上有安装的字体
    • 或者是通过 @font-face 指定的可以直接下载的字体

  • 常见字体

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

  • 常见取值

    • 具体字体1,具体字体2,…,字体系列

    • 具体字体：微软雅黑，黑体，宋体，楷体等

    • 字体系列：sans-serif，serif，monosapce等

  • 渲染规则

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

  • 注意点

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

  • 淘宝使用的字体

    1
    2
    3
    body, button, input, select, textarea {
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }

5.3. Web fonts - 自定义字体

5.3.1. 认识Web字体

  • font-family

    • 需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体
    • 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的
    • 这就是所谓的 Web-safe 字体
    • 并且这种默认可选的字体并不能进行一些定制化的需求

  • 比如书法等字体样式, 系统的字体肯定是不能实现的

  • 是否依然可以在网页中使用这些字体呢? 使用Web Fonts

5.3.2. Web fonts的工作原理

  • 首先，需要通过一些渠道获取到希望使用的字体(不是开发来做的事情)

    • 对于某些收费的字体，需要获取到对应的授权
    • 对于某些公司定制的字体, 需要设计人员来设计
    • 对于某些免费的字体, 需要获取到对应的字体文件

  • 其次，CSS代码当中使用该字体(重要)

  • 最后，在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中

  • 用户的角度

    • 浏览器一个网页时, 因为代码中有引入字体文件，字体文件会被一起下载下来
    • 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体
    • 在浏览器中使用对应的字体显示内容

5.3.3. 使用Web Fonts

  • 获取字体文件

    1. 在字体天下网站下载一个字体
    2. 使用字体

  • 使用过程

    1. 将字体放到对应的目录中
    2. 通过@font-face来引入字体, 并且设置格式
    3. 使用字体

  • 注意：@font-face 用于加载一个自定义的字体

1
2
3
4
5
6
7
8
9
10
11
12
@font-face{
  /* 命名字体名 */
  font-family: Lato;
  /* 引入字体储存路径
     eot - IE浏览器支持
     ttf，woff-Chrome，Safari，Firefox
  */
  src: url('./fonts/lato-regular.ttf'),url('./fonts/lato-regular.eot'),url('./fonts/lato-regular.woff');
}
h1{
  font-family:Lato;
}

5.3.4. web-fonts的兼容性

eot otf/ttf woff woff2 svg
IE 8-11 √
IE 9-11 √ √ √
Edge 12-14 √ √
Firefox 40-45 √ √ √
Chrome 43-49 √ √ √
Safari 8-9 √ √ √
Opera 32-35 √ √ √
IOS Safari 8.4-9.1 √ √ √
Android 4.4-44 √ √
Chrome for Android 46 √ √ √

  • .ttf 是TrueType字体

    • 在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题，需要有对应其他格式的字体

  • TrueType字体：拓展名是 .ttf

  • OpenType/TrueType字体：拓展名是 .ttf、.otf，建立在TrueType字体之上

  • Embedded OpenType字体：拓展名是 .eot， OpenType字体的压缩版

  • SVG字体：拓展名是 .svg、 .svgz

  • WOFF表示Web Open Font Format web开放字体：拓展名是 .woff，建立在TrueType字体之上

  • https://font.qqe2.com/# 网站来生产对应的字体文件

5.3.5. web fonts兼容性写法

  • 使其具备很强的兼容性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @font-face {
      font-family: "myfont";
       /* IE9 */
      src: url("./fonts/lato-regular.eot"); 
      src: 
        /* IE6-8 */
        url("./fonts/lato-regular.eot?#iefix") format("embedded-opentype"),  
        /* chrome,firefox */
        url("./fonts/lato-regular.woff") format("woff"),  
        /* chrome,firefox,opera,safari,android */
        url("./fonts/lato-regular.ttf") format("truetype"),  
        /* ios 4.1- */
        url("./fonts/lato-regular.svg#uxfonteditor") format("svg");
    }

  • 这被称为”bulletproof @font-face syntax(刀枪不入的@font-face语法)“

    • 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax)

  • src用于指定字体资源

    • url指定资源的路径
    • format用于帮助浏览器快速识别字体的格式

5.4. font-weight

  • 用于设置文字的粗细

  • 常见的取值

    • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900，每一个数字表示一个重量
    • normal：等于400
    • bold：等于700
    • strong、b、h1~h6等标签的font-weight默认就是bold

  • 注意点：

    • 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
    • 实际开发中，以正常，加粗两种取值使用最多
1
2
3
h1{
	font-weight: bold;
}

5.5. font-style

  • 用于设置文字的常规、斜体显示

    • normal：常规显示
    • italic(斜体)：用字体的斜体显示(通常会有专门的字体)
    • oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)

  • em、i、cite、address、var、dfn等元素的font-style默认就是italic

5.6. font-variant

  • 可以影响小写字母的显示形式

    • variant是变形的意思

  • 可以设置的值如下

    • normal：常规显示
    • small-caps：将小写字母替换为缩小过的大写字母

5.7. line-height

  • 作用

    • 控制行间距
    • 给一行上下增加间距
    • 设置文本的行高

  • 取值

    • 数字+px
    • 倍数（font-size的倍数）

  • 应用

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

  • 行高可以先简单理解为一行文字所占据的高度

  • 行高的严格定义是两行文字基线(baseline)之间的间距

  • 基线(baseline)：最底部对齐的线

  • 注意区分height和line-height的区别

    • height：元素的整体高度
    • line-height：元素中每一行文字所占据的高度

5.8. font-连写 swsf

  • font是一个缩写属性

    • font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写
    • font-style font-variant font-weight font-size/line-height font-family

  • 规则

    • font-style、font-variant、font-weight可以随意调换顺序，也可以省略
    • /line-height可以省略，如果不省略，必须跟在font-size后面
    • font-size、font-family不可以调换顺序，不可以省略

  • 省略要求：只能省略前几个，如果省略了相当于设置了默认值

  • 注意点：

    • 要么把单独的样式写在连写的下面
    • 要么把单独的样式写在连写的里面

  • MDN形式语法

    1
    2
    3
    4
    5
    6
    7
    8
    font = 
      [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]  |
      caption                                             |
      icon                                                |
      menu                                                |
      message-box                                         |
      small-caption                                       |
      status-bar

6. 背景属性

6.1. background-color

  • 背景颜色

  • 属性值：关键字，rgb表示法，rgba表示法，#十六进制

  • 注意点

    • 背景颜色默认值是透明的：rgba(0,0,0,0)，transparent
    • 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

6.2. linear-gradient

  • 背景线性渐变 

    1
    2
    3
    4
    5
    background: linear-gradient(起始方向,颜色1,颜色2,...);

    background: -webkit-linear-gradient(left,red,blue);

    background: -webkit-linear-gradient(left top,red,blue);

  • 背景渐变必须添加浏览器私有前缀

  • 起始方向可以是方位名词，或者度数，如果省略默认就是top

6.3. background-image

  • background-image用于设置元素的背景图片

  • 会盖在(不是覆盖)background-color的上面

  • 属性值：background-image: url(‘图片路径’);

  • 如果设置了多张图片

    • 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

  • 注意点

    • 背景图片中url可以省略引导
    • 背景图片默认在水平和垂直方向平铺
    • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

6.4. background-repeat

  • background-repeat用于设置背景图片是否要平铺
  • 常见的取值有
取值 效果
repeat 默认值-水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向平铺
repeat-y 沿着垂直方向平铺

6.5. background-size

  • background-size用于设置背景图片的大小
  • 取值
取值 场景
auto 默认值，以背景图本身大小显示
数字+px 简单方便，常用
百分比 相对于当前盒子自身的宽高百分比
contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

6.6. background-position

  • background-position用于设置背景图片在水平、垂直方向上的具体位置

  • 属性值 - background-position: 水平方向位置 垂直方向位置;

    1. 方位名词

      • 水平方向

        left，center，right

      • 垂直方向

        top，center，bottom

      • 如果只设置了1个方向，另一个方向默认是center

    2. 数字+px（坐标）

      • 坐标系

        原点(0,0) - 盒子的左上角

        x轴 - 水平向右

        y轴 - 垂直向下

      • 操作

        将图片左上角与坐标点重合即可

  • 注意点

    • 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

6.7. background-attachment

  • background-attachment 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
  • 可以设置以下3个值
    • scroll
      • 此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动
    • local
      • 此关键属性值表示背景相对于元素的内容固定
      • 如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
    • fixed
      • 此关键属性值表示背景相对于视口固定
      • 即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动

6.8. background-连写 CIRPSA

  • background是一系列背景相关属性的简写属性

  • 语法

    1
    2
    3
    4
    5
    6
    7
    background = [ <bg-layer># , ]? <final-bg-layer>  

    <bg-layer> = <bg-image>||<bg-position>[/<bg-size>]?||<repeat-style>||<attachment>||<box>||<box>  

    <final-bg-layer> = <'background-color'>||<bg-image>||<bg-position>[/<bg-size>]?||<repeat-style>||<attachment>||<box>||<box> 

    <box> = border-box | padding-box | content-box

  • 顺序

    • background: color image repeat position/size attachment;

  • 省略问题

    • 可以按照需求省略
    • 在pc端，如果盒子大小和背景图片大小一样，此时可以直接写成 background: url()

  • 注意点

    • background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
    • 其他属性也都可以省略，而且顺序任意
    • 如果需要设置单独的样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面

6.9. img标签和background-image区别

  • 在网页中展示展示一张图片

    1. 直接写上img标签

      • img标签不设置宽高默认以原尺寸显示

    2. div+背景图片

      • 需要设置div宽高，因为背景图片只是装饰的css样式

  • 利用background-image和img都能够实现显示图片的需求，在开发中该如何选择？

    img background-image
    性质 HTML元素 CSS样式
    图片是否占用空间 ✅ ❌
    浏览器右键直接查看地址 ✅ ❌
    支持 CSS Sprite ❌ ✅
    更有可能被搜索引擎收录 ✅(结合alt属性) ❌

  • 总结

    • img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
    • background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息

6.10. 精灵图 Sprite

  • 什么是CSS Sprite

    • 是一种CSS图像合成技术
    • 将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
    • 也称为CSS雪碧、CSS精灵

  • 使用CSS Sprite的好处

    • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
    • 减小图片总大小
    • 解决了图片命名的困扰，只需要针对一张集合的图片命名

  • Sprite图片制作(雪碧图、精灵图)

  • 精灵图如何使用?

    • 精灵图的原理是通过只显示图片的很小一部分来展示的
    • 通常使用背景
      1. 设置对应元素的宽度和高度
      2. 设置精灵图作为背景图片
      3. 调整背景图片的位置来展示

  • 如何获取精灵图的位置

  • 使用步骤

    1. 创建一个盒子
    2. 将小图片的宽高设置给盒子
    3. 将精灵如设置为盒子的背景图片
    4. 分别取负值设置给盒子的background-position: x y
    1
    2
    3
    4
    5
    .sprite{
      width: 26px;
      height: 13px;
      background: url('./images/taobao.png') 0 -264px;
    }

7. display

  • CSS中有个display属性，能修改元素的显示类型，有4个常用值

    • block：让元素显示为块级元素
    • inline：让元素显示为行内级元素
    • inline-block：让元素同时具备行内级、块级元素的特征
    • none：隐藏元素

  • 事实上display还有其他的值, 比如 flex，用于响应式布局

7.1. block

  • 显示特点

    • 独占父元素的一行
    • 可以随意设置宽高
    • 高度默认由内容决定

  • 代表标签

    • div，p，h系列，ul，li，dl，dt，dd，form，header，aside，nav，footer，...

7.2. inline

  • 显示特点

    • 跟其他行内级元素在同一行显示
    • 不可以随意设置宽高
    • 宽高都由内容决定

  • 代表标签

    • a，span，b，u，i，s，strong，ins，em，del...

7.2.1. 行内非替换元素

  • 和其他的行内级元素在同一行显示
  • 不可以设置宽度和高度
  • 代表标签
    • a，span，strong，i，…

7.2.2. 行内非替换元素的注意事项

  • 以下属性对行内级非替换元素不起作用

    • width、height、margin-top、margin-bottom

  • 以下属性对行内级非替换元素的效果比较特殊

    • padding-top、padding-bottom、上下方向的border

7.2.3. 行内替换元素

  • 和其他的行内级元素在同一行显示
  • 可以设置宽度和高度
  • 代表标签
    • img，input

7.3. inline-block

  • 显示特点

    • 跟其他行内级元素在同一行显示
    • 可以随意设置宽高
    • 可以这样理解
      • 对外来说，它是一个行内级元素
      • 对内来说，它是一个块级元素

  • 代表标签

    • input，textarea，button，select...

7.4. none

  • 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样)

8. overflow

  • overflow用于控制内容溢出时的行为
    • visible：溢出的内容照样可见
    • hidden：溢出的内容直接裁剪
    • scroll：溢出的内容被裁剪，但可以通过滚动机制查看
      • 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
    • auto：自动根据内容是否溢出来决定是否提供滚动机制

9. cusor

  • cursor可以设置鼠标指针(光标)在元素上面时的显示样式

  • cursor常见的设值

    取值 说明
    auto 浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
    default 由操作系统决定，一般就是一个小箭头
    pointer 一只小手，鼠标指针挪动到链接上面默认就是这个样式
    text 一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
    none 没有任何指针显示在元素上面
    move 十字光标，提示用户可以移动
本文结束  感谢您的阅读