來源：達達前端 發(fā)布時間：2020-04-28 14:17:20 閱讀量：1658
CSS基礎知識
css，英文Cascading Style Sheets，中文名：級聯(lián)樣式表。層疊樣式表。
css是一種表現(xiàn)語言，是對網(wǎng)頁語言的補充。
css用于網(wǎng)頁的風格設計，包括字體，顏色，位置等。
css使用的4中方式：引入外部樣式文件，導入外部樣式文件，使用內(nèi)部樣式定義，使用內(nèi)聯(lián)樣式定義。
引入外部樣式文件：
<link type="text/css" rel="stylesheet" href="css樣式文件的url"/>
1
導入外部樣式文件:
<style type="text/css">
@import "css樣式文件的url";
</style>
1
使用內(nèi)部樣式定義：
<style type="text/css">
div {
background-color: #ffffff;
width: 300px;
height: 300px;
}
</style>
1
使用內(nèi)聯(lián)樣式定義：
<div style="background-color: #ffffff; width: 100px; height: 100px;">
</div>
1
css的兩個特性：層疊，繼承
層疊：層疊樣式生效的優(yōu)先級：
內(nèi)聯(lián)樣式->內(nèi)部樣式->外部樣式->瀏覽器默認效果。
繼承，就是css屬性可以從父元素向下傳遞到子元素。
css的選擇器
元素選擇器，是最簡單的選擇器。
通配符選擇器，用"*"表示，表示對任意元素都有效。
屬性選擇器
格式：
E[attribute]{property1:value1; property2:value2;...}
1
語法 說明
E[attribute] 用于選取帶有指定屬性的元素
E[attribute=value] 用于選取帶有指定屬性和指定值的元素
E[attribute~=value] 用于選取屬性值包含指定值的元素，該值必須是整個單詞，可以前后有空格
E[attribute\|=value] 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞或者后面跟著連字符“-”
派生選擇器
派生選擇器根據(jù)元素在其位置的上下文關系定義樣式
派生選擇器分3種：后代選擇器，子元素選擇器，相鄰兄弟選擇器
后代選擇器是某元素后代的所有元素。
子元素選擇器是相對于父元素的第一級子元素符合條件。
相鄰兄弟選擇器，針對的元素是同級元素，擁有相同的父元素，且兩個元素是相鄰的。
id選擇器，以特定id值的HTML元素指定樣式。
類選擇器，以指定class的HTML元素指定樣式。
偽類選擇器
偽類選擇器：偽類選擇器和偽元素選擇器
偽類以冒號(:)開頭，元素選擇符和冒號之間不能有空格，偽類名中間也不能有空格。
css中常用的偽類如下表所示：
偽類名 說明
:active 向被激活的元素添加樣式
:focus 向擁有輸入焦點的元素添加樣式
:hover 向鼠標懸停在上方的元素添加樣式
:link 向未被訪問的鏈接添加樣式
:visited 向已被訪問的鏈接添加樣式
:first-child 向元素添加樣式，且該元素是它的父元素的第一個子元素
:lang 向帶有指定lang屬性的元素添加樣式
偽元素選擇器
css中常用的偽元素如下表所示：
偽元素名 說明
:first-letter 向文本的第一個字母添加樣式
:first-line 向文本的第一行添加樣式
:after 在元素之后添加內(nèi)容
:before 在元素之前添加內(nèi)容
css背景
css背景屬性如下：
屬性 說明
background-color 定義背景顏色
background-image 定義背景圖片
background-repeat 定義背景圖片是否重復以及其重復方式
background-attachment 定義背景圖片是否跟隨內(nèi)容滾動
background-position 定義背景圖片的水平位置和垂直位置
background 可以用一條樣式定義各種背景屬性
background
background-color用于設置背景顏色，初始值為transparent透明色。
顏色取值3種如：顏色名，十六進制顏色，rgb函數(shù)。
background-image用于設置元素的背景圖片，默認值為none。
background-repeat控制圖像的平鋪。
background-repeat默認值為repeat，即圖像沿著x軸和y軸平鋪，還可以指定沿著x軸平鋪rpeat-x，沿著y軸平鋪repeat-y，或者不平鋪no-repeat，繼承父元素該屬性設置inherit。
background-attachment用于設置背景圖像是否固定或者隨著頁面的其余部分滾動。默認值為：scroll，表示可以隨著頁面其余部分的滾動而滾動。設置fixed，表示當頁面其余部分滾動時，背景圖片不會滾動，設置inherit，繼承父元素。
background-position用于設置背景圖像圓點的位置。
background可以將background-color，background-position，background-attachment，background-repeat，background-image全部設置。
css字體屬性
css常用字體屬性表：
屬性 說明
font-family 定義文本的字體系列
font-size 定義文本的字體尺寸
font-variant 定義是否以小型大寫字母的字體顯示文本
font-style 定義文本的字體是否是斜體
font-weight 定義字體的粗細
font 可以一條樣式定義各種字體屬性
font-family用于設置元素的字體，該元素屬性值一般可以設置多個字體。
font-size用于設置字體的尺寸。
font-style用于設置字體是否是斜體，默認值為normal，當設置為italic，顯示為一個斜體的樣式，當設置為oblique，顯示為一個傾斜的樣式。
font-variant用于設置字體使用小寫字體，默認為normal，一旦設置為small-caps，將所有小寫字母變?yōu)榇髮憽?/span>
font-weight用于設置字體的粗細，normal值等于400，bold的值等于700。
font，可以設置font-family,font-size,font-style,font-variant,font-weight。
css文本屬性表：
屬性 說明
color 文本顏色
direction 文本方向或者書寫方向
letter-spacing 字符的間距
line-height 文本的行高
text-align 文本的水平對齊方式屬性,設置元素中文本的水平方式，值有l(wèi)eft，right，center，inherit。
text-decoration 給文本添加修飾效果，值有underline為添加下畫線，overline添加上畫線，line-through添加刪除線，blink添加閃爍的效果,none無如何修飾,inherit。
text-indent 定義文本的首行縮進方式，默認值為0
text-shadow 為文本添加陰影效果
text-transform 切換文本的大小寫
white-space 設置如何處理元素內(nèi)的空白
word-spacing 定義單詞之間的距離
css尺寸屬性表：
屬性 說明
width 設置元素的寬度
min-width 設置元素的最小寬度
max-width 設置元素的最大寬度
height 設置元素的高度
min-height 設置元素的最小高度
max-height 設置元素的最大高度
css列表屬性表：
屬性 說明
list-style-image 設置列表項標記樣式為圖像，none/inherit/url
list-style-position 設置列表項標記的位置，inside/outside/inherit
list-style-type 設置列表項標記的類型
list-style 可以用一條樣式定義各種列表屬性
list-style-type
值 說明
disc 實心圓
circle 空心圓
square 方塊
decimal 數(shù)字
low-roman 小寫羅馬數(shù)字
upper-roman 大寫羅馬數(shù)字
low-alpha 小寫字母
upper-alpha 大寫字母
none 無標記
inherit 繼承父元素的該設置
css表格屬性表：
屬性 說明
border-collapse 設置是否合并表格邊框
border-spacing 設置相鄰單元格邊框之間的距離
caption-side 設置表格標題的位置
empty-cells 設置是否顯示表格中空單元格上的邊框和背景
table-layout 設置用于表格單元格列寬的設置方式
盒模型
css盒模型，包含元素內(nèi)容content，內(nèi)邊距padding，邊框border，外部距margin。
css內(nèi)邊距屬性，元素的內(nèi)邊距在邊框和內(nèi)容之間。
css內(nèi)邊距的屬性：
屬性 說明
padding-top 元素的上內(nèi)邊距
padding-right 元素的右內(nèi)邊距
padding-bottom 元素的下內(nèi)邊距
padding-left 元素的左內(nèi)邊距
padding 用一個聲明定義所有內(nèi)邊距屬性
設置順序為上右下左依次進行。
padding: 10px 10px 10px 10px;
1
css外邊距的屬性：
屬性 說明
margin-top 定義元素的上外邊距
margin-right 定義元素的右外邊距
margin-bottom 定義元素的下外邊距
margin-left 定義元素的左外邊距
margin 用一個聲明定義所有外邊距屬性
css邊框的屬性：
屬性 說明
border-top-style 上邊框的樣式屬性
border-right-style 右邊框的樣式屬性
border-bottom-style 下邊框的樣式屬性
border-left-style 左邊框的樣式屬性
border-style 設置4條邊框的樣式屬性
border-top-width 設置上邊框的寬度屬性
border-right-width 設置右邊框的寬度屬性
border-bottom-width 設置下邊框的寬度屬性
border-left-width 設置下邊框的寬度屬性
border-width 設置4條邊框的寬度屬性
border-top-color 設置上邊框的顏色屬性
border-right-color 設置右邊框的顏色屬性
border-bottom-color 設置下邊框的顏色屬性
border-left-color 設置左邊框的顏色屬性
border-color 設置4條邊框的顏色屬性
border-top 用一條聲明定義所有上邊框的屬性
border-right 用一條聲明定義所有右邊框的屬性
border-bottom 用一條聲明定義所有下邊框的屬性
border-left 用一條聲明定義所有左邊框的屬性
border 用一條聲明定義所有邊框的屬性
border-width 一次定義4條邊框的寬度
border-color 一次定義4條邊框的顏色
邊框的樣式
none，無邊框效果
hidden，與none相同
dotted，點線邊框效果
dashed，虛線邊框效果
double，雙線邊框效果
solid，實線邊框效果
groove，3D凹槽邊框效果
ridge，3D凸槽邊框效果
css輪廓是繪制在元素周圍的一條線，位于邊框邊緣的外圍，起到突出元素的作用。
屬性 說明
outline-style 定義輪廓的樣式屬性
outline-color 定義輪廓的顏色屬性
outline-width 定義輪廓的寬度屬性
outline 同一個聲明中定義所有的輪廓屬性
布局屬性
布局屬性是文檔中元素排列顯示的規(guī)則
布局方式3種：普通文檔流，浮動，定位
css浮動涉及到的屬性
屬性 說明
float 設置框是否需要浮動以及浮動方向
clear 設置元素的哪一側(cè)不允許出現(xiàn)其他浮動元素
clip 裁剪絕對定位元素，該元素必須是絕對定位，上右下左原則
overflow 設置內(nèi)容溢出元素框時的處理方式，值：visible,auto,hidden,scroll
display 設置元素如何顯示，值none,block,inline,inline-block,inherit
visibility 定義元素是否可見，visibility設置為隱藏，元素占用的空間依然會保留，但display:none不保留占用空間，值：visible,hidden
css定位的屬性
屬性 說明
position 元素的定位類型，值static,absolute絕對，relative相對
top 元素上外邊距
right 元素右外邊距
bottom 元素下外邊距
left 元素的左外邊距
z-index 元素的堆疊順序
z-index用于設置目標對象的定位層序，數(shù)值越大，所在層級越高。該屬性只在position:absolute時有效。
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
