css基礎(chǔ)內(nèi)容

番茄西紅柿發(fā)布于2019-04-23 13:16 / 2048人閱讀

摘要：注意設(shè)置并不是將內(nèi)邊距設(shè)置為，而是在原來的基礎(chǔ)上，增加，若想減小內(nèi)邊距，可以使用設(shè)置負(fù)值來完成。

css基礎(chǔ)內(nèi)容

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

一.css的引入方式

1.直接在html標(biāo)簽元素內(nèi)嵌入css樣式

<div style="font-size:14px; color:#FF0000;">行內(nèi)引入div>

2.在html頭部head部分內(nèi)style聲明插入代碼

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

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

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

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

4.使用link來調(diào)用外部的css文件

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

二.css選擇器

1.基礎(chǔ)選擇器

基本選擇器	說明
*	匹配任何元素
E	標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素
.class名	class選擇器，匹配所有class屬性為此class名的元素
#id名	id選擇器，匹配所有id屬性等于此id名的元素

2.組合選擇器

組合選擇器	說明
E,F	同時匹配所有E元素或F元素
E F	后代選擇器，匹配所有E標(biāo)簽下的F元素
E>F	子選擇器，匹配所有E下一級的F元素
E+F	相鄰兄弟選擇器，匹配所有緊隨E元素之后的同級元素F
E~F	匹配E元素后面的所有兄弟元素中的第一個F元素

3.屬性選擇器

屬性選擇器	說明
E[att]	選中具有attr屬性的E元素
E[attr=val]	選中具有attr屬性，并且屬性值為val的E元素
E[attr^=val]	選中具有attr屬性，并且屬性值以val開始的E元素
E[attr$=val]	選中具有attr屬性，并且屬性值以val結(jié)束的E元素
E[attr*=val]	選中具有attr屬性，并且屬性值包含val的E元素
E[attr~=val]	選中具有attr屬性，并且屬性值包含val的E元素，該屬性值必須以空格隔開

4.偽類

錨偽類	說明
a:link	未訪問的鏈接
a:visited	已訪問的鏈接
a:hover	鼠標(biāo)移動到鏈接上
a:active	選定的鏈接

a:hover 必須被置于 a:link 和 a:visited
a:active 必須被置于 a:hover 之后

E:before 在元素之前插入內(nèi)容
E:after 在元素之后插入內(nèi)容
舉例：

p:before{content:"sfencs";color:red}//在p標(biāo)簽之前插入sfencs
p:after{ content:"sfencs"；color:red}//在p標(biāo)簽之后插入sfencs

三.css屬性

1.字體

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

//設(shè)置字體顏色
color:blue
color:#FF0000
color:rgb(255,0,0)
color:rgba(255,0,0,0.5)//最后一項(xiàng)是透明度

//設(shè)置字體樣式
font-family:Microsoft YaHei

//設(shè)置字體粗細(xì)
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垂直方向和水平方向重復(fù)/repeat-x水平方向重復(fù)/repeat-y垂直方向重復(fù)/no-repeat不重復(fù)

3.文本

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

4.邊框

border-style: solid邊框樣式
border-color: black邊框顏色
border-width: 20px邊框?qū)挾?

5.列表

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

6.display

display:none//不顯示
display:block//顯示為塊級元素
display:inline//顯示為內(nèi)聯(lián)元素，元素前后沒有換行符
display:inline-block//行內(nèi)塊級元素

7.外邊距和內(nèi)邊距

這里借用w3school的一張圖

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

8.float浮動

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

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

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

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

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

3.給父級div加上

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

9.position

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