HTML与CSS学习总结（二）

HTML与CSS学习总结（二）

常用标签介绍

• div 没有一个明确的用途，看情况，就相当于划定一个区域、一个盒子，把一些东西装起来，方便以后使用。
• span 划分某几个字或者某一段话（当要给几个字或一段话添加格式时）。
• list <ul> <li>内容1</li> <li>内容2</li> </ul>—无序列表
  • <ol> <li>内容1</li> <li>内容2</li> </ol>—有序列表
• form 表单
• button 按钮
• header 和 nav 用来装一些导航栏之类的东西

inline和block

Block-level Elements

—块元素独占一行，例：h1,p,header…

Inline Elements

—不会独占一行，例：span

（就是说inline的宽度就是内容宽度，block的宽度是整个网页宽度）

---

通过HTML属性来添加CSS样式

使用style标签添加CSS

CSS语法：

选择器 {
	属性名：属性值；
}

一般会把CSS写在一个单独的文件中，在HTML中使用link来连接到它

注意：如果两个文件不在同一文件夹下，要在引用的时候加相对路径！

CSS选择器

• 一般只要写元素名就可以：它会选择所有的这个元素
• class（class可以有多个）要写 “.名字” ：只会选择是这个class的元素
• id（id只能有一个）要写 “#名字” ：只会选择一个叫这个id的元素
• • " * "：就是选择所有元素
• 选择多个元素： 元素一，元素二
• 选择后代的元素：元素一（空格）元素二
• 子选择器：元素一 > 元素二
• 选择直接跟在元素一后面的元素二（同级）：元素一+元素二
• 伪选择器：例：a:hover—就是鼠标在a上盘旋的时候它的样式改变

CSS优先级和权重

• 顺序
  • CSS顺序
    
    它只会变成黄色（后面的顺序会覆盖前面的顺序）
  • link<style标签<style属性
  • link的顺序：谁在下面就听谁的
    （类似于=赋值的规则）
• 明确程度
  越明确优先级越高
  
• !important优先级最！！！高（最好不要用）
  

继承

子级标签会继承父级标签的属性、样式