HTML CSS 层叠样式表二

一、

#ID{

　　　　宽度px;

　　　　height:高度px;

　　　　background-color:red; 背景颜色的两种加法

　　　　background:rgba(x,x,x,x) rgba颜色最后一个值为透明度 1为不透明，0为全透明。

　　　　background:url(图片.jpg) np-rereat; 背景图添加 repeat是平铺

　　　　background-image:url(图片.jpg); 背景图添加

　　　　background-size;100%; 背景图拉伸100% 几乎不会用到因为会失真。

}

#ID{

　　　　font-family:字体名字；改字体

　　　　font-size:10px; 改字体大小，单位像素

　　　　color:颜色; 改字体颜色

　　　　font-styel:italic; 字体样式 italic斜体（就是I那个倾斜） normal正常默认正常

　　　　text-decoration:underline;文本修饰属性 underline下划线 overline上划线 line-through 删除线 none无，可以用于去掉下划线比如<a>标签的。

　　　　overflow:hidden; 元素溢出内容属性 visible不修剪会呈现在元素框之外默认 hidden修剪并隐藏溢出内容 scroll加滚动条 auto自动如果溢出就加滚动条

　　　　text-align:center; 水平对齐 center 居中 left左对齐默认 right右对齐

　　　　vertical-align 垂直对齐

　　　　line-height: 行高垂直居中可以用行高进行

　　　　text-indent 缩进单位像素

}

.btn{

　　　　border:black solid 10px; 边框黑色 solid实线 dotted虚线线宽、　　　

}

.btn：hover{ 当鼠标移到这个class为btn的div上的时候

　　　　background-color:red; 背景色变红

　　　　color:green; 字体变绿

　　　　cursor:pointer 鼠标变小手

　　　　transiti:1s;　　　　　　变化在1秒内完成

　　　　transfor:rotate(45deg); 旋转45°

　　　　box-shadow:4px 5px 6px 阴影效果向下5px 向右5px 虚化5px 阴影色为黑色

二、课上联系

<style>
        #d1 {
            200px;
            height:200px;
            /*background-color:red;*/
            background:rgba(255, 0, 0,0.5);
            background:url(img/tu.jpg) no-repeat;  /*默认平铺，no-repeat不平铺。*/
            /*background-image:url(img/tu.jpg);*/
            background-size:100%;   /*图片尺寸拉伸不常用，容易失真。*/
            /*background-attachment:scroll;*/
            overflow:scroll;
        }
        #d2 {
            200px;
            height:200px;
            font-family:宋体;
            font-size:50px;
            color:red;
            font-style:italic;   /*斜体*/
            font-weight:900;    /*加粗100-900*/
            text-decoration:line-through;   /*删除线。underline下划线 overline上划线 none，无，去超链接下划线*/
        }
        a {
            text-decoration:none;
        }
        .btn {
            100px;
            height:40px;
            border:1px dotted black;
            text-align:center;    /*水平居中*/
            line-height:40px;     /*垂直居中*/
        }
            .btn:hover {
                background-color:black;
                color:white;
                cursor:pointer;
                transition:1s;
                transform:rotate(10deg);    /*转动*/
                box-shadow:5px 6px 7px red;     /*虚化*/
            }
    </style>

<body>

    <div id="d1">
        <p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p>
        <p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p>
        <p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p>
    </div>
    <div id="d2">风雪依稀秋白发尾</div>
    <a href="CSS课上练习3.html">超链接</a><br /><br />
    <div class="btn">按钮</div>
</body>

三、网页效果

HTML CSS 层叠样式表 二

HTML CSS 层叠样式表二