css的基本语法汇编.docx

上传人：ylj18****41534

文档编号：28783385

上传时间：2022-07-29

格式：DOCX

页数：8

大小：14.46KB

( 4.5 )

《css的基本语法汇编.docx》由会员分享，可在线阅读，更多相关《css的基本语法汇编.docx（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、css的基本语法css的基本语法选择器属性1:属性值1;属性n:属性值n;符合选择器要求的标记，会添加对应的样式。Chrome阅读器为SVG和CSS添加GPU加速功能互联网有消息透露，谷歌正在为Chrome阅读器增加新的GPU加速功能。Chrome18阅读器将内建开关选项，让消费者选择运用GPU硬件加速基于矢量的SVG图形和CSS过滤器，让Chrome阅读器在将来网页显示上获得突破性速度，并且达成惊人的视觉效果。Chrome阅读器的SVG和CSSGPU加速支持Windows，Mac，Linux和谷歌的Chrome操作系统，但目前这个功能仍旧主要是试验性质，因为只有几个少数网站部署了SVG和CS

2、SGPU加速。但也有信息表示，tomshardware测试发觉Chrome这项功能在显示目前网页方面，显示速度并没有出现任何显着增加，在WebVizHTML5基准测试当中出现了不稳定和崩溃问题。评论表示，虽然SVG和CSSGPU加速还有待完善，但是Mozilla火狐、微软IE和其他版本阅读器之间的竞争，确定会推动这种技术快速发展和完善。设置容器中的内容垂直居中css代码照实例1设置网页整体居中的代码中内容是居容器的顶部的，而在表格布局时默认是垂直居中的，当我们须要垂直居中的时候该怎么办呢？别胆怯，跟我来，也是比较简洁的，只用设置容器内的行高就行了。line-height:500px;<!

3、DOCTYPEhtmlPUBLIC-/W3C/DTDXHTML1.0Transitional/ENhttp:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd><htmlxmlns=http:/www.w3.org/1999/xhtml><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>标准之路</title><style>#layoutwidth:778px;margi

4、n:0auto;text-align:center;border:1pxsolid#44b6dc;background:#e1edfb;height:500px;line-height:500px;</style></head><body><pid=layout>标准之路www.#.cn </p></body></html>提示：可以先修改部分代码后再运行这是一种方法，另外和种方法就是设置的它内边距padding了，自己可以试试哟CSS对不同阅读器的兼容性解决方法CSS 对不同阅读器的兼容性解决方法由于CSS

5、在不同阅读器中存在兼容性问题，所以在运用 p+CSS 布局中，可能导致相同的内容在不同阅读器中出现不同的显示效果，为了解决这些方面的问题，以下针对CSS 某些属性的用法提出相应的一些解决方法。 1、页面居中问题在IE 阅读器下，可以通过定义CSS 样式body text- align: center;来实现页面居中，但在FireFox（以下简写为FF）阅读器下此属性就失效了。解决方法：运用margin- left: auto; margin- right : auto; 2、padding 属性在不同阅读器的显示问题当给p 设置padding 属性后，在FF 阅读器中会导致 width 和he

6、ight 增加(p 的实际宽度=p 宽+Padding), 但在 IE 阅读器中width 和height 不会增加，这就导致相同的内容在不同阅读器中出现不同的显示效果。解决方法：给p 设定IE、FF 两个宽度，在IE 的宽度前加上IE 特有标记 * 号。例如： #pwidth padding:5px; width:100px; *width:110px; 3、惊奇的间隙问题有的时候我们明明设好了高度，可在IE6 上却望见一些惊奇的间隙。解决方法：试试在有空隙的p 上加上font- size:0px; 4、关于手形光标要将页面内容的光标显示为手形，通常的做法是使CSS 属性cursor: ha

7、nd; 但这于做法只适用于IE. 解决方法：cursor: pointer; 5、浮动在IE6 产生双倍距离问题例如： #box float:left; width:100px; margin:0 0 0 100px; 这种状况之下IE6 会产生200px 的距离。解决方法：在以上属性的基础上，加上display:inline，使浮动忽视。6、UL 和FORM标签的padding 与margin ul 标签在FF 中默认是有padding 值的, 而在IE 中只有 margin 默认有值。FORM标签在IE 中,将会自动margin 一些边距,而在FF 中margin 则是0；解决方法：css

8、中首先都运用这样的样式ul,formmargin:0; padding:0;。 7、截字省略号 .hh - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; 这个CSS 是定义当内容溢出宽度后会自行的截掉超出部分的文字，并以省略号结尾，但留意Firefox 并不支持。p+CSS 网页布局的分类p+CSS 网页布局的分类1、一列固定宽度一列布局是全部布局的基础，也是最简洁的布局方式，用 p+CSS 布局的代码如下： XHTML 代码：一列固定宽度CSS 代码：

9、#main1 width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; 2、一列自适应宽度自适应的布局能够依据阅读器窗口的大小自动变更其宽度和高度值，是网页设计中一种特别敏捷的布局形式，用 p+CSS 布局的代码如下： XHTML 代码：一列自适应宽度CSS 代码： #main2 width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; 3、一列固定宽度居中页面整体居中是网页布局

10、中最常见到形式，在传统的表格布局中，运用TABLE 的align=center 属性来实现，在p+CSS 布局中采纳如下代码来实现：XHTML 代码：一列自适应宽度CSS 代码： p+CSS 网页布局方法探析。如今的网页设计考虑得更多的是搜寻引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其浩大的HTML 代码，使得其在搜寻引擎方面显得有些无能为力，而用p+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同阅读器存在兼容性问题，所以对于初学者来说，在运用p+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点p+CSS

11、布局的技巧。4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简洁了，用p+CSS 布局的代码如下：XHTML 代码：左侧右侧CSS 代码： #left width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; #right width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; 5、二列固定宽度居中从一列固

12、定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以运用一个居中的p 作为容器，将二列分栏的p 放置在容器中，从而就实现二列的居中显示。 p+CSS 的代码如下： XHTML 代码：左侧右侧CSS 代码： #main width:554px; margin:0px auto; #left width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; #right width: 400px; height: 300px; background- color

13、: #EEEEEE; border: 1px solid #999999; float:left; 这里仅列举了一列、二列的布局方式，事实上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么困难的页面设计，在p+CSS 网页布局中，均是以p 为基础，通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现困难的布局。p+CSS网页布局技巧：设置网页整体居中的css代码以前用表格布局时设置网页居中特别便利，把表格对齐方式设置为居中就行了，就这么简洁，现在呢，用p+CSS样式表限制，似乎不是那么简单了，其实也很简洁，只不过方式不同而已。<style>#l

14、ayout width:778px; margin:0 auto; text-align:center;</style><p id=layout>标准之路</p>请看这段代码，宽度为适合800×600辨别率阅读器的宽度，margin:0 auto; 这句代码就是让居中了，意思是外边距上下设置为0，左右设为自动。这样它就居中了。那么可能你要问了，text-align:center;为什么还要让内容居中呢？呵呵，别焦急，这句是为了适应IE6以下版本的阅读器而加的，IE6以下对margin:0 auto;不能解析为居中，所以用这种方式来补救，以下在设计内容时再用 text-align:left;就可以了。注：margin和padding的值的依次为顺时针上右下左，如margin:1px 2px 3px 4px;还可以缩写为上下、左右，如本例，假如为margin:0px;则是各边都为0提示：可以先修改部分代码后再运行

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

10 金币

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: css 基本语法汇编

淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

限制150内

关于本文

本文标题：css的基本语法汇编.docx
链接地址：https://www.taowenge.com/p-28783385.html