pseudo-classes 伪类选择器(元素自身
a:link a:hover a:first-child
pseuso-elements 伪类元素(元素内容
p::first line p::first-letter p::before
HTML 中
<! doctype html>代表html版本,使用特定的渲染模式
DOM文档对象模型
DOM树是把html代码分为树形的结构
html列表
- 无序列表
- 标题+列表型标签
input标签
其中的type属性有:range number date checkbox radio(单选,前提是name属性相同) 提供选择选项
多行代码可以用pre code标签包起来
strong和em标签强调的内容不同HTML语义化指的是 HTML中的元素,属性,属性值都拥有含义
在写代码的时候,避免大篇幅的使用无语义的标签。
好处:代码可读性,可维护性,搜索引擎优化,提高无障碍性
CSS
包在*里的可以将不可继承属性变为可继承属性
初始值:CSS中每一个属性都有一个初始值
比如background-color的初始值为transparent等等
content-box
border-box标签选择器 全局生效 覆盖广 类选择器 伪类选择器 用来选择特定状态元素 a:hover 伪元素选择器 .a::before 给元素内部 开头或结尾添加内容 属性选择器 包含该属性的所有元素或者该属性被赋为某值的元素 通配选择器 * 页面所有元素
组合选择器 A B代表A类中的B A> B代表A的直接子元素B AB代表既是A又是B的元素 A,B 代表分别选中A和B A+B选择A下一个相邻的元素B A~B选择A相邻的所有的B
CSS选择器的优先级
!important > 内联样式 > 选择器设置样式
浏览器默认样式 > 来自继承的样式
优先级相同 则前面覆盖后面继承属性:设置后自动继承给后代元素
• color、 font-size、font-family、line-height ...
• 非继承属性:只对当前元素生效
• border、background、margin、padding、display ...font-size
• font-size: 20px; 中文最小12px;
• font-size: 2em; 设置为来自继承的font-size的2倍
• font-size: 2rem; 设置为html根节点(默认16px)font-size的2倍
除了font-size 其他有关字体的属性若用到2em均是此时当前属性的字体大小的两倍margin collapse
margin collapse发生在父元素和子元素之间,前提是垂直边距间不存在padding(内边距)和边框。所以可以通过增加padding属性,或边框,防止叠加。
- 有序列表
- 标题+列表型标签