1200字范文 > html css修改span的字体的值一编辑网页文本（span标签与字体属性文本属性）...

html css修改span的字体的值一编辑网页文本（span标签与字体属性文本属性）...

时间：2020-11-10 13:36:49

一、本课目标

掌握字体属性的使用

掌握文本排版样式的使用

为什么使用CSS？

有效的传递页面信息

使用CSS美化过的页面文本，漂亮，美观，吸引用户

可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容

具有良好的用户体验

二、span标签

2.1、综述

标签的作用：能让某几个文字或者某个词语凸显出来

字体样式

代码如下：

测试

p .show, .bird span {

font-size: 36px;

font-weight: bold;

color: blue;

}

.yellow {

color: yellow;

}

p #dream {

font-size: 24px;;

font-weight: bold;

color: red;

}

享受"北大式"教育服务

在北大青鸟，有一群人默默支持你成就 IT梦想

选择北大青鸟,成就你的梦想

醉后不知天在水满船清梦压星河

最终效果：

image.png

分析1、当使用span标签时，需要在style里面定义相应的样式，定义样式时需要前面加上p表示这个样式是span用的.

2、对于一个段落，如果只是需要某几个字需要用到样式，则在这几个字上加上span标签，同时早span标签里面定义class或者id属性，就如body里面的第一行，第二行。

3、当class标签与span标签共用时，则span标签有更高的优先级。如第三行。

4、当在p标签里面使用span标签里面的样式时，在只需在相应的需要用到的该样式的字体前后加上span标签即可，此时span标签里面不需要设置标签样式，如第四行。

2.2、font-family属性：设置字体类型

设置字体的时候，不要去设置你电脑上没有安装的字体，这样会显示不出来的。

2.3、font-size属性：设置字体大小

单位：px(像素)、em、rem、cm、mm、pt、pc

2.4、font-style属性

字体的风格：normal、italic和oblique。第一个是正常的，后两个是倾斜的。

2.5font-weight属性

image.png

2.6font属性

在这个生命中可以设置所有的字体属性：

但是是有顺序的：

字体属性的顺序：字体风格-字体粗细-字体大小-字体类型

三、文本属性

文本属性有一下这些：

文本属性

文本装饰其实就是有没有下划线。

3.1color属性

color属性

如果有模板的话，可以用PhotoShop拾取你想要的颜色，然后把相应的颜色的值设置在样式中。

3.2水平对齐方式

水平对齐方式

3.3首行缩进

text-indent：48px(text-indent：2em)第一种方式是缩进48个像素，当文本的尺寸设置为12px时，48px就是两个空格。但是当文本尺寸为别的尺寸的时候，这时就不一定是两个空格的缩进了。第二种方式是2em，此时是相对于文本尺寸来定义的。不管文本尺寸怎么改变，就是缩进两个字符。

3.4行高：设置行与行之间的空隙

line-height：30px，这样设置之后行与行之间就会有30个像素的空隙。行高会平均分配到行的上下。

3.5文本装饰和垂直对齐

文本装饰

text-decoration属性

image.png

垂直对齐方式

vertical-align属性：middle、top、bottom

3.6文本阴影

text-shadow：color x-offset y-offset biur-radius;

image.png

3.7总结