今天准备修改一下blog的样式，结果无意中发现一个问题。一个使用透明效果的CSS，在之前用VS2005做的一个项目里，IE和Firefox下面都工作正常，拿到博客园以后发现用IE7浏览没有效果，而Firefox正常。查了一下相关文章，发现对HTML了解太少了。
1. 问题表现
原来项目页面代码类似如下
在IE 7中，页面显示以及鼠标移动到div上面的效果如下，可以看到CSS有起作用（Firefox 访问也正常）
在博客园中写的CSS跟上面完全一样，但因为博客园是用VS2003开发的，所以页面代码类似如下
上面这段代码IE 7访问时CSS透明效果没有作用，而Firefox访问正常。其实差别就在于DOCTYPE声明不一样。VS2005添加一个WebForm，DOCTYPE声明与第一段代码相同；VS2003的DOCTYPE则跟第二段代码一样。其实第二段代码把DOCTYPE改成下面任意一种，在IE 7中CSS的透明效果就会起作用。
2. DOCTYPE声明
PUBLI
C
"-// W3C// DTD HTML
4.01
Transiti
onal//
EN"
"http://
www.w
https://www.360docs.net/doc/bb18877725.html,/T
R/html4
/loose.dt
d"> (1)(2)(3)(4)(5)(6)(7)(8)
[Top
Element
]
[Availab
ility]
"[Regist
ration]//
[Organi
zation]//
[Type]
[Label]/
/
[Langua
ge]" "[URL]
">
(1)(2)(3)(4)(5)(6)(7)(8)
(1) Top Element: DTD中声明的最顶层元素，例如html。
(2) Availability: 指示标识符是公共标识符号（PUBLIC）还是系统资源（SYSTEM），例如本地文件、url等。
(3) Registration: 指示组织是否注册为ISO成员，+表示已经注册为ISO成员，-表示没有注册。W3C没有注册，所以使用-。
(4) Organization: 对于HTML、XHTML而言指维护DTD的组织标识符，W3C。
(5) Type: Public Text Class，引用对象的类型，对于HTML、XHTML而言为DTD。
(6) Label: Public Text Description，引用内容的唯一名称描述，Label里面可以包含一个版
本号（4.01），可以包含一个Defintion（有三种Definition: Frameset, Strict, Transitional，下面会描述）。
(7) Language: 语言代码。
(8) URL: 引用DTD的url。
各个浏览器对HTML、CSS的处理，在细节上存在很多差异，为了向W3C标准靠近，并且HTML、CSS的标准也在不断的发展，因此同一个浏览器的不同版本之间，也会存在细节处理上的不一致性。现在浏览器使用DOCTYPE声明来决定该使用那种模式处理HTML、CSS，通常提到的有standards mode（标准模式，strict Mode）和quirks mode（兼容模式compliant mode）。标准模式指浏览器采用尽量靠近目前W3C规范的方式，支持目前版本的HTML、XHTML、CSS规范；兼容模式指浏览器按照以前的老版本的方式处理，以兼容那些旧版本的web应用。另外需要注意的是，虽然目前主要的浏览器都支持这两种模式，但都有差别，例如Firefox除了上面两种模式外，还有一个almost standards mode。
下面是HTML 4.01的DTD，分别为Strict, Transitional, Frameset
XHTML 1.0的DTD，分别为Strict, Transitional, Frameset
3. IE 6 CSS增强、IE 7 CSS兼容性
References: Cascading Style Sheet Compatibility in Internet Explorer 7、CSS Enhancements in Internet Explorer 6
Label中的Definition三种类型：Frameset，支持FRAMESET文档；Transitional，支持除了FRAMESET以外其它所有元素；Strict，不支持W3C准备淘汰的元素、属性。这种描述有点让人糊涂，也无法跟标准standards mode、quirks mode对应上，至于具体的定义可以参考W3C 标准。
下面这个表格是比较有用的
Label Definition URL present URL not present
No !DOCTYPE
Off Off
present
Off Off
HTML (No Version
Present)
HTML 2.0 Off Off
HTML 3.0 Off Off
HTML 3.2 Off Off
HTML 4.0 No Definition Present On On
HTML 4.0 Frameset On Off
HTML 4.0 Transitional On Off
HTML 4.0 Strict On On
XHTML On On
XML On On
On On
Unrecognized !DOCT
YPE
其中On表示使用strict mode（standards mode），Off表示使用compliant mode（quirks mode）。URL present/URL not present表示DTD文档的url是否有在DOCTYPE中声明；Definition为空或者No Definition Present表示Definition没有定义。从IE 6开始支持这两种模式的切换，在strict mode下，IE尽量保持与W3C标准一致，而compliant mode下，IE将保持与以前的IE版本兼容。用这个表格，对照1中几种DOCTYPE可以知道，只有在strict mode下，IE 7才支持filter:progid:DXImageTransform.Microsoft.Alpha这个滤镜。让人奇怪的是，也只有在strict mode下，IE 7才支持filter: alpha(opacity=60)，compliant mode下是不支持的，而这个写法是针对IE 5.5之前版本的。
在strict mode下面，两个比较重要的差异点：
a) Box的height、width计算问题
CSS标准中，width、height指图中Content的宽度、高度，而IE在计算宽度、高度时，将包括padding、border。
b) Box Modal问题
例如下面这段代码
some text long enough to make it interesting.
- anonymous
在compliant mode下（），页面显示为：
在strict mode下（），页面显示为：
就是说complient mode下，box会自动扩展以容纳里面的内容，而W3C CSS标准中，box 一旦指定宽度、高度，就不应当再发生变化，所以再strict mode下，div保持了给定的宽度、高度，而里面的内容自然的溢出到了div外面。
Css复习题
1、关于内容、结构和表现说法正确的是（ABD ） A、内容是页面传达信息的基础 B、表现使得内容的传达变得更加明晰和方便 C、结构就是对内容的交互及操作效果 D、内容就是网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。 2、关于XHTML基本语法说法正确的是（ABC ） A、在文档开始要定义文档类型 B、在根元素中应声明命名空间 C、所有标签需闭合的，空标签要加“ /”来关闭 D、注释语句为：/**/ 3、关于CSS基本语法说法正确的是（ AC ） A、属性必须要包含在{}号之中 B、属性和属性值之间用等号链接 C、当有多个属性时，用“；”进行区分 D、如果一个属性有几个值，则每个属性值之间用分号分隔开 4、以下声明可将文本大小设为12px的有：（ABC） A、font-size:12px; B、font-size:9pt; C、font-size:0.75em; D、font-size:0.75; 5、关于样式表的优先级说法正确的是：（ABC ） A、直接定义在标记上的css样式级别最高 B、内部样式表次之 C、外部样式表级别最低 D、当样式中属性重复时，先设的属性起作用 6、关于浏览器默认样式说法错误的是：（ABCD ） A、IE默认页边距为10px，通过body的margin属性设置。 B、FF默认页边距为8px,通过body的padding属性设置。
C、IE默认列表左缩进为40px，通过ul、ol的margin属性设置。 D、FF默认列表左缩进为40px，通过ul、ol的padding属性设置。 7、关于CSS为什么会出现Bug说法正确的是：（ABC） A、CSS作为表现标准语言，需要在不同浏览器中实现表现层统一 B、各大主流浏览器由于不同厂家开发，所有的核心构架和代码也很难重和 C、各大厂商处于自身利益而设种种技术壁垒 D、网页设计师定义的命名空间不一样 8、CSS样式文件的类型有（ ABC ） A、内部样式表 B、内联样式表 C、外部样式表 D、包含样式表 9、以下哪些Bug在FF中不会出现（ ABCD ） A、双补浮向Bug B、图片间隙 Bug C、项目符号隐藏 Bug D、多余字符Bug 10、DIV/CSS布局模型包括（ ABC ） A、Flow Model（流动模型） B、Float Model（浮动模型） C、Layer Model （层模型） D、box Model (盒模型) 11、关于CSS基本语法说法正确的是（ AC ） A、属性必须要包含在{}号之中 B、属性和属性值之间用等于号链接 C、当有多个属性时，用“；”进行区分
CSS复习题
1、关于内容、结构和表现说法正确的是（ABD） A、内容是页面传达信息的基础 B、表现使得内容的传达变得更加明晰和方便 C、结构就是对内容的交互及操作效果 D、内容就是网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。 2、关于XHTML基本语法说法正确的是（ABC） A、在文档开始要定义文档类型 B、在根元素中应声明命名空间 C、所有标签需闭合的，空标签要加“/”来关闭 D、注释语句为：/**/ 3、关于CSS基本语法说法正确的是（AC） A、属性必须要包含在{}号之中 B、属性和属性值之间用等号链接 C、当有多个属性时，用“；”进行区分 D、如果一个属性有几个值，则每个属性值之间用分号分隔开 4、以下声明可将文本大小设为12px的有：（ABC） A、font-size:12px; B、font-size:9pt; C、font-size:0.75em; D、font-size:0.75; 5、关于样式表的优先级说法正确的是：（ABC） A、直接定义在标记上的css样式级别最高 B、内部样式表次之 C、外部样式表级别最低 D、当样式中属性重复时，先设的属性起作用 6、关于浏览器默认样式说法错误的是：（ABCD） A、IE默认页边距为10px，通过body的margin属性设置。 B、FF默认页边距为8px,通过body的padding属性设置。
C、IE默认列表左缩进为40px，通过ul、ol的margin属性设置。 D、FF默认列表左缩进为40px，通过ul、ol的padding属性设置。 7、关于CSS为什么会出现Bug说法正确的是：（ABC） A、CSS作为表现标准语言，需要在不同浏览器中实现表现层统一 B、各大主流浏览器由于不同厂家开发，所有的核心构架和代码也很难重和 C、各大厂商处于自身利益而设种种技术壁垒 D、网页设计师定义的命名空间不一样 8、CSS样式文件的类型有（ABC） A、内部样式表 B、内联样式表 C、外部样式表 D、包含样式表 9、以下哪些Bug在FF中不会出现（ABCD） A、双补浮向Bug B、图片间隙Bug C、项目符号隐藏Bug D、多余字符Bug 10、DIV/CSS布局模型包括（ABC） A、Flow Model（流动模型） B、Float Model（浮动模型） C、Layer Model（层模型） D、box Model(盒模型) 11、关于CSS基本语法说法正确的是（AC） A、属性必须要包含在{}号之中 B、属性和属性值之间用等于号链接 C、当有多个属性时，用“；”进行区分
CSS_style属性大全
CSS style属性大全 显示: 标签属性/属性行为集合事件滤镜方法对象样式 一、标签属性属性描述 ALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。 APPLICATION APPLICATION 表明对象的内容是否为HTML 应用程序(HTA)，以便免除浏览器安全模式。ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间，包括3D 边框。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的frame 或iframe 的window 对象。 DA TAFLD dataFld 设置或获取由dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DA TASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。 firstChild 获取对象的childNodes 集合的第一个子对象的引用。 FRAMEBORDER frameBorder 设置或获取是否显示框架的边框。 hasMedia 获取一个表明元素是否为HTML+TIME 媒体元素的Boolean 值。 HEIGHT height 设置或获取对象的高度。 HIDEFOCUS hideFocus 设置或获取表明对象是否显式标明焦点的值。 HSPACE hspace 设置或获取对象的水平边距。 ID id 获取标识对象的字符串。 innerText 设置或获取位于对象起始和结束标签内的文本。 isContentEditable 获取表明用户是否可编辑对象内容的值。 isDisabled 获取表明用户是否可与该对象交互的值。 isMultiLine 获取表明对象的内容是包含一行还是多行的值。 isTextEdit 获取是否可使用该对象创建一个TextRange 对象。 LANG lang 设置或获取要使用的语言。 LANGUAGE language 设置或获取当前脚本编写用的语言。
HTML+CSS标签属性大全
HTML CSS标签属性大全 a卷标, 属性名称, 简介 批注 1、跑马灯 普通卷动 滑动 预设卷动 来回卷动 向下卷动 向上卷动 向右卷动 向左卷动 卷动次数 设定宽度 设定高度 设定背景颜色 设定卷动距离 设定卷动时间 2、字体效果
…
标题字(最大)
…
标题字(最小)
…粗体字
…粗体字(强调)
…斜体字
…斜体字(强调)
…斜体字(表示定义)
…底线
…底线(表示插入文字)
…横线
…删除线
…删除线(表示删除)
…键盘文字
… 打字体
<![CDATA[…]]>固定宽度字体(在文件中空白、换行、定位功能有效)
<![CDATA[…</plaintext>固定宽度字体(不执行标记符号) <listing>…</listing> 固定宽度小字体 <font color=00ff00>…</font>字体颜色 <font size=1>…</font>最小字体 <font style =font-size:100 px>…</font>无限增大 3、区断标记 <hr>水平线 <hr size=9>水平线(设定大小) <hr width=80%>水平线(设定宽度) <hr color=ff0000>水平线(设定颜色) <br>(换行) <nobr>…</nobr>水域(不换行)</p><h2>(完整版)《CSS样式》习题答案</h2><p>一、选择题 1．CSS是（ C ）的缩写。 A．C olorful S tyle S heets B．C omputer S tyle S heets C．C ascading S tyle S heets D．C reative S tyle S heets 2．引用外部样式表的格式是（ B ）。 A．<style src="mystyle.css"> B．<link rel="stylesheet" type="text/css" href="mystyle.css"> C．<stylesheet>mystyle.css</stylesheet> 3．引用外部样式表的元素应该放在（ C ）。 A．H TML文档的开始的位置 B．H TML文档的结束的位置 C．在head元素中 D．在body元素中 4．内部样式表的元素是（ A ）。 A．<style> B．<css> C．<script> 5．元素中定义样式表的属性名是（ A ）。 A．s tyle B．c lass C．s tyles D．f ont 6．下列（ C ）是定义样式表的正确格式。 A．{body:color=black(body} B．b ody:color=black C．b ody {color: black} D．{body;color:black} 7．下列（ A ）是定义样式表中的注释语句。 A．/* 注释语句*/ B．// 注释语句 C．// 注释语句// D．‘注释语句</p><p>8．如果要在不同的网页中应用相同的样式表定义，应该（ C ）。 A．直接在HTML的元素中定义样式表 B．在HTML的<head>标记中定义样式表 C．通过一个外部样式表文件定义样式表 D．以上都可以 9．样式表定义#title {color:red} 表示（ B ）。 A．网页中的标题是红色的 B．网页中某一个id为title的元素中的内容是红色的 C．网页中元素名为title的内容是红色的 D．以上任意一个都可以 10．样式表定义.outer {background-color:yellow} 表示（ B ）。 A．网页中某一个id为outer的元素的背景色是红色的 B．网页中含有class=”outer”元素的背景色是红色的 C．网页中元素名为outer元素的背景色是红色的 D．以上任意一个都可以 47.光标移动文本框上方时，文本框边框的颜色就改变，这是因为激发了下列的（ C ）事件。 A. onFocus B. onMouseUp C. onMousrOver D. onMousMOve 48.下列属性哪一个能够实现层的隐藏？（ C ） A. display:false B. display:hidden C. display:none D. display:" " 49.下列选项中，不属于文本属性的是（ D ）。 A. font-size B. font-style C. text-align D. font-color</p><h2>IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表</h2><p>小知识：什么是CSS hack？ 由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。 各浏览器CSS hack兼容表： 代码示例： #test{ color:red; /* 所有浏览器都支持*/ color:red !important;/* Firefox、IE7支持*/ _color:red; /* IE6支持*/ *color:red; /* IE6、IE7支持*/ *+color:red; /* IE7支持*/ color:red\9; /* IE6、IE7、IE8支持*/ color:red\0; /* IE8支持*/ } body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/ 整体测试代码示例： .test{ color:#000000; color:#0000FF\0; [color:#00FF00; *color:#FFFF00; _color:#FF0000; } 其他说明： 1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：<meta http-equiv=”x-ua-compatible” content=”ie=7″ /> 2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。 3、还有其他写法，比如： *html #test{}或者*+html #test{} 4、*+html 对IE7的hack 必须保证HTML顶部有如下声明： https://www.360docs.net/doc/bb18877725.html,/TR/html4/loose.dtd 5、顺序：Firefox、IE8、IE7、IE6依次排列。</p><h2>css样式大全(精华版)</h2><p>字体属性：(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位：PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/ 区块属性：(Block) /*这个属性第一次认识，要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行)</p><h2>CSS浏览器兼容性的各种代码解决方案</h2><p>CSS浏览器兼容性的各种代码解决方案 https://www.360docs.net/doc/bb18877725.html,/webds/blog/item/0fc34990dbef5a8ba877a4d1.html 网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容浏览器。 一般情况下，我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器，下面是用的较频繁的CSS Hack技巧： 用的最广莫过于!important了，它可以针对IE（IE 7.0能正确理解!important）和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important，就可以针对其优先了。所以为了兼顾IE 6.0与火狐之间的差异，我都会使 用!important。 1、仅IE7与IE5.0可以识别 *+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 2、仅IE7可以识别 *+html select {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 3、IE6及IE6以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 4、html/**/ >body select {…} 这句与上一句的作用相同。 5、仅IE6不识别，屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值，注释在冒号前。 6、仅IE6与IE5不识别，屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽 IE5.5 7、仅IE5不识别，屏蔽IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。 8、盒模型解决方法 selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 9、只有Opera识别 @media all and (min-width: 0px){ select {……} }</p><h2>css样式大全(整理版)</h2><p>css样式大全(整理版） 字体属性：(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位：PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/ 区块属性：(Block) /*这个属性第一次认识，要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值</p><h2>css知识点汇总</h2><p>CSS学习知识点 1、css是什么？ CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML元素，用于控制网页的外观。 2、为什么使用css，优点是什么？ 1：【内容】和【表现】相分离 HTML文件中只存放文本信息，将样式部分放在一个独立样式文件中。页面对搜索引擎更加友好。 2：提高页面浏览速度 采用CSS布局的页面容量要比TABLE布局的页面文件容量小得多，前者一般只有后者的1/2大小。 3：易于维护和改版 只要简单的修改对应CSS文件，就可以重新设计整个网站的页面。 4: 使用CSS布局更符合现在的W3C标准 W3C组织是对网络标准制定的一个非赢利组织，像HTML、CSS、XML的标准就是由它来定制。 3、CSS样式表的调用方式哪几种？ 1、内部样式：把CSS样式表放到<head>文档中： 格式如下：<style type=“text/css”> …… </style> 2、内联式：把CSS样式表写在HTML对应的标记内。 格式如下：<p style="font-size:14pt;color:blue">蓝色14号文字 3、外部样式：把编辑好的CSS文档保存成“.CSS”文件，然后在<head>中定义。 格式如下：<head> <link rel=stylesheet href="css的文件地址">.....</head> 4、导入样式：与链入外部样式的功能基本相同，只是语法和实现方式上有差别。 格式如下：<style> @import url(css.css);</style> 4、几种调用方式的优先级？ 从高到低：内联样式--------外部样式---------内部样式-----------导入样式 5、CSS的语法: CSS的定义是由三部分构成: 选择器，属性和属性值。 语法: selector {property: value;} --------------------- 选择符{属性:值}</p><h2>CSS属性代码大全</h2><p>CSS属性代码大全 一、CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白： padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 三、CSS符号属性： list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/</p><h2>CSS3常用属性大全</h2><p>CSS3 动画属性（Animation） @keyframes //规定动画。 animation //所有动画属性的简写属性，除了animation-play-state 属性。animation-name //规定@keyframes 动画的名称。 animation-duration //规定动画完成一个周期所花费的秒或毫秒。 animation-timing-function //规定动画的速度曲线。 animation-delay //规定动画何时开始。 animation-iteration-count //规定动画被播放的次数。 animation-direction //规定动画是否在下一周期逆向地播放。 animation-play-state //规定动画是否正在运行或暂停。 animation-fill-mode //规定对象动画时间之外的状态。 CSS 背景属性（Background） background //在一个声明中设置所有的背景属性。 background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。background-color //设置元素的背景颜色。 background-image //设置元素的背景图像。 background-position //设置背景图像的开始位置。 background-repeat //设置是否及如何重复背景图像。 background-clip //规定背景的绘制区域。 background-origin //规定背景图片的定位区域。 background-size //规定背景图片的尺寸。 CSS 边框属性（Border 和Outline） border //在一个声明中设置所有的边框属性。 border-bottom //在一个声明中设置所有的下边框属性。 border-bottom-color //设置下边框的颜色。 border-bottom-style //设置下边框的样式。 border-bottom-width //设置下边框的宽度。</p><h2>(完整版)《CSS样式》习题答案</h2><p>、选择题 1. CSS是（C ）的缩写。 A. Colorful Style Sheets B. Computer Style Sheets C. CascadingStyle Sheets D. Creative Style Sheets 2. 引用外部样式表的格式是（B ）。 A. <style src="mystyle.css"> B. <link rel="stylesheet" type="text/css" href="mystyle.css"> C. <stylesheet>mystyle.css</stylesheet> 3. 引用外部样式表的元素应该放在.（C ）。 A. HTML文档的开始的位置 B. HTML文档的结束的位置 C. 在head元素中 D. 在body元素中 4. 内部样式表的元素是（A ）。 A. <style> B. <css> C. <script> 5. 元素中定义样式表的属性名是（ A ）o A. style B. class C. styles D. font 6. 下列—（C ）是定义样式表的正确格式。 A. {body:color=black（body} B. body:color=black C. body {color: black} D. {body;color:black} 7. 下列—（A ）是定义样式表中的注释语句。 A. /*注释语句*/ B . //注释语句 C . //注释语句// D .'注释语句 8．如果要在不同的网页中应用相同的样式表定义，应该（ C ）A．直接在HTML 的元素中定义样式表 B. 在HTML的<head>#记中定义样式表</p><h2>CSS属性大全完整版</h2><p>CSS属性大全完整版 字体属性：(font) 大小 font-size: x-large; (特大) xx-small; (极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style: oblique; (偏斜体) italic; (斜体) normal; (正常) 行高 line-height: normal; (正常) 单位：PX、PD、EM 粗细 font-weight: bold; (粗体) lighter; (细体) normal; (正常) 变体 font-variant: small-caps; (小型大写字母) normal; (正常) 大小写 text-transform: capitalize; (首字母大写) uppercase; (大写) lowercase; (小写) none; (无) 修饰 text-decoration: underline; (下划线) overline; (上划线) line-through; (删除线) blink; (闪烁) 常用字体</p><p>font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩 background-color: #FFFFFF; 图片 background-image: url(); 重复 background-repeat: no-repeat; 滚动 background-attachment: fixed; (固定) scroll; (滚动) 位置 background-position: Left (水平) top (垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性：(Block) 字间距 letter-spacing: normal; 数值 对齐 text-align: justify; (两端对齐) left; (左对齐) right; (右对齐) center; (居中) 缩进</p><h2>css常用的属性大全</h2><p>CSS常用属性大全 2011-04-22 12:51 字体属性：(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位：PX、PD、EM 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体 font-variant: small-caps;(小型大写字母) normal;(正常) 大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 字体投影效果：filter:dropshadow(color=#FFFFFF, offx=1, offy=1, positive=1); 背景属性： (background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: repeat; no-repeat; repeat-x; repeat-y;滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直);bottom; right; center; 简写方法 background:#000 url(..) repeat fixed left top; 区块属性： (Block) 字间距letter-spacing: normal; 数值 对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进text-indent: 数值px; 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 单词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行)</p><h2>网页设计中的CSS样式代码详解</h2><p>CSS 背景属性 属性 描述 值 IE F N W3C background 简写属性，作用是将背景属性设置在一个声 明中。 background-color background-image background-repeat background-attach ment background-positi on 4 1 6 1 background-attachment 背景图像是否固定或 者随着页面的其余部 分滚动。 scroll fixed 4 1 6 1 background-color 设置元素的背景颜色。 color-rgb color-hex color-name transparent 4 1 4 1 background-image 把图像设置为背景。 url none 4 1 4 1 background-position 设置背景图像的起始 位置。 top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos 4 1 6 1 background-repeat 设置背景图像是否及 如何重复。 repeat repeat-x repeat-y no-repeat 4 1 4 1 CSS 边框属性 (border)</p><p>border-bottom 简写属性。作用是在一个声明中用来设置下边框 的所有属性。 ? border-bottom-w idth border-style border-color 4 1 6 1 border-bottom-color 设置下边框的颜色。 border-color 4 1 6 2 border-bottom-style 设置下边框的样式。 border-style 4 1 6 2 border-bottom-width 设置下边框的宽度。 thin medium thick length 4 1 4 1 border-color 设置四个边框的颜色，可以设置一到四个颜色。 color 4 1 6 1 border-left 简写属性。用于在一个声明中设置左边框的所有 属性。 border-left-wid th border-style border-color 4 1 6 1 border-left-color 设置左边框的颜色。 border-color 4 1 6 2 border-left-style 设置左边框的样式。 border-style 4 1 6 2 border-left-width 设置左边框的宽度。 thin medium thick length 4 1 4 1 border-right 简写属性。将所有用于右边框的属性设置于一个 声明中。 ? border-right-wi dth border-style border-color 4 1 6 1 border-right-color 设置右边框的颜色 border-color 4 1 6 2 border-right-style 设置右边框的样式 border-style 4 1 6 2 border-right-width 设置右边框的宽度。 thin medium thick length 4 1 4 1 border-style 设置四个边框的样式，可以设置一到四个样式。 none hidden dotted dashed solid 4 1 6 1</p><h2>css属性大全</h2><p>字体属性：(font) 大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高line-height: normal;(正常) 单位：PX、PD、EM 粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体font-variant: small-caps;(小型大写字母) normal;(正常) 大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: no-repeat; 滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性：(Block) 字间距letter-spacing: normal; 数值 对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进text-indent: 数值px; 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行) 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) 方框属性：(Box) width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左 边框属性：(Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法border：width style color; 列表属性：(List-style) 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;</p></div>
<div class="rtopicdocs">
<div class="coltitle">相关主题</div>
<div class="relatedtopic">
<div id="tabs-section" class="tabs">
<ul class="tab-head">
<li id="8415012"><a href="/topic/8415012/" target="_blank">ie7默认css样式</a></li>
<li id="21404025"><a href="/topic/21404025/" target="_blank">css常用的属性大全</a></li>
<li id="10868298"><a href="/topic/10868298/" target="_blank">css属性大全</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="rightcol" class="viewcol">
<div class="coltitle">相关文档</div>
<ul class="lista">
<li><a href="/doc/6111769527.html" target="_blank">让IE6、IE7、IE8支持CSS3的圆角、阴影样式</a></li>
<li><a href="/doc/9d3445982.html" target="_blank">CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF</a></li>
<li><a href="/doc/c01607303.html" target="_blank">DIV+CSS样式在IE6.0浏览器中常见问题解决方法论文</a></li>
<li><a href="/doc/0012543924.html" target="_blank">CSS复习题</a></li>
<li><a href="/doc/5a10819270.html" target="_blank">CSS网页样式设置</a></li>
<li><a href="/doc/7611786596.html" target="_blank">IE6,IE7,IE8区别-IE兼容性</a></li>
<li><a href="/doc/ab10759879.html" target="_blank">CSS重置样式清除浏览器默认样式</a></li>
<li><a href="/doc/e414620767.html" target="_blank">常用的样式兼容写法</a></li>
<li><a href="/doc/3e8215848.html" target="_blank">CSS浏览器兼容性的各种代码解决方案</a></li>
<li><a href="/doc/6c4953405.html" target="_blank">div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法</a></li>
<li><a href="/doc/8211916728.html" target="_blank">网页设计与制作第7章 使用CSS样式</a></li>
<li><a href="/doc/b39197317.html" target="_blank">CSS浏览器样式兼容</a></li>
<li><a href="/doc/003572041.html" target="_blank">Css复习题</a></li>
<li><a href="/doc/5a9017155.html" target="_blank">(完整版)《CSS样式》习题答案</a></li>
<li><a href="/doc/7310469134.html" target="_blank">firefox,ie7,ie6兼容性问题,和css解决方案</a></li>
<li><a href="/doc/ae1513493.html" target="_blank">IE7IE8与FireFox等浏览器CSS兼</a></li>
<li><a href="/doc/d316015695.html" target="_blank">课题_让IE6IE7IE8浏览器支持CSS3属性-特效</a></li>
<li><a href="/doc/3f5007238.html" target="_blank">IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表</a></li>
<li><a href="/doc/611885385.html" target="_blank">网页设计中的CSS样式代码详解</a></li>
<li><a href="/doc/8f11238101.html" target="_blank">史上最全的css兼容代码大全</a></li>
</ul>
<div class="coltitle">最新文档</div>
<ul class="lista">
<li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li>
<li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li>
<li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li>
<li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li>
<li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li>
<li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li>
<li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li>
<li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li>
<li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li>
<li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li>
<li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li>
<li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li>
<li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li>
<li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li>
<li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li>
<li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li>
</ul>
</div>
</div>
<script>
var sdocid = "bfcfe7bdf121dd36a32d82e8";
</script>
<div class="clearfloat"></div>
<div id="footer">
<div class="ft_info">
<a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br />
本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈
</div>
<script type="text/javascript">foot()</script>
</div>
</body>
</html>]]></plaintext></div></div>
