CSS样式表的使用说明
1、CSS基本语法：h1{ color:re蟠校盯昂d;font-size:14px;....}其中：h1表示选择器，艘早祓胂color和font-size表示属性，冒号后面的表示属性的值。属性和值构成一个声明值的不同写法和单位除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：p { color: #ff0000; }为了节约字节，我们可以使用 CSS 的缩写形式：p { color: #f00; }我们还可以通过两种方法使用 RGB 值：p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用px 单位，因为 0 就是 0，无论单位是什么。记得写引号提示：如果值为若干单词，则要给值加引号：p {font-family: "sans serif";}多重声明：提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：p {text-align:center; color:red;} 你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：p { text-align: center; color: black; font-family: arial;}派生选择器：<div> <p> </p></div>可以表示:div p{color:red;};表示为div下的p段的颜色为红色id选择器：以"#"来定义类选择器：以"."来定义注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。选择器的分组：用逗号将需要分组的选择器分开。样式中，font-family的值可以有：Verdana,sans-serif;Times, "Times New Roman", serif;Verdana Arial;SimHei----------------------------CSS font-weight 属性实例设置三个段落的字体的粗细：p.normal {font-weight:normal;}p.thick {font-weight:bold;}p.thicker {font-weight:900;}所有主流浏览器都支持 font-weight 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。定义和用法font-weight 属性设置文本的粗细。说明该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。默认值： normal继承性： yes版本： CSS1JavaScript 语法： object.style.fontWeight="900"可能的值值 描述normal 默认值。定义标准的字符。bold 定义粗体字符。bolder 定义更粗的字符。lighter 定义更细的字符。 100 200 300 400 500 600 700 800 900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。inherit 规定应该从父元素继承字体的粗细。
2、CSS样式属性：1,background颍骈城茇-color属性为元素设置背景色为段落设置背景色，并增加内边距p {background-color: gray; padding: 20px;}b锾攒揉敫ackground-color 不能继承，其默认值是transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。2，background-image属性默认值为none，表示背景上没有放置任何图像为段落设置背景图像，属性值为URL地址p.flower {background-image: url(/i/eg_bg_03.gif);}还可以为行内元素设置背景图像a.radio {background-image: url(/i/eg_bg_07.gif);}理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。3，background-repeat属性为背景重复，属性值为：repeat、repeat-x、repeat-y、no-repeat分别表示：背景图像平铺，类似于背景图像的功能、水平方向平铺、垂直方向平铺、不平铺4，background-position属性为背景定位，其值可以是关键字，也可以是 如 100px 或 5cm，最后也可以使用百分数值。百分数值p{ background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; }单一关键字 等价的关键字center center centertop top center 或 center topbottom bottom center 或 center bottomright right center 或 center rightleft left center 或 center leftp { background-image:url('bgimg.gif'); background-repeat:no-repeat; background-position:top; }长度值p { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50px 100px; }图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：5，background-attachment属性表示背景关联如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。p { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。总结CSS 背景属性属性 描述background 简写属性，作用是将背景属性设置在一个声明中。background-attachment 背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。background-image 把图像设置为背景。background-position 设置背景图像的起始位置。background-repeat 设置背景图像是否及如何重复。
3、创建CSS的方式：外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>样式表应该以 .css 扩展名进行保存.内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:<head><style type="text/css"> 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">This is a paragraph</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）会被内部样式表中的规则取代。
4、关于属性选择器的使用总结：CSS 选择器参考手册选择器 描述[attribute] 用于选取带有指定属性的元素。[attribute=value] 用于选取带有指定属性和值的元素。[attribute~=value] 用于选取属性值中包含指定词汇的元素。[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。[attribute^=value] 匹配属性值以指定值开头的每个元素。[attribute$=value] 匹配属性值以指定值结尾的每个元素。[attribute*=value] 匹配属性值中包含指定值的每个元素。示例：属性选择器下面的例子为带有 title 属性的所有元素设置样式：[title]{color:red;}属性和值选择器下面的例子为 title="W3School" 的所有元素设置样式：[title=W3School]{border:5px solid blue;}属性和值选择器 - 多个值下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：[title~=hello] { color:red; }下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：[lang|=en] { color:red; }设置表单的样式属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：input[type="text"]{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial;}input[type="button"]{ width:120px; margin-left:35px; display:block; font-family: Verdana, Arial;}
5、CSS table-layout与word-break 属性：所有浏览器都支持 table-layout 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。定义和用法tableLayout 属性用来显示表格单元格、行、列的算法规则。固定表格布局：固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。自动表格布局：在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。说明该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。默认值： auto继承性： yes版本： CSS2JavaScript 语法： object.style.tableLayout="fixed"可能的值值 描述automatic 默认。列宽度由单元格内容设定。fixed 列宽由表格宽度和列宽度设定。inherit 规定应该从父元素继承 table-layout 属性的值。总结：简单来说，automatic表示单元格的宽度由里面的内容决定，与给单元格设置的宽度无关(加了属性width=??没有用)，fixed刚好与其相反，由给单元格设置的宽度来决定，与单元格里面的内容无关(宽度不够内容会溢出，但是单元格的边界以宽度决定)，inherit表示此单元格的宽度由其父类决定(父类可以是非单元格，比如body)，父类为默认，则其也是默认的，父类为fixed，则其也为fixed-----------------------------------------------------------------所有主流浏览器都支持 word-break 属性。定义和用法word-break 属性规定自动换行的处理方法。提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。默认值： normal继承性： yes版本： CSS3JavaScript 语法： object.style.wordBreak="keep-all"语法：word-break: normal|break-all|keep-all;值 描述normal(hyphenate) 使用浏览器默认的换行规则。break-all 允许在单词内换行。keep-all 只能在半角空格或连字符处换行。
6、关于font-family与font-weight属性的取值：font-family 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。Mac OS的一些： 华文细黑：STHeiti Light [STXihei]华文黑体：STHeiti华文楷体：STKaiti华文宋体：STSong华文仿宋：STFangsong俪黑 Pro：LiHei Pro Medium俪宋 Pro：LiSong Pro Light标楷体：BiauKai苹果俪中黑：Apple LiGothic Medium苹果俪细宋：Apple LiSung LightWindows的一些：新细明体：PMingLiU细明体：MingLiU标楷体：DFKai-SB黑体：SimHei宋体：SimSun新宋体：NSimSun仿宋：FangSong楷体：KaiTi仿宋_GB2312：FangSong_GB2312楷体_GB2312：KaiTi_GB2312微软正黑体：Microsoft JhengHei微软雅黑体：Microsoft YaHei装Office会生出来的一些：隶书：LiSu幼圆：YouYuan华文细黑：STXihei华文楷体：STKaiti华文宋体：STSong华文中宋：STZhongsong华文仿宋：STFangsong方正舒体：FZShuTi方正姚体：FZYaoti华文彩云：STCaiyun华文琥珀：STHupo华文隶书：STLiti华文行楷：STXingkai华文新魏：STXinweifont-weight 属性设置文本的粗细。该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。值 描述normal 默认值。定义标准的字符。bold 定义粗体字符。bolder 定义更粗的字符。lighter 定义更细的字符。 100 200 300 400 500 600 700 800 900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。inherit 规定应该从父元素继承字体的粗细。