CSS样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/BBH2000/article/details/126308947

css基本样式

<style>
    h2{
        /* 颜色 */
        color:aquamarine;
        /* 文本水平居中 */
        text-align: center;
        /* 文本垂直居中  两高度值一致 line-height调整行间距 */
        height: 40px;
        line-height: 40px;
        /* 首行缩进 */
        text-indent: 2em;
        /* 文字阴影 大小，颜色 */
         text-shadow:10px 10px 2px burlywood; 
         /* 文本样式   line-through删除线 underline下划线 overline 上划线   */
         text-decoration: line-through;
           
    }
    span{
        /* 字体大小 */
        font-size: 10px;
        /* 字体风格 斜体 */
        font-style: italic;
        /* 字体加粗 */
        font-weight: 100;
        /* 字体样式 */
        font-family: "宋体";

    }
    h3{
        /* 背景颜色 */
        background-color: antiquewhite;
        /* 颜色渐变 */
        background: linear-gradient(pink,white);
        /* 背景图片 像素为调整位置 no-repeat不平铺 */
        background: url(../第四天/图片素材/icon_01.jpg) 10px 10px no-repeat ;
        /* 背景颜色与背景图片不能同时用，只显示一个 */
/* 外边框 */
margin: 0px;
        /* 内边框 */
        padding: 2px;
        /*  边框 solid 实线 dashed 虚线 doblue 双线 dotted 点线*/
        border: 1px solid gray;
    }
</style>
<body>
    <h2>朝暮与年岁并往，然后一同行至天光</h2>
    <span>我和这一方世界，都如此这般深爱着你</span>
    <h3>日升月沉，花谢叶落。</h3>
</body>

<style>
    h3{
        /* 外边框 */
        margin: 0px;
        /* 内边框 */
        /* 一个值 四个方向
        两个值    上下    左右
        三个值   上   左右    下
        四个值   上  右  下  左  */
        padding: 2px;
        /*  边框 solid 实线 dashed 虚线 doblue 双线 dotted 点线*/
        border: 1px solid gray;
        /* 圆角 */
        border-radius: 10px;
        /* 鼠标变小手 */
        cursor:pointer
        
    }
    
</style>
<body>
    <div>
        <!-- 1.独占一行为块元素 -->
        <!-- 2.如果是块元素 display：block
            如果为行内元素  display:inline
                          display:inline-block
         -->
        <!-- 3.块元素可以设计宽高，行内元素设置宽高无作用  -->
        <h3>贪得无厌，恋酒迷花</h3>
        
    </div>
</body>

调用公共css

 <!-- 调用公共css -->
    <link rel="stylesheet" href="../第五天/common.css">
    <style>
        .all{
            width: 900px;
            /* 边距居中 */
            margin: 0 auto;
        }
          .d1 img{
             /* 浮动 左 右  */
            float: right;  
         } 
         /* 清除浮动 */
         /* 1.对父类元素增加高度 
         2.对父元素添加味蕾*/
         .d1::after{
               display: block;
               content: "";
               clear: both;
         }
         /* 父相子绝 */
         /* 定位属性 相对定位 relative 绝对定位 absolute 固定定位 fixed */
         /* 相对定位
         1.相对于自身原来的位置 
         2.仍占据着原来的位置*/
         /* position：relative
            bottom：10px
            right：10px  */
         /* 绝对定位
         1.相对于有定位属性的父元素
            如果父元素没有定位属性 相对于父元素的父元素--- body
         2.失去原来的位置   */
         /* position:absolute;
             bottom:10px
             right:10px */
         /* 固定定位  
          1.相对于浏览器窗口
          2.失去原来的位置*/
         /* position：fixed
             bottom：10px
             right：10px */
         

    </style>
</head>

<body>
    <div class="all">
    <span>aaaa</span>
    <div class="d1">
        
        <img src="../../QQxiazai/aaa.jpg" alt="">
        
    </div>
</div>
</body>