首页 > 代码库 > HTML CSS 层叠样式表 二

HTML CSS 层叠样式表 二

2024-09-28 18:59:02   215人阅读

一、

#ID{

　　　　width:宽度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 {
            width: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 {
            width: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 {
            width: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=http://www.mamicode.com/"CSS课上练习3.html">超链接</a><br /><br />
    <div class="btn">按钮</div>
</body>

 

三、网页效果

技术分享

HTML CSS 层叠样式表 二


联系
我们