新葡亰496net 新葡亰编程 CSS第二小节第一天

CSS第二小节第一天



原文:(可能是英文)

HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素。具体如下:

所有CSS字体属性:

在设计者间必定的趋势是:相信小的文字将给网页更流利的展现,并且在每一个网页实际内容中提供了更多的空白,这往往导致不明原因地使用小字体。

块元素

font          在一个声明中设置所有的字体属性

不幸的是,使用不同的平台访问网页时却表现得不是很好,从拥有精小屏幕的便携式设备到连接电脑的投影设备,并且即使是一个特定的平台,文字设置也是多样的。

每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。

font-family          指定文本的字体系列

这个问题有一个基本的可用性和易用性原则:一个好的设计应该是不需要用户增大或减少文字大小,看起来就会很舒适。

块级元素容器可以容纳多个嵌套的块级标签或者行内标签。

font-size        指定文本的字体大小


常见的块元素有<h1>-<h6>,<p>,div,ul,ol,li等,其中

font-style         指定文本的字体样式

忘掉 <font>,使用 CSS

<div>标记是最典型的块元素。

font-variant        以小型大写字体或者正常字体显示文本

在网页上设置文字大小的合适的、现代的做法是使用层叠样式表单,这里强烈推荐不使用
HTML 上的 <font> 标签,因为 CSS
具有更高的适用性,更容易节省带宽。本文不讨论 CSS 与 <font>
标签的优缺点,如果你需要关于它们的更多细节可以使用网页搜索引擎寻找更多相关信息……我们重点讨论
CSS 创建易读网页的好处。

图片 1

font-weight        指定字体的粗细。


CSS的标签模式设置Display属性

display可以控制标签的显示模式。

display:none | inline | block | inline-block

继承性:无

display值的解释:

none :此元素不被显示,在文档中被移除。

block :此元素按块级元素显示:前后带换行符,自己占一行。内联元素 →
块元素

inline :此元素按内联元素显示:1个挨着1个。块元素 → 内联元素

inline-block:按行内标签进行排版,但是可以设置宽高,而且高度可以影响行高(以后再详细讲)。

图片 2

通过设置Display为none,那么可以让这整个标签在页面中移除掉

图片 3

对比一下:

/*display: none;*/ 
/*直接把当前标签从页面中直接移除了,不影响页面的布局*/

