css基础

1.css内部模式

<head>
<style>
p{
    
}
</style>
</head>

在head标签中写出且写在style标签内

2.css外部模式

<link rel="stylesheet" href="">

写在head标签中href写出引入的html或css文件。

3.css内联样式

<div style="color: red"></div>

在标签内部写出style

css选择器

1.标签选择器

<head>
<style>
P{
    
}
</style>
</head>

与css内部模式写法类似，都是写在head，style标签里面。上方为标签选择器，在此选择器中定义的所有样式都是用于此文件的所有p标签。所有标签都一样。

2.id选择器

<head>
<style>
.uname{
    
}
</style>
</head>
<body>
<div id="uname"></div>
</body>

id选择器的写法为.+（id名），id选择器内的样式则只对此id名作用，因为一个文件每个标签只能有一个唯一的id名，所以id选择器的作用范围很小。

3.class选择器

<head>
<style>
#uname{
    
}
</style>
</head>
<body>
<div class="uname"></div>
</body>

class选择器的写法为#+（class名），class选择器内的样式则只对此class名作用，但class名可以重复，所以作用范围大于id选择器。

4.子代选择器

<head>
<style>
div>span{
    
}
</style>
</head>
<body>
<div><span></span></div>
</body>

span标签嵌套div标签内部，span标签为div标签的子代。块级元素可以嵌套块级元素/行级元素/行级块元素（h1~h6 p 除外）。此选择器作用于嵌套在div标签里的span标签。子代选择器子代与上一级为父子关系。否则不适用。

<head>
<style>
.wrapper>#ul{
    
}
</style>
</head>
<body>
<div id="wrapper"><span class="ul"></span></div>
</body>

id选择器和class选择器同样适用于子代选择器。

5.后代选择器

<head>
<style>
.wrapper #ul{
    
}
</style>
</head>
<body>
<div id="wrapper">
<div>
<span class="ul"></span>
</div>
</div>
</body>

span标签嵌套在div标签里面，可以叫做div标签的后代，div标签是span标签的祖先。所以span标签是div元素的后代。只要span标签在div标签里面是div标签的后代都可以使用后代选择器。（祖先）"空格"(后代)

6.分组选择器

<head>
<style>
.wrapper，#ul{
    
}
</style>
</head>
<body>
<div id="wrapper"></div>
<span class="ul"></span>
</body>

此选择器可以同时对多组不相关联的标签进行更改。写法为（第一组），（第二组）....,(第n组)

7.伪类选择器

<head>
<style>
 #lilk:link{
    
    }
  #lilk:visited{
      
  }
   #lilk:hover{
      
  }
   #lilk:active{
      
  }
</style>
</head>
<body>
<a href="" id="lilk"></a>
</body>

#lilk:link未访问的链接 #lilk:visited 已访问的链接 #lilk:hover当有鼠标悬停在连接上 #lilk:active被选择过的链接当他们同时出现时，必须按顺序排列。

css基础与选择器