web基础（二）：css简单知识

html:结构
css:样式
js:行为

1.主流浏览器及其内核

shell	内核
IE	trident
Firefox	Gecko
Google chrome	webkit/blink
safari	webkit

参考博客：https://blog.csdn.net/zhy0929/article/details/88774703

2.css三种引入方式

2.1 行间样式

使用style属性引入：

效果：

2.2 页面级css

在head中的style标签中设置：

效果：

2.3 外部css文件

引入外部css文件：

效果：

3.css选择器

参考手册：https://www.w3school.com.cn/cssref/css_selectors.asp
详解：https://blog.csdn.net/wangchaohpu/article/details/82413850

3.1 id

页面唯一，可精准定位元素

3.2 class

不是页面唯一

3.3 标签选择器

效果：

3.4 通配符

所有元素

效果：

3.5 伪类选择器

.hover 等，参考博客：https://blog.csdn.net/wangchaohpu/article/details/82413850 即可。

3.6 父子选择器（即派生选择器）

浏览器寻找匹配标签时，从span–>div这样的顺序

3.7 直接元素选择器

效果：

3.8 并列选择器

3.9 分组选择器

3.10 伪类选择器

hover
https://www.w3school.com.cn/cssref/selector_hover.asp

3.11 选择器优先级

优先级：!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
可用css权重来具体区别：

类型	权重
!important	infinity
行间样式	1000
id	100
class/属性/伪类	10
标签/伪元素	1
通配符	0

注：（多个选择器权重相加）权重相同，后面的选择器覆盖前面的选择器。

4.css属性

css属性参考手册：https://www.w3school.com.cn/cssref/index.asp
画一个三角形：效果：

剩下一个三角形：

4.1 常用属性

文本属性：
对齐方式：text-align:left（左对齐）、right（右对齐）、center（居中）；
文本高度：line-height；
https://www.w3school.com.cn/cssref/pr_dim_line-height.asp
文本在容器中垂直居中，可设置文本高度等于容器高度；
首行缩进：text-indent:2em;
em：是一个相对大小，相对所指的是相对于元素父元素的font-size；
文本装饰：text-decoration：none（默认，没有线）、underline（文本下方线）、overline（文本上方线）、line-through（穿过文本线）、blink（闪烁）

光标类型：cursor：text（文本）、pointer（一只手）
直接参考文档
https://www.w3school.com.cn/cssref/pr_class_cursor.asp

开发过程一般先写css，再给标签分配；
标签选择器主要是用来给标签初始化样式
通配符选择器可以初始化所有标签格式