1、此段css代码，其他页面不需要。可以直接放在需要的HTML文件中。
在head标签下，写上style标签，把css代码放在style标签中。
2、可以新建一个css文件，比如index.css，把这段css代码放进这个index.css文件中。
然后在HTML文件中引入index.css文件。
<link rel="stylesheet" href="index.css">
href：写index.css文件的路径。
扩展资料：
插入样式表的方法：
1、外部样式表
每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：
<head><linkrel="stylesheet"type="text/css"href="mystyle.css"></head>
浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。
2、内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表：
<style>
hr{color:sienna}
p{margin-left:20px}
body{background-image:url("images/back40.gif")}
</style>
3、内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：
<pstyle="color:siennamargin-left:20px">这是一个段落。</p>
样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inlinestyle>（内部样式）Internalstylesheet>（外部样式）Externalstylesheet>浏览器默认样式
CSS3 弹性框(Flexible Box或Flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当排布行为的布局方式。对很多应用程序来说，由于不使用浮动，且弹性容器的外边距也不会与其内容的外边距合并，弹性框模型比起方框模型要好一些。许多设计师会发现弹性框模型易于使用。弹性框中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序与它们在源代码中的顺序无关，定位子元素变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是特意限制于视觉呈现上的，语音顺序以及基于源代码顺序的导航均不受影响。注意：虽然CSS 弹性框布局规范还处于最终征求意见稿 (Last Call Working Draft)阶段（参见最新编辑草案），并非所有浏览器都实现了弹性框的所有功能。但，这么说吧，现在全线产品对弹性框都有良好支持。最新的兼容性状况可以查看每个具体属性的兼容性表格获取。弹性框概念弹性布局在定义方面是指调整其内项目宽高从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内项目来填充可用空间，或将其收缩来避免溢出。弹性框布局算法是方向无关的，与此相对的，块级布局侧重于垂直方向、行内布局侧重于水平方向。虽然块级布局用于页面行之有效，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性框布局主要适用于应用程序的组件及小规模的布局，而（新兴的）网格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。弹性框相关词汇表关于弹性框的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个flex-direction属性为row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。弹性容器(Flex container)包含着弹性项目的父元素。通过设置display属性的值为flex或inline-flex来定义弹性容器。弹性项目(Flex item)弹性容器的每个子元素都成为弹性项目。弹性容器直接包含的文本将包覆成匿名弹性项目。轴(Axis)每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
flex-direction属性确立主轴。
justify-content属性定义了在当前行上弹性项目沿主轴如何排布。
align-items属性定义了在当前行上弹性项目沿侧轴默认如何排布。
align-self属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由align-items所确立的默认值。
方位(Direction)弹性容器的各个边（主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)）描述了弹性条目流的起点与终点。它们具体取决于弹性容器的主轴与侧轴以及由writing-mode确立的方向（从左到右、从右到左，等等）。
order属性将元素与序号组关联起来，并决定哪些元素先出现。
flex-flow属性是flex-direction和flex-wrap属性的简写，决定弹性项目如何排布。
行(Line)根据flex-wrap属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。尺寸(Dimension)根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸(main size)与侧轴尺寸(cross size)。
min-height与min-width属性初始值为 0。
flex属性是flex-grow、flex-shrink和flex-basis属性的简写，确立弹性项目的伸缩性。
指派弹性框为要使用此样式的元素指派 CSS，需按以下方式设置display属性：
display:flex或者
display:inline-flex这样做将元素定义为弹性容器，其子元素则成为弹性项目。值flex使弹性容器成为块级元素。值inline-flex使弹性容器成为单个不可分的行内级元素。
注意：厂商前缀标记应当附加给 display 属性值，而不是加给 display 属性本身。例如：display : -webkit-flex。弹性项目须知弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，只包含空白的弹性项目不会被渲染，就如同对其指派display: none。对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。相邻的弹性元素其外边距不会互相合并。使用auto外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的Aligning with 'auto' margins。为了确保弹性项目有合理的默认最小尺寸，使用min-width:auto与min-height:auto。对于弹性项目，属性值auto使项目的最小宽/高在计算中不会小于其内容的实际宽/高，这样可以保证项目渲染得足够大以容纳其内容。更多细节请参考min-width与min-height。不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对需要居中的弹性项目应用自动外边距来替代align-属性的使用。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用自动外边距来替代justify-属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过，如果尝试在多行的弹性框中用基于外边距的居中方法来替代justify-content，很不幸，必须对每一行的第一个和最后一个弹性项目应用外边距。除非能够事先预测每一行都结束于哪个元素，否则无法放心地在主轴方向上用基于外边距的居中方法来替代justify-content属性。重新提一下，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。order属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。弹性框相关属性不影响弹性框的属性由于弹性框使用了不同的布局算法，某些属性用在弹性容器上没有意义：
多栏布局模块的column-*属性对弹性项目无效。
float与clear对弹性项目无效。使用float将使元素的display属性计为block。
vertical-align对弹性项目的对齐无效。
示例基本的弹性布局示例这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。
htmllang='en'>head>style>.flex{/* 基本样式 */width:350pxheight:200pxborder:1px solid#555font:14px Arial/* 建立弹性框 */display:-webkit-flex-webkit-flex-direction:rowdisplay:flexflex-direction:row}.flex>div{-webkit-flex:11autoflex:11autowidth:30px/* 让过渡表现良好。（从/到'width:auto'的过渡 至少在 Gecko 和 Webkit 上是有 bug 的。 更多信息参见 http://bugzil.la/731886 ） */-webkit-transition:width0.7s ease-outtransition:width0.7s ease-out}/* colors */.flex>div:nth-child(1){background:#009246}.flex>div:nth-child(2){background:#F1F2F1}.flex>div:nth-child(3){background:#CE2B37}.flex>div:hover{width:200px}style>head>body>p>Flexbox nuovop>divclass='flex'>div>unodiv>div>duediv>div>trediv>div>body>html>
一般写在<head>和</head>之间，参考下面写法：
<style type="text/css">
body {margin:0 autowidth:100%font-size:12pxcolor:#666}
.c{border-collapse:collapsemargin:0 auto}
</style>
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说，CSS具有以下特点：
（1）丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
（2）易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
（3）多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
