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

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

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

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

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

一.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>

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

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

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

二.css選擇器

1.基礎(chǔ)選擇器

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

2.組合選擇器

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

3.屬性選擇器

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

4.偽類

錨偽類	說(shuō)明
a:link	未訪問(wèn)的鏈接
a:visited	已訪問(wèn)的鏈接
a:hover	鼠標(biāo)移動(dòng)到鏈接上
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//文本對(duì)齊方式：left/center/right
line-height: 200px//行高
vertical-align:middle//設(shè)置元素的垂直對(duì)齊方式：top把元素的頂端與行中最高元素的頂端對(duì)齊/bottom把元素的頂端與行中最低的元素的頂端對(duì)齊........
text-indent: 150px//首行縮進(jìn)
letter-spacing: 10px//字符間隙
word-spacing: 20px//單詞間隙
text-transform:uppercase//控制文本大小寫(xiě)：capitalize單詞大寫(xiě)字母開(kāi)頭/uppercase全部大寫(xiě)/lowercase全部小寫(xiě)

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(圖像路徑)//使用圖像來(lái)替換列表項(xiàng)的標(biāo)記

6.display

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

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

這里借用w3school的一張圖

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

8.float浮動(dòng)

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

float:right//是元素向右浮動(dòng)
float:left//使元素向左浮動(dòng)

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

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

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

3.給父級(jí)div加上

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

9.position

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