CSS修饰文档
2024-08-31 22:30:41
定义字体类型
<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>
最新文章
- istringstream的操作
- 对于新安装的MySQL如何提升MySQL的安全级别
- iOS 使用GCD实现倒计时效果
- ckedit 文本编辑器
- Android 和iOS中 Gesture 和 Touch
- Linux一些常用软件的源码安装
- 转:关掉Archlinux中烦人的响铃
- JAXL发送房间消息
- 请给出一个左侧定宽右侧自适应的HTML结构及样式
- U盘中的闪存白片与黑片
- lpc1768的PWM使用
- Python random模块（获取随机数）
- java中队列Queue的使用
- 腾讯云服务器SMTP ERROR: Failed to connect to server
- vue中 左侧导航条 多个toggleClass
- python 自动化测试Jenkins 持续集成
- linux 任务调度
- Qt代码创建分隔条
- 20165210 Java第六周学习总结
- DispatcherServlet的url mapping为“/”时，对根路径访问的处理
热门文章
- HTTP的请求方式
- python：time模块
- 使用boost data_time模块来获取毫秒级时间并转换为string字符串
- Running serveral https server on a single IP address
- 三维目标检测论文阅读：Deep Continuous Fusion for Multi-Sensor 3D Object Detection
- 攻略前端面试官（一）：JS的数据类型和内存机制浅析
- 如何平滑优雅地在Rancher 2.x中升级cert-manager？
- Linux中shell基础、重定向、管道符、环境变量
- CSS 了解一下
- For input string:"name"