Bootstrap3 css樣式
https://v3.bootcss.com/css/
Bootstrap4 css樣式
http://bs4.ntp.org.cn/
一、 簡單介紹
CSS是Cascading Style Sheets（級聯(lián)樣式表）的縮寫，也叫層疊樣式表。
CSS是一種樣式表語言，用于為HTML文檔定義布局。例如，CSS涉及字體、顏色、邊距、高度、寬度、背景圖像、高級定位等方面。
二、 CSS 代碼應該放置的位置
1. 可以放在 HTML 的 style 標簽中 ，之后通過 CSS 選擇器對相應的標簽生效。
<head>
<style>
div {
background-color:red;
width:100px;
height:100px;
}
</style>
</head>
div是 CSS 使用的一種選擇器，用于在當前的 HTMl 頁面上選中所有的div標簽。
2. 放在一個單獨的文件中，這個單獨的文件一般以 .css結(jié)尾，就叫 css 文件。之后可以在 html 文件中引入。推薦
a. 先在某個路徑下寫一個CSS文件，在這個文件中寫入需要的所有樣式：
// qf.css 文件內(nèi)容
.c1{
background:url("meizi.jpg") no-repeat -163px -215px;
}
/*
上面的樣式的意思是：給類名為 c1 的元素設(shè)置背景圖片，
url("圖片路徑")
*/
b. 之后再在 html 文檔中引入該 css 文件
<head>
<link rel='stylesheet' href='./qf.css'/>
</head>
3. 針對某一個標簽設(shè)置
<div style="color: red;size: 10px">測試</div>
三、 CSS 選擇器
要對 html 標簽進行相關(guān)操作，需要先找到他們，找到他們的方法就是使用 CSS 的選擇器。
1. 選擇器的分類
- 直接選擇器
- 組合選擇器
- 層級選擇器
2. 選擇器之間的優(yōu)先級
不同類型的優(yōu)先級:
id > 屬性 > 類 > 標簽
但是可以使用 !important 指定某一類優(yōu)先級最高
相同類型的優(yōu)先級： 就近原則，即誰在最后誰生效
3. 選擇器詳解
a. 直接選擇器
/*標簽選擇器*/
a{
color:red !important;
}
/*id選擇器*/
#a1{
color: blue;
}
#sy{
color: greenyellow;
}
/*class(類)選擇器 重要指數(shù) 五顆星 ☆☆☆☆☆ */
.c1{
color: blue;
}
/*屬性選擇器*/
input[type="text"]{
color: blue;
}
a[n="1"]{
font-size: 20px;
}
b. 組合選擇器 : 重要指數(shù)五顆星 ☆☆☆☆☆
類名 c1 和 c2 的標簽
.c1,.c2{
color: greenyellow;
}
c. 間接選擇器包括以下幾種：五顆星 ☆☆☆☆☆
層級選擇器：依據(jù)標簽之間嵌套關(guān)系來對標簽進行選擇
五顆星 ☆☆☆☆☆
div 下面的 p 標簽及其下面的所有標簽中含有 p 標簽的都生效
div p{
color:gold;
}
div>p 表示只對 div 下面 第一層含有 p 標簽及其這層下面含有 p 標簽的生效，
若是 div 下面的第一層含有非 p 標簽，且其下面含有 p 標簽的，則不生效.
div>p{
color:green;
}
多層的層級選擇器
/*表示，類名為 c1 下面的第一層的 p 標簽下面的所有 span 標簽*/
.c1>p span{
color:blue;
}
d. hover 偽類
當鼠標放在其上面時，CSS才生效
#hover1:hover{
color: red;
}
四、 CSS 樣式詳解
1. 邊框和圓角
border 給元素添加邊框
/* 畫個邊框
border: 表示畫邊框
border: 2px; 邊框線條的粗細程度
border: 3px solid red; 實線邊框，線條顏色是紅色，不設(shè)置顏色就是黑色
dashed: 3px dashed blue; 虛線邊框，顏色藍色
邊框出現(xiàn)在一個標簽的左側(cè)
border-left
padding: 10px 設(shè)置邊框占多高，其高度可以比父標簽還高
*/
border-radius 是向元素添加圓角邊框。
border-radius: 100%;
/*
100% 原型， 前提是元素是正方形
50% 橢圓
*/
2. 顏色和漸變
CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。
CSS3 定義了兩種類型的漸變（gradients）：
- 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
- 徑向漸變（Radial Gradients）- 由它們的中心定義
語法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
從上到下
下面的實例演示了從頂部開始的線性漸變。三種顏色：
顏色可以使用 語義表示法，也可以使用色彩代碼等方式；
background: linear-gradient(red, #f0ad4e, #aaffaa); /* 標準的語法 */
image
從左到右
background: linear-gradient(to right, red,#f0ad4e,#aaffaa);
向右下角
background: linear-gradient(to bottom right, red,#f0ad4e,#aaffaa);
由中心向外漸變
background:radial-gradient( red,#f0ad4e,rgba(255,0,0,0));
3. 文字和字體
/*字體顏色*/
color:white;
/*背景色*/
background-color:antiquewhite;
/*字體加粗的大小*/
font-weight:bold;
/*設(shè)置字體之間的間距*/
letter-spacing: 3px;
.bs{
/*字體大小*/
font-size:22px;
background-color: greenyellow;
height:30%;
width:30%;
/*字體大小調(diào)節(jié)小技巧，在瀏覽其中按 F12 后直接調(diào)整，調(diào)整好，再在代碼中改*/
}
.c1{
/*字體顏色和大小*/
color: red;
font-size: 30px;
}
/*字體左右居中*/
.c1{
text-align: center;
}
/*字體上下居中, 需要設(shè)置 行高的值等于元素的高度值*/
.c1 {
height: 100px;
line-height: 100px;
}
4. 背景
/*背景圖片,圖片的高度和寬度是對于此標簽進行填充的，
默認是重復填充的*/
background-image: url(shark.png);
/*!*background-repeat: 設(shè)置不重復：*/
/* 下面三種同時只能出現(xiàn)一種
repeat-x; x 軸不重復,即豎向不重復
repeat-y; y 軸不重復，即橫向不重復
no-repeat; 都不重復
*/
/*例如：background-repeat:repeat-x;*/
/*摳圖*/
background-image: url(meizi.jpg);
background-repeat: no-repeat;
background-position-x: -163px; /*由左向右*/
background-position-y: -215px; /*由上到下*/
/*以上可以寫成一行：*/
background:url(meizi.jpg) no-repeat -163px -215px;
}
4. display 控制顯示
/*標簽顯示屬性：
隱藏標簽：
display:none 表示不顯示,可以設(shè)置召之即來，揮之即去。
塊標簽和內(nèi)聯(lián)標簽互換
display:block 表示讓內(nèi)聯(lián)變?yōu)閴K
display:inline 表示把塊標簽變?yōu)閮?nèi)聯(lián)標簽
display:inline-block 表示同時具有內(nèi)聯(lián)和塊的屬性，很有用
關(guān)于inline-block 特別對于讓一個內(nèi)聯(lián)標簽具有塊標簽的屬性時
是非常有用的，因為內(nèi)聯(lián)標簽是不能設(shè)置高度和寬度的，而塊標簽
又是獨占一行的，就是說定義一個塊標簽時，假如這個塊標簽寬度
并不需要要一整行，只需要半行，但剩余的一半空間也不能放其他
的內(nèi)容了。而利用inline-block可讓一個內(nèi)聯(lián)標簽可以自定義高度
寬度，同時也不會獨占一整行的空間。
*/
.meizi{
display: none;
}
.in-block1{
display:inline-block;
background-color: green;
}
.in-block2{
display:inline-block;
background-color: red;
}
6. 布局
/*通過選擇器，進行穿衣服*/
.s1{
/*高度*/
/*用百分比形式表示的話，是對其父級標簽有實際高度時才有效
例如下面的 50% 表示占父級標簽的 50%
*/
height:50%;
/*寬度*/
/*對于寬度的百分比形式來表示時是可以直接生效的，
是相對于整個瀏覽器的寬度的百分比。
當然也可以對于父級的寬度的百分比*/
width:40%;
/*邊距：
padding: 30px; 內(nèi)邊距：移動自身的中心，但移動后被空出來的
距離還是屬于自己（英文直譯：襯墊）
padding-left: 30px; 把自己的中心從左邊的向右移動30像素的距離
margin:30px; 外邊距 移動自身整體，
移動后被空出來的距離就不在屬于自己了，
但其他標簽也不可使用（英文直譯：合并）
margin-left: 30px; 同樣的從左邊開始移動30像素的距離
*/
.bk1{
background-color:#dddddd;
padding:10px;
/*解決當鼠標放到偽類上，邊框不再閃爍，就要首先在這里設(shè)置一個邊
框，讓他先占個位置，之后再給其加上偽類屬性。所以把它的顏色先
要設(shè)置為透明
transparent 就是透明的意思
*/
border-left:10px solid transparent;
}
.bk1:hover{
border-left:10px solid rebeccapurple;
}
/*外邊距*/
.margin{
margin:30px;
background-color: greenyellow;
}
.margin-left{
margin-left: 30px;
background-color: red;
}
.margin-right{
margin-right: 30px;
background-color: aqua;
}
/*內(nèi)邊距*/
.padding{
padding: 20px;
background-color: rebeccapurple;
}
.padding-left{
padding-left: 20px;
background-color: green;
}
/*鼠標放上時，會顯示不同的圖標，也可以自定義顯示自己的圖標*/
/*.cousor{
cursor:wait; 等待
cursor:pointer; 小手
}*/
/*設(shè)置某一個標簽在瀏覽器出現(xiàn)的位置*/
/*
.position{
相對定位
position: relative;
這個單獨使用沒有意義，需要和下面的absolute結(jié)合使用
一般的使用場景是，relative 在外層，absolute 在內(nèi)層；
起到的效果是：
可以設(shè)置 absolute 相對于 relative 層出現(xiàn)的位置；
值得注意的是：
absolute 向外層找 relative 時，會一直找，直到找到為止，若都沒有，則
會相對于當前頁面來定位。就像直接使用 absolute 一樣的效果。
相對定位
position: absolute;
設(shè)置把某個標簽永遠固定在瀏覽器的某個位置，其位置會隨著瀏覽器內(nèi)容的滾動而變化，即跟隨瀏覽器的滾動。
固定定位
position: fixed; 重要指數(shù)：☆ ☆ ☆ ☆ ☆
設(shè)置把某個標簽永遠固定在當前瀏覽器窗口的某個位置，就是瀏覽器滾動，它不移動，使用場景： 返回頂部功能
上面幾種都需要配合使用下面的位置屬性：
top:0px;
right:0px;
left:0px;
bottom:30px;
}
*/
.fixed{
position:fixed;
right:0px;
bottom:10px;
color:white;
background-color: rebeccapurple;
}
.relative{
position: relative;
widht:500px;
background-color: greenyellow;
}
.abs{
position:absolute;
right:0px;
bottom:50%;
background-color: red;
}
html 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 詳解</title>
</head>
<link href="./qf.html" />
</head>
<body>
<div class="c1">西瓜甜</div>
<a href="#s1">
<img src="meizi.jpg"/>
</a>
<div>
<p id="sy" class="c2"> 鯊魚</p>
<p n="1" class="c1">
蘭博基尼
<a> 寶馬</a>
牛頭
</p>
</div>
<div class="d1" id="div1">
<p>
我是第一層
<span>span</span>
</p>
<a>
<p>我是第二層</p>
</a>
</div>
<a id="a1" n="1" class="c1">我是自定義的key=value</a>
<p calss="c1">我是類</p>
<div id="hover1">
<a>我是偽類，鼠標放在我上面，我才會變</a>
</div>
<input type="text"/>
<input type="text"/>
<input type="password"/>
<h2>下面是穿衣服</h2>
<div class="s1" id="s1">穿衣服</div>
<div style="background-color:brown;">
<div class="bs">穿衣服</div>
</div>
<h2>設(shè)置隱藏</h2>
<input type="button" value="妹子召之即來" onclick="showDiv();"/>
<input type="button" value="妹子揮之即去" onclick="hideDiv();"/>
<div id="m1" class="meizi">
<img src="meizi.jpg" />
</div>
<!--執(zhí)行腳本-->
<script>
<!--設(shè)置要顯示時需要執(zhí)行的函數(shù)-->
function showDiv() {
document.getElementById('m1').classList.remove('meizi');
}
<!--設(shè)置要顯示時需要執(zhí)行的函數(shù)-->
function hideDiv() {
document.getElementById('m1').classList.add('meizi');
}
</script>
<br/>
<a class="in-block1">設(shè)置display:inline-block 屬性后,a標簽可以設(shè)置高度了</a>
<a class="in-block2">設(shè)置display:inline-block 屬性后,a標簽可以設(shè)置高度了</a>
<div class="in-block1">設(shè)置display:inline-block 屬性后,div標簽也不獨占了</div>
<div class="in-block2">div</div>
<br/>
<!--畫個邊框-->
<div style="border:2px dashed blue;"></div>
<br/>
<!--邊框的左側(cè)有個小豎條-->
<div style="background-color:#dddddd;border-left:10px solid red;padding:20px;">搜索</div>
<br/>
<!--在head中設(shè)置邊框-->
<div class="bk1">
搜索，我含有偽類屬性
</div>
<!--設(shè)置標簽之間的邊距-->
<div class="margin">margin</div>
<div class="margin-left">margin-left</div>
<div class="margin-right">margin-right</div>
<div class="padding">padding</div>
<div class="padding-left">padding-left</div>
<!--利用 position 設(shè)置 返回頂部-->
<div class="fixed">返回頂部</div>
<!--abolute in relative-->
<div class="relative">
我是 relative
<div class="abs">
我是相對于 relative 的絕對位置
</div>
</div>
</body>
</html>
CSS 之 如何布局一個網(wǎng)頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--如何利用之前學到的知識，開始布局一個網(wǎng)頁-->
<style>
/*頁面要不要四周留白*/
body{
margin: 0;
}
/*頁面中是否有一大塊需要占整個頁面大部分*/
.w{
/*自身寬度*/
width: 980px;
/*設(shè)置整個標簽的位置
margin：邊距的意思
0 上下距離不動，對于父級標簽
auto 左右去自適應，對于父級標簽
假如是:
margin：0；
設(shè)置的是上下左右
假如是：
margin:0 auto 0 auto;
設(shè)置的順序依次是：上、右、下、左
*/
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
/*設(shè)置頁面頭屬性*/
.pg-header{
height: 48px;
background-color: brown;
color: white;
/*字體上下居中*/
line-height: 48px;
}
.pg-header .menus a{
padding: 0 10px;
display: inline-block;
}
/*設(shè)置偽類屬性，效果是：鼠標放上后顯示背景色*/
.pg-header .menus a:hover{
background-color: bisque;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<div class="menus left">
<a href="#">菜單一</a>
<a href="#">菜單二</a>
<a href="#">菜單三</a>
<a href="#">菜單四</a>
</div>
<div class="menus right">
<a href="#">登錄</a>
<a href="#">注冊</a>
</div>
</div>
</div>
<div class="pg-body">
<div class="w">
asdka;sdfjk;alsd
</div>
</div>
</body>
</html>
