CSS基础

CSS语法

selector {property: value}
即 选择器{属性:值}
学习css即学些有哪些选择器，哪些属性以及可以使用什么样的值

CSS选择器

元素选择器 ，id选择器 ，类选择器

• 元素选择器通过标签名选择元素

<style>
p{color:red;} 
</style>
<p>p元素</p>
<p>p元素</p>

• id选择器通过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>

• 类选择器，当需要多个元素，都使用同样的css的时候，就会使用类选择器
  <b>注</b>：类选择器前面有个"."符号

<style>
.pre{color:blue;}
.after{color:green;}
</style> 
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p> 
<p class="after">后3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>

CSS注释

注释 以/* 开始 以*/结束
被注释掉的文字会自动隐藏

CSS尺寸大小

属性：width
值：可以是百分比或者象素

<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>

背景

• background-color 背景颜色
  属性名background-color颜色的值可以采用3种方式
  1.预定义的颜色名字比如red,gray,white,black,pink，参考颜色速查手册
  2.rgb格式分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
  3.十六进制的表示#00ff00 等同于 rgb(0,255,0)

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

• background-image:url(imagepath) 图片做背景

<style>
div#test
  {background-image:url(/study/background.jpg); /*图片路径*/
    width:200px;
    height:100px;}
</style> 
<div id="test">
  这是一个有背景图的DIV
</div>

• background-repeat 背景重复
  background-repeat属性
  值可以选
  repeat; 水平垂直方向都重复
  repeat-x; 只有水平方向重复
  repeat-y; 只有垂直方向重复
  no-repeat; 无重复

<style>
div#norepeat
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: no-repeat;
  } 
div#repeat-x
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: repeat-x;
  }
</style> 
<div id="norepeat">
  背景不重复
</div>
<div id="repeat-x">
  背景水平重复
</div>

• background-size:contain 背景平铺

<style>
div#contain
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-size: contain;
  }
</style>
<div id="contain">
   背景平铺，通过拉伸实现，会有失真
</div>