随笔分类 -  CSS

摘要：HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美 观。可以通过添加如下两个样式:1.禁用拖动2固定大小.1：彻底禁用拖动（推荐）resize:none;2：只是固定大小，右下角的拖动图标仍在width:200px;height:100px;max-width:200px;max-height: 阅读全文

摘要：CSS为什么要初始化？建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法就是：*{padding: 0; margin: 0;}。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。写过css的都知道每个网 阅读全文

摘要：选择文本，背景是红色，而文本是白色的问题，如下图所示：或许大家对这样的实现并不陌生，可是有很多童鞋可能跟我一样，并不知道是如何实现，因为在默认情况下，选择网站文本都是深蓝的背景，白色的字体,就如下本站的而言，选择文本后，背景是深蓝色，而选中的文本就是白色，如下图所示：后来带着这样的问题，我也是到处寻找解决的方法，几经高人指点，说是CSS的“::selection”实现的，这样一来在google中大量搜索有关于“::selection”的使用方法，功夫不负有心人，总算是搞清楚了。后来觉得这个蛮有意思的，特意整理出来与大家一起分享。就如前面所言，大家都知道浏览器对选中的文本默认样式都是统一的，Wi 阅读全文

摘要：/*-----------------------------------------------------------------------------Prototype Style Sheet (empty commented stylesheet)version: 1.0author: andy buddemail: info@andybudd.comwebsite: http://www.andybudd.com/--------------------------------------------------------------------------... 阅读全文

摘要：阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。一般可以分为box-shadow和textshadow两类。CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx;Apx = x轴Bpx = y轴Cpx = 投影长度#XXX = 像通常一样的颜色了解了这些，我们就可以以下面的方法开始体验了…浏览器兼容性：在前面的介绍中，我们已经声明，并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari，也就是说，我们现 阅读全文

摘要：CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，力求让您看完本文后对position有着最全面的认识。position的四个属性值：relativeabsolutefixedstatic下面分别讲述这四个属性。<divid="parent"><divid="sub1">sub1&l 阅读全文

摘要：1 /* Reset CSS 描述： 2 1.reset的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 3 2.reset的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 4 3.reset期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 5 */ 6 7 /**清除内外边距**/ 8 body, h1, h2,h3,h4,h5,h6,hr,p,blockquote, /*structural结构元素*/ 9 dl,dt,dd,ul,ol,li, /*list列表元素*/10 ... 阅读全文

摘要：去除firefox中 submit button 中文章的虚线1 button::-moz-focus-inner,2 input::-moz-focus-inner {3 padding: 0;4 border: 0;5 }ie之中1 :focus{outline:none;} 阅读全文