NEWS

新闻资讯

当前位置首页 > 新闻资讯 > 正文

字体+文本效果+背景_前端学习

作者:菁瑞优智_小菁 时间:2021-07-23

1、CSS基本单位 px、%、em、rem了解

px 像素:物理单位,像素,就是屏幕上的一个点,是屏幕的最小单位。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

%:基于父容器的相对单位

%(基于父容器的相对单位。height的%是基于父容器的高度,width、margin-top等是基于父容器的宽度,文字是基于父容器的文字大小。)

em:当前文字大小

rem:基于html的文字大小

2、文本样式

2.1 字体样式

font-family(family:家庭,可以存在多个字体)

为了方便阅读,电子设备上的字体都尽量是非衬线体。

sans-serif:无衬线字体

sans 的意思是无,sans-serif 也就是无衬线的意思。专指西文中没有衬线的字体,与汉字字体中的黑体相对应。与衬线字体相反,该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。

大名鼎鼎的微软雅黑相信都不陌生,从 windows Vista 开始,微软提供了这款新的字体,一款无衬线的黑体类字体,显著提高了字体的显示效果。现在这款字体已经成为 windows 浏览器最值得使用的中文字体。

被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica 是苹果电脑的默认字体,微软常用的Arial 字体也来自于它。

注:

1)字体名称可以是英文也可以是中文。

2)英文字体如果出来多个单词需要用双引号包括。

3)可以写多个字体,浏览器根据用户电脑上的字体从左到右选择。多个字体用逗号(半角逗号)分隔。

font-size:谷歌浏览器默认最小字号是12px,正常字号是16px

color:文字的颜色都是无彩色,从黑到白。

CSS中颜色的三种表现方式:

1)英文名称

红色:red; 绿色:green; 蓝色:blue; 黄色:yellow ...

2)16进制颜色值(#RRGGBB) 0-9 (A(10)-F(15)或a-f)

红色:#ff0000; 绿色:#00ff00; 蓝色:#0000ff; 黄色:#ffff00 ...

这种模式可以简写,简写原则为: RGB三段分别相同时可以简写成3位。

**正确的: #ff0000 => #f00; #00ff00 => #0f0; #228833 => #283**

**错误的: #f10000 => #f100; #00ab11 => #0ab1; #228e36 => #28e36**

3)rgb或 rgba

红色: Rgb(255,0,0); 绿色:Rgb(0,255,0); 蓝色:Rgb(0,0,255); 黄色:Rgb(255,255,0)

Rgba(255,0,0,1) 最后一位是透明通道。

font-weight:

中文网页不适合用具体的磅值(100—900),比如400表示normal,700表示bold。中文用英文单词的值即可。

英文只有26个字母,可以有不同的粗细胖瘦,中文字体一个字库好几万的字,一种字体有两三个不同的粗细已经不容易了,所以中文的设置不能照搬英文的设置。

在制定标准的时候,都是外国公司,中国只能按照国外的标准走。

font-style

normal

italic 中文天生没有斜体,这都是国外制定的标准,符合的是英文的习惯。

text-decoration 修饰线

**text-decoration :none**| **underline**| **blink**| **overline**| **line-through**

通常用于清除A标签的默认下划线

除A标签以外,一般不给其它标签加下划线效果,以免让用户产生误解

2.2 文本排版样式

text-align 文本水平对齐

  • left
  • right
  • center
  • justify

text-indent 首行缩进

  • 可以为正值和负值

line-height 行高

  • normal 默认。设置合理的行间距。
  • number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
  • length 设置固定的行间距。
  • % 基于当前字体尺寸的百分比行间距。

vertical-align 垂直对齐

vertical-align:baseline**|**sub**|**super**|**top**|**text-top**|**middle**|**bottom**|**text-bottom**|*length*

