lovecoding
/
J250419


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
      在html文件里的<style>标签中写CSS样式，属于内部样式。如果CSS样式不是很多，并且不需要复用
      在css文件中写CSS样式，然后在html文件中使用<like>标签进行引入，属于外部引入样式。
      如果CSS样式非常多，并且可能需要多次引用，就是用外部样式。
      第三种，在html标签中添加style属性，属性值设置样式，属于内联样式。一般不推荐使用。

      CSS的样式基本都是可以应用于全部标签。
    -->
    <!--背景样式-->
    <style>
        /*标签选择器---设置背景颜色*/
        div {
            width: 200px; /*宽度百分比，设置当前元素占用所在容器的百分比*/
            height: 400px;
            background-color: #0f0; /* #xxxxxx  #123*/
        }

        /*class选择器---设置背景图片*/
        .myImg {
            background-image: url("./image/img01.jpg");
        }

        /*id选择器-设置背景图片水平平铺*/
        /*id选择器-设置图片在背景中的位置*/
        #myImg {
            background-image: url("./image/img01.jpg");
            background-repeat: no-repeat;
            /*
                no-repeat:不平铺
                repeat-x: 延x轴平铺
                repeat-y: 延y轴平铺
            */
            background-position: left top;
        }
        /*
            简写属性：
            background:颜色、图片、平铺、位置
        */
        span{
            background: #00f url("./image/img01.jpg") no-repeat right top;
        }
    </style>
</head>
<body id="myImg">
<!--
块级标签：每个标签都会是独立的一行。
-->
<h1 class="myImg">zhangsan</h1>
<h1>zhangsan</h1>
<h1>zhangsan</h1>
<h1>zhangsan</h1>
<h1>zhangsan</h1>
<!--行级标签：每个标签都不是独立的一行，而是追加到前一个标签后面-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>

<!--div块标签-->
<div class="myImg">我是div</div>
<div class="myImg">我是div</div>
<div class="myImg">我是div</div>

<!--span行标签-->
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>