几乎没用到过的css 样式

1. :focus  选择器用于选取获得焦点的元素。

案例：http://www.w3school.com.cn/tiy/t.asp?f=css_sel_focus

2. clearfix清除浮动闭合容器之:after与:before

首先对伪类:before与:after做下注脚

:before 伪元素在元素之前添加内容。

:after 伪元素在元素之后添加内容。

这2个伪元素允许创作人员在元素内容的 最前面/最后面 插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。该二伪类不被IE6/7所支持。

好了，进入正题

在平常我们coding时候经常会发生子元素浮动而引起父级元素不能完全撑开的状况，

可能很多朋友给父级元素用overflow:hidden简单粗暴的解决，但这种方式有弊端，一是在IE6下不能完美解决，二是假如在该模块有定位的层就有定位层显示不完整的可能。

也有可能有些朋友是在父级元素里最后添加一个<div style=”clear:both”></div>来解决这个问题，但这样我们的HTML代码里就多了些冗余的代码且从语义化角度来看这也是不合理的。

案例：

<pre>.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

* html .clearfix{zoom:1;} /* IE6 */

*+html .clearfix{zoom:1;} /* IE7 */
时间： 2024-08-08 22:00:47

几乎没用到过的css 样式的相关文章

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

css样式(火狐的兼容性问题)

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 wid

css样式、选择器规则

css:页面样式,美化页面 css样式的三个规则 1内联式:直接写在html标签中 <p style="color:red"> 直接对html标签使用 style属性 语法:style="样式:值 样式:值" 优点:操控精准 缺点:不灵活,代码 2嵌入式:在<style>标签内给标签css样式 在head标签内 <style type=text/css> 优点:代码精简 缺点:控制不灵活 3外部式:建立单独的 .css文件 使用&

【03】全局 CSS 样式

全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. <!DOCTYPE html> <html lang="

使用 Grunt, Gulp, Broccoli 或 Brunch 移除页面内无用的 CSS 样式

英文原文:Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch 想要提高web的相应速度,一般都是通过降低响应时间,标准化 CSS/JS/HTML 以及图片的内容. 此外还能通过优化css removing unused CSS 来提高加载度. 下面看一下如何实现. 首先分享一些可用的工具. Added grunt-uncss at lunch time to my sites GruntFile, CSS file we

深入解析CSS样式层叠权重值(转)

前言:折腾了半天圆角,发觉border-radius是css3的新特性,简单粗暴的解决了button的圆角显示,中间由于css权重问题,导致即使我设置了圆角也一直没有生效.以下是找到的相当不错的一篇css样式权重讲解的,清晰明了,看完就懂是啥了. 永记在心: important > 内联 > ID > 类|属性|伪类 > 标签|伪元素  > 通配符 > 继承  (相对于原文的调整  属性选择和为对象均与类并列~) 简单记住这几个就够用了: important >

CSS样式的优先级

1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*标签,权值为1*/ p span{color:green;} /*两个标签,权值为1+

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "