CSS知识点整理

参考学习链接

1.基础

  选择器

<!--元素选择器-->
<style>
p{
    
  color:red;
}
</style>
<p>p元素</p>
<p>p元素</p>
<p>p元素</p>

<!--id选择器-->
<style>
p{
    
  color:red;
}
#p1{
    
  color:blue;
}
#p2{
    
  color:green;
}
</style> 
<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>

<!--类选择器-->
<style>
.p{
    
  color:blue;
}
.q{
    
  color:green;
}
</style>
 
<p class="p">1</p>
<p class="p">1</p>
<p class="p">1</p>

<p class="q">2</p>
<p class="q">2</p>
<p class="q">2</p>

<!--根据元素和名称选择-->
<style>
p.blue{
    
  color:blue;
}
</style>

<p class="blue">1</p>

  尺寸大小

<style>
p#percentage{
    
  width:50%;
  height:50%;
  background-color:pink;
}
p#pix{
    
  width:180px;
  height:50px;
  background-color:green;
}
</style>
 
<p id="percentage"> 按比例设置尺寸50%宽 50%高</p>
 
<p id="pix"> 按象素设置尺寸  180px宽 50 px高</p>

背景
颜色

<style>
p.gray {
    background-color: gray;}
h1 {
    background-color: transparent}
h2 {
    background-color: rgb(250,0,255)}   <!--250红色满，没有绿色，蓝色满，三色混合-->
h3 {
    background-color: #00ff00}
</style>
 
<p class="gray">灰色</p>
<h1>透明背景，默认即透明背景</h1>
<h2>紫色</h2>
<h3>绿色背景</h3>

图片

<style>
div#test
  {
    
    background-image:url(可为本地或者链接);
    width:200px;
    height:100px;