一、编辑网页文本(span标签与字体属性、文本属性) |
您所在的位置:网站首页 › 一级标签怎么设置文字 › 一、编辑网页文本(span标签与字体属性、文本属性) |
一、本课目标
掌握字体属性的使用
掌握文本排版样式的使用
为什么使用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总结 image.png 3.8补充示例代码如下: 样式复习文字 /**/ p.bird span { font-size: 36px; font-weight: bold; color: blue; } p.yellow span { color: yellow; } /*下面这个标签标示包含属性为green的span标签*/ span.green { font-size: 40px; color: green; } /*这个表示所有的包含属性为silver的标签*/ .silver { color: silver; } /*id选择器*/ #dream { font-size: 24px;; font-weight: bold; color: red; }享受"北大式"教 育服务 在北大青鸟,有一群人默默支持你成就 IT梦想 选择 北大青鸟,成就 你的梦想 醉后不知天在水满船 清梦压星河 结果如下: image.png注:解决这个问题给我最重要的启示是速到不会的随时去查3cschool。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |