《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 动画

posted on 2023-02-13 08:45  愤怒的苹果ext  阅读(17)  评论(0)  编辑  收藏  举报  来源

导航