码迷,mamicode.com
首页 > Web开发 > 详细

0908期 HTML 样式表属性

时间:2017-09-15 09:58:24      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:pac   flow   width   col   隐藏   单元格   背景图   列表   no-repeat   

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(1.jpg);
                background-size: 100%;
                /*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(255,0,0,0.5);
                
                /*透明度*/
                /*opacity: 0.5;*/
                
                /*过渡效果*/
                transition: 6s;
                
                /*圆角*/
                border-radius: 7px;
            }
            
            .btn1:hover{
                cursor: pointer;
                background-color: rgba(0,255,0,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>

 

技术分享
 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title></title>
 5         <style>
 6             *{
 7                 margin: 0px;
 8                 padding: 0px;
 9             }
10             .div1,.div2{
11                 width: 100px;
12                 height: 100px;
13                 border: 2px solid black;
14                 position: relative;
15                 background-color: blue;
16                 z-index: 5;
17             }
18             .div2{
19                 /*margin: 10px;*/
20                 /*margin-top: 10px;*/
21                 /*margin: 10px 0px 0px 10px;*/
22                 /*margin: -50px;*/
23                 padding: 10px;
24                 z-index: 999;
25                 background-color: red;
26                 
27                 /*display: none;*/
28                 /*visibility: hidden;*/
29                 
30                 /*超出部分效果*/
31                 overflow: scroll;
32                 overflowstack
33             }
34             input{
35                 padding-left: 20px;
36             }
37             ul{
38                 margin: 50px;
39                 /*list-style: none;*/
40                 list-style-image: url(img/123.jpg);
41             }
42             
43             ul li{
44                 /*float: left;*/
45             }
46         </style>
47     </head>
48     <body>
49         <div class="div1"></div>
50         <div class="div2">
51             <p>123</p><p>123</p><p>123</p><p>123</p>
52             <p>123</p><p>123</p><p>123</p><p>123</p>
53             <p>123</p><p>123</p><p>123</p><p>123</p>
54             <p>123</p><p>123</p><p>123</p><p>123</p>
55             <p>123</p><p>123</p><p>123</p><p>123</p>
56         </div>
57         <input type="text" />
58         
59         <ul>
60             <li>1</li>
61             <li>2</li>
62             <li>3</li>
63         </ul>
64     </body>
65 </html>
样式表2

 

 

0908期 HTML 样式表属性

标签:pac   flow   width   col   隐藏   单元格   背景图   列表   no-repeat   

原文地址:http://www.cnblogs.com/1711643472qq/p/7524487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!