CSS基础知识总结--《CSS权威指南》阅读笔记(一)
2015-01-14 13:24
525 查看
我在阅读这本书的时候,不算是一个CSS新手了,阅读这本书是为了再巩固一下基础,查漏补缺。下面将一些容易被疏忽的知识点罗列出来。
一、link与@import异同点
相同点:两者都可以引用外部样式文件。
不同点:link标签一定要写在head标签里面,@import指令一定要出现在样式文件或者用style标签包含的样式表中的最前面。另外,link标签可以通过设置属性rel值为alternate stylesheet使之成为候选样式表。但@import指令无法指定候选样式表,其中的样式文件一定会加载。
二、向后可访问性
较老的浏览器可能不识别<style>和</style>,就会忽略掉。但标记里面的样式表声明不会忽略,所以会以文本的形式出现在页面最上面,为了解决这个问题,建议将声明包含在一个注释标记中。如
三、CSS相邻元素选择器
比如:
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。也就是说,他只对p起作用,对h1不起作用。
再比如
它选择的是与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,将在下一章结构与层叠中解释为什么顺序很重要。
动态伪类可以用于任何元素
一种不合规范的设计:
鼠标指针停在锚上时增加锚的大小,这样必须重绘文档,重新显示该链接之后的所有内容。而CSS规范指出,文档第一次显示之后,用户代理不必重绘文档,所以不能完全依赖预想的结果。一种解决办法就是将链接设为块状元素并设置宽高,这样链接就会占据固定的空间大小,不会影响后面的文档显示。
不要写这样的CSS:
对静态伪类:first-child的误解:举例
根据语言选择 :lang()。该伪类与属性选择器|=类似,区别在于语言信息不一定是通过lang属性指定,可以从很多来源得到,一般情况下使用伪类较多。
六、CSS伪元素选择器
:first-letter 设置首字母样式
:first-line 设置块级元素的第一行文本的样式,无论显示区域多大都是如此
:first-letter和:first-line支持的CSS属性有限。另外所有伪元素必须出现在该伪元素的选择器的最后面
:before和:last分别设置之前和之后元素的样式,可以插入内容
一、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基础知识【复习之一】
- HTML+CSS基础知识整理总结2015.3.9
- HTML`CSS_我用的过程中记下的基础知识总结
- HTML/CSS基础知识总结
- html+css 基础知识大总结
- CSS基础知识总结之基本概念
- 黑马程序员-html+css基础知识总结
- 【CSS+DIV网页样式与布局】——基础知识总结
- css基础知识总结
- CSS基础知识总结
- CSS基础知识总结之背景、尺寸、显示、盒子、定位
- html+css基础知识总结
- HTML+CSS基础知识整理总结2015.3.10
- CSS基础知识总结之颜色、单位
- css基础知识2 —— 关于css选择器( > , + , ~ )的总结
- 对CSS基础知识学习的一些总结
- HTML+CSS基础知识整理总结2015.3.11
- JAVA基础知识精华总结
- JAVA基础知识精华总结