《CSS设计指南》笔记(Ⅰ)
2014-01-14 21:00
239 查看
在图书馆借了这本书,讲的非常好,条理清晰,深入浅出,真的有一种和作者交流的感觉,解决了自己很多困惑,于是决定针对一些平时并不常用但是感觉会用到的知识点做一些笔记,加深印象。
一、
块级元素盒子会扩展到与父元素同宽,如<p><h1><ol><li>。
行内元素盒子会“收缩包裹”其内容,并且会尽可能包紧,如<a><img><em><strong>。
二、不常用选择符
1. 特殊上下文选择符
(1)子选择符,标签1 > 标签2,标签2是标签1的子元素,标签1只能是标签2的父元素,不能是其他祖先元素
(2)紧邻同胞选择符,标签1 + 标签2,标签2必须紧跟标签1
(3)一般同胞选择符,标签1 ~ 标签2,与上面相似,但不限制紧跟
2. 属性选择符
(1)属性名选择符
(2)属性值选择符
3. 伪类
(1):focus伪类
(2):target伪类,如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target选中它。
在用户单击id为more_info的元素时,为该元素添加浅灰色背景。(例子:维基百科引证中使用该伪类,否则太多引证不好分辨)
(3)结构化伪类,:first-child,:last-child,:nth-child应用于一组同胞元素中的第一个、最后一个或者某个(些)元素
4. 伪元素
(1)::first-letter,::first-line
一、
块级元素盒子会扩展到与父元素同宽,如<p><h1><ol><li>。
行内元素盒子会“收缩包裹”其内容,并且会尽可能包紧,如<a><img><em><strong>。
二、不常用选择符
1. 特殊上下文选择符
(1)子选择符,标签1 > 标签2,标签2是标签1的子元素,标签1只能是标签2的父元素,不能是其他祖先元素
section > h2 {font-style:italic;}
(2)紧邻同胞选择符,标签1 + 标签2,标签2必须紧跟标签1
(3)一般同胞选择符,标签1 ~ 标签2,与上面相似,但不限制紧跟
2. 属性选择符
(1)属性名选择符
img[title] {border:2px solid blue;}
(2)属性值选择符
img[title="red flower"] {border:2px solid blue;}
3. 伪类
(1):focus伪类
input:focus {border:1px solid blue;}
(2):target伪类,如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target选中它。
<a href="#more_info">More Information</a> <h2 id="more_info">This is the information......</h2>
#more_info:target {background:#eee;}
在用户单击id为more_info的元素时,为该元素添加浅灰色背景。(例子:维基百科引证中使用该伪类,否则太多引证不好分辨)
(3)结构化伪类,:first-child,:last-child,:nth-child应用于一组同胞元素中的第一个、最后一个或者某个(些)元素
ol li:first-child {color:blue;} ol li:last-child {color:red;} li:nth-child(3) li:nth-child(odd) li:nth-child(even)
4. 伪元素
(1)::first-letter,::first-line
p::first-letter {font-size: 300%;} p::first-line {color: green;}
相关文章推荐
- css设计指南-笔记1
- CSS设计指南笔记
- 《CSS设计指南》笔记--HTML标记与文档结构
- 《CSS设计指南》笔记--CSS工作原理
- css设计指南-笔记2
- css设计指南-笔记3
- css设计指南-笔记4
- 《css设计指南》 读书笔记 二
- css设计指南-笔记5
- css设计指南-笔记6
- css设计指南-笔记7
- dotNet学习笔记-浅谈.Net的事件代理
- win32 dll学习笔记
- 代码大全2笔记-第四章-“构建”前的决策
- 笔记,零散的东西
- Eclipse 源代码阅读笔记2 - Eclipse 文本编辑器
- IE8"开发人员工具" 笔记
- C#笔记19:多线程之线程启动、参数、返回值
- C++ Primer 学习笔记(1) : 基本语言
- Android游戏开发学习笔记(1)