CSS_复习

选择器分为3种

1. 元素选择器——标签名

2. id选择器——     #（井号）

3. 类选择器——    .(点)

<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-image:url(文件路径)

background-repeat属性可以设置背景是否重复

字体的设置

行间距：             line-height

对文本进行修饰  text-decoration

首行缩进　　　  text-indent　　

可以控制空白格  white-space

font-style  可以设置字体（标准，斜体...）

可以把大小，风格，粗细，字库都写在一行里面

<style>
p.all{
   font:italic bold 30px "Times New Roman";
}
 
</style>
 
<p>默认字体</p>
 
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>

表格

table-layout

border-collapse

边框宽度

border-width 

显示方式：display

none：被隐藏的元素，不占用原来的位置

block:   前后换行，可以改变大小

inline：没有换行，大小不变

inline-block：不换行，但是大小可变

居中方式：

1.元素居中

需要先设置大小

<style>
  div{
     border: solid 1px lightgray;
     margin: 10px;
  }
  span{
     border: solid 1px lightskyblue;
  }
</style>

<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>
 
<div style="300px;margin:0 auto">
  设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>
 
<span style="300px;margin:0 auto">
  span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中</span>
 
<div style="text-align:center">
  <span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>

2.内容居中

align = "center"

style = "text-align:center"

解决块之间有空格

<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
  float:left;　　　　　　　　　　　　　　　　　　//解决的地方
}
</style>
  
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
 
<div style="clear:both"></div>     //使得后续的元素，不会和这些span重复在一起
 
<div>后续的内容</div>