目錄
CSS
簡介
發展史
優勢
基本語法
引用方式
內部樣式
行內樣式
外部樣式
選擇器
id選擇器
class選擇器
標簽選擇器
子代選擇器
后代選擇器
相鄰兄弟選擇器
后續兄弟選擇器
交集選擇器
并集選擇器
通配符選擇器
偽類選擇器
屬性選擇器
CSS基本屬性
優點
字體屬性
文本屬性
背景屬性
邊框屬性
列表屬性
鼠標屬性
盒子
概念
格式
邊框
外邊距
圓角邊框
陰影
浮動
標準文檔流
display
float
overflow
定位
相對定位
絕對定位
z-index
CSS
簡介
??????? css:層疊樣式表,是種格式化網頁的標準方式,用于控制設置網頁的樣式,并且允許css樣式信息與網頁內容分離的一種技術
發展史
優勢
1.格式和結構分離:有利于格式的重用以及網頁的修改與維護
2.精確控制頁面布局:對網頁實現更加精確地控制,如網頁的布局、字體、顏色、背景等,樣式豐富
3.網頁結構表現統一,可以實現復用,實現多個網頁同事更新
基本語法
格式:
h1{
??????? color:blue;
}
CSS的定義是由三部分組成的,包括選擇符、屬性、屬性值
選擇符:要修飾的對象
屬性:修飾對象的哪一個屬性(樣式)
屬性值:樣式的取值
引用方式
css共有三種引用方式:內部樣式、行內樣式、外部樣式;
優先級:采取就近原則:行內樣式>內部樣式>外部樣式
內部樣式
也稱為內嵌樣式,在頁面頭部通過style標簽定義。對當前頁面中所有符合樣式選擇器的標簽都起作用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>導入方式</title><!-- 內部樣式 --><style>h1 {color: black;}</style></head><body><h1>標簽</h1></body>
</html>
行內樣式
也稱為嵌入樣式,使用HTML標簽的style屬性定義。只對設置style屬性的標簽起作用。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>導入方式</title></head><body><!-- 行內樣式:在標簽元素中,編寫一個style屬性,編寫樣式即可 --><h1 style="color: aqua">標簽</h1></body>
</html>
外部樣式
使用單獨的 .css文件定義,然后在頁面中使用 link標簽 或 @import指令 引入
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>導入方式</title><!-- 外部樣式 --><link rel="stylesheet" href="css/style.css"><!-- 導入式 --><style>@import url("css/style.css");<style></head><body><h1>標簽</h1></body>
</html>
選擇器
作用:選擇頁面上的某一個或某一類元素
id選擇器
????????id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式,一般來說,一個頁面中標簽的id的名稱,必須唯一且不能重復。
<p id="part">段落</p>
#part{
??????? color: red;
}
class選擇器
class 選擇器可以為標有特定 class 的 HTML 元素指定特定的樣式,一般來說,一個頁面中標簽的class的名稱,可以不唯一且可以重復。
<p class="part">段落1</p>
<p class="part">段落2</p>
.part{
??????? color: red;
}
標簽選擇器
除了使用id選擇器和class選擇器,我們也可以直接使用標簽選擇器。
<p>段落</p>
<p>段落</p>
p{
??????? color: red;
}
子代選擇器
子代選擇器可以選擇當前元素的所有子元素。定義的時候用 “> ”隔開。
<div>
????????<p>段落</p>
</div>
div>p{
??????? color: red;
}
后代選擇器
????????標簽元素除了并列書寫還可以嵌套書寫,后代選擇器就是用于選擇嵌套標簽元素的一種選擇器。定義的時候用“空格 ”隔開。
<p class="part">
??????? <a href=""></a>
</p>
.part a{
??????? color: red;
}
相鄰兄弟選擇器
相鄰兄弟選擇器可選擇緊接在另一元素后的元素,且二者有相同父元素。定義的時候用 “+ ”隔開。
<div>
????????<p></p>
</div>
<p></p>
div + p{
??????? color: red;
}
后續兄弟選擇器
后續兄弟選擇器選取所有指定元素之后的相鄰兄弟元素。定義的時候用“~ ”隔開。
<div>
????????<p></p>
</div>
<p></p>
div ~ p{
??????? color: red;
}
交集選擇器
選擇的元素必須同時滿足多個條件才可以被選擇,交集選擇器就是干這個的。定義的時候用標簽名.ID名/類名 。
<p class="part"></p>
<h1 class="part"></h1>
p .part{
??????? color: red;
}
并集選擇器
多種元素共享某種屬性,這時候就可以使用并集選擇器。定義的時候用“逗號”隔開。
<p></p>
<h1></h1>
<a class="like"></a>
p h1 .like{
??????? color: red;
}
通配符選擇器
通配符選擇器可以匹配任何標簽,我們常用于統一頁面樣式。
<p></p>
<h1></h1>
<a class="like"></a>
*{
??????? color: red;
}
偽類選擇器
根據不同的狀態顯示不同的樣式,一般多用于標簽。
有四種狀態:
????????:link 未訪問的鏈接
????????:visited 已訪問的鏈接
????????:hover 鼠標懸浮到連接上,即移動在連接上
????????:active 選定的鏈接,被激活
注:默認超鏈接為:藍色、下劃線
屬性選擇器
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
<input type="text" value="文本框" />
<input type="button" value="按鈕" />
input[type="text"]{
??????? width: 150px;
}
input[type="button"]{
??????? width: 150px;
}
CSS基本屬性
優點
1.有效的傳遞頁面信息
2.美化網頁
3.凸顯頁面的主題
4.提高用戶體驗
格式:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.title1{font-size: 50px;background: aquamarine;}</style></head>
<body>學習的<span class="title1">人最帥</span></body>
</html>
字體屬性
css字體屬性指的是設置字體相關的樣式。
字體屬性及說明 | |
屬性 | 說明 |
font | 簡寫屬性,把所有針對字體的屬性設置在一個聲明中 |
font-size | 設置字體的尺寸 |
font-style | 設置字體的風格;Normal:正常、italic:斜體、oblique:傾斜 |
font-weight | 設置字體的粗細;Normal:正常、lighter:細體、bold:粗體、bolder:特粗體 |
font-family | 設置字體;指定多種字體時用逗號分開 |
文本屬性
文本屬性包括陰影效果、大小寫、文本縮進、對齊方式等等。
文本屬性及說明 | |
屬性 | 說明 |
color | 設置文本顏色 |
direction | 設置文本方向 |
letter-spacing | 設置字符間距 |
line-height | 設置行高 |
text-align | 設置文本內容的對其方式 |
text-decoration | 向文本添加修飾 |
text-overflow | 設置對象內溢出的文本處理方式 |
text-indent | 設置首行文本的縮進 |
text-transform | 控制文本轉換 |
text-shadow | 設置文本陰影 |
unicode-bidi | 設置文本方向 |
word-spacing | 設置字間距 |
white-space | 設置元素中空白的處理方式 |
背景屬性
CSS背景屬性主要用于設置對象的背景顏色、背景圖片、背景圖片的重復性、背景圖片的位置等。
常見的背景屬性及說明 | |
屬性 | 說明 |
background | 簡寫屬性 |
background-attachment | 設置背景圖像是否固定或者隨著頁面其余部分滾動 |
background-color | 設置元素的背景顏色 |
background-image | 將圖像設置為背景 |
background-position | 設置背景圖像的起始位置 |
background-repeat | 設置背景圖像是否重復 |
background-clip屬性規定背景的繪制區域,該屬性是CSS3的屬性,主要用于設置背景圖像的裁剪區域,其基本語法格式是:
background-clip : border-box|padding-box|content-box;
邊框屬性
CSS邊框屬性可以設置對象邊框的顏色、樣式以及寬度。使用對象的邊框屬性時必須先設定對象的高度及寬度。語法格式如下:
border:邊框寬度 邊框樣式 邊框顏色
邊框樣式的取值及說明 | |||
邊框樣式 | 說明 | 邊框樣式 | 說明 |
none | 無邊框 | ridge | 菱型邊框 |
double | 雙線邊框 | dashed | 虛線邊框 |
hidden | 隱藏邊框 | solide | 實線邊框 |
groove | 3D凹槽邊框 | inset | 3D內嵌邊框 |
dotted | 點線邊框 | outset | 3D凸邊框 |
注意:border-width屬性可以單獨設置邊框寬度;border-style屬性可以單獨設邊框樣式;border-color屬性可以單獨設置邊框顏色。
列表屬性
常用的列表屬性是list-style-type 、list-style-image、 list-style-position以及list-style。
屬性 | 含義 | 說明 |
list-style-type | 設置列表前的標記 | |
list-style-image | 將圖像作為列表前的標記 | |
list-style-position | 設置標記的位置 | 取值:outside(默認)、inside |
list-style | 簡寫 |
list-style-type屬性用于設置列表項標記的類型,主要有disp (實心圓)、circle (空心圓)、square (實心方塊)、none (不使用項目符號) 。
list-styl-image屬性用于設置使用什么圖像作為列表符號。
list-style-position屬t用來指定列表符號的顯示位置,當值為outside時, 表示將列表符號放在文本塊之外,該值為默認值,當值為inside時,表示將列表符號放在文本塊之內。
鼠標屬性
CSS中可以通過鼠標指針的cursor屬性設置鼠標指針的顯示圖形,語法格式如下:
cursor:鼠標指針樣式
cursor屬性取值說明 | |||
crosshair | 十字準線 | s-resize | 向下改變大小 |
pointer | hand | 手型 | e-resize | 向右改變大小 |
wait | 表 | w-resize | 向左改變大小 |
help | 問號 | ne-resize | 向上右改變大小 |
no-drop | 無法釋放 | nw-resize | 向上左改變大小 |
text | 文字或編輯 | se-resize | 向下右改變大小 |
move | 移動 | sw-resize | 向下左改變大小 |
n-resize | 向上改變大小 |
盒子
概念
CSS盒子模型是一種在網頁設計中用于描述元素布局的概念模型。在CSS中,每個元素都被視為一個矩形盒子,這個盒子包含了該元素的內容、內邊距(padding)、邊框(border)和外邊距(margin)。
- 內容(content):這是盒子里裝的東西,可以是文本、圖像或者其他元素。內容的尺寸可以通過height和width屬性來控制。
- 內邊距(padding):這是內容與邊框之間的空間。內邊距的大小可以通過padding屬性來控制。
- 邊框(border):這是圍繞內容和內邊距的一條線。邊框的樣式、寬度和顏色可以通過border屬性來控制。
- 外邊距(margin):這是盒子與其他元素之間的空間。外邊距的大小可以通過margin屬性來控制。
在CSS中,可以通過設置元素的width和height屬性來控制盒子的尺寸。但是需要注意的是,增加內邊距和邊框的寬度會增加盒子的尺寸,但不會影響內容區域的尺寸。而增加外邊距則會增加盒子與其他元素之間的距離,但不會影響盒子的尺寸。
格式
<div></div>
邊框
格式:
border:粗細 樣式 顏色
外邊距
margin-left/right/top/bottom–>表示四邊,可分別設置,也可以同時設置如下
margin:0 0 0 0/*分別表示上、右、下、左;從上開始順時針*/
/*例1:居中*/
margin:0 auto /*auto表示左右自動*/
/*例2:*/
margin:4px/*表示上、右、下、左都為4px*/
/*例3*/
margin:10px 20px 30px/*表示上為10px,左右為20px,下為30px*/
盒子的計算方式:
margin+border+padding+內容的大小
總結:
body總有一個默認的外邊距 margin:0
常見操作:初始化
圓角邊框
使用:border-radius
<style>
??????? div{
??????????? width: 100px;
??????????? height: 100px;
??????????? border: 10px solid red;
??????????? /*一個border-radius只管一個圓的1/4*/
??????????? border-radius: 50px 20px 20px 30px;/*左上 右上 右下 左下 ,順時針方向*/
??????? }
</style>
陰影
box-shadow: 10px 10px 1px black;
浮動
標準文檔流
塊級元素:獨占一行 h1~h6 、p、div、 列表…
行內元素:不獨占一行 span、a、img、strong
注: 行內元素可以包含在塊級元素中,反之則不可以
display
display屬性定義了一個元素應如何在頁面上顯示
常用值:
- block:將元素顯示為塊級元素。塊級元素會在其前后創建新行,并且占據整個容器的寬度。例如,<div>、<p>、<h1>等元素的默認display屬性值為block。
- inline:將元素顯示為內聯元素。內聯元素不會創建新行,而是在當前行內顯示。例如,<span>、<a>等元素的默認display屬性值為inline。
- none:將元素隱藏,不顯示。
- inline-block:將元素顯示為內聯塊級元素。內聯塊級元素可以在當前行內顯示,并且可以設置寬度和高度。
- flex:將元素顯示為彈性盒模型。彈性盒模型是一種用于創建復雜的布局和對齊元素的CSS技術。
- grid:將元素顯示為網格容器。網格容器是一種用于創建二維布局的CSS技術。
這也是一種實現行內元素排列的方式,但是我們很多情況用float
float
在CSS中,float屬性用于將元素放置在其容器的左側或右側,使文本和內聯元素環繞它。這個屬性常用于文字環繞圖片等場景。
float屬性有三個值:
- left:將元素向左浮動。
- right:將元素向右浮動。
- none:默認值,元素不浮動,會停在原處
注意:
??????? 1.浮動元素會脫離正常的文檔流,不會影響到其它元素的布局。
??????? 2.浮動元素之后的元素會環繞浮動元素。
??????? 3.如果容器內只有浮動元素,那么容器將不會顯示,因為浮動元素會脫離文檔流。
overflow
overflow屬性用于指定當內容溢出元素框時該如何處理。
屬性有三個值:
- visible:默認值,內容會溢出元素框,并在頁面中顯示出來。
- hidden:內容不會溢出元素框,溢出的內容會被裁剪,并且其余內容是不可見的。
- auto:瀏覽器會自動判斷是否需要裁剪內容,如果需要,則裁剪內容并顯示滾動條。
格式:
div { overflow: hidden; }
使用overflow屬性可以控制頁面元素的顯示效果,從而實現各種不同的布局效果。
定位
相對定位
????????相對定位是一種布局策略,它相對于元素在正常文檔流中的位置進行定位。使用相對定位屬性可以讓元素相對于其原始位置進行平移、旋轉等操作,而不會影響到其他元素的布局
格式:
//一個元素向右平移100像素
div {
????????position: relative;
????????left: 100px;
}
如:
top:-20px;/*向上偏移20px*/
left:20px;/*向右偏移20px*/
bottom:10px;/*向上偏移10px*/
right:20px;/*向左偏移20px*/
通過設置元素的position屬性為relative來實現的
控制元素位置屬性:
????????top
????????right
????????bottom
????????left
????????相對定位不會改變元素在正常文檔流中的位置,它只是在視覺上移動了元素。因此,使用相對定位不會影響到其他元素的布局。????????
絕對定位
????????絕對定位是一種布局策略,它可以使一個元素脫離正常的文檔流,并相對于其包含塊進行定位。使用絕對定位屬性可以讓元素在頁面中精確定位,并且不會影響到其他元素的布局。
通過設置元素的position屬性為absolute來實現的。
控制元素位置屬性:
????????top
????????right
????????bottom
????????left
格式:
//將一個元素絕對定位到頁面的右下角:
div {
????????position: absolute;
????????bottom: 0;
????????right: 0;
}
????????絕對定位會使元素脫離正常的文檔流,并且會覆蓋其他元素的內容。因此,在使用絕對定位時需要謹慎考慮其布局效果,并與其他布局技術結合使用
z-index
????????z-index屬性在CSS中用于確定元素的堆疊順序。z-index的值是一個整數,表示元素在Z軸上的位置。一個較大的z-index值意味著元素在疊層順序中會更靠近頂部。
????????需要注意的是,z-index屬性只對設置了定位(position:relative/absolute/fixed/sticky)的元素有效。默認值為auto,如果z-index設置為auto,則根據元素的定位類型(static/relative/absolute/fixed/sticky),其層疊順序會受到不同的影響。
????????此外,z-index也支持負值,但要注意的是,如果定位元素有發生嵌套,那么負值的z-index可能不會按照預期工作。在CSS2.1時代,只有定位元素(position:relative/absolute/fixed/sticky)的z-index才有作用。