初学css

css使用有三种形式

第一种：直接添加`

<div style="background-color:green;">  
          好好学习，天天向上0
      </div>

它的特点是三种优先级最高的，但是影响范围小。

第二种：业内样式表

<style>
  div{
    background-color: crimson;
  }
</style>

特点：优先级与独立样式表一致，但仅能影响本页面。

第三种：独立样式表

div{
    background-color: red;
    font-size:large;
}   
div ul{
    background-color: blue;
}
form > input{
    background-color: yellowgreen;
}
input[name='user-phone']{
    background-color: yellow;
}

<link rel="stylesheet" href="learn.css"/>

通过编写.css文档可以实现代码的复用，需要时引入即可。
特点：优先级与业内样式表一致，注意（若是两者共同使用会根据加载顺序， 后加载覆盖先加载使后者生效）

绝对路径与相对路径

<link rel="stylesheet" href="learn.css"/>
<link rel="stylesheet" href="‪d:/mhycss/learn.css"/>

推荐使用相对路径（第一条）

选择器

元素选择器：div table p标签等

div{
    background-color: red;
    font-size:large;
}

类选择器：.xxx(xxx为类名）

.div-test{
    background-color: blue;
}

id选择器： #xxx（xxx为id）

#div0{
    background-color: blueviolet;
}

后代选择器： div ul 无论div和ul之间隔了多少代 都能选到-

div ul{
    background-color: blue;
}

子选择器： div > ul 只能是div的孩子 不能中间隔代

div>ul{
    background-color: blue;
}

分组选择器： div , .p , #table 代表所有的div p table 都受影响
属性选择器：

input[name='user-phone']{
    background-color: yellow;
}

越精确的优先级越高

id > class
class>元素
id>元素

from 表单

input

• text 文本框
• radio 点选框同类互斥
• submit 提交按钮可以将name信息提交到指定地址
• button 按钮没有绑定提交事件