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

HTML CSS 层叠样式表 二

一、

#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 层叠样式表 二