01-CSS属性：字体属性和文本属性--CSS基础-15页

《01-CSS属性：字体属性和文本属性--CSS基础-15页》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、本文重要内容CSS的单位字体属性文本属性定位属性：position、?oat、over?ow等CSS的单位html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。CSS中的单位是必须要写的，因为它没有默认单位。绝对单位1in=2.54cm=25.4mm=72pt=6pc。各种单位的含义：in：英寸Inches(1英寸=2.54厘米)cm：厘米Centimetersmm：毫米Millimeterspt：点Points，或者叫英镑(1点=1/72英寸)pc：皮卡Picas(1皮卡=12点)相对单位px：像素em：印刷单位相当于12个点%：百分比，相对周围的文字的大小为

2、什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。百分比%这个相对单位要怎么用呢？这里也举个例子：font字体属性CSS中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。这一段，我们先来讲一下字体属性。css样式中，常见的字体属性有以下几种：p{font-size:50px;/*字体大小*/line-height:30px;/*行高*/font-family:幼圆,黑体;/*字体类型：如果没有幼圆就显示黑体

3、，没有黑体就显示默认*/font-style:italic;/*italic表示斜体，normal表示不倾斜*/font-weight:bold;/*粗体*/font-variant:small-caps;/*小写变大写*/}行高CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。如下图所示：上图中，我们设置行高为30px，30px*5=150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24p

4、x，那么padding就是5px：为了严格保证字在行里面居中，我们的工程师有一个约定：行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除。如何让单行文本垂直居中小技巧：如果一段文本只有一行，如果此时设置行高=盒子高，就可以保证单行文本垂直居中。这个很好理解。上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：vertical-align:middle;属性vertical-align:middle;/*指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/字号、行

5、高、字体三大属性（1）字号：font-size:14px;（2）行高：line-height:24px;（3）字体：（font-family就是“字体”，family是“家庭”的意思）font-family:"宋体";是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号font-size、行高line-height、字体font-family）格式：font:加粗字号/行高/字体举例：font:40014px/24px"宋体";PS：400是nomal，700是bold。上面这几个属性可以连写，但是有一个要求，font属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代

6、码）。2、字体属性的说明：（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：font-family:"华文彩云";上方代码中，如果用户的Windows电脑里面没有这个字体，那么就会变成宋体。页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、TimesNewRoman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）font-family:"微软雅黑","宋体";上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。（3）我们

7、须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：font-family:"TimesNewRoman","微软雅黑","宋体";上方代码的意思是，英文会采用TimesNewRoman字体，而中文会采用微软雅黑字体（因为美国人设计的TimesNewRoman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于smyhvae哈哈哈这段文字，smyhva