前端-2

weixin_34019929發表於2017-12-04
前端

HTTP協議是無狀態的:連完就斷了
HTTP是基於請求/響應模式的
URL:統一資源定位符，就是一個網址：協議名://域名:埠/路徑
refer的作用:可以統計從哪進來的，比如統計百度進來的
Content-Type:

一、CSS的引入方式

  • 方式1 行內式(不會用這種)
<p style="color:#ff0000;background-color:#00ff00"></p>
  • 方式2 嵌入式
<head>
    <style>
        //1、通過標籤名稱進行選擇
        div{
            color:red;
            background-color:gray;
        }
        //2、通過id進行選擇
        #xx_id{
            color:red;
            background-color:gray;
        }
        //3、通過class
        .xx_id{
            background-color:gray;
        }
    </style>
</head>
  • 方式3 連結式(推薦使用)
    xx.css
div{
    color:red;
    background-color:gray;
}

<link href="xx.css" type="text/css" rel="stylesheet">
  • 方式4 匯入式
<head>
    <style>
        @import "xx.css"
        //@import有數量限制,並且是最後載入css樣式
    </style>
</head>

二、CSS的選擇器

  • 基礎選擇器
    id不能重複，class可以重複
*通用選擇器
*{
    font-size:12px;
 }
 
標籤選擇器:根據標籤的名稱進行選擇
div{
    
}

id選擇器
#p1_id{
    
}

類選擇器
.p1_class{
    
}
  • 組合選擇器
後代選擇器(兒子孫子，，) div 下的p標籤
div p{
    
}

div .p_cls{
    
}

子代選擇器(只有兒子)
div > p{
    
}

#p_id > .p_cls > div{
    
}

並列選擇器
#p_id,#c_id{
    
}

毗鄰選擇器 緊跟在後()邊的某標籤
#p_id + p{
    
}
  • 屬性選擇器
利用屬性名來改變
<style>
    [id]{
        color:red;
    }
    
    [class='cls_1']{
        color:red;
    }
</style>


還可以使用自定義的屬性
[mudy]{
    
}

div[mudy="good"]{
    
}

<div mudy="good"></div>

選擇class中有div1的
div[class~="div1"]{
            color:red;
        }
<div class="div1 div2"></div>

class中以div1開頭的
[class^="div1"]{
            color:red;
        }
        
class中包含"di"欄位的 
[class*="di"]{
            color:red;
        }
        
偽類：
<style>
        [class*="di"]{
            color:red;
        }

        a:link{
            color:blue;
        }

        a:hover{
            color:red;
        }


        a:visited{
            color:yellow;
        }

        a:active{
            color:green;
        }
</style

before/after
a:after{
            content:"frfr";
            color:red;
        }

三、CSS的常用屬性

文字屬性:
letter-spacing:字母之間的距離
word-spacing: 單詞之間的間距

background-size:
background-position:left center;
簡寫:background:url("12.jpg") no-repeat 100px 100px red;


margin,padding，內邊距與外邊距
http://www.cnblogs.com/yuanchenqi/articles/5977825.html


display:內聯與塊級標籤相互轉換
none
block
inline 不獨佔一行
inline-block 可調寬高

相關文章