CSS修饰文档
定义字体类型
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif; /*按顺序找已经安装的字体*/
}
p {
font:14px "黑体" /*14像素,黑体*/
}
</style>
</head>
<body>
<p>定义字体类型.</p>
</body>
</html>
定义字体大小
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div{font-size:20px;} /*像素为单位*/
.p1{font-size: 0.6in}/*英寸为单位*/
.p2{font-size: 1em} /*父辈为单位,1em表示和父辈相同. 0.8em表示是父辈的80%*/
.p3{font-size: 2cm} /*厘米为单位*/
.p4{font-size: 16pt} /*相对像素为单位*/
.p5{font-size: 2pc} /*皮卡为单位*/
</style>
</head>
<body>
<div>
明月几时有?
<p class="p1">明月几时有? 0.6in</p>
<p class="p2">明月几时有? 0.8em</p>
<p class="p3">明月几时有? 2cm</p>
<p class="p4">明月几时有? 16pt</p>
<p class="p5">明月几时有? 2pc</p>
</div>
</body>
</html>
定义字体颜色
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.p1{color:red}
.p2{color:#693333}
.p3{color:rgb(120, 120, 120)}
.p4{color:rgb(0%, 100%, 50%)}
</style>
</head>
<body>
<div>
<p class="p1">明月几时有? 0.6in</p>
<p class="p2">明月几时有? 0.8em</p>
<p class="p3">明月几时有? 2cm</p>
<p class="p4">明月几时有? 16pt</p>
</div>
</body>
</html>
定义文字粗细
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p{font-weight: normal}
h1{font-weight: 700}
div{font-weight: bolder}
.bold{font-weight: bold}
</style>
</head>
<body>
<p>明月几时有?文字粗细是normal</p>
<h1>明月几时有?文字粗细是700</h1>
<div>明月几时有?文字粗细是bolder</div>
<p class="bold">明月几时有?文字粗细是bold</p>
</body>
</html>
设置下划线等各种线
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.underline{text-decoration: underline}
.overline{text-decoration: overline}
.line-through{text-decoration: line-through}
</style>
</head>
<body>
<p class="underline">设置下划线</p>
<p class="overline">设置顶划线</p>
<p class="line-through">设置删除线</p>
</body>
</html>
自定义大小写
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.small-caps{
font-variant: small-caps; /*小型大写字母*/
}
</style>
</head>
<body>
<p class="small-caps">font-variant</p>
<p>HELLO</p>
</body>
</html>
设置对齐方式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.left{text-align: left;}
.center{text-align: center;}
.right{text-align: right;}
.justify{text-align: justify;}
</style>
</head>
<body>
<p class="left">左对齐</p>
<p class="center">居中对齐</p>
<p class="right">右对齐</p>
<p class="justify">两端对齐</p>
</body>
</html>
设置垂直对齐
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.super {
vertical-align:super;/*super在上面,sub在下面*/
}
</style>
</head>
<body>
<p>vertical-align表示垂直<span class="super">对齐</span>属性</p>
</body>
</html>
设置字间距
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.lspacing {
letter-spacing: 1em;
}
.wspacing {
letter-spacing: 1em;
}
</style>
</head>
<body>
<p class="lspacing">letter spacing(字间距)</p>
<p class="wspacing">word spacing(词间距)</p>
</body>
</html>
设置行间距
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.p2 {
font-size: 10pt;
line-height: 1em;/*定义行距*/
}
</style>
</head>
<body>
<h1>社戏</h1>
<h2>鲁迅</h2>
<p class="p2">大多数游客来到阿莫尔戈斯岛是为了神奇的建筑和文化，而不是单纯的在海滩上晒太阳。霍佐维奥蒂萨修道院是面向游客开放的，这里有着爱琴海的迷人美景，同时让游客沉浸在11世纪修道院的舒适环境中。在岩石海岸远足，哪怕只是随意走走都有种发自内心的沉静.</p>
</body>
</html>
设置缩进
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p {
text-indent:2em;
}
</style>
</head>
<body>
<h1>社戏</h1>
<h2>鲁迅</h2>
<p>大多数游客来到阿莫尔戈斯岛是为了神奇的建筑和文化，而不是单纯的在海滩上晒太阳。霍佐维奥蒂萨修道院是面向游客开放的，这里有着爱琴海的迷人美景，同时让游客沉浸在11世纪修道院的舒适环境中。在岩石海岸远足，哪怕只是随意走走都有种发自内心的沉静.</p>
<p>大多数游客来到阿莫尔戈斯岛是为了神奇的建筑和文化，而不是单纯的在海滩上晒太阳。霍佐维奥蒂萨修道院是面向游客开放的，这里有着爱琴海的迷人美景，同时让游客沉浸在11世纪修道院的舒适环境中。在岩石海岸远足，哪怕只是随意走走都有种发自内心的沉静.</p>
</body>
</html>
span用法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p{
color:#eb0005;
}
.g1 {
font-size: 60px;
font-family: MS Ui Gothic, Aria, sans-serif;
letter-spacing:-5px; /*字体间距*/
font-weight:bold;
}
.g2 {
font-size: 50px;
font-family: MS Ui Gothic, Aria, sans-serif;
letter-spacing:-12px; /*字体间距*/
font-weight:900;
}
</style>
</head>
<body>
<p>
<span class="g1">Bai</span>
<img src="baidu.png" border="0">
<span class="g2">百度</span>
</p>
</body>
</html>
设置标题格式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 20px;
background: url(img/book.jpg);
font-size:14px;
font-family: "宋体", Arial, Helvetica, sans-serif;
}
h1 {
color:#c5c4c4;
background: #009933;
padding-bottom:24px; /*定义底边界为24px*/
border-bottom: 2px solid #cecaca; /*宽为2px的灰色下边框*/
}
img {
position:relative;
bottom:-12px;/*图片向下一点,让图片的中间和文字的中间对齐*/
}
</style>
</head>
<body>
<h1><img src="img/logo.jpg", width=50px>设置CSS标题样式</h1>
治国必先治党，治党务必从严。五年来，党风政风为之一新，党心民心为之一振，全面从严治党成绩值得充分肯定，经验值得深入总结。高波表示，一个政党，一个政权，其前途命运取决于人心向背，“全面从严治党是总书记亲自谋划、亲自推动、亲自部署，甚至是亲自实施，所以我们的党员群众对于全面从严治党的政治决心、政治定力、政治信用大大的增强。现在我们讲党心民心所向这不是一句空话，通过五年来从严治党，从严治吏实实在在的行动，赢得了广大人民群众信任。”"
前10个关键词为
</body>
</html>
设置文本格式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color:#dfece0;
margin:30px;
font-family:"黑体"
}
h2 {
font-size: 30px;
color: #086916;
padding-bottom: 4px;
border-bottom:2px solid #cecaca;/*标题上有一根线*/
text-align:center;
}
p {
text-align:left;
text-indent:2em;
}
.p1 {
line-height: 1.6em;
line-spacing: 3pt;
color: #043207;
padding-bottom:10px;
}
.p2 {
line-height: 18px;
letter-spacing: 1pt;
color:#f3630c;
}
</style>
</head>
<body>
<h2>CSS层叠样式表</h2>
<p class="p1">治国必先治党，治党务必从严。五年来，党风政风为之一新，党心民心为之一振，全面从严治党成绩值得充分肯定，经验值得深入总结。高波表示，一个政党，一个政权，其前途命运取决于人心向背，“全面从严治党是总书记亲自谋划、亲自推动、亲自部署，甚至是亲自实施，所以我们的党员群众对于全面从严治党的政治决心、政治定力、政治信用大大的增强。现在我们讲党心民心所向这不是一句空话，通过五年来从严治党，从严治吏实实在在的行动，赢得了广大人民群众信任。</p>
<p class="p2">治国必先治党，治党务必从严。五年来，党风政风为之一新，党心民心为之一振，全面从严治党成绩值得充分肯定，经验值得深入总结。高波表示，一个政党，一个政权，其前途命运取决于人心向背，“全面从严治党是总书记亲自谋划、亲自推动、亲自部署，甚至是亲自实施，所以我们的党员群众对于全面从严治党的政治决心、政治定力、政治信用大大的增强。现在我们讲党心民心所向这不是一句空话，通过五年来从严治党，从严治吏实实在在的行动，赢得了广大人民群众信任。</p>
</body>
</html>
设置段落格式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color: #f1e2d9;
font-family: "宋体";
text-align:center;
}
.container {
width:800px;
border:2px solid #c1bebc;
margin:0px auto;
background-color: #c0f5ef;
}
.header {
width:800px;
border-bottom: 1px solid #c1bebc;
}
h1 {
font-family:"黑体";
margin-top:50px;
}
.headline {
color:#000099;
text-align:center;
}
.main {
width: 740px;
text-align:left;
margin:20px 30px 40px 30px;
}
.main p {
font-size:15px;
text-indent:2em;
line-height:1.6em;/*行距*/
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>英国史上最大航母即将组装 将成英海军旗舰</h1>
<p class="headline">2011年8月4日11:01 环球军事</p>
</div>
<div class="main">
<p>治国必先治党，治党务必从严。五年来，党风政风为之一新，党心民心为之一振，全面从严治党成绩值得充分肯定，经验值得深入总结。高波表示，一个政党，一个政权，其前途命运取决于人心向背，“全面从严治党是总书记亲自谋划、亲自推动、亲自部署，甚至是亲自实施，所以我们的党员群众对于全面从严治党的政治决心、政治定力、政治信用大大的增强。现在我们讲党心民心所向这不是一句空话，通过五年来从严治党，从严治吏实实在在的行动，赢得了广大人民群众信任。</p>
<p>治国必先治党，治党务必从严。五年来，党风政风为之一新，党心民心为之一振，全面从严治党成绩值得充分肯定，经验值得深入总结。高波表示，一个政党，一个政权，其前途命运取决于人心向背，“全面从严治党是总书记亲自谋划、亲自推动、亲自部署，甚至是亲自实施，所以我们的党员群众对于全面从严治党的政治决心、政治定力、政治信用大大的增强。现在我们讲党心民心所向这不是一句空话，通过五年来从严治党，从严治吏实实在在的行动，赢得了广大人民群众信任。</p>
<p>治国必先治党，治党务必从严。五年来，党风政风为之一新，党心民心为之一振，全面从严治党成绩值得充分肯定，经验值得深入总结。高波表示，一个政党，一个政权，其前途命运取决于人心向背，“全面从严治党是总书记亲自谋划、亲自推动、亲自部署，甚至是亲自实施，所以我们的党员群众对于全面从严治党的政治决心、政治定力、政治信用大大的增强。现在我们讲党心民心所向这不是一句空话，通过五年来从严治党，从严治吏实实在在的行动，赢得了广大人民群众信任。</p>
</div>
</div>
</body>
</html>
图文混排
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-family: "宋体";
text-align:center;
background-color: #445545;
}
.container {
width:850px;
border:1px solid #66CCFF;
margin:0px auto;
padding:40px 40px 80px 40px;
background-color: #CCCCCC;
}
h1 {
font-weight: bold;
color:#000066;
margin:20px auto;
}
.container {
font-size:14px;
text-align:left;
margin:0;
padding:0;
line-height: 1.8em;
}
.p1 {
text-indent: 2em;
}
img {
width:200px;
border:#339999 2px solid;
float:left;
margin:10px;
}
.sh {
font-size: 50px;
color: green;
float: left;
padding-bottom: 2px;
padding-right: 5px;
font-weight:bold;
font-family: "黑体";
}
.s1 {
font-size: 20px;
font-style: italic;
text-decoration:underline;
color:#FF0000;
}
.s2 {
font-size: 20px;
text-decoration: line-through;
color:#CC0000;
}
</style>
</head>
<body>
<div class="container">
<h1>人口红利持续衰减 "未富先老"考验中国</h1>
<p>
<span class="sh">治</span>国必先治党，治党务必从严。五年来，党风政风为之一新，党心民心为之一振，全面从严治党成绩值得充分肯定，经验值得深入总结。高波表示，一个政党，一个政权，其前途命运取决于人心向背，“全面从严治党是总书记亲自谋划、亲自推动、亲自部署，甚至是亲自实施，所以我们的党员群众对于全面从严治党的政治决心、政治定力、政治信用大大的增强。现在我们讲党心民心所向这不是一句空话，通过五年来从严治党，从严治吏实实在在的行动，赢得了广大人民群众信任。
<span class="s1">2.93</span>个百分点，治党务必从严。五年来，党风政风为之一新，党心民心为之一振，全面从严治党成绩值得充分肯定，经验值得深入总结。高波表示，一个政党，一个政权，其前途命运取决于人心向背，“全面从严治党是总书记亲自谋划、亲自推动、亲自部署，甚至是亲自实施，所以我们的党员群众对于全面从严治党的政治决心、政治定力、政治信用大大的增强。现在我们讲党心民心所向这不是一句空话，通过五年来从严治党，从严治吏实实在在的行动，赢得了广大人民群众信任。<img src="img/book.jpg"/>
治党务必从严。五年来，党风政风为之一新，党心民心为之一振，全面从严治党成绩值得充分肯定，经验值得深入总结。高波表示，一个政党，一个政权，其前途命运取决于人心向背，“全面从严治党是总书记亲自谋划、亲自推动、亲自部署，甚至是亲自实施，所以我们的党员群众对于全面从严治党的政治决心、政治定力、政治信用大大的增强。现在我们讲党心民心所向这不是一句空话，通过五年来从严治党，从严治吏实实在在的行动，赢得了广大人民群众信任。
</p>
<p class="p1">
中国认为“脸书”没有认真对待“假新闻”的问题，并将在“脸书”一旦进入中国的情况下就打击假新闻提出附加要求。在美国总统选举期间，“脸书”上曾出现假新闻，影响了这家社交媒体的名声。2016年4月，一位名叫魏泽西的中国学生
<span class="s2">在接受无效</span>的实验治疗之后死亡，网络虚假信息引起中国有关当局的重视。魏泽西根据从互联网搜索引擎“百度”得到的信息，选择了治疗医院。今年7月，中国国家互联网信息办公室要求网站注明原始信息的来源，同时禁止把传闻当做新闻发表，并禁止歪曲事实。中国国内超过50个新闻机构和互联网公司签署文件，承诺加强信誉，“抵抗网络谣言”，大幅控制了通过社交媒体报道和传播消息的活动。中国国家互联网信息办公室很可能会对传播新闻内容的具体媒体提出要求，让他们同中国互联网管理机构签约，做出类似承诺。当然，中国所说的假新闻往往包括那些违背官方规定的新闻。中国传媒管理当局对哪个海外机构可以在这个平台上设立帐户，以及可以报道什么将会做出严格规定。
</p>
<p class="p1">
做出类似承诺。当然，中国所说的假新闻往往包括那些违背官方规定的新闻。中国传媒管理当局对哪个海外机构可以在这个平台上设立帐户，以及可以报道什么将会做出严格规定.
</p>
</div>
</body>
</html>
CSS修饰文档的更多相关文章
- css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明
css参考文档 http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...
- [中文版] 可视化 CSS References 文档
本文分享了我将可视化 CSS References 文档翻译成中文版的介绍,翻译工作还在陆续进行中,供学习 CSS 参考. 1. 可视化 CSS References 文档介绍 许多 CSS 的文档都 ...
- css标准文档流
css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...
- 3 、操作元素 (属性 CSS 和 文档处理)
3 操作元素-属性 CSS 和 文档处理 3.1 属性操作 $("p").text() $("p").html() $(":check ...
- HTML&CSS基础-文档声明
HTML&CSS基础-文档声明 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML的发展 1993年6月: HTML第一个版本 1995年11月: HTML2.0 ...
- css脱离文档流
作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- CSS脱离文档流&浮动
什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...
- 重温CSS之文档结构
我们来看看几个基本的HTML页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
随机推荐
- 详细讲解 Redis 的两种安装部署方式
Redis 是一款比较常用的 NoSQL 数据库,我们通常使用 Redis 来做缓存,这是一篇关于 Redis 安装的文章,所以不会涉及到 Redis 的高级特性和使用场景,Redis 能够兼容绝大部 ...
- java线程池的介绍与使用（Executor框架）
1. 先来看一下类构成 public interface Executor { //顶级接口Executor,定义了线程执行的方法 void execute(Runnable command); } ...
- PHP中高级面试题 一个高频面试题：怎么保证缓存与数据库的双写一致性？
分布式缓存是现在很多分布式应用中必不可少的组件,但是用到了分布式缓存,就可能会涉及到缓存与数据库双存储双写,你只要是双写,就一定会有数据一致性的问题,那么你如何解决一致性问题? Cache Aside ...
- Python 面向对象-上篇
概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向过程编程最易被初学 ...
- VLAN实验（1）Access接口
1.选择两台S3700的交换机,5台PC机,并按照下图链接好并填写IP,完成此拓扑图 2.由于现在我们还没有划分VLAN,这5台PC,还在同一个VLAN中,现在我们启动所有的设备,这是所有的主机应该是 ...
- Flex带CheckBox的Tree（修改ItemRenderer）
此文代码参考了:http://summerofthatyear-gmail-com.iteye.com/blog/326302 在此表示感谢! 前文提到了,实现带CheckBox的Tree有两种方法: ...
- Android 8.1 自定义热点的时候设置了热点maxLength="32"，但是在希伯来语等状态下还是发现在没到32个字符之前就无法把热点设置成功了
初步认为应该是与热点名称的字节数有关. 然后开始查看源码. /Settings/res/xml/tether_prefs.xml 中的 <Preference android:key=" ...
- Fortran输入输出与声明--xdd
1.建议程序总体格式: program ex1. ... end progr 2.想要打出 My name is "xdd". write(*,*)" My name i ...
- http_web_cache
HTTP Web Cache 程序资源的访问具有局部性 时间局部性:一个被访问过的资源很有可能在近期被再次访问. 空间局部性:一个被访问过的资源,它的周边资源很有可能被访问到. 如何衡量缓存的有效性? ...
- mybatis精讲(四)--ObjectFactory
目录 前言 mybatis的ObjectFactory 源码 setProperties create instantiateClass 使用场景 # 加入战队 微信公众号 前言 ObjectFact ...