关于前端:HTML和CSS的第三天

一.CSS根本语法
选择器{属性：属性值}

二.CSS援用形式
1.行间款式

<div style="color:red;width:100px">
...
</div>

2.外部款式

<style>
   p{
   ...
    }
</style>

3.内部款式
先创立一个CSS文件，再用link标签引入这个标签

<link rel="stylesheet" href="style.css">···Emment写法：link:css

4.导入内部款式
先创立一个CSS文件，再在style中用import引入这个文件（个别不必）

三.CSS选择器
1.*；匹配html中的所有元素

2.标签选择器：匹配对应的标签

3.类选择器：匹配对应的class命名的标签

.wrapper{
        ...
      }
      
<div class="wrapper">类选择器</div>

4.id选择器：匹配对应的id的标签

#content{
       ...
       }
       
<p id="content">id选择器</p>

5.派出选择器：依据上下文来确定抉择标签

.box li{
       ...
      }
      
<ul class="box">
     <li>001</li>
     <li>li002
        <ul>
          <li>sub1</li>
        </ul>
      </li>
</ul>

四.选择器分组
让多个元素有雷同款式，个别用于设置公共款式

<style>
   h1,.box,h{
            ...
          }
</style>

五.选择器继承
子元素能够继承父类元素的款式，反之不行

六.CSS字体
CSS字体(https://segmentfault.com/a/11…
Tip:
font能够按程序复合应用:font:font-style font-variant font-weight font-size font-family

例子：font:italic small-caps bolder;

七.CSS背景
CSS背景（https://segmentfault.com/a/11…）

八.伪类选择器
1.链接的伪类
:linked/:visited/:hover/:active

<style>
   a:linked{
          color:red;
          }
   a:visited{
          color:red;
          }
    a:hover{
          color:red;
          }
    a:active{
          color:red;
          }
</style>

2.:focus:获取焦点，用于文字框上

<style>
   input:focus{
      outline:1px solid #f600
      }
</style>

<input type="text">

3.:first-child,:last-child,:nth-child(number)

<style>
    ul li:first-child{
       color:#ff1129;
       }
     ul li:last-child{
       color:#38ff24;
       }
     ul li:nth-child(2){
       color:#2c3cff;
       }
</style>

成果：

九.属性选择器
属性选择器（https://segmentfault.com/a/11…）

十.关系选择器
1.空格：后辈选择器
2.>:只抉择儿子元素
3.+:兄弟抉择

<style>
    ul li+li+li{
              list-style-type:none;
              color:red;
            }
</style>

成果：

十一.伪元素选择器
伪元素选择器（https://segmentfault.com/a/11…）

十二.浮动
作用：让块级元素不独占一行
float:left/right/inherit(从父类继承float属性）