欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css代码整理

程序员文章站 2022-06-26 11:41:53
width:(宽度) height:(高度) border:1px solid red;(边框 :边框粗细 显示 颜色) border-radius:10deg;(边框变圆角) box-shadow:10px 10px 10px red;(div盒子阴影:右侧阴影10px,下侧阴影10px,淡化拉伸 ......

width:(宽度)

height:(高度)

border:1px solid red;(边框 :边框粗细 显示 颜色)

border-radius:10deg;(边框变圆角)

box-shadow:10px 10px 10px red;(div盒子阴影:右侧阴影10px,下侧阴影10px,淡化拉伸阴影10px,阴影颜色;为负值时位置相反)

background-color:(背景颜色)

background-image:url()(背景图片)

background-size:(背景尺寸)

background-repeat:no repeat(背景平铺:不平铺)

background-position: top / bottom / left/ right;(背景位置:上下左右)

color:(字体颜色)

font-size:(字体尺寸大小)

font-style:(字体格式)

font-weight:(字体宽度)

font-decoration:underline(字体标注:下划线)

text-align:(字体水平位置)

display:table-cell;(字体垂

vertical-align:     ;直位置)

<p style=“text-indent:40em;”>(字体首行缩进:40em     1em等于两个字符宽度)

——————————————————————————————————————————————————————————————————————

*{         (页面格式化)

margin:0 auto; 

padding: 0;

}

——————————————————————————————————————————————————————————————————————

.class{                                         (对上面的

           clear:both;                          浮动格式

}                                                     的影响进

<div class="clear"> </div>             行清除)

——————————————————————————————————————————————————————————————————————

div:hover{                                                 (当鼠标放上时

                  cursor:pointer;                         变小手

                   background-img:url()             更换背景图片

}

——————————————————————————————————————————————————————————————————————

<ol>                        (有                                  <ul>                    (无

        <li></li>              序                                        <li></li>            序

        <li></li>              列                                        <li></li>            列

</ol>                          表)                               <ul>                       表)

——————————————————————————————————————————————————————————————————————

div{

      animation:name    5s   infinite    alternate;    ( 动画:名称;运行一遍所需时间;循环播放;交互播放)

}

@keyframes name{

        0%{    }          (运行至0%时div的样式)

        50%{    }        (运行至50%时div的样式)

        100%{    }      (运行至100%时div的样式)

 

}

——————————————————————————————————————————————————————————————————————