CFXIXI工作室首页
CF西西的博客 | css

设置文字换行

9. 十二月 2016
font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; height: 17px; padding: 10px 0 0 0; text-align: center; color: #666666; line-height: 17px; background: #FFFFFF;

css

解决2行因为文字高度不对齐问题

1. 七月 2016
楼主使用了vertical-align:top 解决的向上浮动 .shop-item-list .shop-item { width: 31%; display: inline-block; vertical-align: top; }

css

css朝鲜的红(朝鲜红)

24. 十二月 2013
朝鲜的红 .redColor{ color: rgb(193,4,3); }

css

编写高效的 CSS

18. 七月 2013
转自:https://developer.mozilla.org/zh-CN/docs/CSS/Writing_Efficient_CSS 本文档提供了优化 CSS 代码的指南,特别是如何书写高效选择器。 CSS 规范没有规定浏览器如何去实现样式系统,仅仅是说明了它们该实现哪些内容。有鉴于此,不同的样式系统引擎可能会拥有完全不同的性能和行为,特别是 Gecko 与 WebKit, 这两个引擎都是开源项目,实现了类似的算法,具有同样的优缺点。因此下面介绍的小技巧对于真实世界的 Web 文档会十分有效。 第一部分内容综合讨论了常见的样式系统是如何分类规则的。接下来的部分包含了书写规则的指南,它利用了前面讨论的系统的优点。 样式系统如何拆分规则 样式系统将规则拆分成四个主要类别: ID 规则 Class 规则 标签规则 通用规则 理解这些分类是关键,因为它们是构建规则匹配块的基础。 我在下面的段落中使用了术语 关键选择器(key selector) 。选择器的最后部分即为关键选择器(即用来匹配目标元素的那部分,而不是该元素的父辈元素)。 例如,在下面规则中… a img, div > p, h1 + [title] {…}   …关键选择器为 img, p,与 title. ID 规则 这一类别包含了那些将 ID 选择器作为关键选择器的规则。 示例 button#backButton {…} /* This is an ID-categorized rule */ #urlBar[type="autocomplete"] {…} /* This is an ID-categorized rule */ treeitem > treerow > treecell#myCell:active {…} /* This is an ID-categorized rule */   Class 规则 如果一个规则将一个 class 作为它的关键选择器,那么它就属于该类别。 示例 button.toolbarButton {…} /* A class-based rule */ .fancyText {…} /* A class-based rule */ menuitem > .menu-left[checked="true"] {…} /* A class-based rule */   标签规则 如果既没有 class 也没有 ID 来作为关键选择器,那么接下来的候选者就是 标签 类别。 如果一条规则将一个标签作为它的关键选择器,那么这条规则就属于该类别。 示例 td {…} /* A tag-based rule */ treeitem > treerow {…} /* A tag-based rule */ input[type="checkbox"] {…} /* A tag-based rule */   通用规则 不属于上面那些类别的规则都属于这个类别。 示例 [hidden="true"] {…} /* A universal rule */ * {…} /* A universal rule */ tree > [collapsed="true"] {…} /* A universal rule */   样式系统如何匹配规则 样式系统从关键选择器开始匹配规则,然后左移(查找规则选择器的任何祖先元素)。只要选择器的子树(substree)一直在检查,样式系统就会持续左移,直到和规则匹配,或者是因为不匹配而放弃。 规则过滤是你需要学习的最基础的概念。分类存在的意义就是过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)。 这就是能够极大增加性能的关键。对于一个给定的元素,需要匹配的规则越少,样式的解析就会越快。 举个例子,如果一个元素拥有一个 ID,那么只有匹配该 ID 的 ID 规则才会被检查。同理,只有当 Class 规则中的 class 出现在元素上时该规则才被检查。只有当标签规则的标签匹配时该规则才被检查。通用规则始终都会检查。 高效 CSS 指南 避免通用规则 规则不能以通用类型作为结束! 不要用标签或 class 来限制 ID 规则 如果规则的关键选择器为 ID 选择器,则没有必要为规则增加标签名。因为 ID 是唯一的,增加标签只会拖慢匹配过程。 差button#backButton {…}差.menu-left#newMenuIcon {…}好#backButton {…}好#newMenuIcon {…} 例外:When it’s desirable to change the class of an element dynamically in order to apply different styles in different situations, but the same class is going to be shared with other elements. 不要用标签名限制 class 规则 前面那节内容在这里同样适用。虽然在同一页面能够多次使用 class,但它仍然比标签名更独特。 按照惯例,你可以将标签名写到 class 名里。当然,这会有损灵活性;如果设计更改,标签变动,class 名也要跟着变动。(最好的办法是选择严格语义化的名字,毕竟分离样式表的一个目标就是为了灵活性。) 差treecell.indented {…}好.treecell-indented {…}棒.hierarchy-deep {…} 尽量使用最具体的类别 解析速度变慢的最大原因就是绝大多数规则都落进了标签类别中。为元素增加 class,我们就可以进一步的将这些规则划分到 Class 类别中,这将减少用于匹配标签的时间。 差treeitem[mailfolder="true"] > treerow > treecell {…}好.treecell-mailfolder {…} 避免后代选择器 后代选择器是 CSS 中耗费最昂贵的选择器。 它的耗费是极其昂贵的—特别是当选择器在标签或通用类别中。 通常我们在意的是 子选择器。比如说,当性能十分差的时候,Firefox 的 UI  CSS 将不需要任何理由的禁止掉子选择器。你也应该在网页中这么做。 差treehead treerow treecell {…}略好,但还是差(查看下一条指南)treehead > treerow > treecell {…} 属于标签类别的规则永远不要包含子选择器 标签类别的规则中避免使用子选择器。否则的话,在该元素出现的所有地方,匹配时间都将极大延长(特别是当规则很可能会被匹配) 。 差treehead > treerow > treecell {…}好.treecell-header {…} 在使用子选择器的地方想想为什么 当使用子选择器时要十分谨慎。能免则免。 一般来说,子选择器常常用于 RDF 树与菜单: 差treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon {…} 要记住,模板中的 REF 特性可以重复出现!好好利用这一优点。在子 XUL 元素上重复使用 RDF 属性,这样可以基于该属性来修改元素。 GOOD.tree-folderpane-icon[IsImapServer="true"] {…} 依赖继承 了解哪些属性能够继承,然后允许它们这样做! For example, XUL widgets are explicitly set up such that a parent’s list-style-image or font rules will filter down to anonymous content. It’s not necessary to waste time on rules that talk directly to anonymous content. BAD#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }GOOD#bookmarkMenuItem { list-style-image: url(blah) } In the above example, the desire to style anonymous content (without leveraging the inheritance of list-style-image) resulted in a rule that was in the Class Category, when the rule should have ended up in the ID Category—the most specific category of all! Remember: Elements all have the same classes—especially anonymous content! The above “bad” rule forces every menu’s icons to be tested for containment within the bookmarks menu item. Since there are many menus, this is extraordinarily expensive.  Instead, the “good” rule limits the testing to the bookmarks menu. Use -moz-image-region! Putting a bunch of images into a single image file and selecting them with -moz-image-region performs significantly better than putting each image into its own file. Use scoped stylesheets If you specify a stylesheet as an XBL resource, the styles only apply to the bound elements and their anonymous content. This reduces the inefficiency of universal rules and child selectors because there are fewer elements to consider.

