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 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画空白折叠现象 ...

随机推荐

shell的运用 : jenkins 编译打包前端发布生产（tomcat）
生产隔离做得非常.....文件上传只能通过固定ip机器的sftp账户上传,账户密码每个月要写申请才能获得. 登陆生产服务只能通过浏览器登陆!!! 发布一次生产,很痛苦. 做了简单的shell来减轻痛苦 ...
Jenkins+pipeline+参数构建+人工干预确定
Jenkins+pipeline+参数构建+人工干预实现了以下功能 1. 可以选择环境,单选:可以选择需要发布的项目,多选 2.发布过程可视化 3. 可以人工干预是否继续发布. 初始化配置需要很久, ...
nyoj 42-一笔画问题 (欧拉图 && 并查集)
42-一笔画问题内存限制:64MB 时间限制:3000ms Special Judge: No accepted:10 submit:25 题目描述: zyc从小就比较喜欢玩一些小游戏,其中就包括画 ...
python--几种快速排序的实现以及运行时间比较
快速排序的基本思想:首先选定一个数组中的一个初始值,将数组中比该值小的放在左边,比该值大的放在右边,然后分别对左边的数组进行如上的操作,对右边的数组进行如上的操作.(分治+递归) 1.利用匿名函数la ...
spark thriftserver
spark可以作为一个分布式的查询引擎,用户通过JDBC的形式无需写任何代码,写写sql就可以实现查询啦,spark thriftserver的实现也是相当于hiveserver2的方式,并且在测试时 ...
SCAU-1144 数星星-HDU-1166-树状数组的应用
本文借鉴代码提供:https://www.cnblogs.com/geek1116/p/5566709.html树状数组详解:https://www.cnblogs.com/xenny/p/97396 ...
GeoServer 修改端口
准备内容安装环境:win10*64位专业版安装文件:geoserver-2.15.2 操作步骤 1.找到文件夹下的start.ini,并用记事本打开 2.找到jetty.port,修改为自己需要的 ...
20190926-2 选题 Scrum立会报告+燃尽图05
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8678 一.小组情况组长:迟俊文组员:宋晓丽梁梦瑶韩昊刘信鹏队名:扛 ...
MySQL8——源码安装
一.环境 ubuntu18.10(CentOS7由于gcc版本过低已经无法通过编译) 二.准备工作 1.安装依赖 apt-get install -y gcc g++ cmake build-esse ...
day28
断点调试在想要加断点的地方用鼠标点击一下,你会看到一个红色圆圈变红的地方,程序执行到,就会暂停断点应该加在报错之前绿色箭头表示快速跳到下一个断点执行控制台报错,点击你能看懂的最后一行,光标会 ...

CSS修饰文档

定义字体类型

定义字体大小

定义字体颜色

定义文字粗细

设置下划线等各种线

自定义大小写

设置对齐方式

设置垂直对齐

设置字间距

设置行间距

设置缩进

span用法

设置标题格式

设置文本格式

设置段落格式

图文混排

CSS修饰文档的更多相关文章

随机推荐

热门专题