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 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
随机推荐
- 替换"marquee"，实现无缝滚动
js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就 ...
- tomcat 部署springboot 项目
Springboot项目默认jar包,且内置Tomcat.现需要将项目打成war包,并部署到服务器tomcat中. 1.修改pom.xml文件.将jar修改为war. <packaging> ...
- [Git]Git常用命令速查手册
看的别人的文章,来源:https://mp.weixin.qq.com/s/SGRcE9EPOu4Tph65tzPzQw
- 一文教你快速读懂MQTT网关
MQTT是一种发布(publish)/订阅(subscribe)协议,MQTT协议采用发布/订阅模式,所有的物联网终端都通过TCP连接到云端,云端通过主题的方式管理各个设备关注的通讯内容,负责将设备与 ...
- Spring框架学习总结（上）
目录 1.Spring的概述 2.Spring的入门(IOC) 3.Spring的工厂类 4.Spring的配置 5.Spring的属性注入 6.Spring的分模块开发的配置 @ 1.Spring的 ...
- 结合源码，重温 Android View 的事件处理知多少 ?
前言 Android View 的 事件处理在我们的编程中,可谓是无处不在了.但对于大多数人而言,一直都是简单的使用,对其原理缺乏深入地认识. 学 Android 有一段时间了,最近发现,很多基础知识 ...
- 2C 还是 2B，跟找工作有什么关系？
通常,我们会把公司的业务类型分成以下几种: 2C,to Customer,指面向个人客户的业务,即将公司的产品或服务销售给个人,通常做出购买决策的个人也是使用产品或服务的用户.举例说明,像 BAT 发 ...
- Java流程控制之（四）中断
目录 break continue return 标签 在程序设计时,循环直接的跳转显得十分重要,虽然Java没有提供goto语句去控制程序的跳转,但为了控制循环,Java提供了continue,br ...
- 2019-9-17：基础学习,windows server 2008 r2，搭建web服务器和FTP服务器
一.信息服务iis管理器安装 1,点击打开“服务器管理器”-->选择“角色”-->选择“添加角色”,打开“添加角色向导” 2,点击“下一步”-->勾选“web服务器(IIS)”--& ...
- Android最大方法数和解决方案
转载请标明出处:http://blog.csdn.net/shensky711/article/details/52329035 本文出自: [HansChen的博客] 什么是64K限制和Linear ...