CSS级联样式表 2.0

一只聪明漂亮的小可爱
191 阅读9分钟

文本和字体属性

特点：

  • 行内元素不支持设置宽度和高度

  • 行内元素可设置padding，垂直方向的padding不会影响布局，但是会产生相应的视觉效果

  • 行内元素可设置border，垂直方向的border不会影响布局，但是会产生相应的视觉效果

  • 行内元素可设置margin，垂直方向的margin不影响布局，但是会产生相应的视觉效果

字体属性

字体大小（font-size）

  • font-size实际上设置的是字体的高度，这是为了保证CSS的视觉效果

单位：

  • px像素：相对于显示器屏幕分辨率而言，几乎所有的浏览器的font-size默认大小都是16px，除非用户去修改偏好设置，通常最小设置10px

  • 相对em：会根据其父级元素的字体大小来计算

  • 百分比：也是相对于其父级元素的字体大小设置

  • rem：单位值固定，它是指相对根元素的字体大小的单位，相对单位

字体颜色（color）

  • color属性可设置文本内容的前景色

  • 默认情况下文本渲染为黑色，链接除外（它的颜色为活力蓝）

  • color属性主要主要可以用英语单词、十六进制、rgb( )、rgba（）等表示方法

  • 英语单词表示法，必如color ：red；仅用于学习时临时设置一下颜色，工作时基本不用这样的形式，为追求精确

  1. 关键字表示法（开发不常用）

  2. rgb函数表示法

    • rgb接受3个数值，每个数值分别代表红、绿、蓝的比例

    • 每种颜色的范围在（0~255）/（0%~100%）之间

    • 语法：rgb（红，绿，蓝）；其中（255，255，0）纯黄，（0，255，255）青色，（255，0，255）紫红色，（0，0，0）黑色，（255，255，255）白色

  3. rgba（）函数表示法——rgb的加强版

    • 在rgb的基础上增加了控制透明度的阿尔法通道

    • 其中1代表不透明，0代表完全透明

    • 也可写百法比参数，100%代表不透明，0%代表完全透明

  4. 十六进制法

    • 六位十六进制的数字构成

    • 语法：#红色（2位）绿色（2位）蓝色（2位）

    • 每个数字有16种不同的可能

    • 0-9，a-f，0表示没有颜色，f表示颜色最浓

    • 每两位颜色对应RGB中的红绿蓝颜色#ff0000对应（255，0，0）

  5. hsl（）函数表示法

    • H：色相（0deg~360deg)

    • S：饱和度 颜色的浓度（0~100%）

    • L：亮度 颜色的亮度（0~100%）

    • 根据色轮来表示颜色的一种方法

    • 角度：红色在0deg，绿色在顺时针方向三分之一圆（120°），蓝色在三分之二圆（240°）

    • deg(degree)度数

  6. hsla（）函数表达式

    • 他的关系跟rgb（）和rgba（）之间的关系相同，都是再接受一个透明度的参数

字体类型（族）（font-family）

  • 字体可以设置列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体

   字体名称中有空格，必须用引号包裹
   多个字体间使用“，”隔开，字体生效时优先使用第一个，第一个无法使用时使用第二个

  • 目前字体设置领域，字体大致分为两大类

    1. Serif（有衬线），多用于网页正文、内容等大量文字内容区域

    2. Sans Serif（无衬线），多用于文章的标题、表格。宣传海报等一些要求文字醒目的领域

    3. Serif 衬线字体
Sans Serif 非衬线字体
monospace 等宽字体——指定字体类别，浏览器会自动使用该类别下的字体

    4. 有衬线（Serif）和无衬线（Sans Serif）

      1. 有衬线壁画开始、结束的地方有额外的装饰，而且笔画粗细会有所不同，中文字体中的宋体就是一种最标准的有衬线字体，衬线的特征非常明显，字形结构也和手写的楷书一致，因此宋体一直被称为最合适的正文字体之一

      2. 没有那些额外的装饰，而且壁画粗细差不多，无衬线字体性木，适合用于标题、广告、海报、需要醒目但不需要长时间阅读的地方

  • 随着现代生活和流行趋势的变化，如今的人们越来越喜欢用无衬线字体，因为它们看上去“更干净”

  • 常见汉字字体

  • 字体通常必须用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置为其他字体较少

  • 设置为用户电脑中没有的字体：必须自己定义新字体，这需要添加字体文件用户加载网页时就会同时下载这些字体文件

定义字体

  • 字体文件根据操作系统和浏览器不同有eot、woff2、woff、tff、svg文件格式，需同时拥有这全部五种

  • 当我们拥有字体文件后，就可以用@font-face定义字体

