第六十七篇 css樣式與佈局
目錄html
1、高級選擇器
1.後代選擇器
1.用空格隔開。對於E F，表示全部屬於E元素後代的F元素，有這個樣式，空格表示後代，它描述的是祖先結構佈局
2.須要注意的是：對於這兩個標籤不必定是連續緊挨着的，只要保持一個後代的關聯便可，也就是說，選擇的是後代，不必定是兒子字體
2.子代選擇器
1.用>鏈接，對於E>F，表示全部屬於E元素子代的F元素，有這個樣式，>表示子代，它描述的是父子結構url
2.須要注意的是：子代選擇器只能匹配直接父子關係，若是中間隔代，則不能匹配spa
3.兄弟選擇器
**1.用+號鏈接，對於E + F，表示與E相鄰的兄弟元素F，有這個樣式，+表示相鄰，它描述的是相鄰的兄弟結構。須要注意的是：只能匹配第一個F標籤code
2.用~號鏈接，對於E~F，表示與E相鄰的兄弟元素F，有這個樣式，~表示相鄰，它描述的是相鄰的兄弟結構。須要注意的是：標籤的上下結構造成兄弟標籤，兄弟選擇器能夠匹配直接兄弟關係或間接兄弟關係造成的層次，便可以匹配多個兄弟關係的選擇器orm
4.羣組選擇器
用逗號隔開多個選擇器，能夠控制多個選擇器htm
5.交叉選擇器
1.緊挨着，沒有任何鏈接符，交叉選擇器本質上是對一個目標標籤的多個名字（標籤、類、id）的同時標識圖片
2.標籤名、class名、id名能夠是對同一個目標標籤的修飾，須要注意的是在一個頁面中id只有一個，class屬性能夠有多個值utf-8
6.選擇器的優先級
1.簡單選擇器存在優先級，優先級的前提就是不一樣選擇器同時控制同一標籤的同一屬性
2.複雜選擇器的種類並不會影響優先級，它是經過同類型（簡單選擇器）的個數來肯定優先級
3.簡單選擇器的優先級起關鍵性做用，也就是一個id選擇器要大於無限個class選擇器，一個class選擇器要大於無限個標籤選擇器
2、僞類選擇器
1.僞類中的nth-child與nth-of-type屬性
1.用冒號(:)鏈接，對於E:F，表示E元素中的全部F元素，有這個樣式
2.僞類選擇器優先級與類相同
3.nth-child：在同一結構下都是相同選擇器時使用。先肯定位置，再篩選選擇器，也就是不按指定標籤的個數匹配，而是不管哪一個標籤都算在內
4.nth-of-type：在同一結構下不全是相同選擇器時使用。先肯定選擇器，再匹配位置，也就是隻數指定標籤的個數
2.屬性選擇器
1.[屬性名]查找全部有該屬性的標籤
2.[屬性名=屬性值]查找全部該屬性是指定屬性值的標籤
3.[屬性名^=值]以該屬性且爲指定屬性值開頭的全部的標籤
4.[屬性名*=值]模糊查詢，包含該屬性值的全部標籤
3、a標籤的四大僞類
1.a標籤的四大僞類
標籤未被訪問、標籤已被訪問、標籤被懸浮、標籤被激活
<!doctype html>
<html>
<head>
<style>
a:link {color: #FF0000} /* 未訪問的連接 */
a:visited {color: #00FF00} /* 已訪問的連接 */
a:hover {color: #FF00FF;
/* 鼠標樣式：wait、row-resize、none、text、pointer、default */
cursor:pointer;} /* 鼠標移動到連接上 */
a:active {color: #0000FF;
cursor:wait;} /* 選定的連接 */
</style>
</head>
<body>
</body>
</html>
2.reset操做
在開發中每每用不到四種僞類，能夠經過reset操做對a標籤進行樣式設置：清除系統默認樣式
a {
color: black;
text-decoration: none;
}
3.普通標籤的僞類運用
<!doctype html>
<html>
<head>
<style>
/*字體*/
.btn {
font: bold 20px/45px 'STSong';
text-align: center;
}
/*邊界圓角*/
.btn {
border-radius: 5px;
}
/*不容許文本操做*/
body {
user-select: none;
}
/*僞類*/
.btn:hover {
cursor: pointer;
background-color: orangered;
}
.btn:active {
background-color: brown;
}
</style>
</head>
<body>
<div class="btn">按鈕</div>
<!--
標籤沒有被訪問過
標籤被懸浮
標籤被激活
標籤已被訪問過
-->
</body>
</html>
4、文本屬性
1.文字大小：font-size
2.字體顏色：color
3.字族（字體）：font-family
4.字重（字體寬度）：font-weight
5.字體樣式：font-style
6.文本劃線(上劃線、下劃線、中劃線...)：text-decoration
7.文本水平位置（居中、貼右...）：text-align
8.行高：line-height
9.首行縮進：text-indent
10.文字間距：letter-spacing
11.總體設置
5、邊界圓角
border-radius
1.左上爲第一個角，順時針編號
2.不足找對角
3.用/劃分時，橫縱分離，先橫後縱
4.能夠填固定值（像素）或百分比
6、背景圖片
.box {
background-image:url("img/圖片.gif")
/*儘可能只設置寬，高等比縮放，不失真*/
background-size
/*平鋪: repeat-x repeat-y repeat no-repeat*/
background-repeat
/*1.只設置x軸，y軸默認center*/
/*2.
x軸：left/center/right/具體像素/百分百，
y軸：top/center/bottom/具體像素/百分百
*/
background-position: center center;
}
1.顯示比屏幕大的圖片時，儘可能只設置寬，高會等比縮放
2.顯示比屏幕小的圖片時，經過平鋪與位置（x軸或y軸）來進行處理
7、精靈圖案例
精靈圖就是操做大圖在顯示區域的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>精靈圖案例</title>
<style>
/*精靈圖就是操做大圖在顯示區域的位置*/
.box {
width: 500px;
height: 100px;
background-color: orangered;
border: solid;
}
.box {
background-image: url("img/bg.png");
background-position-y: -150px;
}
.box:hover {
cursor: pointer;
background-position-y: -250px;
}
</style>
<style>
.b1 {
width: 155px;
height: 48px;
border: solid;
background-image: url("img/bg.png");
}
.b1:hover {
cursor: pointer;
background-position-y: -48px;
}
</style>
<style>
.b2 {
width: 157px;
height: 48px;
border: solid;
background-image: url("img/bg.png");
background-position: -155px 0;
}
.b2:hover {
cursor: pointer;
background-position: -155px -48px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="b1"></div>
<div class="b2"></div>
</body>
</html>
8、顯示方式
1.display屬性中有三種顯示方式：block、inline、inline-block
2.block：支持設置寬和高，自帶換行。基本上全部有寬和高、參與位置佈局的都是block
3.inline：不支持設置寬和高，寬高只能由文本撐開，不帶換行，一行顯示不下會自動換行（保留數據的總體性）。用於存放文本
4.inline-block：支持設置寬和高，不帶換行，一行顯示不下會自動換行（以標籤總體換行，標籤左右須要有間距）。不要主動設置該顯示方式，系統的兩個img、input都設置爲了單標籤（不會嵌套任何東西）。若是要用inline-block參與佈局，爲了標籤佈局不受內容影響，能夠設置vertical-align:top
5.文本垂直對齊方式：vertical-align：baseline\top\bottom
9、盒模型佈局
margin border padding content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型佈局</title>
<style>
body {
margin: 0;
padding: 100px 0 0 200px;
}
/*盒模型組成部分： */
/*margin + border + padding + content
1.每部分都有本身的獨立區域
2.content是寬x高，做爲內容或子標籤的顯示區域
3.padding是內邊距，沒有自身顏色，完成內容的內移(保證顯示區域大小不變，能夠響應減少content)
4.border是邊框，有寬度、樣式、顏色，自身透明(transparent)時，是能夠透出背景顏色的
5.margin是外邊距，控制盒子的顯示位置，left、top控制自身，right、bottom影響兄弟
注：margin的偏移依據當前所在位置
*/
div {
width: 100px;
height: 100px;
background-color: red;
}
owen {
/*margin: 10px;*/
margin-top: 50px;
margin-left: 10px;
/*margin-right: 10px;*/
/*margin-bottom: 100px;*/
}
owen {
/*border-color: black;*/
/*border-width: 3px;*/
/*none solid dashed dotted*/
/*border-style: solid;*/
border: red dashed 10px;
}
owen {
/*padding: 上右下左，不足找對邊*/
/*padding: 10px 20px 30px;*/
padding: 10px;
}
owen {
display: block;
/*width: 100px;*/
width: 80px;
/*height: 100px;*/
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<!--
盒模型：
概念：廣義上頁面中全部的標籤都稱之爲盒子，狹義上佈局的盒子指的是display:block
-->
<owen>123</owen>
<div></div>
</body>
</html>
10、浮點佈局
1.父級在寬度不固定時，高度不要設置死
2.父級清浮動：
.class:after {
content:'';
display:block;
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動佈局</title>
<style>
.wrap {
border: 10px solid yellow;
width: 300px;
/*父級在寬度不固定時高度不能設置死*/
/*height: 300px;*/
}
/*清浮動：父級清浮動，就是在本身寬度是否肯定下，都能保證父級的高度剛恰好包裹子集*/
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
font: 20px/100px 'Arial';
color: blue;
text-align: center;
}
.box {
float: left;
}
.b {
width: 500px;
height: 100px;
background-color: red;
}
/*浮動佈局：
1.子集浮動參照父級寬度
2.子集浮動再也不撐開父級高度
3.父級高度須要本身處理，不然會影響兄弟佈局，採用清浮動處理
*/
</style>
<style>
/*會顯示在標籤內容的前面*/
h1:before {
content: '123';
}
/*當控制的控制自身完成全部佈局（包含全部子集佈局），再執行該時間點*/
h1:after {
content: '000';
}
</style>
</head>
<body>
<h1>內容</h1>
<!--.wrap>.box{$}*9-->
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
<div class="b"></div>
</body>
</html>
11、兩種佈局總結
1.經過盒模型，自動獲取外邊距留白區域，能用內邊距儘可能使用內邊距
2.經過浮動佈局來實現子標籤內容在父標籤中顯示，父級必定要用清浮動
3.父子級頂端產生距離，推薦使用padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兩種佈局總結</title>
<style>
body, h1 {
margin: 0;
}
</style>
<style>
.header {
width: 1210px;
height: 100px;
background-color: orange;
/*自動獲取留白區域*/
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
}
.header:after {
content: '';
display: block;
clear: both;
}
.header a {
display: block;
width: 500px;
height: 100px;
background-color: red;
float: left;
}
.header form {
/*background-color: pink;*/
float: right;
/*父子級頂端產生距離，建議使用padding*/
padding-top: 30px;
}
.header input {
/*margin-right: 20px;*/
width: 220px;
height: 30px;
border: none;
font-size: 17px;
vertical-align: top;
}
.header button {
width: 32px;
height: 32px;
border: none;
background-color: red;
outline: none;
color: white;
margin-right: 30px;
vertical-align: top;
}
</style>
</head>
<body>
<!--盒模型:margin、padding協調操做，能用padding儘可能用padding，再考慮用margin-->
<!--浮動:須要左右排列的block採用浮動佈局，且父級必定要清浮動-->
<div class="header">
<h1>
<a href=""></a>
</h1>
<form method="get" action="https://www.baidu.com/s">
<input type="text" name="wd">
<button type="submit">Go</button>
</form>
</div>
</body>
</html>
- 1. CSS實現樣式佈局
- 2. 佈局css樣式
- 3. CSS學習篇（七） 佈局
- 4. CSS（非佈局樣式）
- 5. css樣式--flex佈局[css3]
- 6. CSS+DIV網頁樣式與佈局——文字樣式&段落（一）
- 7. CSS+DIV網頁樣式與佈局——文字樣式&段落 （二）
- 8. 第六十七篇 SPI簡單介紹
- 9. 經常使用css樣式(佈局)
- 10. CSS（非佈局樣式總結）
- 更多相關文章...
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • 再有人問你分佈式事務，把這篇扔給他
- • Docker容器實戰(六) - 容器的隔離與限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS實現樣式佈局
- 2. 佈局css樣式
- 3. CSS學習篇（七） 佈局
- 4. CSS（非佈局樣式）
- 5. css樣式--flex佈局[css3]
- 6. CSS+DIV網頁樣式與佈局——文字樣式&段落（一）
- 7. CSS+DIV網頁樣式與佈局——文字樣式&段落 （二）
- 8. 第六十七篇 SPI簡單介紹
- 9. 經常使用css樣式(佈局)
- 10. CSS（非佈局樣式總結）