學習02-css基本內容

css的樣式可分爲：

行內式：

<div style="color: red;">
        行內樣式
</div>

內部式：

在head標籤裏寫

<style>
        div {
            color: red;
        }
</style>

外部式：

引用外部的css

<link rel="stylesheet" href="css地址">

css選擇器

標籤選擇器：

div {
      color: red;
    }

類選擇器：

.nav {
            color: red;
        }

id選擇器：

#nav {
            color: red;
        }

css外觀屬性總結

屬性	表示	注意
color	顏色	一般使用十六進制如#fff
line-height	行高	控制行與行之間的距離
text-align	水平對其	能夠設定文字水平的對其方式
text-indent	首行縮進	首行縮進2個字符間距
text-decoration	文本修飾	添加下劃線underline

複合選擇器：

選擇器	做用	使用狀況	特徵	隔開符號及用法
後代選擇器	用來選擇元素後代	較多	是選擇全部的子孫後代	符號是空格 .nav a
子代選擇器	選擇最近一級元素	較少	只選擇親兒子	符號是> .nav>p
交集選擇器	選擇兩個標籤交集部分	較少	便是又是	沒有符號 p.one
並集選擇器	選擇某些相一樣式的選擇器	較多	能夠用於集體聲明	符號是逗號 .nav,.header
連接僞類選擇器	給連接更改狀態	較多		重要記住a{}和a:hover實際開發寫法

標籤顯示模式：

顯示模式	典型表明	特色
塊級標籤	div、h1~h六、p、ul、ol、li、dl、dt、dd等	能夠設置行高，獨佔一行
行內標籤	span、a、b、u、i、strong、em、del、ins等	不能夠設置行高，一排能夠放多個
行內塊標籤	img、input、textarea、select等	能夠設置寬高，不獨佔一行

display: inline; //轉換爲行內元素
display: block; //轉換爲塊級元素
display: inline-block; //轉換爲行內塊元素

css背景：

屬性	做用	值
background-color	背景顏色	background-color：red;默認值：transparent透明色
background-image	背景圖片	background-image：url(圖片地址不用加引號)
background-repeat	是否平鋪	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	參數：position；值：top
background-attachment	背景固定仍是滾動	scroll：背景圖像隨對象內容一塊兒滾動，fixed：背景圖像固定
背景簡寫	更簡單	background：背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置；
背景透明	讓盒子半透明	background：rgba（0，0，0，0.3）；

css權重計算器：

標籤選擇器	計算權重公式
繼承或者 *	0，0，0，0
每一個元素（標籤選擇器）	0，0，0，1
類選擇器 僞類	0，0，1，0
id選擇器	0，1，0，0
行內樣式表	1，0，0，0
！important	無窮大