0908期 HTML 样式表属性

1、背景与前景

　　 /背景色，样式表优先级高/

background-image:url(路径); /*设置背景图片（默认）*/

background-attachment:fixed; /*背景是固定的，不随字体滚动*/

background-attachment:scroll; /*背景随字体滚动*/

background-repeat:no-repeat; /*no-repeat,不平铺；repeat,平铺；repeat-x,横向平铺；repeat-y,纵向平铺*/

background-position:center; /*背景图居中，设置背景图位置时，repeat必须为“no-repreat”*/

background-position:right top; /*背景图放到右上角（方位可以自己更改）*/

background-position:left 100px top 200px; /*离左边100像素，离上边200像素（可以设为负值）*/

字体

font-family:"新宋体"; /*字体。常用微软雅黑、宋体。*/

font-size:12px; /*字体大小。常用像素12px、14px、18px。还可以用“em”，“2.5em”即：默认字体的2.5倍。还可以用百分数*/

font-weight:bold; /*bold是加粗，normal是正常*/

font-style:italic; /*倾斜，normal是不倾斜*/

color:#03C; /*颜色*/

text-decoration:underline; /*下划线，overline是上划线，line-through是删除线,none是去掉下划线*/

text-align:center; /*（水平对齐）居中对齐，left是左对齐，right是右对齐*/

vertical-align:middle; /*（垂直对齐）居中对齐，top是顶部对齐，bottom是底部对齐。一般设置行高后使用。*/

text-indent:28px; /*首行缩进量*/

line-height:24px; /*行高。一般为1.5~2倍字体大小。*/

　display:none; /*none，不显示；inline-block,显示为块，不自动换行，宽高可设；block，显示为块，自动换行；inline，效果同span标签，不自动换行，宽高不可设。*/

　visibility:hidden; /*可视性。hidden，隐藏但是占空间；visible，显示。*/

2、边界和边框

　border（表格边框、样式等）、margin（表外间距）、padding（内容与单元格间距）

border:5px solid blue; /*四边框：5像素宽、实线、蓝色（相当于以下三行）*/

border-width:5px;

border-style:solid;

border-color:blue;

border-top:5px solid blue; /*上边框：5像素宽、实线、蓝色（分写同上）*/

border-bottom:5px solid blue; /*下边框：5像素宽、实线、蓝色（分写同上）*/

border-left:5px solid blue; /*左边框：5像素宽、实线、蓝色（分写同上）*/

　border-right:5px solid blue; /*右边框：5像素宽、实线、蓝色（分写同上）*/

margin:10px; /*四边外边框宽度为10像素。auto，居中。*/

margin-top:10px; /*上边外边框宽度为10像素；其他三边边框类似*/

　margin:20px 0px 20px 0px; /*上-右-下-左，四边外边框顺时针顺序*/

padding:10px; /*内容与边框的四边间距为10像素*/

padding-top:10px; /*内容与边框的上间距为10像素；其他三边间距类似*/

　padding:20px 0px 20px 0px; /*上-右-下-左，内容与边框的四边间距顺时针顺序*/

3、列表与方块

width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用

list-style:none; /*取消序号*/

list-style:circle; /*序号变为圆圈，样式相当于无序*/

list-style-image:url(图片地址); /*图片做序号*/

list-style-position:outside; /*序号在内容外*/

list-style-position:inside; /*序号跟内容在一起*/

随堂

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .top-nav{

                border: 2px solid black;

                width: 100px;

                height: 100px;

                /*background-color: rgba(255,0,0,0.5);*/

                background-image: url(.jpg);

                background-size: %;

                /*background-repeat: round;*/

            }

            .content{

                font-family: "楷体";

                font-size: 10px;

                font-style: italic;

                font-weight: bold;

                text-decoration: line-through;

                color: red;

            }

            .btn1{

                width: 100px;

                height: 35px;

                border: 1px solid black;

                text-align: center;

                /*vertical-align: middle;*/

                line-height: 35px;

                background-color: rgba(,,,0.5);

                /*透明度*/

                /*opacity: 0.5;*/

                /*过渡效果*/

                transition: 6s;

                /*圆角*/

                border-radius: 7px;

            }

            .btn1:hover{

                cursor: pointer;

                background-color: rgba(,,,0.5);

                /*转动角度*/

                /*transform: skew(360deg,360deg);*/

                /*阴影*/

                box-shadow:5px 5px 0px black;

                /*文字阴影*/

                text-shadow: 2px 2px 2px red;

            }

        </style>

    </head>

    <body>

        <div class="btn1">按&nbsp;钮</div>

    </body>

</html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             *{

                 margin: 0px;

                 padding: 0px;

             }

             .div1,.div2{

                 width: 100px;

                 height: 100px;

                 border: 2px solid black;

                 position: relative;

                 background-color: blue;

                 z-index: ;

             }

             .div2{

                 /*margin: 10px;*/

                 /*margin-top: 10px;*/

                 /*margin: 10px 0px 0px 10px;*/

                 /*margin: -50px;*/

                 padding: 10px;

                 z-index: ;

                 background-color: red;

                 /*display: none;*/

                 /*visibility: hidden;*/

                 /*超出部分效果*/

                 overflow: scroll;

                 overflowstack

             }

             input{

                 padding-left: 20px;

             }

             ul{

                 margin: 50px;

                 /*list-style: none;*/

                 list-style-image: url(img/.jpg);

             }

             ul li{

                 /*float: left;*/

             }

         </style>

     </head>

     <body>

         <div class="div1"></div>

         <div class="div2">

             <p></p><p></p><p></p><p></p>

             <p></p><p></p><p></p><p></p>

             <p></p><p></p><p></p><p></p>

             <p></p><p></p><p></p><p></p>

             <p></p><p></p><p></p><p></p>

         </div>

         <input type="text" />

         <ul>

             <li></li>

             <li></li>

             <li></li>

         </ul>

     </body>

 </html>

样式表2