css样式表

1.背景样式

1
2
3
4
5
6
7
8
.r
    {
        background-image:url(../../../HTML%20%20%E8%AF%BE%E4%BB%B6/n0.jpg);
        background-size:200px 300px;
        
        background-repeat:no-repeat;  /*  background-repeat:x-repeat;  横向平铺 */
        background-position: left 100px top 100px;   /* 注意  */     
    }

2.居中：

1
2
3
4
5
1.           <center><div>此标签h5中移除 现在并不重要</div></center>               
2.*  /*整体居中*/
    {
        margin:0px auto; padding:0;
        }    

　　3.控制字体的样式

1
2
3
4
5
6
7
8
9
.l
        {
            font-family:隶书;/*如果浏览器中有安装的字体种类 可以直接写  也可以选*/
            font-style:italic;/* 倾斜  字体样式*/
            font-size:14px;/*网络正常用 14  其次12  和16  多人一起做项目时先统一*/
            color:red;
            font-weight:bold;
            }
<br>特殊字符 如艺术字 需要做成图片插进去

　　4.text样式

1
2
3
4
5
6
7
8
9
10
11
12
13
          .g
{
    text-align:center;/*水平居中*/
    vertical-align:middle;/*垂直居中；垂直居中时，时在行高的中间，所以经常配合行高一起出现*/
    line-height:80px;
    /* 以上两个样式共同 控制  内容在   行的中间位置*/
     
     
    text-decoration:line-through;/*下划线 上划线  和none（取消链接下面的横杠）*/
    text-indent:3px; /*首行缩进（此处首行缩进3像素）  经常和p标签一起用*/
    text-height:90px;/*文本高度*/
     
}

5. margin 外边距       padding内边距

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#wai{
             
            width:300px;
            height:300px;
            
            }
        #nei{
            float:left;
注意float         width:190px;
            height:160px;
            
            margin:20px 30px 20px 30px;
            padding:40px 0px 0px 10px;
             
            }
        #li{
             
            width:100px;
            height:100px;
            
            margin:20px 0px 0px 20px;
 
 
 
 
<div id="wai">
         
            <div id="nei">
                <div id="li"></div>
            </div>
             
        </div>
<br>效果图：

 

边距与边界：  设边距 之后内部的是原来的

Float left；

Margin：10px；《边距》  上下左右都是10像素

Margine: 2px 5px 6px 7px；  外边距   注意 使用空格分隔  不是分号    是实现了左和上起作用 因为默认  在左上角实现  如果在右下角实现效果则  只有 右下实现效果

Padding ：2px 5px 6px 7px； 内边距  相对于 div 内的div  确定    内边距只要加了边距就会默认增加  边距的像素     [修改方法  只需要把原来的图形减去相应的内边距]

------------------------------------------------------------------------------------------------------------------------------------------------- 

 1.边框border

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    .er
    {
        border-bottom:200px red solid;
        border-right:#093 200px solid;
        border-left:#000 200px solid;
        border-top: #C0C 200px solid;
        width:0px;     div的宽度和高度
        height:0px;
        }      
</style>
</head>
<body>
<div class="er"></div>
<br>效果图
1
 

2.列表方块：

1
2
3
4
5
1.list-style: none
2.list-style:circle
3.list-style-image:url
4list-style-position:outside;
5.list-style-position:inside;

3.格式与布局

     position：

      ①position absolute：绝对定位 相对于浏览器  或相对于父级 绝对定位  如果相对于父级的话  那么他的父级也要绝对定位 举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
         
        .em
        {
            
            width:200px;
            height:200px;
            position:absolute;
            top:100px;
                left:50px;  top和left只有和position在一起时才起作用 同样  right  bottom；     
        }
 
 
 
<div class="em"></div>
效果图
1
如果把absolute 换成fixed 则相对于 浏览器定位   不随界面变化而变化  无论滚动条怎么变化   图片相对于屏幕位置不变如果把  absolute换成relative  则相对于  图片原来位置定位

4.流

float:left   ; 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        .re
        {
            float:left;
             
            }
 
 
 
<div class="re">1<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>
<div class="re">2<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>
<div class="re">3<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>
<div class="re">4<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>
<div class="re">5<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>
<div class="re">6<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>
<div class="re">7<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>
<div class="re">8<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>
使用后  排列的图片或其他悬浮于 屏幕上方    可以当作 不占位置   在写内容的时候  将会沉在 之前内容的下面再接着写内容的时候要记着清流 就是写一个div标签<div style="clear:both"> </div>

z-index    （必须同级别才能使用）

1
2
3
#d3{ width:900px; height:300px; position:absolute; z-index:2}
#d4{ width:200px; height:200px; position:absolute; z-index:3}
<br>都是 position   通过调节z-index 数值大小来调节  覆盖方式

隐藏 和显示

1.display     隐藏  none   显示 block[把空间和内容一起隐藏  后边的内容自动填充过去]

1
2
#d6{width:100px; height:100px; display:block;border-radius:20px;box-shadow:0 0 100px white;}
<br>                                                                          圆角              阴影边    坐标  宽度  颜色

2.display ：inlineblock  

主要用于  span  a  div 标签改变标签边框大小（普通方法没法改）

 

1
2
3
4
5
6
7
    #s1{ width:100px; height:100px; display:inline-block}
     
   
    
 
<span id="s1">测试文字</span>

3.visiblity  隐藏   hidden[只把内容隐藏 原来空间保留 不能重新写入  不能自动填充]

4.overflow    overflow：hidden；超出部分隐藏            overflow：scroll；超出部分设置滚动条；

 

1
2
3
4
5
   #d7{ width:100px; height:100px; overflow:hidden}
        
     
    <div id="d7">蝴蝶兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点啊哈大话大大话艾克大的按时</div>
自动换行 超出部分 隐藏掉
1
 

5透明圆角 阴影

 

1
2
3
4
5
6
7
8
9
10
11
12
13
.ert
            {
    
    width:200px;
    height:200px;
圆角     border-radius:20px;
           <br>阴影边框处    box-shadow:0 0 200px #000000;
                            0 0表示刚好在图形的下方出现<br>                           200px 表示阴影粗细<br> 透明度  opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)}
             
        </style>
    </head>  
    <body>
    <div class="ert"></div><br />

 

　　

 

.

只有在写了  position时  right left top  bottom 才能单独使用；

流  float

清流  clear box

Z-index 调位置   同一等级下

Display ：none  隐藏  用来隐藏和显示元素   隐藏了位置也随之隐藏

Display：block  显示

 Display ：inlineblock   用来调整大小（span元素）

Visiblity：hidden   隐藏了 但是位置保留

Overflow：hidden   超出部分隐藏；

Overflow：scrolly   超出部分  出现滚动条

透明度  opacity

Border-radius   圆角

Box-shadow：0,0，5px，white   

posted @ 2016-11-02 20:12  吴皓杰  阅读(122)  评论(0)  编辑  收藏  举报