CSS样式表的使用说明

CSS样式文件下载

html脚本文件

CSS基本语法：h1{   color:red;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;}派生选择器：

CSS样式属性：1,background-color属性为元素设置背景色为段落设置背景色，并增加内边距p {background-color: gray; padding: 20px;}background-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                       设置背景图像是否及如何重复。

创建CSS的方式：外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：样式表应该以 .css 扩展名进行保存.内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 内联样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

This is a paragraph

关于属性选择器的使用总结：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;}

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            只能在半角空格或连字符处换行。

关于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     规定应该从父元素继承字体的粗细。