border-image-repeat属性(CSS设置)

发布时间：2021-06-29 13:25 所属分类：品牌设计浏览次数：

　　1.CSS字体界说简写规矩

　　一般的写法会是这样：

　　以下为引证的内容：

　　font-weight:bold;

　　font-style:italic;

　　font-varient:small-caps;

　　font-size:1em;

　　line-height:1.5em;

　　font-family:verdana,sans-serif

　　而实际上你能够用更简洁的写法：

　　font:bolditalicsmall-caps1em/1.5emverdana,sans-serif

　　是不是更省劲？不过运用这种简写需要注意几点：要使简写界说有用必须至少供给font-size和font-family这两个特点；一起font-weight,font-style以及font-varient这几个特点假如不做设定的话将默以为normal。

　　还有background，border等等.

　　1.关于background的写法

　　DIV.comment{background:#f0f0f0url(urladdress)repeat-xlefttop}

　　1）您能够看到background的第一个界说是一个色彩值这表明在背景图片失效的时分色彩将起作用。

　　2）url括号中的引号是没有必要的，我们能够不写引号

　　2.关于Border的写法，假如您想界说div的四个边的色彩不同，而粗度和样式都相同，您能够这样写：

　　DIV.special{border:1pxsolid;border-color:color1color2color3color4}

　　四种色彩一次是上，右，下，左的色彩

　　色彩相同就合并成：

　　DIV.special{border:1pxsolidcolor4}

　　2.一起运用两个Class界说

　　一般我们只会给内容块指定一个Class，但这并不代表我们只能指定一个。实际上只需你愿意，能够一起把恣意多个Class赋给某块内容。比方：

　　...

　　多个Class之间用空格分隔即可。当多个Class之间的特点发生重叠的时分，将依据各个Class在CSS界说文件中被界说的方位，后界说的Class特点自动掩盖之前界说的Class特点（而不是依据你在class="textside"这儿排列的次序来进行掩盖）

　　3.CSSborder的缺省值

　　一般我们界说border特点都会供给color,width,style这些特点。比方border:3pxsolid#000。不过实际上必需要供给的特点只有style。假如你只写border:solid的话，其他的特点自动运用缺省值。border的缺省宽度是medium(大约3px-4px)，缺省的色彩是位于border里边的内容文字的色彩。假如这些缺省值能够满足你的要求，你完全能够省掉这两项特点。

　　4.专门用于打印的CSS文档

　　许多web页面都会供给一个打印链接，便利用户运用另一种适合打印界面的CSS。但实际上你完全能够为你的页面指定两个CSS文档link，这样浏览器会自动调用合适的CSS来用于显现或打印。比方：

　　以下为引证的内容：

　　通过指定link的media特点，浏览器就能依据需要来调用特定的CSS文件来处理页面了。关于打印更多的建议，请参见PrintDifferent,

　　5.CSS中的内容笔直对齐

　　用传统的table来完成笔直对齐很简单，只需用vertical-align:middle就能够让table的内容笔直居中。但这个特点在CSS里边却行不通。

　　解决方法是把内容的行高设置成与内容块相同高。比方你的div高是32px，那就在你的CSS界说里边添加特点line-height:32px;这样文字看上去就笔直居中于层里边了。不过这个方法只适用于单行文字，关于多行文字，好像没有什么好方法。

　　6.让背景色能够笔直拉齐到底部

　　CSS与传统的table来说另一个让人不爽的当地是它的笔直层的对齐。假如你的页面分为两列，其间一列比较长而另一列比较短，一起两列的背景色和页面总的背景色是不同的话，显现出来的作用就比较丑陋，不像table那样只需把td的高度设成100%就能够把每一列的高度拉到相同长。

　　要解决这个问题好像只能用一个取巧的方法，依据每列的宽度和背景色设置背景图片，让用户看上去好像拉平了：

　　以下为引证的内容：

　　body

　　{

　　background:url(blue-image.gif)00repeat-y

　　}

　　7.block/inline特点

　　任何一个HTML元素都是block或许inline的。

　　block元素的特性包含：

　　总是另起一行开始显现

　　height,line-height,top/bottommargin特点能够被设置

　　width缺省值是100%,除非你指定了另外的width值

　　这一类的HTML元素包含

　　以及

　　等。

　　inline元素的特性包含：

　　直接跟在当前行的后边显现

　　height,line-height,top/bottommargin特点不能改动

　　width值就等于包含其间的文字/图片的宽度，而且这个值不能被改动

　　这一类的HTML元素包含,,,,,以及等。

　　你能够通过设置元素特点display:inline或display:block来改动元素的以上特性。

　　8.设置页面的最小宽度

　　CSS语法中很有用的一个特点是min-width。通过这个特点你能够设置任何元素的最小宽度。也就是说你也能够用这个来约束页面显现的最小宽度。

　　但有个小问题是：IE浏览器无法为元素设置min-width，因而要让这个特点起作用，我们需要走点弯路。

　　首先在后边刺进一个

　　：

　　以下为引证的内容：

　　然后在CSS界说里边界说最小宽度为600px：

　　以下为引证的内容：

　　#container

　　{

　　min-width:600px;

　　width:expression(document.body.clientWidth<600?"600px":"auto");

　　}

　　第一个特点是最小宽度界说的规范写法；第二个特点则是只有IE能够了解的javascript表达式。

　　你也能够一起设定页面的最大最小宽度：

　　以下为引证的内容：

　　#container

　　{

　　min-width:600px;

　　max-width:1200px;

　　width:expression(document.body.clientWidth<600?"600px":document.body.clientWidth>1200?"1200px":"auto");

　　}

　　9.Text-transform特点

　　这个特点可能也是CSS当顶用的人不多但却很有用处的特点之一。其常见的可用值包含：text-transform:uppercase,text-transform:lowercase以及text-transform:capitalize。第一个将把一切的字母转化成大写；第二个将把一切字母转成小写；第三个则把每个单词的首字母转成大写。不过关于非英文网站来说，这个功用确实就没什么用了。

　　10.IE中消失的文字和图片

　　IE有个很不可思议的Bug：有时分文字或许背景图片死活显现不出来。假如你全选整个页面，会发现那些内容实际上还在那里，或许从头改写一下页面显现就正常了。

　　一般来说这个问题都发生在那些跟在浮动元素后边显现的文字或背景图片身上。要解决这个问题，能够试试给你的那些消失的元素加上position:relative特点。假如还不行，再试试设置一下width特点。一般来说这样做之后问题就解决了。

　　11.色彩的缩写

　　我们能够将#ff0033缩写成#f03

　　17.封闭输入法状况

　　运用户只能输入英文状况下的字符，类似输入暗码

　　input{ime-mode:disabled;}

作品标签：

上一篇：美发宣传单(美发宣传海报时尚)

下一篇：逆袭排版

返回上一页返回列表