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 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
随机推荐
- 大宇java面试系列（一）：jvm垃圾回收
1. 说一下 JVM 有哪些垃圾回收算法? 标记-清除算法:标记无用对象,然后进行清除回收.缺点:效率不高,无法清除垃圾碎片. 标记-整理算法:标记无用对象,让所有存活的对象都向一端移动,然后直接清除 ...
- 从EFCore上下文的使用到深入剖析DI的生命周期最后实现自动属性注入
故事背景 最近在把自己的一个老项目从Framework迁移到.Net Core 3.0,数据访问这块选择的是EFCore+Mysql.使用EF的话不可避免要和DbContext打交道,在Core中的常 ...
- SpingBoot之集成Redis集群
一.安装Redis集群 安装步骤参照网上教程,Mac安装步骤参照https://github.com/muyl/mac-docker-redis-cluster 二.创建SpringBoot工程 创建 ...
- C++中对封装的语法支持——静态成员
静态成员(变量与函数) 1.静态成员变量的语法.访问.特点(共享.类内声明类外初始化) 静态成员变量在class中只做声明,并没有初始化所以不会分配内存. (1) 非静态成员变量必须通过对象来访问. ...
- java中hashmap容量的初始化
HashMap使用HashMap(int initialCapacity)对集合进行初始化. 在默认的情况下,HashMap的容量是16.但是如果用户通过构造函数指定了一个数字作为容量,那么Hash会 ...
- iOS界面流畅技巧之微博 Demo 性能优化技巧
微博 Demo 性能优化技巧 我为了演示 YYKit 的功能,实现了微博和 Twitter 的 Demo,并为它们做了不少性能优化,下面就是优化时用到的一些技巧. 预排版 当获取到 API JSON ...
- 领扣（LeetCode）移动零 个人题解
给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 必须在原数组上操作, ...
- python：0
if __name__ == '__main__': r = Rectangle() 79 def __str__(self): 80 return "address:(%d, %d)&qu ...
- python2中的SSL:CERTIFICATE_VERIFY_FAILED错误的解决办法
在使用urllib2访问一个自签名的https链接时,对于python2.6以下版本,TLS握手期间是不会检查服务器X509的证书签名是否是CA的可信任根证书.不过python2.7以后改变了这种情况 ...
- Orleans 3.0 为我们带来了什么
原文:https://devblogs.microsoft.com/dotnet/orleans-3-0/ 作者:Reuben Bond,Orleans首席软件开发工程师 翻译:艾心 这是一篇来自Or ...