《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);
<link
rel="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。
- justify-content ： 指定网格元素的水平分布方式
- align-items ： 垂直对齐网格所有项目
第20章 动画
- transition 过度
- animation 动画
