css的基本语法
cascading stylesheet(级联样式表)。为网页提供外观（也就是，网页的表现形式）。将网页的外观写在一个css文件里，方便页面代码的维护（将表现与数据分离）。为方便大家学习css，我为大家分享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和CSSGPU加速。
但也有信息表示，tomshardware测试发现Chrome这项功能在显示目前网页方面，显示速度并没有出现任何显着增加，在WebVizHTML5基准测试当中出现了不稳定和崩溃问题。
评论表示，虽然SVG和CSSGPU加速还有待完善，但是Mozilla火狐、微软IE和其他版本浏览器之间的竞争，肯定会推动这种技术快速发展和完善。
设置容器中的内容垂直居中css代码
如实例1设置网页整体居中的代码中内容是居容器的顶部的，而在表格布局时默认是垂直居中的，当我们需要垂直居中的时候该怎么办呢？别害怕，跟我来，也是比较简单的，只用设置容器内的行高就行了。
line-height:500px
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/htmlcharset=gb2312"/>
<title>标准之路www.aa25.cn</title>
<style>
#layout{width:778pxmargin:0autotext-align:centerborder:1pxsolid#44b6dcbackground:#e1edfbheight:500pxline-height:500px}
</style>
</head>
<body><pid="layout">标准之路www.##.cn </p>
</body>
</html>
提示：可以先修改部分代码后再运行
这是一种方法，另外和种方法就是设置的`它内边距padding了，自己可以试试哟～～
CSS对不同浏览器的兼容性解决办法
CSS 对不同浏览器的兼容性解决办法由于CSS 在不同浏览器中存在兼容性问题，所以在使用 p+CSS 布局中，可能导致相同的内容在不同浏览器中出现不同的显示效果，为了解决这些方面的问题，以下针对CSS 某些属性的用法提出相应的一些解决办法。 1、页面居中问题在IE 浏览器下，可以通过定义CSS 样式body {text- align: center}来实现页面居中，但在FireFox（以下简写为FF）浏览器下此属性就失效了。解决办法：使用"margin- left: automargin- right : auto" www.diannao114.cn2、padding 属性在不同浏览器的显示问题当给p 设置padding 属性后，在FF 浏览器中会导致 width 和height 增加(p 的实际宽度=p 宽+Padding), 但在 IE 浏览器中width 和height 不会增加，这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法：给p 设定IE、FF 两个宽度，在IE 的宽度前加上IE 特有标记" * " 号。例如： #pwidth{ padding:5pxwidth:100px*width:110px} 3、奇怪的间隙问题有的时候我们明明设好了高度，可在IE6 上却看见一些奇怪的间隙。解决办法：试试在有空隙的p 上加上"font- size:0px" 4、关于手形光标要将页面内容的光标显示为手形，通常的做法是使CSS 属性cursor: hand但这于做法只适用于IE. 解决办法：cursor: pointer5、浮动在IE6 产生双倍距离问题例如： #box{ float:leftwidth:100pxmargin: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 中首先都使用这样的样式ul,form{margin:0padding:0}。 7、截字省略号 .hh { - o- text- overflow:ellipsistext- overflow:ellipsiswhite- space:nowrapoverflow:hidden} 这个CSS 是定义当内容溢出宽度后会自行的截掉超出部分的文字，并以省略号结尾，但注意Firefox 并不支持。
p+CSS 网页布局的分类
p+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用 p+CSS 布局的代码如下： XHTML 代码： 一列固定宽度CSS 代码： #main1 { width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999} 2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用 p+CSS 布局的代码如下： XHTML 代码： 一列自适应宽度CSS 代码： #main2 { width: 70%height: 300pxbackground- color: #EEEEEEborder: 1px solid #999999} 3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE 的align="center" 属性来实现，在p+CSS 布局中采用如下代码来实现：XHTML 代码： 一列自适应宽度CSS 代码： p+CSS 网页布局方法探析。如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎方面显得有些无能为力，而用p+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用p+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点p+CSS 布局的技巧。4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用p+CSS 布局的代码如下：XHTML 代码： 左侧右侧CSS 代码： #left { width: 150pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} #right{ width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} 5、二列固定宽度居中从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的p 作为容器，将二列分栏的p 放置在容器中，从而就实现二列的居中显示。 p+CSS 的代码如下： XHTML 代码： 左侧右侧CSS 代码： #main{ width:554pxmargin:0px auto#left { width: 150pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} #right{ width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} 这里仅列举了一列、二列的布局方式，实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计，在p+CSS 网页布局中，均是以p 为基础，通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。
p+CSS网页布局技巧：设置网页整体居中的css代码
以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用p+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不同而已。
<style>
#layout { width:778pxmargin:0 autotext-align:center}
</style>
<p id="layout">标准之路www.aa25.cn</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
提示：可以先修改部分代码后再运行
1、绝对定位在绝大过程中，想确定一个元素在网站当中的固定位置，绝对定位是实现这个方式的解决办法。在网页当中，绝对定位可精确的控制元素在网页当中的位置，我们可使用顶部、底部、左侧和右侧，附上一个像素值来控制元素所在的位置。
position:absolutetop:50pxright:50px
上面的CSS设置一个元素的位置从浏览器的顶部和右边保持50px。你也可以在div内使用绝对定位。
2、覆盖所有样式
写CSS的时候都应该知道，当你想给一个元素添加一个新的CSS样式，但这个样式之前已经被定义过了。此时我们可以采用！important来定义。
例如，如果我想在我的网站的特定部分的H3标题是红色而不是黄色，可以使用下面的CSS：
.section h3 {color:red !important}
3、居中
居中分很多情况，一般会分成文本居中和DIV的内容居中。
文本居中
文本居中使用text-align：center。如果想让文本在左右两侧，可以使用左侧或右侧。
DIV内容
DIV内容居中跟文本居中不一样。CSS可以这样定义：
#div1 { display: blockmargin: autowidth: anything under 100% }
把宽度设置为“100％以下”的原因是因为如果它是100％宽度，那么如果是全宽度，并且不需要居中。最好有一个固定的宽度，如60％或550像素等。
4、垂直对齐（对于一行文本）
要使菜单的高度和文本的行高一致，可以这么设置：
.nav li{line-height:50pxheight:50px}
5、悬停效果
这适用于按钮，文本链接，网站的部分，图标等等。如果你想做一个悬停效果，可以试试：
.entry h2{font-size:36pxcolor:#000font-weight:800} .entry h2:hover{color:#ffeb3b}
这个功能可以让你的h2标签的颜色从黑色变成黄色。
6、悬停效果过渡
对于悬停效果，如使用菜单或网站上的图像，我们肯定不希望颜色快速贴近结果，所以我们可以通过使用时间变化来达到过渡的效果。
.entry h2:hover{color:#ffeb3btransition: all 0.5s ease}
这就使得样式上的改变，可以是从黑色变黄色的过渡时间是0.5秒，而不是立即变成黄色。这使得悬停效果更加和谐而不会显得太突兀。
7、a标签的状态
我们在遇到a标签的时候，一定要给a标签做样式定义，否则特别容易造成用户在使用上的困惑。通过样式可以让用户知道这个链接是否被点击过，更利于用户体验。
a:link {color: blue} a:visited {color: red}
8、轻松调整图像大小以适应
说到这个样式，我之前不知道可以通过以下方式达到图片的自适应效果。作为一个新手，我相信这个效果肯定有很多人都想做，当然，我提供的方法也只是其中的一种：
img {max-width:100%height:auto}
这个样式意味着最大的图像可能是100％，并根据图像宽度自动计算高度。在某些情况下，您可能还必须指定宽度为100％。
9、父级元素和子元素
如果ni不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器：
h1 >strong {color:red}
特殊情况下你可能会想定义第N个子元素的样式，这样就可以用到下面这个样式：li:nth-child(n)
具体的使用方法可以去w3school上看。
10、将CSS应用于多个类或选择器
如果你想要在所有图片，博客部分和侧边栏上添加相同的边框。你不必写出相同的CSS样式重复3次。只需列出这些项目，用逗号分隔：
.blog,img,.sidebar {border: 1px solid #000}
