正文
css字体样式及文本外观,css字体样式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在css中对字体的设置涉及属性
所有CSS字体属性
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
相关问答
Q1: 使用css设置文本的字体通过什么属性
html的字体样式主要通过css的font-size以及font-family来定义的，标签详解如下：
font-size
指定字体大小，常用单位有em和px
font-family
指定使用的字体
常用的中文字体有微软雅黑和宋体，英文字体有Arial
可以同时指定多个字体，使用英文的逗号分隔，浏览器会按顺序查找，找不到就找下一个，全部没找到就使用系统默认的
字体用中文表示 则需要用双引号或者单引号分隔，英文字体一般不需要用引号，但是如果 有特殊字符的（如空格，反斜杠，#，$等）也需要使用引号
font-weight
字体粗细（bold相等于设置该属性的值为700，normal相等于设置该属性值为400–不用单位，建议使用数字因为解析会更快）
fon-style
normal（一般用于让斜体不倾斜，em标签有加重强调的语义 但是字体会倾斜，可以为em 标签设置 font-style 属性值为 normal 取消其倾斜的效果）
字体样式可以连写
即 所有的字体样式 使用一个语句，但是有一定的语法规则和顺序
选择器 { font : font-style font-weight font-size/line-height font-family; }
字体样式连写时需要注意：一定要按顺序写，可以有省略不写的样式但是一定要按顺序，而且font-size和font-family是不可以省略的，否则会不起作用
文本外观样式
color：字体颜色
预定义的颜色如green，red等
十六进制，顺序是红绿蓝，十六进制是最常用的颜色表示方式
#ff0000 表示红色，等同于#f00（缩写，必须是两两相同的才可以进行缩写）；#00f表示蓝色；#0f0表示绿色；#fff表示白色（所有的颜色都满格），#000000即#000表示黑色（所有的颜色都没有）
RGB代码：rgb(255,255,255)表示白色
文本修饰：text-decoration：none、underlined（比较常用，用于添加下划线和取消下划线）
line-hight：行间距，一般情况下，行间距只需要比字体大小大7或8个像素就可以了
text-align：文本内容的水平对齐方式
text-indent：段落首行缩进，单位使用em，1em就是一个字，所以该样式值为2em 表示 段落首行缩进两个字符
Q2: CSS文件是什么东西？
CSS：层叠样式表(英文全称：Cascading Style Sheets)，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
扩展资料：
CSS的特点：
1、丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
3、多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4、层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。
这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
5、页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。
而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。
参考资料来源：百度百科-CSS
Q3: 去哪儿网CSS样式详解
CSS样式详解
字体样式(font)
字体
font-family:字体名
font-family:字体名1，字体名2...
font-family: fantasy | monospace | ncursive | serif | sans-serif
字体系列
cursive：模拟手写的字体，通常这类字体的曲线比较明显。
monospace：无比例的字体。通常用于模拟打字机中打出来的文字，也就是等宽字体。
serif：有比例有衬线的字体，这种字体中的所有字母都根据不同需要占有不同的宽度，有衬线是指在字母上做装饰的细线。
sans-serif：有比例无衬线的字体，这种字体中的所有字母都根据不同需要占有不同的宽度。
文字大小
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 长度 | 百分比
xx-small：文字显示为最小(绝对)；
x-small：文字显示为较小(绝对)；
small：文字显示为小(绝对)；
medium：默认值(绝对)
large：文字显示为大(绝对)；
x-large：文字显示为较大(绝对)；
xx-large：文字显示为最大(绝对)；
larger：增大(相对)；
smaller：减小(相对)；
长度：数值加上单位；
百分比：相对字体大小。
文字大小调整
在英文方面，一段文字看上去是否舒服，很大程度上取决于当前字体的高度与这种字体的小写x字母高度的比值，这个比值称为字体的面值。
font-size-adjust: none | number
none：不改变文字大小；
number：强制文字使用面值。
粗体
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
normal：默认值(400)，正常粗细；
bold：加粗(700)；
bolder：比normal粗，比bold细；
lighter：不比normal粗；
x00：分9个级别，数值越大越粗。
斜体
font-style: normal | italic | bolique
normal：默认值，代表正常的字体；
italic：斜体；
bolique：倾斜的字体。
文字变形－小型大写字母
fontvariant: normal | small-caps
normal：默认值；
small-caps：小型大写字母
小型大写字母指将字母更改为大写字母，并且该大写字母比通常的大写字母要小。
文字变形－文字拉伸
font-stretch: normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
normal：默认值，不拉伸变形；
narrower：水平方向变窄；
wider：水平方向变宽；
condensed：压缩文字；
extra-condensed：压缩得很小；
ultra-condensed：压缩得特别小；
semi-condensed：从大到小逐步缩小；
semi-expanded：从小到大逐步变大；
expanded：拉伸文字；
extra-expanded：拉伸得很大；
ultra-expanded：拉伸得特别大。
PS：font-stretch是CSS2中所规定的属性，目前还没有浏览器可以支持该属性。
修饰
text-decoration: none | underline | overline | line-through | blink
none：默认值，无修饰样式；
underline：下划线；
overline：上划线；
line-through：贯穿线；
blink：闪烁。
阴影
text-shadow: none | color | length | length | length | inherit
none：不设置；
color：阴影的颜色；
length：长度值；
inherit：继承父级样式。
阴影有3个length要进行设置，分别是水平方向的距离、垂直方向的距离和模糊半径的长度(不能为负值)。
大小写转换
text-transform: capitalize | uppercase | lowercase | none | inherit
capitalize：首字母大写；
uppercase：变大写；
lowercase：变小写；
none：不改变；
inherit：继承。
间距－行间距
行间距：文本行与行之间的距离
line-height: normal | number | length | 百分数 | inherit
normal：默认值；
number：在当前文字大小的基础上再做增加来设置行高(不能为负值)；
length：指定行高数(不能为负值)；
百分数：用百分数表示行高；
inherit：继承。
行高是指上一行文字的基线与下一行文字之间的基线之间的距离，行高等于行间距加上文字高度。
间距－字间距
letter-spacing: normal | length | inherit
normal：默认值；
length：字间距的大小；
inherit：继承。
词间距
word-spacing: normal | length | inherit
normal：默认值；
length：词间距的大小；
inherit：继承。
文本样式
文字缩进
text-indent: length | 百分数 | inherit
length：缩进量；
百分数：父级元素的百分比；
inherit：继承。
水平对齐
text-align: left | right | center | justify | string | inherit
left：左对齐；
right：右对齐；
center：居中对齐；
justify：两端对齐；
string：字符对齐，多用于表格里；
inherit：继承。
垂直对齐
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分数 | length | inherit
baseline：默认值，基线对齐；
sub：下标；
super：上标；
top：顶端对齐；
text-top：文本行顶端对齐；
middle：中间对齐；
bottom：底端对齐；
text-bottom：文本行底端对齐；
百分数：相对于父级元素的基线的百分比；
length：调整长度；
inherit：继承。
文字方向－文本流入方向
derection: ltr | rtl | inherit
ltr：left to right，默认值，从左到右流入；
rtl：right to left，从右到左流入；
inherit：继承。
文字方向－文字方向
unicode-bidi: normal | embed | bidi-override | inherit
normal：默认值，不打开流入的文字，对其文字不重排；
embed：打开流入的文字，在对象内部进行隐式重排；
bidi-override：严格按流入方向重排文字；
inherit：继承。
文字方向－竖排文字
layout-flow: horizontal | vertical-ideographic
horizontal：书写方向从左到右，由上而下；
vertical-ideographic：书写方向从上至下，由左至右。
空格处理
white-space: normal | pre | nowrap | inherit
normal：默认值，浏览器自动忽略多余的空格，连续多个空格只显示一个；
pre：类似于pre元素，浏览器不忽略源代码的空格；
nowrap：不自动换行；
inherit：继承。
词间换行
word-break: normal | break-all | keep-all
normal：默认值，对于英文则以单词为单位换行，对于中文则以字为单位换行；
break-all：英文以字母为单位换行；
keep-all：对于英文以单词为单位换行，对于中文则以标点或空格为单位换行。
首字样式
使用伪元素fitst-letter，对于英文则代表第一个字母，对于中文则代表第一个文字。
首行样式
使用伪元素first-line，设置第一行文字的样式。
颜色与背景样式
文本颜色：指文本的颜色。
color: 颜色 | inherit
颜色：使用指定颜色值；
inherit：继承。
背景色：指元素后面背景的颜色。
background: transparent | 颜色 | inherit
transparent：设置透明，默认值；
颜色：使用指定颜色值；
inherit：继承。
背景图片
background-image: none | url(路径) | inherit
none：无背景图片(默认值)；
url(路径)：图片的URL地址；
inherit：继承；
背景附件：指背景图片如何依附元素。
background-attachment: scroll | fixed | inherit
scroll：滚动，随内容滚动，默认值；
fixed：固定，不随内容滚动；
inherit：继承。
背景重复
background-repeat: repeat | no-repeat | repeat-x | repeat-y | inherit
repeat：重复，平铺图片，默认值；
no-repeat：不重复，不平铺图片；
repeat-x：水平方向重复；
repeat-y：垂直方向重复；
inherit：继承。
背景定位：背景图片的定位，要设置两个值，分别是相对于元素左上角的x轴和y轴，默认是0px。
background-position: top | center | bottom | left | right | 数值 | 百分数 | inherit
top：顶部；
center：中部；
bottom：底部；
left：左侧；
right：右侧；
数值：用数值指定图片的位置；
百分数：用百分数表示位置；
inherit：继承；
背景综合应用(可节省代码)
background: background-color | background-image | background-repeat | background-attachmen | background-position
background-color：颜色；
background-image：图片；
background-repeat：重复方式；
background-attachmen：附件；
background-position：定位。
Q4: css是什么意思
css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
CSS具有以下特点：
1、丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
3、多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4、层叠
层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。
5、页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。
而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。
扩展资料：
css的工作原理
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。
无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。
参考资料：百度百科_css
