整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
· 内联样式- 在HTML元素中使用"style" 属性
· 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
· 外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML样式实例 - 背景颜色
背景色属性（background-color）定义一个元素的背景颜色：
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
早期背景色属性（background-color）是使用 bgcolor 属性定义。
HTML 样式实例 - 字体, 字体颜色 ，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。
HTML 样式实例 - 文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
<h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p>
文本对齐属性 text-align取代了旧标签 <center> 。
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
00001.
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML 样式标签
标签
描述
<style>
定义文本样式
<link>
定义资源引用地址
已弃用的标签和属性
在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。
不建议使用的标签有: <font>, <center>, <strike>
不建议使用的属性: color 和 bgcolor.
需要具备的知识
在继续学习之前，你需要对下面的知识有基本的了解：
HTML / XHTML
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
CSS 实例
一个HTML文档可以显示不同的样式: 查看CSS是如何工作的
样式解决了一个很大的问题
HTML 标签原本被设计为用于定义文档内容，如下实例：
<h1>这是一个标题</h1>
<p>这是一个段落.</p>
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
当代浏览器都支持 CSS .
CSS 样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
Style 对象
Style 对象表示一个个别的样式声明。
访问 Style 对象
Style 对象可以从文档的头部区域访问，或者从指定的 HTML 元素访问。
从文档的头部区域访问 style 对象：
var x = document.getElementsByTagName("STYLE");尝试一下
访问一个指定元素的 style 对象：
var x = document.getElementById("myH1").style;
创建 Style 对象
您可以使用 document.createElement() 方法来创建 <style> 元素：
var x = document.createElement("STYLE");尝试一下
您也可以设置一个已有元素的 style 属性：
document.getElementById("myH1").style.color = "red";
Style 对象属性
"CSS" 列表示该属性是在哪一个 CSS 版本中定义的（CSS1、CSS2 或 CSS3）。
| 属性 | 描述 | CSS |
|---|---|---|
| alignContent | 设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式（水平）。 | 3 |
| alignItems | 设置或返回灵活容器内的各项的对齐方式。 | 3 |
| alignSelf | 设置或返回灵活容器内被选中项目的对齐方式。 | 3 |
| animation | 是下面除了 animationPlayState 属性之外的其他属性的速记属性。 | 3 |
| animationDelay | 设置或返回动画何时开始。 | 3 |
| animationDirection | 设置或返回是否循环交替反向播放动画。 | 3 |
| animationDuration | 设置或返回动画完成需花费的秒数或毫秒数。 | 3 |
| animationFillMode | 设置或返回当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 | 3 |
| animationIterationCount | 设置或返回动画的播放次数。 | 3 |
| animationName | 设置或返回关键帧 @keyframes 动画的名称。 | 3 |
| animationTimingFunction | 设置或返回动画的速度曲线。 | 3 |
| animationPlayState | 设置或返回动画是运行的还是暂停的。 | 3 |
| background | 设置或返回在一个声明中的所有背景属性。 | 1 |
| backgroundAttachment | 设置或返回背景图像是否固定或随页面滚动。 | 1 |
| backgroundColor | 设置或返回元素的背景色。 | 1 |
| backgroundImage | 设置或返回元素的背景图像。 | 1 |
| backgroundPosition | 设置或返回的背景图像的起始位置。 | 1 |
| backgroundRepeat | 设置或返回如何重复背景图像。 | 1 |
| backgroundClip | 设置或返回背景的绘制区域。 | 3 |
| backgroundOrigin | 设置或返回背景图像的定位区域。 | 3 |
| backgroundSize | 设置或返回背景图像的大小。 | 3 |
| backfaceVisibility | 设置或返回当一个元素背对屏幕时是否可见。 | 3 |
| border | 设置或返回在一个声明中的 borderWidth、borderStyle 和 borderColor。 | 1 |
| borderBottom | 设置或返回在一个声明中的所有 borderBottom* 属性。 | 1 |
| borderBottomColor | 设置或返回下边框的颜色。 | 1 |
| borderBottomLeftRadius | 设置或返回左下角边框的形状。 | 3 |
| borderBottomRightRadius | 设置或返回右下角边框的形状。 | 3 |
| borderBottomStyle | 设置或返回下边框的样式。 | 1 |
| borderBottomWidth | 设置或返回下边框的宽度。 | 1 |
| borderCollapse | 设置或返回表格的边框是否被折叠为一个单一的边框。 | 2 |
| borderColor | 设置或返回元素边框的颜色（最多可以有四个值）。 | 1 |
| borderImage | 一个用于设置或返回所有的 borderImage* 属性的速记属性。 | 3 |
| borderImageOutset | 设置或返回边框图像区域超出边界框的量。 | 3 |
| borderImageRepeat | 设置或返回图像边框是重复拼接图块还是延伸图块。 | 3 |
| borderImageSlice | 设置或返回图像边框的向内偏移。 | 3 |
| borderImageSource | 设置或返回要作为边框使用的图像。 | 3 |
| borderImageWidth | 设置或返回图像边框的宽度。 | 3 |
| borderLeft | 设置或返回在一个声明中的所有 borderLeft* 属性。 | 1 |
| borderLeftColor | 设置或返回左边框的颜色。 | 1 |
| borderLeftStyle | 设置或返回左边框的样式。 | 1 |
| borderLeftWidth | 设置或返回左边框的宽度。 | 1 |
| borderRadius | 一个用于设置或返回四个 border*Radius 属性的速记属性。 | 3 |
| borderRight | 设置或返回在一个声明中的所有 borderRight* 属性。 | 1 |
| borderRightColor | 设置或返回右边框的颜色。 | 1 |
| borderRightStyle | 设置或返回右边框的样式。 | 1 |
| borderRightWidth | 设置或返回右边框的宽度。 | 1 |
| borderSpacing | 设置或返回表格中单元格之间的距离。 | 2 |
| borderStyle | 设置或返回元素边框的样式（最多可以有四个值）。 | 1 |
| borderTop | 设置或返回在一个声明中的所有 borderTop* 属性。 | 1 |
| borderTopColor | 设置或返回上边框的颜色。 | 1 |
| borderTopLeftRadius | 设置或返回左上角边框的形状。 | 3 |
| borderTopRightRadius | 设置或返回右上角边框的形状。 | 3 |
| borderTopStyle | 设置或返回上边框的样式。 | 1 |
| borderTopWidth | 设置或返回上边框的宽度。 | 1 |
| borderWidth | 设置或返回元素边框的宽度（最多可以有四个值）。 | 1 |
| bottom | 设置或返回定位元素的底部位置。 | 2 |
| boxDecorationBreak | 设置或返回分页处元素的背景和边框行为，或者换行处内联元素的背景和边框行为。 | 3 |
| boxShadow | 设置或返回元素的下拉阴影。 | 3 |
| boxSizing | 允许您以特定的方式定义匹配某个区域的特定元素。 | 3 |
| captionSide | 设置或返回表格标题的位置。 | 2 |
| clear | 设置或返回元素相对浮动对象的位置。 | 1 |
| clip | 设置或返回定位元素的可见部分。 | 2 |
| color | 设置或返回文本的颜色。 | 1 |
| columnCount | 设置或返回元素应该被划分的列数。 | 3 |
| columnFill | 设置或返回如何填充列。 | 3 |
| columnGap | 设置或返回列之间的间隔。 | 3 |
| columnRule | 一个用于设置或返回所有的 columnRule* 属性的速记属性。 | 3 |
| columnRuleColor | 设置或返回列之间的颜色规则。 | 3 |
| columnRuleStyle | 设置或返回列之间的样式规则。 | 3 |
| columnRuleWidth | 设置或返回列之间的宽度规则。 | 3 |
| columns | 一个用于设置或返回 columnWidth 和 columnCount 的速记属性。 | 3 |
| columnSpan | 设置或返回一个元素应横跨多少列。 | 3 |
| columnWidth | 设置或返回列的宽度。 | 3 |
| content | 与 :before 和 :after 伪元素一起使用，来插入生成的内容。 | 2 |
| counterIncrement | 增加一个或多个计数器。 | 2 |
| counterReset | 创建或重置一个或多个计数器。 | 2 |
| cursor | 设置或返回鼠标指针显示的光标类型。 | 2 |
| direction | 设置或返回文本的方向。 | 2 |
| display | 设置或返回元素的显示类型。 | 1 |
| emptyCells | 设置或返回是否显示表格中的空单元格的边框和背景。 | 2 |
| filter | 设置或返回图片滤镜(可视效果，如：高斯模糊与饱和度) | 3 |
| flex | 相对于同一容器其他灵活的项目，设置或返回项目的长度。 | 3 |
| flexBasis | 设置或灵活项目的初始长度。 | 3 |
| flexDirection | 设置或返回灵活项目的方向。 | 3 |
| flexFlow | 是 flexDirection 和 flexWrap 属性的速记属性。 | 3 |
| flexGrow | 设置或返回项目将相对于同一容器内其他灵活的项目进行扩展的量。 | 3 |
| flexShrink | 设置或返回项目将相对于同一容器内其他灵活的项目进行收缩的量。 | 3 |
| flexWrap | 设置或返回灵活项目是否拆行或拆列。 | 3 |
| cssFloat | 设置或返回元素的水平对齐方式。 | 1 |
| font | 设置或返回一个声明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。 | 1 |
| fontFamily | 设置或返回文本的字体。 | 1 |
| fontSize | 设置或返回文本的字体尺寸。 | 1 |
| fontStyle | 设置或返回字体样式是否是 normal（正常的）、italic（斜体）或 oblique（倾斜的）。 | 1 |
| fontVariant | 设置或返回是否以小型大写字母显示字体。 | 1 |
| fontWeight | 设置或返回字体的粗细。 | 1 |
| fontSizeAdjust | 当使用备用字体时，确保文本的可读性。 | 3 |
| fontStretch | 从字体库中选择一种正常的、浓缩的或扩大的字体。 | 3 |
| hangingPunctuation | 规定一个标点符号是否可以放置在线框外。 | 3 |
| height | 设置或返回元素的高度。 | 1 |
| hyphens | 设置如何拆分单词来提高段落布局。 | 3 |
| icon | 向作者提供为一个带有等价于图标的元素定义样式的功能。 | 3 |
| imageOrientation | 规定一个用户代理应用到图像上的顺时针方向的旋转。 | 3 |
| justifyContent | 设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式（垂直）。 | 3 |
| left | 设置或返回定位元素的左部位置。 | 2 |
| letterSpacing | 设置或返回文本中字符之间的空间。 | 1 |
| lineHeight | 设置或返回在文本中行之间的距离。 | 1 |
| listStyle | 设置或返回一个声明中的 listStyleImage、listStylePosition 和 listStyleType。 | 1 |
| listStyleImage | 设置或返回作为列表项标记的图像。 | 1 |
| listStylePosition | 设置或返回列表项标记的位置。 | 1 |
| listStyleType | 设置或返回列表项标记的类型。 | 1 |
| margin | 设置或返回元素的外边距（最多可以有四个值）。 | 1 |
| marginBottom | 设置或返回元素的的下外边距。 | 1 |
| marginLeft | 设置或返回元素的左外边距。 | 1 |
| marginRight | 设置或返回元素的右外边距。 | 1 |
| marginTop | 设置或返回元素的上外边距。 | 1 |
| maxHeight | 设置或返回元素的最大高度。 | 2 |
| maxWidth | 设置或返回元素的最大宽度。 | 2 |
| minHeight | 设置或返回元素的最小高度。 | 2 |
| minWidth | 设置或返回元素的最小宽度。 | 2 |
| navDown | 设置或返回当使用向下箭头导航键时要导航到哪里。 | 3 |
| navIndex | 设置或返回元素的显示顺序。 | 3 |
| navLeft | 设置或返回当使用向左箭头导航键时要导航到哪里。 | 3 |
| navRight | 设置或返回当使用向右箭头导航键时要导航到哪里。 | 3 |
| navUp | 设置或返回当使用向上箭头导航键时要导航到哪里。 | 3 |
| opacity | 设置或返回元素的不透明度。 | 3 |
| order | 设置或返回一个灵活的项目相对于同一容器内其他灵活项目的顺序。 | 3 |
| orphans | 设置或返回当元素内有分页时，必须在页面底部预留的最小行数。 | 2 |
| outline | 设置或返回在一个声明中的所有 outline 属性。 | 2 |
| outlineColor | 设置或返回一个元素周围的轮廓颜色。 | 2 |
| outlineOffset | 对轮廓进行偏移，并在边框边缘进行绘制。 | 3 |
| outlineStyle | 设置或返回一个元素周围的轮廓样式。 | 2 |
| outlineWidth | 设置或返回一个元素周围的轮廓宽度。 | 2 |
| overflow | 设置或返回如何处理呈现在元素框外面的内容。 | 2 |
| overflowX | 规定如果内容溢出元素的内容区域，是否对内容的左/右边缘进行裁剪。 | 3 |
| overflowY | 规定如果内容溢出元素的内容区域，是否对内容的上/下边缘进行裁剪。 | 3 |
| padding | 设置或返回元素的内边距（最多可以有四个值）。 | 1 |
| paddingBottom | 设置或返回元素的下内边距。 | 1 |
| paddingLeft | 设置或返回元素的左内边距。 | 1 |
| paddingRight | 设置或返回元素的右内边距。 | 1 |
| paddingTop | 设置或返回元素的上内边距。 | 1 |
| pageBreakAfter | 设置或返回元素后的分页行为。 | 2 |
| pageBreakBefore | 设置或返回元素前的分页行为。 | 2 |
| pageBreakInside | 设置或返回元素内的分页行为。 | 2 |
| perspective | 设置或返回 3D 元素被查看的视角。 | 3 |
| perspectiveOrigin | 设置或返回 3D 元素的底部位置。 | 3 |
| position | 设置或返回用于元素定位方法的类型（static、relative、absolute 或 fixed）。 | 2 |
| quotes | 设置或返回嵌入引用的引号类型。 | 2 |
| resize | 设置或返回是否可由用户调整元素的尺寸大小。 | 3 |
| right | 设置或返回定位元素的右部位置。 | 2 |
| tableLayout | 设置或返回表格单元格、行、列的布局方式。 | 2 |
| tabSize | 设置或返回制表符（tab）字符的长度。 | 3 |
| textAlign | 设置或返回文本的水平对齐方式。 | 1 |
| textAlignLast | 设置或返回当 text-align 属性设置为 "justify" 时，如何对齐一个强制换行符前的最后一行。 | 3 |
| textDecoration | 设置或返回文本的修饰。 | 1 |
| textDecorationColor | 设置或返回文本修饰的颜色。 | 3 |
| textDecorationLine | 设置或返回文本修饰要使用的线条类型。 | 3 |
| textDecorationStyle | 设置或返回文本修饰中的线条样式。 | 3 |
| textIndent | 设置或返回文本第一行的缩进。 | 1 |
| textJustify | 设置或返回当 text-align 属性设置为 "justify" 时，要使用的对齐方法。 | 3 |
| textOverflow | 设置或返回当文本溢出包含它的元素，应该发生什么。 | 3 |
| textShadow | 设置或返回文本的阴影效果。 | 3 |
| textTransform | 设置或返回文本的大小写。 | 1 |
| top | 设置或返回定位元素的顶部位置。 | 2 |
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transformOrigin | 设置或返回被转换元素的位置。 | 3 |
| transformStyle | 设置或返回被嵌套的元素如何呈现在 3D 空间中。 | 3 |
| transition | 一个用于设置或返回四个过渡属性的速记属性。 | 3 |
| transitionProperty | 应用过渡效果的 CSS 属性的名称。 | 3 |
| transitionDuration | 设置或返回完成过渡效果需要花费的时间（以秒或毫秒计）。 | 3 |
| transitionTimingFunction | 设置或返回过渡效果的速度曲线。 | 3 |
| transitionDelay | 设置或返回过渡效果何时开始。 | 3 |
| unicodeBidi | 设置或返回文本是否被重写，以便在同一文档中支持多种语言。 | 2 |
| verticalAlign | 设置或返回元素中内容的垂直对齐方式。 | 1 |
| visibility | 设置或返回元素是否应该是可见的。 | 2 |
| whiteSpace | 设置或返回如何处理文本中的制表符、换行符和空格符。 | 1 |
| width | 设置或返回元素的宽度。 | 1 |
| wordBreak | 设置或返回非 CJK 语言的换行规则。 | 3 |
| wordSpacing | 设置或返回文本中单词之间的空间。 | 1 |
| wordWrap | 允许长单词或 URL 地址换行到下一行。 | 3 |
| widows | 设置或返回一个元素必须在页面顶部的可见行的最小数量。 | 2 |
| zIndex | 设置或返回定位元素的堆叠顺序。 | 2 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
