当前位置:首页 >> 电脑基础知识 >>

css-基础格式设置2-css文本段落格式设置

2016-2017 第二学期《前端开发基础》

专 业:

学号:

姓名:

实 验 名 CSS 样式 称

实 验 掌握 CSS 各种选择器的用法;熟练使用 CSS 样式进行格式设计;使用 DIV+CSS 实 目 现页面布局; 的

CSS 文本段落格式 1 文字排版--字体 font- family 2 文字排版--字号

font-size: absolute-size | relative-size | length 颜色

color:颜色值; 比如:

div {color: #345456; }

div {color: #999; }

div { color: rgb(100,14,200); }

div {color: menu; }

div {color: red; }

3 文字排版--粗体 font- weight 4 文字排版--斜体 font- style 知 5 文字排版—小型大写字母 font-variant 识 6 综合设置字体属性 font 提 font 简写,可以在一个声明中设置字体的所有属性,好处:一是写起来方便(就像键 示 盘快捷键);二是简化代码;三是帮助你熟悉和深刻理解 css。 语法:
font : font-style || font-variant || font-weight || font-size || line-height || font-family 默认值为: normal normal normal medium normal "Times New Roman"

7 文字排版--下划线--删除线 text-decoration 8 文字排版—阴影(H5)text-shadow 9 文字排版—字母转换 text-transform 10 段落排版--缩进 text-indent : length 11 段落排版—行高 line-height 12 段落排版--对齐 text-align : left | right | center | justify 13 段落排版--中文字间距 word-spacing、字母间距 letter-spacing 14 段落排版-换行处理 word-wrap : normal | break-word
word-break : normal | break-all | keep-all 15 文档空格 white-space 16 文档溢出折叠显示 text-overflow : clip | ellipsis

DQ

2018-03-13

2016-2017 第二学期《前端开发基础》

项目 1:各类选择器的使用 项目 2:css 文本段落格式设置 练习 1:css 设置文本基础格式 利用提供的文字:
李克强主持召开国务院常务会

听取最低生活保障政策落实督查情况汇报

部署进一步加强和改进低保工作,决定将《社会救助暂行办法(草案)》向社会公开 i am LOME [code] 注意:设置字体要尽量使用通用的字体,就是用大家电脑上一般都有的字体,常 用的是中文字体是宋体,英文字体是 Arial)设置字体的时候将英文字体设置在前, 中文设置在后 。如果想用比较特殊的字体,可以将其转换为图片

实 小技巧: 验 内 1. 如果是 12px 或 14px 的字体,行高一般 1.5em-1.8em 之间 字号越大行高设置的 容 越小一点

2.设置区块中的内容,垂直方向上居中,将区块的行高设置与区块的高度相同,前 提是只能一行

[code]

1 style

2 h1 {

3

width: 600px;

4

height: 150px;

5

line-height: 150px;

6

border: 1px solid #00f;

7}

玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂 用 css 设置样式,完成如下图所示的文字排版效果

DQ

2018-03-13

2016-2017 第二学期《前端开发基础》

参考文档结构:

DQ

2018-03-13

2016-2017 第二学期《前端开发基础》
练习 2:用 shadow 属性和“:first-letter”为文本添加入下图所示阴影效果 原始文本:
章节 第 1 章 学习 HTML5 第 2 章 HTML5 标记 第 3 章 HTML5 插入图片
详细内容 HTML 的发展 HTML5 的新增功能 如何学习 HTML5
效果图:

练习 3:使用 letter-spacing 、word-spacing 设置不同的字间距、字母间距,观察其效 果

参考效果图:
DQ

2018-03-13

2016-2017 第二学期《前端开发基础》

练习 4:换行处理 利用 word-wrap 或 word-break 实现单词换行处理,观察其效果并总结两者区别 默认效果:

换行效果 1:

换行效果 2:

练习 5:文档空格处理 white-space 利用 white-space 属性,控制段落文本中空格的显示效果
原始文本: <p class="whitespace">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> 效果 1:不换行
DQ

2018-03-13

2016-2017 第二学期《前端开发基础》
效果 2:保留所有空格

练习 6:文档溢出折叠显示

使用 text-overflow 属性,设置段落的折叠显示效果

原始文本:

北京上海 上海上 北京上海 北京 上海上海上海 北京上海 上海 北京上海 上海

北京 上海 北京 上海 北京 上海 北京 上海 北京 上海 北京上海 上海 北京上

海 上海

折叠前效果:

折叠后效果:

实 验 总 结 教 师 评 阅

DQ

2018-03-13


相关文章:
第2章-CSS基础_图文.ppt
第2章-CSS基础_计算机软件及应用_IT/计算机_专业...个段落标记没有被定义,将按照默认设置来显示 文字...(3)CSS文件一定是纯文本格式; (4)修改外部样式表...
第三章 CSS设置文本格式.doc
图 3-2 设置单词间距 3 添加文字修饰 text-decoration text-decoration 对文字添加一些常用的修饰,设置下划线和删除线等。 基本语法: text-decoration: underline|...
第1章 利用CSS设计页面排版_图文.ppt
段落格式的重要性,展示出CSS 字体和文字属性设计出...2. CSS基本语法 ?1.土的三相比例指标换算公式 ?...任务实践 ?李露使用CSS文本设置样式、段落排版功能,...
第2章CSS基础.ppt
CSS教学课件-第5章-CSS盒子...1/2 相关文档推荐...“这是段落 ”、“这是表格”之类的信息 文档...个示例,介绍如何使用CSS设置文本 格式和定位文本 ...
《网页设计与网站建设》--第5章-CSS技术基础_图文.ppt
《网页设计与网站建设》--第5章-CSS技术基础_...? 5.1 CSS基本概念 ? CSS 格式设置规则由两...字体属性用于控制网页文本段落格式效果。主要包含...
网页设计基础-11CSS的应用2.pdf
15 3. CSS样式区块属性设置区块属性(文本区块属性) ? 使用“CSS规则定义”对话框中的“区块”类别,可以定 义间距和对齐设置。 ? 区块在网页的文本段落排版中...
CSS 基本样式规则.ppt
1.CSS文字样式文字加粗 : font-weight 属性来设置字体 的粗细。基本语法: ? ...2.模拟GOOGLE公司LOGO实例 Span没有结构上的意义,纯粹是应用样式, Google ...
第三章页设计与制作电子样式表入门_图文.ppt
让IT学习更有效 CSS文本相关样式 CSS高级特性 阶段...基本语法格式如下: #id名{属性1:属性值1; 属性2...例如将网页中所有段落文本的字体设置为微软雅黑,可以...
CSS样式代码基础教程_图文.ppt
本章主要的内容包括以下内容: 1.1 样式表基础实例1-1 样式表简介 实例1-2 ...bold} 在这个格式中,style元素的type属性必须设为 "text/css",表示这定义的是...
Dreamweaver使用CSS样式表设置网页文本格式.doc
义的 CSS 规则设置所有段落文本(用 HTML 代码中的标签设置格式文本)的格式。..."粗体"类样式将应用到您的文本。 重复第 2 步,将"粗体"类样式应用到第段...
CSS技术_图文.ppt
CSS核心基础 制作网页的基础是使用HTML(Hyper Text ...如果我们希望不同的段落设置不同的格式 效果,如何...边距设为15像素 (2)将网页中的标题3设为:文字...
第五章 如何使用CSS美化网页.ppt
fina\ CSS是层叠样式表 (Cascading Style Sheets)的简称,是一 系列格式设置规则...HTML基础 活动1 活动2 HTML文档的基本结构设置页面属性 活动3 设置文本段落属性...
网页设计基础-09CSS的应用1.pdf
? 2. 快速应用在大量网页 ? 更新CSS样式时,使用该样式的所有文档的格式都自动...设置两个不同文字颜色的段落 p.red {color: red} p.blue {color: blue} ...
第十一讲CSS样式-2012112719355072_图文.ppt
层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 ...2、给第文字“宣传部”套用h2样式 三、设置段落样式 1、新建规则 参数设置...
CSS设置表单样式_图文.ppt
语法2:列表形式 ...利用css样式实现右图 风格。 案例-css代码参考 案例 代码参考 ? ? ? ? ? ...搭建基本表格; ? 设置表格样式; ? 加入文本输入框...
北工大web开发之第二课_图文.pdf
Web 开发技术基础---CSS CSS 北京工业大学计算机...扩展名的文本文件中)可用书写 器等编辑; (2)在内...没有发挥CSS统一设置格式的优势 在网页中使用CSS-5...
css基础.ppt
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置 颜色;...其基本语法格式如下: *{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;...
Dreamweaver中CSS样式_图文.ppt
图6-5 CSS设置对话框 6.2.2 应用CSS样式 1. 如果要在文档中应用样式 操作方法如下: 1) 将插入点放置在段落之中,即选择了整个段落,可 以对其设置格式;也...
实验10 CSS基础(Dream waver)_图文.pdf
} 第 2 页 计算机网络应用基础实验指导 实验 10 CSS 基础(Dreamwaver8) 声明...创建 或更改 h1 标签的 CSS 规则时,所有用 h1 标签设置格式文本 都会...
第6章 统一页面风格_图文.ppt
第6章 章 6.1 6.2 6.3 统一页面风格 CSS样式 样式 模板 综合示例 6.1 CSS样式 CSS样式一、基础知识 1.作用:设定文本、链接、图象的格式, 重新定义HTML...
更多相关标签: