CSS
CSS簡述
- CSS是什么？有什么作用？
CSS(Cascading Style Sheets)：層疊樣式表，
CSS通常稱為CSS樣式或層疊樣式表，主要用于設定HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬度、邊框樣式、邊距等）以及版式的布局等外觀顯示樣式，
CSS可以使HTML頁面更好看，CSS色系的搭配可以讓用戶更舒服，CSS+DIV布局更加靈活，更容易繪制出用戶需要的結構，
CSS的代碼規范
- 放置規范
在<style>標簽內容體中書寫CSS樣式代碼，<style>標簽放置在標簽中， - 格式規范
選擇器名稱 {屬性名:屬性值; 屬性名:屬性值;......}
選擇器：即指定CSS樣式作用在哪些HTML標簽上，
- 代碼規范
- 屬性名和屬性值之間是鍵值對關系，
- 屬性名和屬性值之間用”:“連接，最后”;“結尾，（例如：font-size:10px）
- 如果一個屬性名有多個值，多個值之間用空格隔開，（例如：border:5px solid red;）
- CSS注釋：/*注釋內容*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span{
font-size:120px;
color:red;
border:1px solid blue;
}
</style>
</head>
<body>
<span>111</span>
<span>222</span>
</body>
</html>
CSS選擇器
基本選擇器
- 元素選擇器
HTML標簽又名HTML元素，
元素選擇器：即以HTML標簽名作為選擇器名稱，
作用：選擇CSS樣式代碼，作用于對應標簽上，
- 格式
標簽名{ /*CSS樣式代碼*/ }- 適用范圍：適用于將相同樣式作用在多個同名標簽上，
- 類選擇器
每個HTML標簽都有一個class屬性，class屬性值即為類名，
類選擇器：即以HTML的類名（class屬性值）作為選擇器名稱，
作用：選擇CSS樣式作為代碼，作用于對應類名的HTML標簽上，
- 格式：
.類名{ /*CSS樣式代碼*/ }- 使用范圍：適用于將樣式一次作用在相同類名的標簽上，
- id選擇器
每個HTML標簽都有一個id屬性，id的屬性值必須在本頁面是唯一的，
id選擇器：即以HTML的id（id屬性值）作為選擇器名稱，
作用：選擇器CSS樣式代碼，作用于某個規定id值的HTML標簽上，
- 格式：
#id值{ /*CSS樣式代碼*/ }
*適用范圍：適用于將樣式作用在某個標簽上（更有針對性），
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span{
color:blue;
}
.div1{
border:1px solid red;
background-color:yellow;
}
#div2{
border:1px solid black;
background-color:green;
}
</style>
</head>
<body>
<span>行內標簽<span>
<div >塊級標簽1<div>
<div id="div2">塊級標簽2<div >
</body>
</html>
基本選擇器的組合方式
- 層級關系
標簽和標簽之間有層級關系，例如<html>標簽中的子標簽為<body>標簽，
我們可以對基本選擇器進行組合，表現出層級關系，從而更加針對性地把樣式作用于某些標簽上，
- 格式：
選擇器1 選擇器2 ......{ /*CSS樣式代碼*/ }
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div font{
color:red;
}
</style>
</head>
<body>
<div>
<font>我想火</font>
</div>
<font>我想火火不了</font>
</body>
</html>
CSS樣式
邊框屬性
- border
設定邊框的樣式
- 格式：寬度 樣式 顏色，
（例如：1px solid red -> 1像素粗 實線 紅色邊框）
- width
用于設定標簽的寬度， - height
用于設定標簽的高度， - background-color
用于設定標簽的背景顏色，
- 背景顏色設定的兩種主流方式：
1.英文單詞->例如：red;blue，yellow;
2.顏色代碼->例如：#fff，(格式：#紅綠藍，每個顏色用兩個16進制位數表示)
布局
- float
通常默認的排版方式，將頁面中的元素從上到下一一羅列，而實際開發中，需要左右方向式進行排版，就需要使用浮動屬性，
- 格式：
選擇器{float:屬性值;}- 常用屬性值：
none:元素不浮動（默認值），
left：元素向左浮動，
right：元素向右浮動，
注意事項：因為元素設定浮動屬性后，會脫離原有檔案流（會脫離原有的版式），從而會影響其他元素的樣式，所以設定浮動后，頁面樣式需要重新調整，
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#d1{
background-color:red;
width:100px;
height:100px;
float:left;
}
#d2{
background-color:green;
width:110px;
height:110px;
float:left;
}
#d3{
background-color:blue;
width:120px;
height:120px;
float:left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
轉換
- display
HTML提供豐富的標簽，這些標簽被定義成了不同的型別，一般分為：塊級元素和行內元素，
- 塊元素： 以區域塊的方式出現，每個塊標簽獨自占據一整行或多整行，塊結束會自動換行，塊結束會自動換行，
常見的塊元素：<h1>、<p>、<div>、<ul>等，- 行內元素： 根據內容多少來占用行內空間，不會自動換行，
常見的行內元素：<span>、<a>等，
- display屬性可以使得元素在行內元素和塊元素之間相互轉換，
- 格式：
選擇器[display屬性值]- 常用的屬性值：
block：此元素將顯示為塊元素（塊元素默認的display屬性值）
inline：此元素將顯示為行內元素（行內元素默認的display屬性值）
none：此元素將被隱藏，不顯示，也不占用頁面空間，
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
display:inline;
}
</style>
</head>
<body>
<div>變為行內元素</div>
<span>行內元素</span>
</body>
</html>
字體
- font-size
用于設定字體的大小， - color
用于設定字體的顏色，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106455.html
標籤：Html/Css
上一篇：day 45
下一篇：html之form表單