CSS 基础2（字体、鼠标样式、表格、边框）

CSS设置字体样式详解



1.尺寸

属性：font-size 

值：数字或者百分比

<style>
p.big{
font-size:30px;
}

p.small{
font-size:50%;
}

p.small2{
font-size:0.5em;
}
</style>

<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同于 50%比例的文字</p>

2.风格

font-style: 

normal 标准字体 

italic 斜体

<style>
p.n{
font-style:normal;
}

p.i{
font-style:italic;
}
</style>

<p >标准字体</p>
<p class="n">标准字体</p>
<p class="i">斜体</p>

3.粗细

属性 font-weight 

normal 标准粗细 

bold 粗一点

<style>
p.n{
font-weight:normal;
}
p.b{
font-weight:bold;
}
</style>

<p >标准字体</p>
<p class="n">标准字体</p>
<p class="b">粗一点</p>

4.字库

属性font-family

<style>
p.f1{
font-family:"Times New Roman";
}

p.f2{
font-family:Arial;
}
p.f3{
font-family:宋体;
}
p.f4{
font-family:黑体;
}
p.f5{
font-family:楷体;
}
p.f6{
font-family:微软雅黑;
}
</style>

<p >默认字库 font family:default </p>
<p class="f1">设置字库 font-family: Times New Roman</p>
<p class="f2">设置字库 font-family: Arial</p>
<p class="f3">设置字库 font-family: 宋体, 这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family: 黑体</p>
<p class="f5">设置字库 font-family: 楷体</p>
<p class="f6">设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体</p>

5.声明在一起

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

font：style weight size/line-height font-family

 风格  粗细  大小/行高 字体

按这个顺序写

<style>
p.all{
font:italic bold 30px "Times New Roman";
}

</style>

<p>默认字体</p>

<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>

CSS 基础 鼠标样式cursor:default

cursor:auto

cursor:crosshair

cursor:pointer

cursor:e-resize

cursor:ne-resize

cursor:nw-resize

cursor:n-resize

cursor:se-resize

cursor:sw-resize

cursor:w-resize

cursor:text

cursor:wait

cursor:help

<style>
span{
cursor:crosshair;
}
</style>

<span>鼠标移动到这段文字上，就看到鼠标样式变成了十字架</span>

CSS设置表格样式



1.表格布局

属性:table-layout 

automatic; 单元格的大小由td的内容宽度决定 

fixed; 单元格的大小由td上设置的宽度决定 

注：只对连续的英文字母起作用，如果使用中文就看不到效果

<style>
table.t1{
table-layout:automatic;
}

table.t2{
table-layout:fixed;
}

</style>

<table class="t1" border="1" width="100%">
<tr>
<td width="10%">abcdefghijklmnopqrstuvwxyz</td>
<td width="90%">abc</td>
</tr>
</table>

<table class="t2" border="1" width="100%">
<tr>
<td width="50px">abcdefghijklmnopqrstuvwxyz</td>
<td >abc</td>
</tr>
</table>

2.表格边框

属性：border-collapse

值：

separate:边框分隔

collapse:边框合并

<style>
table.t1{
border-collapse:separate;
}

table.t2{
border-collapse:collapse;
}

</style>

<table class="t1" border="1" width="200px">
<tr>
<td width="50%">边框分离</td>
<td width="50%">边框分离</td>
</tr>
</table>

<br/>
<br/>

<table class="t2" border="1" width="200px">
<tr>
<td width="50%">边框合并</td>
<td width="50%">边框合并</td>
</tr>
</table>

CSS边框样式详解



1.边框风格

属性： border-style 

solid: 实线 

dotted:点状 

dashed:虚线 

double:双线

<style>
.solid{
border-style:solid;
}
.dotted{
border-style:dotted;
}
.dashed{
border-style:dashed;
}
.double{
border-style:double;
}

</style>

<div> 默认无边框div </div>

<div class="solid"> 实线边框  </div><br/>

<div class="dotted"> 点状边框  </div> <br/>
<div class="dashed"> 虚线边框  </div> <br/>
<div class="double"> 双线边框  </div> <br/>

2.边框颜色

属性：border-color 

值：red,#ff0000,rgb(255,0,0)

<style>
.red{
border-style:solid;
border-color:red;
}

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色边框  </div><br/>

3.边框宽度

属性：border-width 

值：数字

<style>
.red{
border-style:solid;
border-color:red;
border-width:1px;
}

.default{
border-style:solid;
border-color:red;
}

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色细边框  </div><br/>

<div class="default"> 实线红色默认宽度边框  </div><br/>

4.都放在一起

属性：border

值：颜色 风格 宽度

<style>
.red{
border:1px dotted LightSkyBlue;
}

</style>

<div> 默认无边框div </div>

<div class="red"> 点状红色细边框  </div><br/>

5.只有一个方向有边框

通过制定位置，可以只给一个方向设置边框风格，颜色和宽度

top,bottom,left,right 分别对应上下左右

<style>
div{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
background-color:lightgray;
}
</style>

<div>
只有上面有边框
</div>

6.有交界的边都有边框

比如上和左就是有交界的，而上和下就没有交界

当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。

<style>
div.lefttop{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
background-color:lightgray;
}

div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>

<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框　
</div>

7.块级元素和内联元素的边框区别

可以看到，块级元素div默认是占用100%的宽度

常见的块级元素有div h1 p 等

而内联元素span的宽度由其内容的宽度决定

常见的内联元素有 a b strong i input 等

<style>
.red{
border:1px solid red;
}

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色细边框  </div><br/>
<span class="red"> 实线红色细边框  </span><br/>