1-CSS基础知识

工作几年发现自己的css写的并不是非常出色，市面上的css书籍版本都太过陈旧。这本精通css（第三版）刚好适合我，以下是自己学习这本书的笔记

基础知识

css都是向后兼容的，渐进增强html和css已经内置一部分了，如果新的html或者css属性不被浏览器支持，那么这个属性会成为默认属性
如：

1	<input type="email" /> 这是设置type属性为email 如果不支持会被设置成text

任何浏览器无法识别的属性或者值都会被丢弃，因此提供合理的后背声明就不会带来不良后果如：background-color的rgba()写法

条件规则

1
2
3

@supports (display:grid){
    //浏览器支持网格布局情况下的规则，ie的edge才支持
}

语义化标记即在正确的地方使用正确的元素，而得到有意义的文档
优点：

1. 可以确保更多的人都能使用，不管他们用什么设备
2. 更利于seo优化，即利于搜索引擎的搜索结果的排名

CSS最新实践都建议应该给网站一组基础的样式，这样无论之后添加什么元素都不需要再写样式，即默认的样式
如：

h1、h2...
p、ul、ol、dl...
strong、em
blockquote、cite
...

这样做的好处

1. 可以当做校准样式使用
2. 在不断修改css过程中可以检查自己是否无意覆盖不该覆盖的样式

html5新增了一批结构化元素

section
header
footer
nav //导航组件
article //独立内容
aside
main //用于高亮主要内容区域 页面中只出现一次，并且好像没啥亮的

PS：如果想在IE8及更早的浏览器中使用新元素浏览器不会给不认识的元素应用上样式，所以如果要兼容更早的浏览器需要引入一个js依赖html5shiv.js

在没有更合适的语义的结构化元素时候使用它们
添加样式来添加元素一样可以用

b和i以前分别用于将文本标记为粗体和斜体，html5中保留了它们只是改变了它们的含义

i 元素用于表示与周围内容不一样的内容，排版上为斜体比如一艘船的名字
b 元素和i的含义一样，比如标记商品的名字

与em strong元素的区别
如果没有强调包含的意味大部分还是使用em和strong元素表示斜体粗体比较合适

验证html和css是否正确