html5+css3

CSS网页布局中文排版的9则技巧CSS网页布局中文排版有别于国外所介绍的英文排版，由于汉字的特殊性，所以有一些地方是需要大家注意的。今天jzxue.com的这个文章或许对大家对排版的控制有所帮助。一、如何设定文字字体、颜色、大小—使用fontfont-style设定斜体，比如font-style:italic;font-weight设定文字粗细，比如font-weight:bold;font-size设定文字大小，比如font-size:12px;（或者9pt，不同单位显示问题参考CSS手册）line-height设定行距，比如line-height:150%;color设定文字颜色（注意不是font-color），比如color:red;font-family设定字体，比如font-family:LucidaGrande,Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;（这是通用的写法）以上都可以写在一行font属性里（除了color属性需要单独写）：font:italicbold12px/150%LucidaGrande,Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;二、如何控制段落排版—使用margin，text-align中文段落使用p标签，左右（相当于缩进）、段前段后的空白，都可以用margin。比如：p{margin:18px6px6px18px;/*分别是上、右、下、左，十二点开始的顺时针方向*/}文字的对齐方式用text-align，比如：p{text-align:center;/*居中对齐*/}对齐方式还有left、right和justify（两端对齐）PS.谈起margin，我习惯于在写CSS的时候为所有的标签定义margin:0;因为时而出现由于默认的margin值导致页面排版问题，而自己找不到原因（特别注意的是ul/ol/p/dt/dd等标签）三、竖排文字—使用writing-modewriting-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。比如：p{writing-mode:tb-rl;}可以结合direction排版。四、项目符号的问题—使用list-style在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。比如设定一个列表（ul或ol）的项目符号为方块，如：li{list-style:square;}另外list-style还有一些值，比如可以采用一些小图片作为项目符号，在list-style下直接写url(“图片地址”)就可以了。注意如果一个项目列表的左外补丁（margin-left）设为零的时候，list-style-position:outside（默认是outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。五、首字下沉—使用:first-letter伪对象:first-letter配合font-size、float可以制作首字下沉效果。比如：p:first-letter{padding:6px;font-size:32pt;float:left;}六、首行缩进—使用text-indenttext-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写：p{text-indent:2em;/*em是相对单位，2em即现在一个字大小的两倍*/}如果font-size是12px的话，那么text-indent:2em则缩进24px。七、关于汉字注音—使用ruby标签和ruby-align属性比如说ruby注音rtstyle=font-size:11px;zhuyin/rt/ruby，可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的，具体可以自行查阅ruby-align项。八、固定宽度汉字截断—使用text-overflow用后台语言可以对从数据库里的字段内容做截断处理，比如说截12个汉字（之后用省略号）。但是有时还需要html标签的过滤等，而用CSS来控制则没有这个问题。比如对列表应用以下样式：li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}不过只能处理文字在一行上的截断，不能处理多行。九、固定宽度汉字（词）折行—使用word-break举个例子，比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔），为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）。则可以使用word-break。比如：divstyle=width:210px;height:200px;background:#ccc;word-break:keep-all南京上海上海上南上海上海南京上海上海上海南京上海上海南京上海上海南京上海南京上海南京上海南京上海南京上海南京上海上海南京上海上海/div值得注意的是里面的空格不能以代替（最少要有一个软空格）。CSS简单实现图片列表CSS简单实现图片列表先上图有图有真相再来看代码部分：ul{list-style:none;width:800px;border:1pxsolidred;float:left}li{width:120px;height:120px;float:left;text-align:center;position:relative}liimg{width:100px;height:100px;border:1pxsolid#ddd;padding:5px;background:#f0f0f0;position:absolute;}很简单不过请大家注意图片的大小统一！征服高级CSS选择器CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。CSS的优先级在深入研究高级CSS选择器领域之前，理解CSS优先级是如何工作的是很重要的，这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1,1,1,1或0,2,0,1第一个数字(a)通常就是0，除非在标签上使用style属性；第二个数字(b)是该选择器上的id的数量的总和；第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class(.example)和属性选择器(比如li[id=red])；第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；通用选择器(*)是0优先级；如果两个选择器有同样的优先级，在样式表中后面的那个起作用。让我们看几个例子，这样或许比较容易理解些：#sidebarh2—0,1,0,1h2.title—0,0,1,1h2+p—0,0,0,2#sidebarp:first-line—0,1,0,2在下面的例子中，第一个将会起作用，因为它比第二个优先级高：#sidebarp#first{color:red;}—0,2,0,1#sidebarp:first-line{color:blue;}—0,1,0,2至少基本理解优先级是如何工作的是很重要的，但是一些工具比如Firebug，在我们审查指定元素的时候，按照选择器的优先级列出所有的css选择器对让我们知道在指定元素上哪个选择器是有效的是很有用的。让你非常容易的看到那个选择器作用于一个元素上了。有用的文章:CSSSpecificity:ThingsYouShouldKnowLinkSpecificity¯MeyerWebCSS:SpecificityWarsAssigningpropertyvalues,Cascading,andInheritance—W3C1.属性选择器属性选择器(Attributeselector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素——这就是属性选择器展示它们的威力的地方。有6个不同类型的属性选择器：[att=value]该属性有指定的确切的值。[att~=value]该属性的值必须是一系列用空格隔开的多个值，(比如，class=”titlefeaturedhome”)，而且这些值中的一个必须是指定的值”value”。[att|=value]属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)[att^=value]该属性的值以指定值开始。[att$=value]该属性的值包含指定的值(而无论其位置)。[att*=value]该属性的值以指定的值结束比如，如果你想要改变你的博客上的日志部分元素的背景颜色，你可以使用一个指定每一个class属性值以“post-”开始的div的属性选择器：div[class|=post]{background-color:#333;}该语句将匹配所有class属性包含”post”并带”-”字符的div元素。(注：此处英文原文有些上下文不对应，我已经更正——译者，神飞)属性选择器的另一个很有用的用处是定位不同类型的input元素。比如，如果你想让你的文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：input[type=text]{width:200px;}这将匹配所有type属性值等于“text”的input元素。现在我们可能像为网站上不同的文件类型的链接添加不同的图标，这样你的网站的访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现：a[href*=.jpg]{background:url(jpeg.gif)no-repeatleft50%;padding:2px02px20px;}a[href*=.pdf]{background:url(pdf.gif)no-repeatleft50%;padding:2px02px20px;}a[href*=.doc]{background:url(word.gif)no-repeatleft50%;padding:2px02px20px;}在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》浏览器支持除了InternetExplorer6，所有的主流浏览器都支持属性选择器。这意味着，如果你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子，为链接添