css

CSS实现横线从文字中间穿过的效果

19. 六月 2013
转自:http://hi.baidu.com/volnzbbtqmdlsur/item/c40c28276413a0d10e37f9d8 之前被问到过如何实现这个效果的问题,今天在看淘宝UED团队博客的时候发现有这种效果。如下图:用firebug打开看了看,原来就是text-decoration属性的line-through样式。text-decoration:line-through只怪自己学艺不精。

css

css页面载入时增加一个mask层防止用户点击

3. 六月 2013
页面载入时增加一个mask层防止用户点击 做法: 1.添加css #mask{position:fixed;width:100%;height:100%;z-index:999999;background:0;_position: absolute;_height:600px;top:0;left:0;right:0;bottom:0;} 2.添加html <div id="mask"></div> 3.加载完成后Js去除 $("mask").hide()    

css

CSS文字链接灰掉效果

24. 五月 2013
CSS文字链接灰掉效果 .gray_im {   color: gray !important; } .cur_d {   cursor: default !important;   color: #808080 !important; } .td_n {   text-decoration: none!important; }

css

css解决文字不换行(word-break:break-all;)

27. 四月 2013
使用css:word-break:break-all; 转自:http://www.idivcss.com/xuexicss/318.html CSS样式怎么控制文字的强制换行 在默认情况下,如果文本的内容超过某个div块的宽度的话,就会发生自动换行,因为div块的white-space属性的默认值是normal。但是也有两种情况:   1、如果div块里是一串的文字内容,那么到了div块的width限制时,会自动换行。   2、如果div块里一串没有空格的字母或者数字的时候是那就不换行了,而是直接溢出div块。这时就要考虑css如何固定宽度文字换行了。   那CSS样式怎么控制文字的强制换行?   这时候我们需要用到word-wrap属性,还有一个属性word-break也能够解决换行问题,但是它的浏览器兼容性不好,并且还有可能导致其他问题,所以这里不建议使用。   word-wrap的break-word属性值可以导致换行,一般说来如果一个单词比较长的话,行末的空间不足以容纳这个单词就会产生换行,而不是将一个单词截断,word-break的break-all属性值可以截断一个单词。例如: <style type="text/css">     .first     {         width:120px;         height:60px;         border:1px solid blue;         word-wrap:break-word     }     .second     {         width:120px;         height:60px;         border:1px solid red;         word-break:break-all;     }   </style>  

css

Css字体加粗

25. 四月 2013
最简单的 strong { font-weight: bold;}

css

关于css虚线

23. 四月 2013
参考:http://zhidao.baidu.com/question/455308528.html border-bottom:1px #d9e2e9 dashed;

css

css两行宽度不等如何对齐

9. 四月 2013
css两行宽度不等如何对齐 white-space:no-wrap display:inline-block

css

CSS中#test{width:300px; *width:305px;}中星号的作用是什么?

23. 三月 2013
转自:http://zhidao.baidu.com/question/177667905.html这种用法属于CSS hack星号IE6和7可以识别结果就是在其它浏览器上宽度为300,在IE6和7上则为305 这样能保证页面在火狐、IE等不同浏览器中达到相同显示效果

css

css class的小贴士

25. 十月 2012
感谢:﹎涳.`鮊﹖o#a .b{}表示元素#a内部的元素.b的样式#a.b{}表示同时包含#a和.b的元素样式  #a.b{color:#f00;} 这样的权重比 #a{color:#000;}的权重高。#a.b{color:#f00;}#a{color:#000;};这样的话,下面的黑色是无法覆盖掉上面的红色的#a{color:#f00;}#a{color:#000;}这样的话, 最终应用的就是下面的黑色

css

background-position 属性设置背景图像的起始位置

7. 十月 2012
参考:http://www.w3school.com.cn/css/pr_background-position.asp 可能的值 值描述 top left top center top right center left center center center right bottom left bottom center bottom right 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 x% y% 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 xpos ypos 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。

css

css如何设置背景图片(url、起始位置、重复方式)background

3. 十月 2012
background:url("../images/joycitylogo.png") 0 0 no-repeat; 第一个参数url,第二个0 0是图片起始位置、图片重复方式no-repeat

css

css设置文字大小

28. 九月 2012
font-size:13px

css

css设置文字颜色

28. 九月 2012
color:#717171

css

css设置文字自动换行

28. 九月 2012
  word-wrap: break-word;

css

如何取消一个input的样式重新定义

7. 九月 2012
  input{ -webkit-appearance: none; border: none; background: rgba(0,0,0,0); border-radius: 0; }

css

如何通过定义样式将图片平铺到div里面

28. 八月 2012
<div class="activity-img"> <img src="{actImg}" alt="" /> </div>     .content-activity img{ width:100%; height:100%; } css3平铺 写法 display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; width: 100%; height: 60px; color: #576c89; line-height: 60px; text-align: center;

css

css中的overflow-x

25. 七月 2012
原文:http://www.yesky.com/imagesnew/software/css/css2/c_overflowx.html 语法: overflow-x : visible | auto | hidden | scroll  参数: visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的宽度。并且clip属性设置将失效auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条hidden :  不显示超过对象宽度的内容scroll :  总是显示横向滚动条 说明: 检索或设置当对象的内容超过其指定宽度时如何管理内容。参阅overflow属性。对应的脚本特性为overflowX。请参阅我编写的其他书目。 示例: body { overflow-x: hidden; }div { overflow-x: scroll; height: 100px; width: 100px; }  请您用下面的按钮选择这段文字的overflow-x属性的值。看一看会发生什么,然后您就会明白这个属性的意义。然后您就会明白这个属性的意义。希望您喜欢这本电子书。谢谢。 overflow-x : visibleoverflow-x : autooverflow-x : hiddenoverflow-x : scroll  

css