| CSS学习笔记（六） | 您所在的位置：网站首页 › 背景设为样式5 › CSS学习笔记（六） |
CSS学习笔记（六）
|
十一、字体和文本
1.字体（font）
1.1字体相关的样式
1.1.1 font-color
用来设置字体的颜色。也可以是用来设置前景色。 1.1.2 font-size 用来设置字体的大小。 和font-size相关的单位： （1）em 相当于一个font-size。 （2）rem 相当于根元素的一个font-size （3）px 像素 可选值： 具体数值 200px 20px xx-large x-large large xx-small x-small small 1.1.3font-family 字体族（字体格式），如：宋体，楷体，微软雅黑 font-family:'微软雅黑' 默认字体族为微软雅黑。 可选值： serif 衬线字体 sans-serif 非衬线字体 monospace 等宽字体 代码常用 cursive 草书字体 fantasy 虚幻字体指定字体的类别，浏览器会自动使用该类别下的字体。 font-family可以同时指定多个字体，多个字体间使用，隔开 字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。 Microsoft YaHei 微软雅黑 Heiti SC 黑体-间 @font-face{ /* 指定字体名字 */ font-family: ; /* 服务器字体的路径 */ src:url(‘./font/Microsoft YaHei’) format（"truetype"）; }font-face 可以将服务器中的字体直接提供给用户使用 ： 1.加载速度 2.版权问题 微软雅黑不是开源字体。 font-family使用不会涉及版权问题，font-family只是建议，具体使用看用户的浏览器 @font-face涉及版权问题。 3.字体格式问题 format设置字体初态 很少使用 1.1.4 font - weight font-weight属性用来指定字体的粗细 可选值： normal： 默认值 正常字符 bold： 粗体字符 bolder 更粗的字符 lighter 更细的字符 100/200/300······900 9个级别（没太大用处） 400相当于normal 700相当于blod inherit：规定应该从父元素继承字体的粗细。 1.1.5 font-style 字体的样式，风格 可选值： normal：默认值，正常的 italic：字体的斜体 oblique: 字体倾斜 1.1.6 font-variant属性指定是否以 small-caps 字体（小型大写字母）显示文本 可选值： small-caps 所有小写字母都将转换为大写字母。 但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小 font-variant:small-caps;
在网页中经常需要使用一些小型的图标，可以通过图片来引入图标。但是图片大小本身比较大，并且非常的不灵活。 所以在使用图标时，还可以将图标直接设置为字体，然后通过@font-face的形式来对字体进行引入。 这样我们就可以通过使用字体的方式来使用图标了。 1.2.1字体相对图片的优点 （1）字体不会产生失真问题，字体属于矢量图。 （2）字体可以随意改变字体颜色。 （3）字体文件相对图片较小。 1.2.2 font awesome使用步骤 （1）下载 （2）解压 （3）将css和webfonts移动到项目中 css和webfonts两个文件夹必须在同一个目录下 （4）将all.css文件引入到网页中。 引用一： 引用二： 两个均可 （5）使用图标字体 直接通过类名来使用图标字体 1.2.3图标字体的其他使用方式 1.2.3.1通过伪元素来设置图标字体步骤： ①找到要设置图标的元素 通过before或after选中 ②在content中设置字体的编码 ③设置字体的样式 fab: font-family=' '; fas: font-family=' '; font-weight: ; 1.2.3.2通过实体的方式来设置图标字体方式：&#x + 图标的编码 1.3阿里巴巴矢量图标库（iconfont） iconfont是国内最大的矢量图标库 使用方法： （1）在图标库下载图标 （2）将文件导入到项目中（除html文件）
使用方法：
行高指的是文字占有的实际高度。 可以通过line-height来设置行高 行高可以直接指定一个大小（px em） 也可以直接为行高设置一个整数 如果是一个整数的话，行高将会是字体的指定倍数。默认行高：1.333333··· 行高会在字体框的上下平均分配 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中。 行高经常用来设置文字的行间距。 行间距 = 行高 - 字体的大小 1.5字体框 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。 1.6字体的简写属性 可以设置字体相关的所有属性 语法： font：字体大小/行高 字体族 字体大小和字体族必须写，并且字体大小和字体族必须在倒数第二个和倒数第一个 行高可以省略不写，如果不写就会使用默认值。 其他的属性放在前面，而且没有顺序要求。 font：50px/2 'Time New Roman'; 2.文本 2.1文本的水平对齐(text-align) text-align属性用于设置文本的水平对齐 可选值： left： 左侧对齐 right： 右对齐 center 居中对齐 justify 两端对齐 2.2文本的垂直对齐（vertical-align） vertical-align属性用于设置元素的垂直对齐的方式。 可选值： baseline：基线对齐 top： 顶部对齐 middle： 居中对齐 bottom： 底部对齐 图片默认的对齐方式为基线对齐 2.3文本修饰（text-decoration） text-decoration属性用来设置文本修饰 可选值： none：默认值 什么都没有 underline：下划线 line-through：删除线 overline：上划线 在进行文本修饰的时候也可以设置下划线的颜色，样式；（IE浏览器不行） text-decoration:underline red dotted; 2.4空白区域 white-space属性用于设置网页如何设置空白。 可选值： normal：正常 nowrap：不换行 pre：保留空白 文本末尾省略产生省略号： white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
设置背景颜色 background-color background-color:red; 2.背景图片（background-image） 设置背景图片 background-image 方式1： background-image:url(./img/1.png) 方式2： background-image:url("./img/1.png")可以同时设置背景图片和背景颜色，这样背景颜色会成为图片的背景色。 如果背景图片小于元素，则背景图片会自动在元素中平铺，将元素铺满 如果背景图片大于元素，将会有一部分背景图片无法完全显示。 如果背景图片和元素大小相同，则会正常显示。 3.背景图片重复方式（background-repeat） background-repeat：用来设置背景的重复方式 可选值： repeat：默认值 背景会延着x轴和y轴双方向重复。 repeat-x:沿着x轴方向重复 repeat-y：沿着y轴方向重复 no-repeat:背景图片不重复 4.背景图片的位置（background-position） background-position用来设置背景图片的位置 通过 top left bottom right center几个表示方位的词来设置背景图片的位置 设置方式： ①使用方位词的时候必须要同时指定两个值，如果只写一个，则第二个值默认就是center； background-position：top left; ②通过偏移量来指定背景图片的位置 background-position：100px 100px; 5.背景的范围（background-clip） background-clip用于设置边框的范围 可选值： border-box：默认值 背景会出现在边框的下边 背景会出现在可见框的所有区域内。 padding-box： 背景不会出现在边框，只出现在内容区和内边距。 content-box： 背景只会出现在内容区。 6.背景图片的偏移量计算的原点（background-origin） background-origin用于设置背景图片的偏移量计算的原点。 background-origin：padding-box；可选值： padding-box：默认值 background-position从内边距开始计算 content-box： 背景图片的偏移量从内容区处计算（内容区的左上角是原点） border-box: 背景图片的偏移量从边框处开始计算，原点为边框的左上角。 7.背景图片的尺寸（background-size） background-size用于设置背景图片的大小 background-size：100px 100px；第一个值用于表示宽度 第二个值用于表示高度 background-size：200px auto；如果只写一个值，第二个值默认为auto。 background-size：cover；cover： 图片的比例不变，将元素铺满。 background-size：contain；contain：图片比例不变，将图片在元素中完整显示。 8. background-attachment background-attachment用于设置背景图片是否跟随元素移动 可选值： scroll：默认值： 背景图片会跟随元素移动 fixed： 背景图片会固定在元素上，不会随着元素移动 9.简写属性 该样式没有顺序要求，也没有哪个属性是必须写的 background：color url position（center center）/size repeat ；background-size必须写在background-position后边。用/隔开 background-origin必须写在background-clip前面 十三、不透明度（opacity） 1.简介 opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。 使用 opacity 属性，当属性值不为 1 时，会把元素放置在一个新的层叠上下文中。 2.属性值： opacity的取值范围为01，当取值为0的时候，为完全透明，取值为1的时候为完全不透明。当为半透明的时候为01之间的值。 十四、精灵图【雪碧图】 1.简介 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载。 浏览器加载外部资源的时候是需要按需加载的，用则加载，不用则不加载。 当多个想突破统一保存到一个大图片中，然后通过调整background-position来显示相应的图片。 这样所有的小图片都会加载到网页中，就可以有效地避免出现闪烁的问题。 这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为精灵图，又叫雪碧图。 2.使用步骤 ①先确定要使用的图标 ②测量图标的大小 width:; height:; ③根据测量结果创建一个元素 ④将雪碧图设置为元素的背景图片 background-image：url(''); ⑤设置一个偏移量，以显示正确的图片 background-position：width height； //初始点（0，0） 3.特点 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验。 十五、渐变 通过渐变可以设置一些复杂的背景颜色，可以从一个颜色向其他颜色过渡的效果 渐变是图片，需要通过background-image来进行设置。 1.线性渐变（linear-gradient） 颜色沿着一条直线发生变化 background-image：linear-gradient（red,yellow）; //从上往下变 background-image：linear-gradient（ to right,red,yellow）; //从左往右变渐变的方向： to left to right to top to bottom deg //表示度数 turn //表示圈 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布 也可以手动指定渐变的分布情况 background-image：linear-gradient（red 50px,yellow）;设置的像素值为 从多少像素开始 background-image:repeating-linear-gradient()repeating-linear-gradient（） 可以平铺的线性渐变。 当我们设置repeating-linear-gradient后再设置no-repeat无效 2.径向渐变（radial-gradient） 径向渐变（放射性效果）从中间向四周渐变。 默认情况下，径向渐变的形状是根据元素的形状来计算的 也可以手动指定径向渐变的大小 background-image：radial-gradient（100px 100px ,red yellow);也可以指定渐变的位置： background-image：radial-gradient（100px 100px at 100px 100px,yellow,red）; background-image：radial-gradient（at 100px 100px,yellow,red）; radial-gradient（大小 at 位置 , 颜色 位置 ，颜色 位置）； 大小： circle:正圆 ellipse：椭圆 closest-side: 渐变到最近的边 closest-corner: 渐变到最近的角 farther-side: 渐变到最远的边 farther-corner: 渐变到最远的角 位置： top right left bottom center 十六、表格的样式 1.border-spacing 用于指定边框之间的距离 border-spacing: 0px ; 2.border-collapse 用于设置边框的合并 border-collapse:collapse; 3.样式问题 如果表格中没有使用tbody，而是直接使用tr，那么浏览器会自动创建一个tbody，并且将所有的tr放入到tbody中，tr不是table的子元素，tr是tbody的子元素。 4. vertical-align 默认情况下， 元素在td中是垂直居中的，可以通过vertical-align来修改 可选值： top bottom center（默认） 5. text-align 默认情况下，元素靠左对齐，通过vertical-align来设置元素在td中的位置 可选值： left（默认） right center |
【本文地址】