css基礎內容

CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一

一.css的引入方式

1.直接在html標簽元素內嵌入css樣式

<div style="font-size:14px; color:#FF0000;">行內引入</div>

2.在html頭部head部分內style聲明插入代碼

<style>
        p{
            background-color
 
: #FF0000;
        }
    </style>

3.使用@import引用外部CSS文件

<style type="text/css">
          @import"css文件路徑"; 
</style>

這種方式會先加載html文檔，再引入css渲染，可能會出現先打開沒有樣式的顯示之後才有了樣式渲染。

4.使用link來調用外部的css文件

<link href="css文件路徑" rel="stylesheet" type="text/css"/>

二.css選擇器

1.基礎選擇器

2.組合選擇器

3.屬性選擇器

4.偽類

a:hover 必須被置於 a:link 和 a:visited
a:active 必須被置於 a:hover 之後

E:before 在元素之前插入內容
E:after 在元素之後插入內容
舉例：

p:before{content:"sfencs";color:red}//在p標簽之前插入sfencs
p:after{ content:"sfencs"；color:red}//在p標簽之後插入sfencs

三.css屬性

1.字體

//設置字體大小
font-size: 20px
font-size: 50%
font-size: larger

//設置字體顏色
color:blue
color:#FF0000
color:rgb(255,0,0)
color:rgba(255,0,0,0.5)//最後一項是透明度

//設置字體樣式
font-family:Microsoft YaHei

//設置字體粗細
font-weight: lighter//bolder/lighter
font-weight: 500//100-900
font-weight: bold//normal/bold

//字體傾斜
font-style: oblique

2.背景

background-color:blue//背景顏色
background-image: url(‘圖片路徑‘)
background-repeat: no-repeat//圖像平鋪模式：repeat垂直方向和水平方向重復/repeat-x水平方向重復/repeat-y垂直方向重復/no-repeat不重復

3.文本

text-align: center//文本對齊方式：left/center/right
line-height: 200px//行高
vertical-align:middle//設置元素的垂直對齊方式：top把元素的頂端與行中最高元素的頂端對齊/bottom把元素的頂端與行中最低的元素的頂端對齊........
text-indent: 150px//首行縮進
letter-spacing: 10px//字符間隙
word-spacing: 20px//單詞間隙
text-transform:uppercase//控制文本大小寫：capitalize單詞大寫字母開頭/uppercase全部大寫/lowercase全部小寫

4.邊框

border-style: solid邊框樣式
border-color: black邊框顏色
border-width: 20px邊框寬度

5.列表

list-style-type:circle//設置列表項標記的類型
list-style-position:inside//設置在何處放置列表項標記
list-style-image: url(‘圖像路徑‘)//使用圖像來替換列表項的標記

6.display

display:none//不顯示
display:block//顯示為塊級元素
display:inline//顯示為內聯元素，元素前後沒有換行符
display:inline-block//行內塊級元素

7.外邊距和內邊距

這裏借用w3school的一張圖

通過調整margin，padding來調整元素內容之間的舉例，元素與元素之間的舉例。
註意1：設置padding-left:10px;並不是將內邊距設置為10px，而是在原來的基礎上，增加10px，若想減小內邊距，可以使用設置負值來完成。
註意2：body標簽在html標簽之中，所以body與html之間會有外邊距，這就是瀏覽器網頁兩邊會有白邊的原因，可以通過改變body的margin來解決。
註意3：邊界塌陷問題，父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content 中的其中一個，然後按此div 進行margin
　　　 解決方法：1.給父div設置透明邊框2.給父div設置padding3.給父div設置over-flow:hidden

8.float浮動

float使得元素脫離文檔流，使得元素向左或向右浮動，直到遇到邊框

float:right//是元素向右浮動
float:left//使元素向左浮動

如果兩個挨著的元素同時向右浮動，那麽左邊的元素也會緊隨著右邊的元素，而不會到達邊框
如果一行內放不下多個浮動元素，那麽多余的浮動元素會到達下一行。
如果不想一個元素的兩邊有浮動元素，可以使用clear屬性，

clear:none
clear:left
clear:right
clear:both

浮動雖然有益處，但也會帶來副作用，即由於浮動脫離了文檔流，導致父級div不能夠被撐開，導致浮動溢出
解決方法：1.設置父級div高度2.在父級div的末尾加上

<div class="clear"></div>

3.給最後一個浮動元素加上

:after { 
content: ".";                
display: block;            
clear: both;                  
visibility: hidden;           
line-height: 0;              
height: 0;                   
font-size:0;                 
}

9.position

positipn:static//默認值。沒有定位，元素出現在正常的流中
position:relative//生成相對定位的元素，相對於其正常位置進行定位，可以使用top，right，bottom，left等屬性進行調整
position:fixed//生成絕對定位的元素，相對於瀏覽器窗口進行定位
position:absolute//生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位,可以使用top，right，bottom，left等屬性進行調整

css基礎內容