CSS字體屬性背景屬性塊&行標簽盒子模型盒子模型-邊距屬性(了解)

字體屬性
<pre>
<!DOCTYPE html>
<html>
<head>
<title>09-CSS選擇器5.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
```
<style type="text/css">
    /* p{
        font-family: 黑體;
        font-size: 25px;
        font-style:oblique;
         font-weight:900;
         font-variant:small-caps;
    } */
    p{
        font:oblique small-caps 900 25px 黑體;
    }
</style>
  </head>
  
  <body>
    <p class="two" >
    hello itcast! itheima!
    床前明月光,疑是地上霜</a>
  </body>
</html>
</pre>
背景屬性
<pre>
<!DOCTYPE html>
<html>
  <head>
    <title>11-背景屬性.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
        /* 
            background : background-color || background-image || background-repeat || background-attachment || background-position 
body{
            background-image: url("mn.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
     */
        body{
            background: url("mn.jpg") no-repeat fixed center;
        }
    </style>
  </head>
  <body>
    <p>
        itheima<br>
        itheima<br>
        itheima<br>
        itheima<br>
        itheima<br>
    </p>
        <p>
        itheima<br>
        itheima<br>
        itheima<br>
        itheima<br>
        itheima<br>
    </p>
  </body>
</html>
</pre>
塊&行標簽
<pre>
<!DOCTYPE html>
<html>
  <head>
    <title>12-塊&行標簽.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>
itheima<div>itheima</div>itheima

itheima<span>itheima</span>itheima
</body>

</html>
</pre>
盒子模型
<pre>

<!DOCTYPE html>
<html>
  <head>
    <title>12-塊&行標簽.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    /*
    盒子模型的屬性
        一. 邊框系類屬性
        二. 尺寸屬性
        三. 邊距
                *內邊距
                *外邊距
    
    
        border-color:邊框顏色
        border-width:邊框寬度
        border-style:邊框樣式
        
            border-color: red;
            border-width: 1px;
            border-style: solid;
            
            margin-left:100px;左外邊距
            margin-top:100px;
            
            padding-left:100px; 左內邊距
            padding-top:100px; 上內邊距
            
            注意:內邊距會延長所在盒子的長或寬
    */
    div{
        border: 1px solid red;
    }
    
    #one{
        height: 300px;
        width: 300px;
    }
    #two{
        height: 100px;
        width: 100px;
        margin-left:100px;
        margin-top:100px;
    }
    </style>
    
  </head>
  
  <body>
    <div id="one" >
        <div id="two"></div>
    </div>
  </body>
</html>

</pre>
盒子模型邊距屬性
<pre>

<!DOCTYPE html>
<html>
  <head>
    <title>14-盒子模型-邊距屬性.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    /*
    padding : 1個值 上下左右
              2個值    1.上下 2.左右
              3個值    1.上 2.左右 3.下
              4個值     1.上 2.右 3.下 4.左
    */
    div{
        border: 1px solid red;
        height: 300px;
        width: 300px;
    }
    
    #one{
        padding: 10px 30px 50px 80px;
    }
</style>
    
  </head>
  
  <body>
<div id="one" >
    <div id="two"></div>
</div>
 </body>
</html>

</pre>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容