//在CSS文件最上方或style标签最上方
@font-face{
 font-family:"自定义的字体名字";
 src:url(字体路径 本地/服务器）;
}
使用时正常引用即可

问题

  1. 加载速度减慢，服务器的字体提供给用户使用

  2. 版权问题

阿里巴巴普惠体

  • 阿里巴巴提供了一套免费商用授权的普惠字体，网址：www.iconfont.cn/webfont

  • 使用阿里巴巴普惠字体也省去了下载字体的麻烦

字体粗细（font-weight）

  • 设置字体的粗细程度，支持关键字和整百数100~900

  • 通常用normal和bold两个值

示例意义
font-weigh t: normal;正常促销，与400等值
font-weight : bold;加粗，与700等值
font-weight : lighter;更细，大多数中文字体不支持
font-weight : border;更粗，大多数中文字体不支持

字体样式（font-style）

示例意义
font-style ：normal;取消倾斜，如把天生倾斜的i、em等标签设置为不倾斜
font-style ：italic;设置为倾斜字体（常用），带有倾斜属性的字体才可以进行设置倾斜操作
font-style ：oblique;设置为倾斜字体（用常规字体模拟，没有带倾斜属性的字体也可以设置倾斜，该操作不常用）

字体是否为小型大写字母（font-variant）

  1. normal：默认值（正常显示）

  2. small-caps：小型大写字母

写法：font-variant ：small-caps；

字体的复合属性

一般直接在body内设置进行全局文字的初始化

基本型

  • font ：font-size font-family；

复杂型

  • font ：font-style font-weight font-size/line-height font-family；

文本属性

行高（line-height）

行高：控制每一段文字的高度，文字会在这个行高内垂直居中显示，可以被继承

文本的行高默认是文字的1.32倍

行高（line-height）=文字大小（font-size）+上下行间距（在文字上下平均分配）

  • 目前没有课直接控制行间距的样式，一般通过控制行高来调整行间距

单位

  • px像素

  • 百分数：表示字号的倍数

    • 注意：若其父元素用的是百分比或em，其子元素继承的是计算后和得到的像素值，不会与其自身字体大小形成比例

  • 没有单位的数值，表示字号的倍数，子元素直接继承该比例，最推荐的写法

单行文本垂直水平居中

  • 设置行高=盒子高度，即可实现文本垂直居中

垂直对齐（vertical-align）

只针对与行内元素

基线：文本中，字母x下方两个角形成的线叫做基线

vertical-align：

可接受像素值，正值向上，负值向下

  • baseline 默认基线对齐

  • middle 中线对齐 一般在图文混排中使用

  • top 顶部对齐

  • bottom 底部对齐

处理盒子中图片底部与盒子之间的间隙

  1. 将vertical-align设置为任一个不是baseline的值即可

  2. 给父级font-size：0；盒子中不包含其他同一行的行内元素文字

  3. display：block；将图片转换为块级元素

文本缩进（text-indent）

单位：

  1. em字符：文本进行首行缩进若干个字符宽度

    • 1em是一个中文字符，2个英文字母

  2. px像素：缩进若干个像素

缩进可为负值，正值向右该属性可继承

文本阴影（text-shadow）

通过该属性可以向文本添加一个或多个阴影

  • 第一个参数 水平阴影的位置（可以是负值，正值向右偏移）

  • 第二个参数 垂直阴影的位置（可以是负值，正值向下偏移）

  • 第三个参数 阴影模糊距离

  • 第四个参数 阴影的颜色

文本对齐（text-align）

针对标签内的文本、行内元素、行内块元素文本水平对齐，设置时要设置在父元素上，此属性可继承

  • left 默认左对齐

  • center 居中对齐

  • right 右对齐

  • justify 两边对齐 它会在单词间平均分布间距已达到两边恰好对齐消除毛边，印刷行业常用

文本装饰（text-decoration）

  • none 默认值 定义标准文本

  • underline 下划线

  • overline 上划线

  • line-through 贯穿线

可同时设置多种线，用空格空开即可

大小写变换（text-transform）

  • none 默认，定义带有大写字母和小写字母的标准的文本

  • uppercase 将所有字母大写

  • lowercase 将所有字母小写

  • capitalize 每个单词的首字母变成大写

控制字母和单词的间距（word-spacing和letter-spacing）

word-spacing 控制词间距 很少用

  • 在默认值的基础上添加或减少一定的量

letter-spacing 控制字符间距

  • 对于小写英文，人为控制字母间距并非好事，由于大多数字体设计的初衷就是让人更加容易的辨别整个单词，中文的字间距也可通过该属性进行设置

空白处理（white-space）

  • normal 默认

  • nowrap：文本不会换行，在同一行上继续，即使超出文本所在容器宽度

  • pre：保留空白

强制换行（word-break）

  • normal 默认

  • break-all 允许在单词内进行换行

文本溢出（text-overflow）

  • clip 修剪文本

  • ellipsis 修jian部分用省略号来代替

单行溢出处理

  1. white-space：nowrap；不换行

  2. overflow：hidden；溢出隐藏

  3. text-overflow：ellipsis；溢出部分用…代替

多行溢出处理（了解）

 border: 3px solid skyblue ;
 overflow: hidden;/*溢出隐藏时*/
 text-overflow: ellipsis;/*溢出省略*/
 display : -webkit-box;/*兼容写法css3金子属性弹性盒模型的前身*/
 -webkit-box-orient : vertical;/*从上往下换行*/
 -webkit-line-clamp: 3;/*多于2行省略的*/
avatar
文章
阅读
粉丝