HTML

1. HTML:超文本标记语言，是W3C制定的规范，描述网页结构的语言
   选择标签的标准：根据语义化你来选择HTML元素，因为每个HTML元素都有具体的含义
   HTML5元素周期表 MDN w3.org

2. CSS : 层叠样式表，是W3C制定的规范，描述页面展示的语言
   使用：
   内联样式 ： 样式标签里面写样式 一般是样式代码量不大最多200行左右的时候用

       ```html
           <style>
               选择器{
                   属性 : 属性值;
                   ...
                   color:red;
                   font-size:18px;
               }
           </style>
       ```
   

   ​ 行内样式 ： 标签里面写 元素的style属性 优先级最高
   ​ 外联样式[推荐] ： 外部样式表
   ​ step1 : **.css文件的创建 直接写css样式声明
   ​ step2　：link元素将需要的css文件引入进来

常用的样式声明

1. color 字体颜色 预设值 rgba 16进制设置（基础三原色，每个颜色由两个16进制的数字组成）
2. background-color 元素背景颜色
3. font-size 元素内部文字的尺寸大小
   px：绝对单位
   em：相对单位 父元素的字体大小 基准字号
4. font-weight 文字粗细程度 bold bolder 500-900
5. font-family
   文字类型
   必须是用户计算机中存在的字体才有效果。
   多个字体，以匹配不同环境
6. font-style
   字体样式，通常用它设置斜体
   i元素 默认样式 斜体 特殊的音调处理 实际使用中，通常用它表示一个小图标
   em元素 默认样式斜体 强调的内容
   strong元素 默认是加粗 表示重要的，不能被忽略的内容
7. text-decortation
   文本修饰，给文本加线

a元素 关于下划线的设置
del元素：错误的内容
s元素： 过期的内容

8. text-indent
   首行文本缩进
9. line-height
   每行文本的高度，值越大，每行的文本间距越大
   设置行高为容器的高度，可以让单行文本垂直居中
10. text-align
    元素内容文字的水平排列方式
11. letter-spacing
    文字间隙

CSS基础选择器

简单选择器

1. ID选择器

2. 元素选择器

3. 类选择器 Class选择

4. 通配符选择器

       *{}
   

   匹配出页面中的所有元素
   样式的重置
   一般能够继承的属性，通常会选择使用body元素选择器来代替
   因为通用选择器是加载一个元素就执行一次，效率低[相对而言，且不会特别大]

5. 属性选择器
   根据属性名和属性值选中元素

6. 伪类选择器
   选中某些元素的某种状态 匹配不同的状态

   • love hate 的顺序来设定
     link 超链接未访问时的状态
     visited 超链接访问过后的状态
     hover 鼠标悬停的状态 任何元素都有这个状态
     active 激活状态，鼠标按下状态

   focus 获取焦点时候的状态

7. 伪元素选择器
   :before
   ::before

   after

选择器的组合

1. 群组选择器
   ,
2. 后代选择器
   需要具备层叠关系的元素，被嵌套的元素都可以成为后代元素
3. 关系型选择器
   找兄弟
   找子元素

选择器的并列

1. 群组选择器
   ,

双重确定的找某个元素

优先级

样式的优先级

三种使用方式：从高到低
    狭义解释：行内样式优先级最高
        外部样式和内部样式的优先级，看谁是后来者，谁写在最后，听谁
        浏览器默认样式

css样式表特征

层叠性

1. 有冲突的时候
   声明冲突：同一个样式，多次应用同一个元素
   叠层：解决声明冲突的过程，浏览器自动处理(计算权重)

1.比较重要性

重要性从高到底：

1. 作者样式表中的!important样式 -编程人员写的样式-
   带有!important的样式优先级非常高 打破默认的优先级规则
2. 作者样式表中的普通样式
3. 浏览器默认样式表中的样式

2.比较特殊性 选择器的优先级

看选择器
总结出来的规则：选择器选中的范围越窄，越特殊

具体规范：通过选择器，计算出一个4为数(x x x x) 此处的四位数并不是逢10进1的数字

• 千位：如果是内联样式，记为1，否者记为0
• 百位：等于选择器中所有id选择器的数量
• 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
• 个位：等于选择器中所有元素选择器、伪元素选择器的数量

3.比较顺序

代码书写在后面的优先 后来者居上

• 重置样式表
  用程序员自己写的样式，覆盖浏览器的默认样式
  常见的重置样式表：rest.css meyer.css normalize.css…
• link > visited > hover > active

继承性

子元素会继承父元素的某些CSS属性

通常，跟文字内容相关的属性都能被继承

属性值的计算过程

敬请期待…

常用样式属性2

1. 尺寸
   width
   min-width 最小宽度
   max-width 最大宽度
   height
   min-height
   max-height

   允许被修改宽高的元素大部分是容器元素

2. 边框阴影
   box-shadow : h-shadow[水平方向的偏移量*] v-shadow[垂直反向的偏移量*] blur[模糊距离] spread[阴影尺寸*] color[颜色] inset[内阴影]

3. outline 轮廓
   绘制与元素周围的一条线，位于边框外加粗样式