《CSS 设计指南》笔记(Ⅰ)
在图书馆借了这本书,讲的非常好,条理清晰,深入浅出,真的有一种和作者交流的感觉,解决了自己很多困惑,于是决定针对一些平时并不常用但是感觉会用到的知识点做一些笔记,加深印象。
一、
块级元素盒子会扩展到与父元素同宽,如<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 设计指南》笔记(Ⅰ)的更多相关文章
- 《CSS 设计指南》学习笔记 一
本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...
- CSS设计指南之理解盒子模型
原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...
- CSS设计指南之浮动与清除
原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...
- CSS设计指南之定位
原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...
- CSS 设计指南(第3版) 初读笔记
第1章 HTML标记与文档结构 关于<title>标签:搜索引擎会给<title>标签中的文字内容赋予很高的权重.而且这些文字也会作为网页标题出现在搜索结果列表中. 无论你想了 ...
- 《CSS设计指南》阅读笔记
一.HTML实体 HTML实体常用于生成那些键盘上没有的印刷字符.以一个和号(&)开头,一个分号(:)结尾,二者之间是表示实体的字符串. 如:“左引号(") ”右引号(&qu ...
- css 权威指南笔记(一)
零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...
- css权威指南--笔记
第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...
- css 权威指南笔记( 五)结构和层叠之三种样式来源
CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...
随机推荐
- 在CentOS系统上将deb包转换为rpm包
转载自 http://www.heminjie.com/system/linux/1487.html deb文件格式本是ubuntu/debian系统下的安装文件,那么我想要在redhat/cento ...
- Unity UGUI——Rect Transform包裹(Anchor Presets)
Anchor Presets使用演示样品物业 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXJfQUhhbw==/font/5a6L5L2T/fonts ...
- ANT下载与安装--windows
原文:ANT下载与安装--windows 1.下载地址 http://ant.apache.org/bindownload.cgi: 2.版本信息 1.10.2 .zip archive 对应jdk ...
- Python 第三方库的安装
1. pip 进入命令行,使用 pip install pip install numpy 2. 含有 setup.py 文件的第三方库 切换到 setup.py 所在的目录: python setu ...
- Configure Two DataSources ---
67. Data Access 67.1 Configure a DataSource To override the default settings just define a @Bean of ...
- IdentityServer4实战 - 谈谈 JWT Token 的安全策略
原文:IdentityServer4实战 - 谈谈 JWT Token 的安全策略 一.前言 众所周知,IdentityServer4 默认支持两种类型的 Token,一种是 Reference To ...
- javascript常用的基础函数或方法——写给新手的我(持续补充)
1常用基础函数 alert函数:显示一个警告对话框,包括一个OK按钮.这就是传说中的警告框,此框一弹,世界就清静了.举例: alert("我一旦出现,之前出现的就算了,我屁股后面你们就歇 ...
- wpf控件开发基础(5) -依赖属性实践
原文:wpf控件开发基础(5) -依赖属性实践 知识回顾 接上篇,回顾这三篇讲了什么东西 首先说明了属性的现存问题,然后介绍了依赖属性的基本用法及其解决方案,由于依赖属性以静态属性的方式存在,进而又介 ...
- HashMap工作原理的介绍!
HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道HashTable和HashMap之间的区别,那么为何这道面试题如此 ...
- Haroopad 安装到 Mac OSX
打开Terminal 控制台 粘贴运行代码安装换cask: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/ ...