目录
CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
CSS选择器
CSS选择器：http://www.runoob.com/cssref/css-selectors.html
1.ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
2.class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-epuiv="Content-Type" content="text/html" charset="UTF-8">
<title>文字排版</title>
</head>
<style type="text/css">
.box1 a:link,a:visited{
color:#003399;
text-decoration:none;
}
.box1 a:hover{
color:#FF0000;
text-decoration:underline;
}
.box1,.box2{
width:960px;
border:1px solid #444;
margin:0px auto; /*div在网页中居中*/
padding:20px; /*页边距*/
}
.box2 h1,h5{
text-align:center;
color:#990000;
}
.box2 .p1,.p4,.p5{
font-family:楷体;
color:#003399;
text-indent:28px; /*首行缩进*/
line-height:180%; /*行高*/
}
.box2 .p2{
font-family:宋体;
color:#993399;
text-indent:28px; /*首行缩进*/
line-height:180%; /*行高*/
}
.box2 .p2 .span1{
font-family:黑体;
font-size:28px;
color:red;
}
.box2 .p2 .span2{
font-family:黑体;
font-size:24px;
font-style:italic;
color:yellow;
}
.box2 .p3{
color:#ff3333;
font-family:宋体;
text-decoration:underline;
letter-spacing:6px;
}
</style>
<body>
<!--伪类选择器-->
<div class="box1">
<a href="#">网站首页</a> |
<a href="#">资源分享</a> |
<a href="#">论坛中心</a> |
<a href="#">投诉建议</a> |
<a href="#">网站首页</a> |
<a href="#">网站首页</a> |
</div>
<div class="box2">
<h1>国际锐评：中国经济韧性和市场是反制贸易战的重磅“弹药”<h1>
<h5>来源： 中央广电总台国际在线</h5>
<p class="p1">美国东部时间10月14日晚，特朗普总统在接受美国哥伦比亚广播公司（CBS）《60分钟》节目主持人莱斯利·施塔尔专访时，称中国报复美国贸易战“已经没有足够的弹药了”。同时，他还称，中美之间发生的不是贸易战（trade war），而是小冲突（skirmish）。虽然施塔尔提醒他在前一天还称之为“战争”，但特朗普矢口否认，并称他正考虑给中美间的“小冲突”降温。
特朗普提到中方“弹药已尽”时，所引用的论据是“我们对他们的1000亿美元（实际是2000亿，难道他又口误？）商品征税，他们对我们的531亿美元商品征税。”很显然，他还想利用这种“数字游戏”来突显中国反制措施的不对等，从而证明中国没有“弹药”了。</p>
<p class="p2"><span class="span1">然而</span>，贸易战绝不是什么“数字游戏”，而是事关成千上万企业和消费者的利益。美国政府不顾国内外反对，为实现“美国第一”执意升级贸易战，但中国政府却不会“随美起舞”，与美方的非理性行为一味火并，而是要以人民为中心，坚决捍卫自由贸易、多边体制以及世界各国的共同利益。所以，在充分考虑国内民众利益、企业承受力和全球产业链运转等因素的基础上，中方采取数量型与质量型相结合的反制措施，充分体现了理性克制、灵活精准的原则，目的就是“以战止战”，而不是“为战而战”。
事实上，<span class="span2">中方的理性与克制，并不代表“弹药”将尽</span>。恰恰相反，中国经济的韧性与巨大市场，始终是反制这场贸易战的重磅“弹药”。
首先，中国经济的发展韧劲，夯实了中方反制贸易战的“弹药库”。</p>
<p class="p3">外界看到，中国经济已连续12个季度运行在6.7%至6.9%之间，经济增长正从过多依赖出口、投资，转换到更多依靠消费拉动、服务业带动、内需支撑上。此外，中国有自主完备的工业体系和上中下游产业链、全球最大的中等收入群体、全球最大最具潜力的消费市场，这些都使得中国经济有足够的底气与韧劲来抵御冲击。2017年中国经济总量达12.7万亿美元，对外出口达2.26万亿美元。2000亿美元只占中国出口总量的8.8%，如果考虑加工贸易的因素，则对增加值的影响还会更小一些。所以，美国对华2000亿输美产品加征关税的损失是可承受和消化的。正因如此，世界银行最近发布的《中国经济简报》明确指出，中国经济仍保持强韧发展态势。
其次，中国新一轮对外开放，特别是开放市场措施，将为击退贸易战提供源源不断的“弹药”。</p>
<p class="p4">今年以来，中国不断缩短外商投资负面清单、大幅放宽市场准入、加强知识产权保护、主动扩大进口……新一轮开放政策不断落地，吸引更多外资进入中国。比如，德国宝马最近在中国再扩大投资30亿欧元，埃克森美孚已签署在华投资100亿美元的协议，特斯拉将在上海开设全球首个海外超级工厂……即便是被迫签署美墨加三方协定（USMCA）的加拿大也明确表示，希望与包括中国在内的各国继续坚持基于规则的多边贸易体制，反对贸易保护主义。11月1日起，中国将对1585个税目降税，关税总水平将由去年9.8%降至7.5%；首届中国国际进口博览会将举办，预计吸引130个国家和地区、超过15万名的国内外采购商参与。同时，中国新一轮降费减税计划也在制定当中……当全球与一个拥有近14亿人口、4亿中等收入群体的巨大市场相拥抱时，贸易战只能黯然退场。
相比之下，美国检验这三个多月来的贸易战“战果”，就会发现，“弹药”快用完的恐怕还是它自己。这正是特朗普不得不改变用词，将中美贸易摩擦从“战争”降级到“小冲突”的主要原因。</p>
<p class="p5">数据显示，9月美国对华贸易逆差再创新高，达到341亿美元，同比上升13%。美国VOX网站评论说，特朗普的贸易战略“正在失败”，并可能为此付出高昂政治代价。美国企业和民众也正在承受越来越多的负面后果。“美国制造”的代表福特公司最近表示，美国政府加征关税导致它已损失10亿美元，预计不得不进行大规模裁员。国际货币基金组织最新发布的《世界经济展望》报告，将今明两年的全球经济增速，由今年4月预测的3.9%各调低两个百分点至3.7%，主要原因是贸易风险成为全球经济面临的最大挑战。
“贸易战没有赢家”。这句历史警言再次被三个多月来美国挑起的贸易战的后果所证实。人们或许还记得，2016年11月，特朗普在赢得美国大选后同样接受了《60分钟》栏目主持人莱斯利·施塔尔的专访，当时他称“要向国家交出令人满意的答卷”。现在，这份书写快两年的答卷，想必已让他和世人看清：贸易战损人又害己；即便是全球最强大的国家，也无法阻挡经济全球化的车轮。
中国传统商道是“和气生财”，所以中国多次表示，不愿同美国或其他任何贸易伙伴打任何形式的贸易战。特朗普总统如果真想给当前中美经贸摩擦“降温”，中方乐观其成；如果要继续采取极限施压手段的话，中国经济的韧性和巨大市场就是反制的重磅“弹药”。（国际锐评评论员）</p>
</div>
</body>
</html>
CSS 创建
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 { color:red; text-align:left; font-size:8pt; }
而内部样式表拥有针对 h3 选择器的两个属性：
h3 { text-align:right; font-size:20pt; }
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red; text-align:right; font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
多重样式优先级
样式表允许以多种方式规定样式信息.
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
<head> <!-- 外部样式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- 设置：h3{color:blue;} --> <style type="text/css"> /* 内部样式 */ h3{color:green;} </style> </head> <body> <h3>测试！</h3> </body>
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
案例：登录页面
效果图：
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线代君--登录</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="login">
<div class="message">线代君 1.0 -- 登录管理</div>
<div class="shadow"></div>
<form action="" method="post" class="login_in">
<input type="text" name="username" placeholder="用户名"/>
<input type="password" name="password" placeholder="密码"/>
<input type="submit" value="登录" class="login_submit"/>
</form>
<div class="register">
<a href="javascript:;">还没有账号，注册一个！</a>
</div>
</div>
<div class="mask_bg"></div>
<div class="mask"></div>
</body>
</html>login.css
.login{
margin: 120px auto 0 auto;
min-height: 420px;
max-width: 420px;
padding: 40px;
background-color: #ffffff;
border-radius: 4px;
box-sizing: border-box;
position: relative;
user-select: none;
}
.login .message{
width: 420px;
height: 50px;
line-height: 50px;
color: #fff;
background-color: #01AAED;
text-align: center;
border-radius: 2px;
margin-left: -60px;
}
.login .shadow{
width: 18px;
height: 10px;
margin-left: -60px;
background: url("../img/shadow.png");
}
.login .login_in{
width: 100%;
height: 200px;
margin-top: 0px;
}
.login_in input{
border: 1px solid #DCDEE0;
vertical-align: middle;
border-radius: 3px;
height: 50px;
margin-top: 18px;
padding: 0px 16px;
font-size: 14px;
color: #555555;
outline: none;
width: 100%;
box-sizing: border-box;
}
.login_in input:hover{
border: 1px solid #FF5722;
}
.login_in .login_submit{
display: inline-block;
padding: 12px 24px;
font-size: 18px;
color: #fff;
cursor: pointer;
background-color: #01AAED;
opacity: 0.8;
}
.login_in .login_submit:hover{
border: 1px solid #fff;
opacity: 1;
}
.login .register{
height: 50px;
float: right;
display: inline-block;
margin-top: 30px;
}
.register a{
color: #00BCD4;
text-decoration: none;
font-family: "Microsoft YaHei", "Source Sans Pro", Arial, sans-serif;
}
.register a:hover{
color: #FF3D00;
}
.mask_bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background:url("../img/mask_bg.jpg") no-repeat 0 0;
/*高斯模糊背景，blur值越大越模糊*/
-webkit-background-size: cover;
background-size: cover;
z-index: -2;
filter:blur(5px);
}
.mask{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
/*蒙版，减少亮度*/
background-color: rgba(0,0,0,0.35);
}
CSS常用属性
color: green; /*设置字体颜色*/
background-color: red; /*设置背景颜色*/
font-size: 50px; /*设置字体大小*/
font-style: oblique; /*使文字倾斜*/
font-weight: bold; /*字体加粗*/
font-family: '幼圆'; /*设置字体样式*/
font: italic bold 16px/20px arial; /*font综合使用,分别代表设置 斜体/加粗/大小/行高/样式*/
letter-spacing: 10px; /*字符间距,中文一个字当成一个英文字符*/
word-spacing: 20px; /* 单词之间的间距,中文中间有空格的情况下会当作一个单词来处理 */
white-space: pre/nowrap; /*预格式化,按文档的书写格式保留空格,空行原样显示/不换行显示*/
line-height:19px; /*设置行高*/
text-align: center; /*设置文本水平居中对齐*/
text-indent: 2em; /*设置首行缩进,只能用于块级元素*/
text-decoration:none/underline/overline/line-through; /* 去掉下划线 /上划线/删除线 */
border-style: dashed/double/dotted/solid; /* 设置边框样式 单虚线/双实线/点状线/单实线 */
border-width: 10px; /* 边框宽度 */
border-color: purple; /* 边框颜色 */
border-top-color: green; /* 设置边框头部样式,物以类聚以此类推 top/bottom/left/right */
border: 1px double green; /* 统一设置,边框的宽度,边框的样式,边框的颜色 */
border-collapse: collapse; /*让边框折叠*/
outline-style: none; /* 去掉轮廓 链接有虚线 和 文本框有蓝色边框*/
padding: 20px; /* 将内边距设置为上下左右均为20px 以此类推 top/bottom/left/right */
margin: 100px; /* 上下左右分别是100px 以此类推 top/bottom/left/right*/
margin: 0 auto; /* 外边距让盒子居中,水平方向 上下边距为0 左右自动计算居中*/
margin: 0; padding: 0; /* 设置内外边距为0 默认网站起初都会设置这个选项*/
float: right/left/none; /* 向右/向左/不/浮动 */
overflow: hidden; /* 把溢出的隐藏掉 使父元素具有包裹性 */
overflow: visible/hidden/auto/scroll;
/*内容不会被修剪/溢出部分内容会被修剪/在需要时产生滚动条/终有滚动条*/
clear: left/right/both; /* 清除左侧/右侧/两侧/浮动 */
position: static/relative/absolute/fixed; /*自动定位/相对定位/绝对定位/固定定位*/
z-index: 100; /* 层次划分 */
list-style: none; /* 去掉列表默认样式 */
display: none; /*隐藏层*/
display: block; /* 显示层 */
display: inline-block /* 设置为块级元素 */
display:none/inline/block/inline-block;
/* display值的解释:
none:此元素不被显示,在文档中被移除.
block:此元素按块级元素显示:前后带换行符,自己站=占一行. 内联元素 ==> 块元素
inline:此元素按内联元素显示:一个挨着一个. 块元素 ==> 内联元素
inline-block:按行内标签进行排版,但是可以设置宽高,而且高度可以影响行高 */
/* backkgorund合写的顺序:背景颜色/背景图地址/平铺设置/背景图滚动/背景图位置 */
background: #ccc url(../image/2.png) no-repeat scroll 0 -1709px;
background-color: #cda/transparent; /* 设置背景色/透明色 */
background-image: url(../img/a.png); /* 设置背景图片,优先级要高于背景色 */
/*设置背景图片是否重复/横向重复/纵向重复/横向纵向都重复/不重复/继承父类的方式*/
background-repeat: repeat-x/repeat-y/repeat/no-repeat/inherit;
background-position: left/right/top/bottom/center; /*设置背景图像的开始位置*/
background-position: left bottom; /*设置图片左边和底部对齐*/
background-position: 60% 50%; /*以xy轴的起始点为0%,来确定位置*/
background-position: -500px 0; /*以xy轴坐标,以图片的左上角为点,-500px 0 就是左上角的坐标*/
background-attachment: scroll/fixed;
/*设置背景图是否固定 fixed背景图固定/scroll随着文本内容滚动 默认值*/
vertical-align: middle;
/* 设置行内块对齐方式(使用display-inline-block进行对齐小图标时使用) */
border-radius: 50%/100px; /*边框圆角设置 两种表现形式:百分比和像素*/
参考学习：http://www.runoob.com/css/css-tutorial.html