在CSS中,模式(pattern)匹配规则决定哪种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素. 类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[…

一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). 而伪元素则用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after). 二.常用伪类 伪类 用法 兼容 :link 未访问的链接 主流浏览器都支持 :visited 已访问的链接 主流浏览器都支持 :hover 鼠标划过链接 主流浏览器都支持 :active 已选中的链接 主…

之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正了我的错误,所以今天打算好好研究下两者的区别.首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 css 无法描述的东西. 伪类种…

CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影响 Fixed定位: 元素的位置相对于浏览器窗口固定 即便串口滚动元素也不滚动 注: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持 Fixed定位使元素的位置与文档流无关,因此不占据空间 Fixed定位的元素和其他元素重叠. p.pos_fixed { positi…

一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用CSS2.1也可以用CSS3.XHTML骨架中可以用CSS3的样式. 在学习CSS之前都是学习选择器,在CSS2中有class.id.标签选择器等. CSS3赋予了强大的选择器. CSS3没有颠覆传统CSS的写法,依然是: 选择器{ k:v; k:v; } CSS有一个特点,遇见自己不认识的选择器.…

刚开始学习伪类和伪元素的时候,觉得好混乱呀,分不清有什么区别,用的时候也没注意对比.现在总结一下他们的区别吧. w3c中对它们的定义分别为: css伪类用于向某些选择器添加特殊的效果. css伪元素用于将特殊的效果添加到某些选择器. 好吧,这定义有点模糊. 伪类: 伪元素: 从作用范围上看,伪类是作用于整个元素上的,而伪元素则是作用于元素的一部分上: 例如,first-child将样式添加到第一个子元素上,first-letter将样式添加到元素的第一个字母上. 从效果上看,伪类相当于为元素添加…

 水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本居中对齐 .center { text-align: center; border: 3px solid green; } 图片居中对齐 左右对齐——position定位 左右对齐——float 垂直居中对齐 组合选择符 后代选择器(以空格分隔) div p { background-color:yello…

一.属性选择器 [att] 匹配所有具有att属性的 [att=val] 匹配所有att属性等于“val”的 [att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一个完整词) [att|=val] 匹配所有att属性仅仅只等于以val-’ 开头的或等于“val”(比如说zh-cn) [att*=val] 匹配所有att属性 包含’val’的字母 (val可以是字母) 类似模糊查询 [att^=val] 匹配所有att属性 ‘val’开头的 (val可以是字母)…

一.rgb值: RGBA 颜色 RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox +.Chrome.Safari 以及 Opera +. RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度. RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha).alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字. 实例 p { background-color:rgba(,,,0.5); } 二…

CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: 伪元素和伪类的区别从作用也可以看出 伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象.例如文档语言不能提供访问元素内容第一字或者第一行的机制.伪元素允许设计师引用它们,否则这是难以办到            的.伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例…