一、关于 CSS 的简介

• 点这里

二、HTML 中引入 CSS

• 行内样式

<table style="font-size:12px">

• 内部样式
  写在 head 部位中

<style type="text/css"></style>

• 外部样式

<link rel="stylesheet"type="text/css"href="" />

• 导入样式
  在 CSS 中引入其他 css@import url("/css/global.css"); （不常用）

三、CSS 选择器

• 选择器介绍
  • 标签选择器

table{
color:red;
}

- 类选择器  ' . +类名'

.kk{
color: red;
}

- ID选择器  `# +名字`

#kk{
color:red;
}

-  后代继承选择器

.outer table {
        color: green;
    }

- 群选择器

.outer table, .pp{
        color: green;
    }

- 属性选择器

input[type=text]{
        color: yellow;
    }

三、选择器优先级

• 优先级排序：

important>内联>id>class>标签|伪类|属性选择>伪对象>继承>通配符>

- important：

#tableid {
        color: orange!important;
    }

- 内联：

            <table style="color :red;">

- id：

#tableid {
        color: orange!important;
    }
            <table id="tableid">

- class

.test {
        color: black;
    }
            <table  class="test" >

- 伪类：

/*伪类*/
a:link{color: #FF0000;}*//*未访问的链接
a:visited{color: #FF0000;}/*已访问的链接*/
a:hover{color: #FF0000;}/*鼠标滑过的链接*/
a:active{color: #FF0000;}/*以选中的链接*/
:first-of-type /*从第一组中选择第一个元素*/
:last-of-type /*从第一组中选择最后一个元素*/
:selection /*选中文本后的效果*/
a::before{
    content: '\f04';
    color: red;
}
a::after{
    content: 'hello';
    color: green;
}