任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。
word-spacing 属性可以改变字(单词)之间的标准间隔.
letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
text-transform 属性处理文本的大小写:
none
uppercase
lowercase
capitalize -首字母大写
文本装饰:text-decoration 有 5 个值:
none
underline
overline
line-through
blink - 闪烁
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
normal : 会合并所有的空白符,并忽略换行符。
pre : 浏览器不会合并空白符,也不会忽略换行符。
nowrap : 设置为不能换行.
pre-wrap : 浏览器不仅会保留空白符并保留换行符,还允许自动换行。
pre-line : 浏览器会保留换行符,并允许自动换行,但是会合并空白符,这是与 pre-wrap 值的不同之处。
文本方向:direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。
除了各种特定的字体系列(如 Times、Verdana、Helvetica 或 Arial)外,CSS 定义了 5 种通用字体系列:
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体
Serif 字体
这些字体成比例,而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度,则成该字符是成比例的。例如,小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰,比如小写 l 顶部和底部的短线,或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
Sans-serif 字体
这些字体是成比例的,而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
Monospace 字体
Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出,甚至更老式的视频显示终端。采用这些字体,每个字符的宽度都必须完全相同,所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线,也可能没有。如果一个字体的字符宽度完全相同,则归类为 Monospace 字体,而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
Cursive 字体
这些字体试图模仿人的手写体。通常,它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如,大写 A 再其左腿底部可能有一个小弯,或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
Fantasy 字体
这些字体无法用任何特征来定义,只有一点是确定的,那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。
分享到:
相关推荐
CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门CSS初级入门...
1. **CSS基础知识**:了解CSS的基本结构,包括选择器、属性和值。学习如何将CSS规则应用到HTML元素,如使用内联样式、内部样式表和外部样式表。 2. **选择器**:学习不同类型的CSS选择器,如元素选择器、类选择器、...
### CSS初级教程知识点详解 #### 一、CSS基础概念与作用 **CSS**(层叠样式表,Cascading Style Sheets)是一种用于定义网页样式、布局的语言,它能够有效地将网页的内容与表现形式分离,使得网页更加易于维护和...
css1css样式css1css1css1css1css1css1css33333
根据提供的信息来看,这段文本与CSS初级资料并无关联,而是讲述了一个故事。但由于任务需求,这里将基于“CSS初级资料”这一主题展开详细的知识点梳理。 ### CSS初级资料知识点汇总 #### 1. CSS基础概念 - **CSS**...
css初级教程,对于很多刚刚写html,并想把页面写的漂亮点的童鞋比较适合
1. 针对单个标签进行多个样式的声明: 这种方法允许我们在一个CSS规则中设置多个属性。例如,以下代码设置了`body`元素的字体大小、字体颜色和背景颜色: ```css body { font-size: 9pt; font-color: red; ...
【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了...
CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...
1. **兼容性**:插件确保CSS Variables在不支持它们的浏览器中也能正常工作。 2. **可维护性**:CSS Variables使得样式更加模块化和易于维护。 3. **动态性**:CSS Variables支持动态计算,可以在运行时改变值,提高...
1. CSS简介: CSS是一种样式表语言,用于分离网页内容(HTML或XML)与其表现形式。它的主要作用是控制页面元素的布局,包括颜色、字体、大小、间距等视觉效果,使网页设计更具灵活性和可维护性。 2. CSS基本语法:...
这本书不仅适合初级开发者学习基础,也对有经验的前端工程师提供了宝贵的进阶知识。 在CSS揭秘中,我们可以学习到以下关键知识点: 1. **选择器的深度和优先级**:书中详细讲解了如何正确理解和使用选择器,包括类...
重置与标准化CSS:reset.css与normalize.css详解 在网页设计和开发中,浏览器的默认样式差异往往会导致页面在不同浏览器上显示不一致。为了解决这个问题,开发者通常会使用两种技术:reset.css和normalize.css。这...
因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS...
由于本书压缩质量比较好,所以格式比较大,40MB多,我分了6段压缩大家可以按 精通CSS(css mastery)中文版 part1 精通CSS(css mastery)中文版 part2 精通CSS(css mastery)中文版 part3 精通CSS(css ...
然而,不少开发者对CSS的理解仅仅停留在初级阶段,对那些能够巧妙运用CSS来解决复杂布局问题和优化网页性能的高手而言,他们却寥寥无几。这正是《CSS世界》诞生的背景和意义所在,它旨在为前端开发者打开一扇深化CSS...