HTML基础必看——全面了解css样式表

2019-01-15 09:02:30于海丽

 

(二)边界和边框

border(表格边框、样式等)、margin(表外间距)。padding(内容与单元格间距)。

(三)列表与方块

width、height、(top、bottom、left、right)只有在绝对坐标情况下才有用。

 

css样式表代码显示:

css文件代码:

CSS Code复制内容到剪贴板
  • @charset "utf-8";    /* CSS Document */  
  • */*所有标签起作用,边距和间距都设为0px*/   {   
  •     margin:0px;        padding:0px;}   
  • p,span   /*直接写个标签名字,表示所有的p标签都执行这个样式*/   {   
  •     background-color:#F6C;        color:#0F0;}   
  • p.sp    {   
  •     background-color:#FF0;        color:red;   
  •     font-size:36px;}    .main/*以.开头,使用class引用此样式表*/  
  • {        height:50px;   
  •     width:300px;        background-color:#0FF;   
  •     font-size:45px;}    .main p/*表示使用class=main的标签内若有p标签,执行此样式*/  
  • {        width:400px;   
  •     font-size:36px;}    #main/*以#开头,使用id选择器引用此样式表*/  
  • {        height:60px;   
  •     width:500px;        background-color:#60C;   
  •     font-size:36px;}  

    html文件代码:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">  
  • <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  • <title>无标题文档</title>   <style type="text/css">  
  •    </style>  
  • <link href="Untitled-1.css" rel="stylesheet" type="text/css" />   </head>  
  •    <body>  
  • <div style="background-color:#0F0">1234567</div>   <p>春天来了。</p>  
  • <p>花儿开了,草儿绿了。</p>   <p class="sp">鹅鹅鹅,曲项向天歌。</p>  
  • <span class="main">锄禾日当午<p>汗滴禾下土</p></span>   <p class="main">白日依山尽</p>  
  • <p id="main" >床前明月光</p>   <span>疑是地上霜</span><br />  
  • </body>   </html>