参数:

  • baseline : 将支持valign特性的对象的内容与基线对齐
  • sub : 垂直对齐文本的下标
  • super : 垂直对齐文本的上标
  • top : 将支持valign特性的对象的内容与对象顶端对齐
  • text-top : 将支持valign特性的对象的文本与对象顶端对齐
  • middle : 将支持valign特性的对象的内容与对象中部对齐
  • bottom : 将支持valign特性的对象的文本与对象底端对齐
  • text-bottom : 将支持valign特性的对象的文本与对象顶端对齐
  • length : 由浮点数字和单位标识符组成的长度值或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是 0%.

扩展理解:

该属性首先只对inline-level的元素和table-cell的元素有效,对block-level的元素无效。

该属性最初的目的是为了对齐文本和紧邻文本的元素。 所以和text-align的对齐原理不一样。

针对inline-level的元素, 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

这种方式是直接对inline-level元素设置vertical-align。

在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。 这种方式是直接为td设置vertical-align

1、图片和文字在行内默认都是基线baseline对齐。在line box中,x字母的最下面就是默认基线的位置。

2、当为图片设置vertical-align:top的时候,图片的顶部和line box 的顶部对齐,这个时候,line box的基线会发生变化,上移。

3、当为图片设置vertical-align:middle的时候,图片的中心点和x的中心点对齐。

4、当为图片设置vertical-align:bottom的时候,图片的底部和line box的底部对齐。

所以,并不是文字相对于图片发生了上中下的对齐,而是改变了图片的对齐方式,line box的基线发生了变化,而文字默认是和line box的基线对齐的。

middle

baseline 默认。将元素的基线对齐到line-box的基线上 。

top 将元素的上边沿和line-box的上边沿对齐;

bottom 将元素的下边沿和line-box的下边沿对齐;

2.3 英文排版样式

text-transform

  • uppercase
  • lowercase
  • capitalize 将每个英文单词的首字母转换成大写,其余的无变化

letter-spacing 字母间距

  • 对中文有效,中文的每一个字就是一个字符letter

word-spacing

  • 单词间距,以空格为基准进行调节,如果汉字有空格分隔,则有效。

2.4 Font 字体复合属性

作用:设置或检索对象中的文本特性。该属性是**复合属性**。

语法:

**font :**

**font-style**

**font-weight**

**font-size/line-height**

**font-family**

示例:

/*完整写法*/  
p { font:italic bold 12px/30px  arial,sans-serif,"microsoft Yahei";}     
/*常用简写形式*/  
p {font: 12px/24px "microsoft Yahei"; }  
p { font: bold 12px/24px "microsoft Yahei"; }  

注:

复合属性的每一个属性值之间通常用空格隔开,特殊要求除外。

font最精简的形式也必须是font: 12px/24px "microsoft Yahei"; 否则不会生效。

3、背景样式

3.1 background-color

颜色值

transparent 透明

3.2 background-image

设置背景图片的容器必须有宽高,否则看不到图片

url 图片地址

none

3.3 background-repeat

no-repeat 背景图像不平铺

repeat-x 背景图像在横向上平铺

repeat-y 背景图像在纵向平铺

repeat 背景图像在纵向和横向上平铺

3.4 background-position

left

right

center

top

bottom

length

%

注:

如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值是纵坐标。**值可以写英文,也可以写数字,甚至可以是负数。常用于 CSS sprites(CSS精灵)**

该属性定位不受对象的补丁属性padding设置影响。

3.5 background-attachment

scroll 默认。背景图像会随着页面其余部分的滚动而移动。 (绑定到body上)

fixed 当页面的其余部分滚动时,背景图像不会移动。(绑定到HTML标签上)

3.6 background简写

background-color, background-image, background-repeat, background-attachment, background-position

4、课堂总结

4.1 重点

文本的样式

背景样式

4.2 难点

line-height

vertical-align

background-position

4.3 学习方法

把不熟练的单词抄写3遍以上。

多敲代码,多思考。

4.4 排错技巧

利用chrome浏览器的开发者调试工具