CSS基础知识总结--《CSS权威指南》阅读笔记(一)
来源:互联网 发布:10年前的网络歌曲 编辑:程序博客网 时间:2024/05/22 15:07
我在阅读这本书的时候,不算是一个CSS新手了,阅读这本书是为了再巩固一下基础,查漏补缺。下面将一些容易被疏忽的知识点罗列出来。
一、link与@import异同点
相同点:两者都可以引用外部样式文件。
不同点:link标签一定要写在head标签里面,@import指令一定要出现在样式文件或者用style标签包含的样式表中的最前面。另外,link标签可以通过设置属性rel值为alternate stylesheet使之成为候选样式表。但@import指令无法指定候选样式表,其中的样式文件一定会加载。
二、向后可访问性
较老的浏览器可能不识别<style>和</style>,就会忽略掉。但标记里面的样式表声明不会忽略,所以会以文本的形式出现在页面最上面,为了解决这个问题,建议将声明包含在一个注释标记中。如
<style type="text/css"><!--@import url(sheet2.css);h1{color:maroon;}--></style>
三、CSS相邻元素选择器
比如:
h1+p{margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。也就是说,他只对p起作用,对h1不起作用。
再比如
h1+p+p{margin-top:50px;}
它选择的是与h1相邻的p再相邻的p,只对最后一个起作用。
四、CSS部分属性选择器
- 属性值是词列表的(词之间用空格分隔),根据其中的任何一个词进行选择,符号~=,例如 [title~="hello"]。
- 特定属性,举例[lang|="en"],匹配lang属性为en或者以en-开头的
- 子串匹配属性选择器。如[foo^="bar"] 以bar开头;[foo$="bar"]以bar结尾;[foo*="bar"]包含子串bar。
五、CSS伪类选择器
什么是伪类?以锚元素(a)为例,链接有已访问的和未访问的之分,如何区别呢?唯一的办法就是将文档中的链接与用户的浏览历史记录相比较。所以有两种基本的锚类型:已访问的和未访问的,这些类型成为伪类。
- 链接伪类 :link,:visited。它们是静态的,第一次显示之后,它们一般不会再改变文档的样式。
- 动态伪类 :focus,:hover,:active。
- 伪类的顺序:link-visited-focus-hover-active,将在下一章结构与层叠中解释为什么顺序很重要。
- 动态伪类可以用于任何元素
- 一种不合规范的设计:
a:link,a:visited{font-size:13px;}a:hover{font-size:20px;}
鼠标指针停在锚上时增加锚的大小,这样必须重绘文档,重新显示该链接之后的所有内容。而CSS规范指出,文档第一次显示之后,用户代理不必重绘文档,所以不能完全依赖预想的结果。一种解决办法就是将链接设为块状元素并设置宽高,这样链接就会占据固定的空间大小,不会影响后面的文档显示。 - 不要写这样的CSS:
a{color:red;}
你的本意是想改变所有链接的颜色,但实际上a还包括命名锚(页内书签),所以这种情况下使用伪类。 - 对静态伪类:first-child的误解:举例
p:first-child{font-weight:bold;}
解释:将某元素的第一个子元素,如果是p的话,就将其设置为粗体。很容易误解为将所有p元素的第一个子元素设置为粗体,其实记住伪类是将某种幻想类与相关的元素关联,作用于具体指明的某类元素。上面这个例子就是作用于p元素,而不是某种未知的元素——p元素的第一个子元素。 - 根据语言选择 :lang()。该伪类与属性选择器|=类似,区别在于语言信息不一定是通过lang属性指定,可以从很多来源得到,一般情况下使用伪类较多。
六、CSS伪元素选择器
:first-letter 设置首字母样式
:first-line 设置块级元素的第一行文本的样式,无论显示区域多大都是如此
:first-letter和:first-line支持的CSS属性有限。另外所有伪元素必须出现在该伪元素的选择器的最后面
:before和:last分别设置之前和之后元素的样式,可以插入内容
- CSS基础知识总结--《CSS权威指南》阅读笔记(一)
- CSS基础知识总结--《CSS权威指南》阅读笔记(二)
- CSS 权威指南 阅读笔记
- CSS权威指南阅读笔记(四)--值和单位
- CSS权威指南阅读笔记(五)--字体
- CSS权威指南阅读笔记(十)--浮动和定位
- CSS权威指南 笔记
- 《css权威指南》笔记
- 《css权威指南》笔记
- css权威指南阅读笔记(三)--结构和层叠
- CSS权威指南阅读笔记(六)--文本属性
- 《css权威指南》--读书笔记(一)
- hadoop 权威指南 阅读笔记(一)
- 《HTTP权威指南》阅读笔记(一)
- hadoop权威指南阅读笔记(一)
- MongoDB权威指南--阅读笔记(一)
- CSS权威指南学习笔记(1)
- css权威指南(第三章)笔记
- UVa 253 Cube painting(骰子涂色)
- jQuery实战笔记(一)-jQuery基本原理
- 再谈大可乐3:众筹昭示未来可期
- c++ primer plus 习题5.7(使用new为结构创建动态数组)
- Java开发中的23种设计模式详解(转)
- CSS基础知识总结--《CSS权威指南》阅读笔记(一)
- (转)林达华推荐的几本数学书
- java设计模式中的5种写单例的方式
- 在 github 上获取源码
- Extjs 关于列column 排序问题
- Apache Storm 集群环境搭建
- String类练习二
- iPhone获取状态栏和导航栏尺寸(宽度和高度)
- 十、PYTHON 学习之装饰器加深理解