visibility: hidden;   /*这个只是不显示,但还是占用页面的空间*

图片 4

行内不可以设置宽高,块级可以.行内元素只能通过内容来撑开.只有左右边距.如果你设置了宽高是不会影响行内元素的显示的。

 

使用 CSS 的 font 属性的好处

CSS的颜色表示

图片 5

尽量用16进制表示.

 

这里是使用 CSS 的 font 属性的一些创建易读性网页的规则。

CSS的长度单位

绝对长度单位:

cm:厘米,mm:毫米,in:英寸,pc:派卡(Picas),相当于我国新四号铅字的尺寸。都不常用,了解即可。

相对长度单位:

px:像素点,像素就是显示器显示的一个点。

em:1em 等于当前的字体大小,例如:当前元素的字体大小为16px,那么1em =
16px。

单位之间的关系:1in = 2.54cm = 25.4 mm  = = 96px

p { width: 1in; height:20px; }

在PC时代主要以px为主。在移动web时代主要以:
em、rem、pw、ph、百分比等来做布局的设置。

相对单位解释:像素是相对单位。不同平面尺寸可以是相同的分辨率,也就相同的像素大小,对应的实际的尺寸可能不同。

在CSS中,有两种类型的字体系列名称:

size:适应用户的参数设置,避免内容文字太小。

文字排版

CSS字体样式属性

1、font-size:字号大小

font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。

其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。

可选参数值:xx-small | x-small | small | medium | large | x-large |
xx-large|smaller | larger 

尽量不要用上面的.

一般页面中:12px      14px  12cm

1em

例如:

p { font-size: 32px; }

1、通用字体系列 – 拥有相似外观的字体系统组合(如 “Serif” 或
“Monospace”)
2、特定字体系列 – 一个特定的字体系列(如 “Times” 或 “Courier”)

  • 作为文档的基础文字大小,1em(或
    100%)同将文字大小设置为用户的参数设置是一个道理。使用这个作为你的文字大小的基础,不应该设置更小的基础文字大小。
  • 避免将小于 1em
    的大小作为网页文字,除非是版本声明之类的文字,这类文字为了实现较好的打印效果,可以做得小一些。

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:

可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。如果字体名称包含空格或中文,则应使用引号括起

例如:font-family:Verdana, Arial, ‘宋体’;

 

Units:避免屏幕显示中的绝对长度问题

使用font-family设置字体时,需要注意以下几点:

 各种字体之间必须使用英文状态下的逗号隔开。


中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。


如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family:
“Times New Roman”;。

尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

使用font-family设置字体时,需要注意以下几点:

在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8
等)不匹配时会产生乱码的错误。

为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用
Unicode 写中文字体名称,浏览器是可以正确的解析的。

font-family: “5FAE8F6F96C59ED1″,表示设置字体为“微软雅黑”。

可以通过escape()  来得到

图片 6

尽量用unicode或者英文名

font-family 属性设置文本的字体系列。

  • 不要在为屏幕设置的样式表中对 font-size 使用
    pt,或其它绝对长度单位。如果使用绝对的长度单位,则在不同的浏览器中会出现大小不一致的现象,并且不能在客户端(比如:浏览器)调节。我们应该在在具有固定样式或不知道物理属性(比如:打印)的媒介上使用这些绝对长度单位。
  • 使用相对长度单位,比如
    percent 或 em(更好)。
  • 更好的做法,如果在文档中设置了基础文字大小,在为文档的某一部分设置文字大小时使用绝对大小(xx-small
    | x-small | small | medium | large | x-large | xx-large
    ])或相对大小([
    larger | smaller ])。

字体系列

西方国家字母体系分为两类:serif以及sans serif。

serif是有衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。相反的,sans
serif就没有这些额外的装饰,而且笔画的粗细差不多。

为了更安全的设置:

font-famliy:  tahoma,arial,’Hiragino Sans GB’,5b8b4f53,sans-serif;

前面的字体都查找失败后,在系统中找一种sans-serif字体作为默认字体。

注意顺序,如果把sans-serif放前面去,后面的都失效了。

font-family
属性应该设置几个字体名称作为一种”后备”机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

易读的 font-family

font-weight:字体粗细

font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍),有继承性。

400 : Normal

700:bold

建议使用数字

字体的加粗跟字体有关,比如:一种字体只有两种粗细程度的变化,那么normal
到bold 和到bolder都是一样的效果。

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font
Family:”宋体”。
多个字体系列是用一个逗号分隔指明 —>

如果使用较小的 font-size,应该使用一个具有高方位值(关于方位值请参见
CSS2 文档中的
font-size-adjust
一节)(译者注:方位值等于 font-size 除以 x-height)的可读性
font-family,这样在这样小的字体下具有较高的可读性。

font-style:字体风格

font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

normal:默认值,浏览器会显示标准的字体样式。

italic:浏览器会使用斜体的字体样式显示,如果字体没有斜体,那么正常显示字体。

oblique:浏览器会让文字倾斜显示。。

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 Arial.</p>

</body>
</html>

font:综合设置字体样式

font属性用于对字体样式进行综合设置,其基本语法格式如下:

选择器{font: font-style  font-weight  font-size/line-height 
font-family;}

使用font属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开。

其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

尽量用合写的方式.

图片 7

淘宝的字体设置:font: 12px/1.5 tahoma,arial,’Hiragino Sans
GB’,5b8b4f53,sans-serif;

 

 

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图