在图书馆借了这本书,讲的非常好,条理清晰,深入浅出,真的有一种和作者交流的感觉,解决了自己很多困惑,于是决定针对一些平时并不常用但是感觉会用到的知识点做一些笔记,加深印象。

一、

  块级元素盒子会扩展到与父元素同宽,如<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 设计指南》学习笔记 一

    本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...

  2. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  3. CSS设计指南之浮动与清除

    原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...

  4. CSS设计指南之定位

    原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...

  5. CSS 设计指南(第3版) 初读笔记

    第1章 HTML标记与文档结构 关于<title>标签:搜索引擎会给<title>标签中的文字内容赋予很高的权重.而且这些文字也会作为网页标题出现在搜索结果列表中. 无论你想了 ...

  6. 《CSS设计指南》阅读笔记

    一.HTML实体 HTML实体常用于生成那些键盘上没有的印刷字符.以一个和号(&)开头,一个分号(:)结尾,二者之间是表示实体的字符串. 如:“左引号(")     ”右引号(&qu ...

  7. css 权威指南笔记(一)

    零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...

  8. css权威指南--笔记

    第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...

  9. css 权威指南笔记( 五)结构和层叠之三种样式来源

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...

随机推荐

  1. 生成动态Lambda表达式1

    SqlDataReader生成动态Lambda表达式 上一扁使用动态lambda表达式来将DataTable转换成实体,比直接用反射快了不少.主要是首行转换的时候动态生成了委托. 后面的转换都是直接调 ...

  2. vue sourcemap详解

    从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手 ...

  3. ASP.Net Core 2.2使用SQLite数据库unable to open database file

    原文:ASP.Net Core 2.2使用SQLite数据库unable to open database file 最近把项目更新到了ASP.Net Core 2.2,发布之后发现在IIS下使用SQ ...

  4. 在当前页获取父窗口中母版页中的服务器控件的ID

    parent.document.getElementById("ctl00_ContentPlaceHolder1_txt_name").value=""; A ...

  5. 高科技 stuff

    热成像摄像机 收集特定频率的电磁波: 蓝色:温度较低:红色:温度较高

  6. java静态方法Static

    静态方法  是 与类  而  不是与对象 相关联的.

  7. 主干(trunk)、分支(branch )、标记(tag)

    主干(trunk).分支(branch ).标记(tag) 用法示例 + 图解   以svn为例,git的master相当于trunk,dev分支相当于branches --------------- ...

  8. 采用Fiddler建立Asp.net webapi与Android/IOS调试环境

    最近,他们正在做Android+Asp.net WebApi练习,通过发现visual studio debug模式启动Asp.net之后,无法响应Android寄过来http求,设置一个很好的休息不 ...

  9. Java Swing界面编程(29)---JCheckBox事件处理

    JCheckBox和JRadioButton的事件处理监听接口是一样的,都是使用ItemListener接口. package com.beyole.util; import java.awt.Con ...

  10. QSplitter实现自由伸缩滑动窗口部件(要在m_pSplitter中加入frame_4之前,给frame_4设置样式;之后设置无效)

    实现代码如下: #include <QSplitter> QSplitter *m_pSplitter; m_pSplitter = new QSplitter(ui->frame_ ...