`

CSS初级感悟1

CSS 
阅读更多
任意浏览器的默认字体高都是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初级教程(vicky)

    1. **CSS基础知识**:了解CSS的基本结构,包括选择器、属性和值。学习如何将CSS规则应用到HTML元素,如使用内联样式、内部样式表和外部样式表。 2. **选择器**:学习不同类型的CSS选择器,如元素选择器、类选择器、...

    3天突破css初级进阶

    在“3天突破css初级进阶”的学习过程中,我们将深入探讨CSS(层叠样式表)的基础知识,并逐步提升你的技能,使你能够更好地理解和运用这一强大的网页设计工具。CSS是网页设计的重要组成部分,它允许我们控制网页的...

    CSS初级教程,ppt,....

    本教程主要针对CSS的初级学习者,通过一系列章节来逐步介绍这一强大的样式语言。 ### 第一章:CSS基本概念 #### 第一节:什么是CSS - **HTML标志与属性**:HTML标签用于结构化网页内容,例如`<p>`定义段落,`<h1>...

    CSS初级教程适合初学者

    ### CSS初级教程知识点详解 #### 一、CSS基础概念与作用 **CSS**(层叠样式表,Cascading Style Sheets)是一种用于定义网页样式、布局的语言,它能够有效地将网页的内容与表现形式分离,使得网页更加易于维护和...

    css1css1css样式css1css1css1css1css1css1css33333

    css1css样式css1css1css1css1css1css1css33333

    css实例 很适合css初级学习者

    这个压缩包文件显然是为CSS初学者提供的一系列实例,旨在帮助他们更好地理解和掌握CSS技术。 在CSS的学习过程中,实例是非常重要的,因为它们能直观地展示CSS规则如何应用于实际的网页设计中。这个资源包含了源代码...

    CSS初级学习手册.pdf

    1. CSS基础选择器 CSS基础选择器包括标签选择器、类选择器、id选择器和通配符选择器。 - 标签选择器:通过HTML标签名称直接选择,适用于所有同名标签。 - 类选择器:通过类名(class)选择特定的元素,可以为同一个...

    css初级资料

    根据提供的信息来看,这段文本与CSS初级资料并无关联,而是讲述了一个故事。但由于任务需求,这里将基于“CSS初级资料”这一主题展开详细的知识点梳理。 ### CSS初级资料知识点汇总 #### 1. CSS基础概念 - **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参考手册css3.0参考手册css3.0参考手册css...

    CSS免费初级教程

    css初级教程,对于很多刚刚写html,并想把页面写的漂亮点的童鞋比较适合

    css的初级入门手册

    《CSS的初级入门手册》是一本专为初学者设计的指南,旨在帮助新手快速掌握CSS(Cascading Style Sheets)的基础知识。CSS是用于描述HTML或XML(包括各种XML方言,如SVG、XHTML等)文档样式的语言,是网页设计不可或...

    CSS新世界1

    【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了...

    CSS CSS CSS

    CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    前端开源库-postcss-css-variables

    1. **兼容性**:插件确保CSS Variables在不支持它们的浏览器中也能正常工作。 2. **可维护性**:CSS Variables使得样式更加模块化和易于维护。 3. **动态性**:CSS Variables支持动态计算,可以在运行时改变值,提高...

    CSS+DIV初级教程.doc

    《CSS+DIV初级教程》 在网页设计领域,CSS (Cascading Style Sheets) 和 DIV 是构建网页布局的核心技术。这篇初级教程将引导初学者了解如何利用它们进行网页布局规划和设计。 首先,了解基本术语是必要的。HTML ...

    阿里巴巴前端CSS培训PPT文档【初级入门】

    1. CSS简介: CSS是一种样式表语言,用于分离网页内容(HTML或XML)与其表现形式。它的主要作用是控制页面元素的布局,包括颜色、字体、大小、间距等视觉效果,使网页设计更具灵活性和可维护性。 2. CSS基本语法:...

    DIV+CSS布局初级教程

    ### DIV+CSS布局初级教程知识点概述 #### 一、DIV+CSS布局简介 - **定义**:DIV+CSS布局是一种网页布局方式,其中“DIV”指的是HTML中的`<div>`标签,用来定义文档中的独立区域;而“CSS”即Cascading Style ...

    Web前端网页初级课程 - css(笔记)

    ### Web前端网页初级课程 - CSS(笔记) #### CSS 概述 CSS,全称为 Cascading Style Sheets(层叠样式表),是一种用来描述 HTML 或 XML(包括各种 XML 语言如 SVG、XHTML 等)文档样式的计算机语言。CSS 的主要...

Global site tag (gtag.js) - Google Analytics