《HTML 5与CSS 3核心技法》读书笔记

前言

• 《HTML 5与CSS 3核心技法》这本书读起来很顺畅，也有效果展示，对我学习CSS和页面布局有所帮助，特此做个笔记，同时也有些是自己实践的理解。

第1章 写在前面

• HTML和CSS的关系？

HTML是骨架，CSS是皮肤

第2章 HTML 语法基础

• 元素。

构成网页的基本单位

• 元素的属性。

元素自身携带的功能和特性。

第3章 布局类元素 ，房子的楼板、柱子和大梁

• html

最外层的元素，包含网页的全部内容

• head

包含给机器看的内容

• body

包含给人看的内容，用户看到的页面内容

• div

结构级别容器

• main

用于包裹页面的主体内容

• nav

导航栏

• header

头部，概述

• section

用于包裹有明确主题的区域

• aside

用于包裹非主体的内容

• footer

底部，页脚

第4章 功能类元素，房子的门、窗、水管和电气

• a

超链接

• h1 ~ h6

标题

• img

图片

• p

段落

• input

单行文本输入框

• textarea

多行文字输入框

• select

下拉菜单

• button

按钮

• form

表单

• span

文字级别的容器 /

• strong

强调

• ol

有序列表

• ul

无序列表

• table、thead、th、tbody、tr、caption

表格类元素

• iframe

网页里嵌套的网页

第5章 CSS基础

• 为什么不直接在HTML代码中写样式？

复用

• 引入CSS的方式。

<style>标签
<link>标签
@import
style属性嵌入行内样式

第6章 选择器，确定样式的作用范围

选择器类型

元素(标签)选择器
类选择器，class属性定义的
ID选择器
属性选择器
全局选择器，比如body * {}

选择器的组合使用

• 分组选择，多个选择一套样式

// a标签和p标签字体都是红色a,p{
color: red;
}

• 多条件选择，多个选择同一元素

<div class="clz1  clz2">xxx</div><style>
// 选择同时拥用clz1和clz2的元素
.clz1.clz2{
}</style>

• 后代选择，通过先人找后人

 <div ><span>xxx</span></div><style>div span{
}</style>

• 子选择，通过爸爸找儿子

 <div id="parent"><span>xxx</span></div><style>#parent > span{
}</style>

• 相邻兄弟，找弟弟

 <div id="me">我</div>
<div>弟弟</div><style>#me + div{
}</style>

• 通过兄弟选择，找所有弟弟

 <div id="me">我</div>
<div>弟弟</div>
<div>弟弟</div>
<div>弟弟</div><style>#me ~ div{
}</style>

• 伪类，按元素状态指定样式

hover 悬停
active 激活状态
focus 聚焦
checked 勾选
disabled 禁用
enabled 可用
empty 空值
first-child 老大，第一个
last-child 老末，最后一个
nth-child(n) 排行第n个
nth-last-child(n) 倒数排行第n个
first-of-type 同类中老大
last-of-type 同类中老末
nth-of-type(n) 同类排行第n个
nth-last-of-type(n) 同类倒数排行第n个
not() 排除
only-child 独苗，选中没有兄弟的元素

• 伪元素

before 前缀元素
after 后缀元素
first-line 首行
first-letter 首字
placeholder 空白占位
selection 选择范围

第7章 权重，样式发送冲突时怎么办

• 权重级别

加!important最高 > 行内样式style属性 > ID选择器#id > 类选择器.class，属性选择器[href]，伪类:active > 元素选择器 div ，伪元素 :before

第8章 给文字加样式

• 块元素占整行，一切元素默认情况下，统一趋向于文档的左上角。
• text-indent ， 文字缩进
• text-align ，文字对齐
• line-height ， 行高
• vertical-align 文字垂直对齐
• letter-spacing ，字距
• word-spacing ，词距
• text-decoration ，文字装饰
• text-decoration-line ，装饰线
• text-decoration-color ，装饰颜色
• text-decoration-style ，装饰风格
• text-shadow ，文字阴影
• white-space ， 空白字符
• word-break ， 换行和断词

第9章 字体

• font-family ， 声明要使用的字体，调用客户端的字体
• @font-face ，为文字指定确切的字体，从服务器引入
• font-weight ， 为字体指定粗细
• font-size ， 指定字体大小

第10章 框模型 ，所有元素都有四个框

• 内容区
• padding，内边距
• border ，边框
• margin ， 外边距

第11章 框的其他相关样式

• outline ， 轮廓
• color，文字颜色
• background， 背景
• box-sizing ，框尺寸，指定元素宽度从哪里算起
• box-shadow ， 框阴影
• overflow ， 溢出

第12章 显示方式 ，元素怎么显示

• none 不显示
• block 占父元素整个宽
• inline 宽度由内容决定
• inline-block 结合inline和block自由伸缩指定宽高。

第13章 定位方式，元素该显示在什么位置

• static ， 网页左上角流动，默认
• relative ， 相对定位，相对于之前位置
• absolute ，绝对定位 ，参照物是父级相对定位或父级绝对定位
• fixed ，固定定位，与窗口同步
• sticky，黏滞定位，滑动滚动条时会自动挂住

第14章 元素层叠顺序

• z-index，非static定位才有效，值越大显示越前面。还要注意层级关系，有时候要让元素的父级的z-index增大才能达到层叠的效果。

第15章 值和单位

• calc()，计算值
• 颜色： transparent 透明色 ； currentColor 当前元素的颜色 ；RGB模式；HSL模式 ； Alpha 通道 不透明通道

第16章 浮动

• 浮动最初的目的是实现图文混排的效果。

第17章 响应式布局

• 媒介查询常用类型

all ： 所有媒介
screen ： 显示屏。如电脑、手机、电子阅读器。
print: 打印显示

宽和高的范围

// 如果视窗小于450px，则加载大括号里的所有样式
@media (max-width: 450px){a{color: red;}
}

页面比例

// 长大于宽
@media (orientation: landscape){a{color: red;}
}

规则组合

// 视窗宽度大于800 并且 长大于宽
@media (min-width: 800px) and (orientation: landscape) {a{color: red;}
}

添加媒介查询的常见方式

• @import
• <link>

@import url('style.css') screen and (orientation: landscape);

 <linkrel="stylesheet" href="style1.css"media=""/>

• <style>

<style media=""></style>

第18章 弹性布局

• flex-direction，控制主轴方向
• flex-wrap，子项是否可以换行
• flex-flow，同时指定方向和换行模式
• justify-content，主轴方向排列方式
• align-items，交叉轴方向排列方式
• align-content，行列排列方式
• align-self，交叉轴例外排列
• flex-grow，填充容器的剩余空间
• flex-shrink，在空间不足时做出让步
  flex-basis，弹性子项的基础尺寸

第19章 网格布局

• display: grid或inline-grid 定义为网格布局
• grid-template-rows ，定义行宽。
• grid-template-columns ， 定义列长。
  • grid-template-columns：repeat(4,1fr) 4列每列占一份，平均4列
• grid-row-gap 行间距
• grid-column-gap 列间距
• grid-row-start 调整子项的行起始位置
• grid-row-start 调整子项的行结束位置
• grid-column-start 调整子项的列起始位置
• grid-column-start 调整子项的列结束位置
• grid-template-areas 调整网格中区域
• justify-items和align-items 定义网格排列方式
  • 特殊的对齐情况用哪个justify-self和align-self。

第20章 动画

• transition 过度
• animation 动画