各種樣式屬性的作用
1.文字相關的樣式屬性
p {
color: blue; /**文字的顏色**/
font-size: 20px; /**文字的大小**/
<!----font-family屬性，如果寫了多個。則默認選擇第一個字體，系統裏面沒有會再選擇第二個。如果字體名中包含空格、#、$等符號該字體必須加英文狀態下的單引號或者雙引導 例如font-family: "Microsoft YaHei"; 儘量使用系統默認字體,儘量寫unicode字體 寫宋體和微軟雅黑 "\5B8B\4F53" "5FAE\8F6F\96C5\9ED1"-->
font-family: "Microsoft YaHei", tahoma; /**文字的字體**/
font-weight: 400;/**文字的粗細 400等於normal ,700的bold**/
font-style: italic; /**文字斜體還是正常的**/
/**font：綜合設置字體樣式 font屬性用於對字體樣式進行綜合設置，基本語法如下：{font: font-style font-weight font-size font-family} 不能更換順序*/
font: normal 900 30px "宋體";
/**必須保留 font-size 和 font-family 否則 font 不起作用**/
font: 30px "宋體";
}
strong {
font-weight: normal; /**粗體標籤設置font-weight:讓粗體變爲不加粗**/
}
em {
font-style: normal; /**斜體標籤設置font-style：讓斜體變爲不斜體*/
}
#line-height {
line-height: 50px; /*每行的高度*/
text-align: left; /*文字對齊方式*/
text-indent: 2em; /*首行縮進,建議用em設置 1em就是一個字的寬度*/
letter-spacing: 10px; /*每個字的間距*/
text-decoration: none; /**取消下劃線 文本裝飾**/
word-spacing: 20px; /*單詞的間距*/
color: rgba(0, 0, 0, 0.5); /*顏色透明度 css3*/
text-shadow: 4px 5px 5px red; /*文字陰影 css3， text-shadow帶了4個參數水平位置 垂直位置 模糊距離 顏色*/
}
2.塊級元素、行內元素、行內塊元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- link 標籤就是把外面的css 引入到當前的html頁面中，就是css 和 html頁面的橋樑 -->
<link rel="stylesheet" type="text/css" href="xxx.css">
<!-- 內部樣式表：H寫在HTML文檔 的head頭部裏面 -->
<style type="text/css"> /*--type 類型 css 文本,type="text/css"在HTML5文檔裏面可以省略-*/
.demo {
color: pink;
}
.demo2 {
display: inline; /* 塊元素轉成行內元素*/
width: 300px; /* 因爲是行內元素所以寬高無效*/
height: 200px;
color: pink;
}
.demo3 {
display: block; /* 行內元素轉成塊元素*/
width: 300px;
height: 200px;
background: pink;
}
.demo4 {
display: inline-block; /* 轉成行內塊元素*/
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<!-- css樣式表：行內式(內聯樣式表)、內部樣式表(內嵌樣式表)、外部樣式表(鏈入樣式表) -->
<!-- 我們修改一小點樣式的時候，可以通過內聯樣式表 快速完成,直接在標籤內部寫樣式 -->
<!-- 內部樣式表：H寫在HTML文檔 的head頭部裏面 -->
<div style="color: #FFF232; font-size: 15px">SDK叫啥的的</div>
<div class="demo">山東礦機</div>
<!-- HTML 標籤一般分爲塊標籤和行內標籤兩種類型，也可以稱塊元素和行內元素 -->
<!-- 塊級元素(block-level) 通常都會獨自佔據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用語網頁佈局和網頁結構的搭建。-->
<div>div就是塊級元素，最典型的塊級元素</div>
<fieldset>
<legend> 塊級元素特點</legend>
<ul>
<li>1.總是從新行開始</li>
<li>2.高度、行高、外邊距及內邊距都是可以控制</li>
<li>3.寬度默認是100%</li>
<li>4.可以容納內聯元素和其他塊元素。</li>
</ul>
</fieldset>
<!--行內元素(內聯元素 inline-level)不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等熟悉，常用於控制頁面中文本的樣式，如<a> <strong> <em> <span>等,span是典型的行內元素-->
<span>123 </span>
<span>345</span>
<span> 567 </span>
<fieldset>
<legend> 行內元素特點</legend>
<ul>
<li>1.和相鄰行內元素在一行上</li>
<li>2.寬、高是無效的，但水平方向的padding和margin可以設置，垂直方向無效</li>
<li>3.默認寬度就是它本身的內容寬度</li>
<li>4.行內元素只能容納文本或其他行內元素（a 標籤除外，比較特殊）</li>
</ul>
</fieldset>
<!--行內塊元素(inline-block) 在行內元素中有幾個特殊的標籤 <img /> <input /> <td> 可以對它們設置寬、高、對齊屬性，有些資料會稱它們爲行內塊元素-->
<input type="text" name="" /> <img src="#" />
<fieldset>
<legend> 行內塊元素特點</legend>
<ul>
<li>1.和相鄰 行內元素（行內塊）在一行上，但之間會有空白間隙</li>
<li>2.默認寬度就是它本身內容的寬度</li>
<li>3.高度、行高、外邊距、內邊距都可以控制</li>
</ul>
</fieldset>
<!-- 標籤顯示模式轉換屬性：display -->
<fieldset>
<legend> 標籤顯示模式轉換</legend>
<ul>
<li>1.塊轉行內：display: inline;</li>
<li>2.行內轉塊：display: block;</li>
<li>3.塊、行內元素轉換爲行內塊：display: inline-block;</li>
</ul>
</fieldset>
<div class="demo2">塊級轉行內</div>
<span class="demo3">行內轉塊級</span><br />
<a href="#" class="demo4">百度</a>
</body>
</html>
3.背景樣式屬性
div {
width: 600px;
height: 300px;
background-color: pink; /*背景圖片*/
background-image: url(test.png); /*背景圖片*/
/*background-repeat：照片是否平鋪，repeat-x水平平鋪，repeat-y 垂直平鋪，repeat水平垂直平鋪， no-repeat不平鋪*/
background-repeat: no-repeat;
/* 1.利用方位名詞 top bottom center left right來更改背景圖片位置。（如果方位名詞只寫一個那麼另外一個默認是center）*/
background-position: left bottom;
background-position: center center;
background-position: left;
/**2.利用精確單位更改背景圖片位置： 第一個是x座標,第二個是y 座標**/
background-position: 10px 30px;
/**3.利用精確單位和方位更改背景圖片位置**/
background-position: center 20px; /**代表水平居中 垂直距離20px**/
/*background-size：指定對象背景圖的尺寸大小：寬度 高度, 儘量只改一個值，另外一個會等比例縮放，防止圖片失真、變形*/
background-size: 80px;
background-size: 50%; /**通過百分比縮放圖片大小***/
/*cover 會自動調整縮放比例，保證圖片始終填充滿背景區域，如果溢出部分則互被隱藏*/
background-size: cover;
/*contain 會自動調整縮放比例，保證圖片完整的顯示在背景區域。如何背景區域寬高比例不相同，不會填充背景區域*/
background-size: contain;
/**background-attachment背景圖固定：默認是scroll可以滾動的，fixed代表不可滾動*/
background-attachment: fixed;
/**背景屬性簡寫: background屬性的值的書寫順序官方並沒有強制標準的爲了可讀性，建議大家如下寫：
background 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置*/
background: #000 url(test.png) no-repeat scroll bottom right;
/*放多張圖，爲了避免背景色將圖片蓋住，背景色通常都定義在最後一組上，不定義在前面是防止顏色被後面的覆蓋掉*/
background: url(test.png) no-repeat scroll bottom right,
url(test.png) no-repeat scroll top right #ccc;
}
a:hover { /**鼠標經過給我的鏈接添加背景圖片**/
background: url(test.png) no-repeat;
}
4.css3樣式特性
- 1.重疊性(重疊的屬性以最後樣式爲準)
- 2.繼承性:所謂繼承性是指書寫css樣式表時，子標籤會繼承父標籤的某些樣式，如字體、字號、文字顏色，跟文字類有關係的屬性可以繼承
- 3.優先級性: 0, 0, 0, 0。特殊性公式：從左往右，左邊最大
- 標籤選擇器 0, 0, 0, 1
- 類選擇器 0, 0, 1, 0
- 僞類選擇器 0, 0, 1, 0
- id選擇器 0, 1, 0, 0
- 行內式更高，就是在標籤內寫樣式 1, 0, 0, 0
- 最大的 不是選擇器，是!important 一旦出現優先執行
- 特別注意：繼承的權重爲0
p {
color: orange!important; /**級別最大**/
}
ul li { /*權重疊加 0 0 0 2*/
color: green;
}
li { /**0 0 0 1**/
color: red;
}
<nav class="daohanglan">
<ul>
<li>繼承的權重爲0</li>
</ul>
</nav>