CSS（Cascading Style Sheets 是一種用來表現文件樣式的語言）

注意：在CSS中每句語句需加“;”

<style type="text/css"></style>
table tr td,th{border:1px solid #111;}
font-size:20px;    /*修改字體大小*/
olor:red;        /*設置文字顏色*/
font-weight:bold;    /*設置字體加粗*/
/*註釋語句*/    
<span style="color:blue">語句A</span>    /*設置語句A字體顏色*/
<link href="base.css" rel="stylesheet" type="text/css" />

外部式css樣式

(也可稱爲外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”爲擴展名，在<head>內（不是在<style>標籤內）
   使用<link>標籤將css樣式文件鏈接到HTML文件內
   rel="stylesheet" type="text/css" 是固定寫法不可修改
   <link>標籤位置一般寫在<head>標籤之內。
----------------------------------------------------------------------------
css樣式三種方法的優先級：內聯式 > 嵌入式 > 外部式
總結來說，就是--就近原則（離被設置元素越近優先級別越高）。
----------------------------------------------------------------------------
內嵌式是指 <span style=" ">
----------------------------------------------------------------------------
嵌入式是指寫span{}在style中
----------------------------------------------------------------------------
外部式是指卸載CSS文件裏
----------------------------------------------------------------------------
{
}   選擇器
----------------------------------------------------------------------------
.stress{
}   類選擇器
   配合<span class="stress"> 使用
----------------------------------------------------------------------------
#setGreen{
}   ID選擇器
   配合<span class="stress"> 使用
----------------------------------------------------------------------------
類和ID選擇器的區別
   相同點：可以應用於任何元素
   不同點：ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
----------------------------------------------------------------------------
.food>li{border:1px solid red;}
   子選擇器
   使class名爲food下的子元素li加入紅色實線邊框。
   //粗細爲1px，顏色爲紅色的實線
----------------------------------------------------------------------------
.first span{color:red;}
   後代選擇器
   >作用於元素的第一代後代，空格作用於元素的所有後代
----------------------------------------------------------------------------
* {}   通用選擇器
   它使用一個（*）號指定，它的作用是匹配html中所有標籤元素
----------------------------------------------------------------------------
a:hover{color:red;}   僞類選擇器
   它允許給html不存在的標籤（標籤的某種狀態）設置樣式
   該行代碼就是爲 a 標籤鼠標滑過的狀態設置字體顏色變紅
----------------------------------------------------------------------------
分組選擇符
   當你想爲html中多個標籤元素設置同一個樣式時，可以使用分組選擇符（，）
   eg：h1,span{color:red;}
----------------------------------------------------------------------------
繼承
   如某種顏色應用於p標籤，這個顏色設置不僅應用p標籤，還應用於p標籤中的所有子元素文本
   但注意有一些css樣式是不具有繼承性的。如border:1px solid red;
----------------------------------------------------------------------------
權值
   標籤的權值爲1，類選擇符的權值爲10，ID選擇符的權值最高爲100。
   p{color:red;} /*權值爲1*/
   p span{color:green;} /*權值爲1+1=2*/
   .warning{color:white;} /*權值爲10*/
   p span.warning{color:purple;} /*權值爲1+1+10=12*/
   #footer .note p{color:yellow;} /*權值爲100+10+1=111*/

注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解爲繼承的權值最低。
----------------------------------------------------------------------------
設置最高權值
   p{color:red!important;}
   //加個!important
----------------------------------------------------------------------------
文字排版--字體
   body{font-family:"Microsoft Yahei";}
   或
   body{font-family:"微軟雅黑";}
----------------------------------------------------------------------------
文字排版--字號、顏色
   body{font-size:12px;color:#666}
----------------------------------------------------------------------------
文字排版--粗體
   body{font-weight:bold;}
----------------------------------------------------------------------------
文字排版--斜體
   body{font-style:italic;}
----------------------------------------------------------------------------
文字排版--下劃線
   a{text-decoration:underline;}
----------------------------------------------------------------------------
文字排版--刪除線
   .oldPrice{text-decoration:line-through;}
   一般運用於：原價現價
----------------------------------------------------------------------------
段落排版--縮進
   p{text-indent:2em;}
   縮進兩個中文字符長度的空白
   注意：2em的意思就是文字的2倍大小。
----------------------------------------------------------------------------
段落排版--行間距
   p{line-height:1.5em;}
----------------------------------------------------------------------------
段落排版--中文字間距、字母間距
   p{letter-spacing:50px;}
   注意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距。

   設置英文單詞之間的間距：
   p{word-spacing:50px;}
----------------------------------------------------------------------------
段落排版--對齊
   h1{text-align:center;}
   居中
   h1{text-align:left;}
   居左
   h1{text-align:right;}
   居右
----------------------------------------------------------------------------
元素分類--塊級元素
   在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素
   <div>爲一塊，
   <p>爲一塊，
   ..............
----------------------------------------------------------------------------
元素分類--內聯元素
   在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內聯元素（行內元素）
   塊狀元素也可以通過代碼display:inline將元素設置爲內聯元素
   元素的高度、寬度及頂部和底部邊距不可設置；
----------------------------------------------------------------------------
元素分類--內聯塊狀元素
   就是同時具備內聯元素、塊狀元素的特點
   <img>、<input>標籤就是這種內聯塊狀標籤。
   display:inline-block就是將元素設置爲內聯塊狀元素
----------------------------------------------------------------------------
----------------------------------------------------------------------------
盒模式
   塊級元素都具備盒模型的特點
----------------------------------------------------------------------------
border-width:2px;   設置盒的邊框寬度
----------------------------------------------------------------------------
border-style:solid;   設置邊框樣式爲實線
   dashed（虛線）| dotted（點線）| solid（實線）
----------------------------------------------------------------------------
border-color:red;   設置邊框顏色
----------------------------------------------------------------------------
border-top:1px solid red;       上邊框
border-bottom:1px solid #ccc;   下邊框
border-left:1px solid red;       左邊框
border-right:1px solid red;        右邊框
----------------------------------------------------------------------------
width:200px;height:30px;   寬200，高30
----------------------------------------------------------------------------
盒模型--填充
   元素內容與邊框之間是可以設置距離的，稱之爲“填充”。
padding-top:20px;
padding-bottom:15px;
padding-left:30px;
padding-right:10px;
如果上、右、下、左的填充都爲10px;可以這麼寫：div{padding:10px;}
----------------------------------------------------------------------------
盒模型--邊界
   元素與其它元素之間的距離可以使用邊界（margin）來設置。
margin-top:20px;
margin-bottom:15px;
margin-left:30px;
margin-right:10px;
如果上右下左的邊界都爲10px;可以這麼寫：div{ margin:10px;}
如果上下邊界一樣爲10px，左右一樣爲20px，可以這麼寫：div{ margin:10px 20px;}
----------------------------------------------------------------------------
總結一下：padding和margin的區別，padding在邊框裏，margin在邊框外。
----------------------------------------------------------------------------
----------------------------------------------------------------------------
CSS佈局模型
CSS包含3種基本的佈局模型，用英文概括爲：Flow、Layer 和 Float。
在網頁中，元素有三種佈局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）
----------------------------------------------------------------------------
任何元素在默認情況下是不能浮動的，但可以用 CSS 定義爲浮動，如 div、p、table、img 等元素都可以被定義爲浮動。如下代碼可以實現兩個 div 元素一行顯示。
div{
    float:left;
}       左對齊
   float:right;右對齊
#div1{float:left;}
#div2{float:right;}
一左一右
----------------------------------------------------------------------------
層模型有三種形式：

1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
----------------------------------------------------------------------------
層模型--絕對定位
div{
    position:absolute;
    right:100px;
    top:50px;
}   註明絕對定位，距離右邊100像素，距離上面50像素
----------------------------------------------------------------------------
層模型--相對定位
#div1{
    position:relative;
    left:100px;
    top:50px;
}   註明相對定位，新位置距離原位置向右邊偏移100像素，向下偏移50像素
----------------------------------------------------------------------------
層模型--固定定位
拖動滾動條時位置固定不變
#div1{
    position:fixed;
    left:100px;
    top:50px;
}   註明固定定位，距離左邊100像素，距離上面50像素
----------------------------------------------------------------------------
Relative與Absolute組合使用
#box1{
    width:200px;
    height:200px;
    position:relative;

}
#box2{
    position:absolute;
   top:100px;
   left:30px;

}
<div id="box1">
    <div id="box2">相對參照元素進行定位</div>
</div>
此時box2所在的div在box1所在的div裏，所以box2是相對於box1來定位，而不是相對於瀏覽器來定位了
注意：box1中的position:relative;和box2中的position:absolute;一定要寫
----------------------------------------------------------------------------
盒模型代碼簡寫
設置四個方向的邊距是按照順時針方向設置的：上右下左。

margin:10px 10px 10px 10px;
top、right、bottom、left的值相同
可簡寫成 margin:10px;

margin:10px 20px 10px 20px;
top和bottom值相同、left和 right的值相同
可簡寫成 margin:10px 20px;

margin:10px 20px 30px 20px;
left和right的值相同
可簡寫成 margin:10px 20px 30px;

注意：padding、border的縮寫方法和margin是一致的。
----------------------------------------------------------------------------
顏色值縮寫
當設置的顏色是16進制的色彩值時，如果每兩位的值相同，可以縮寫一半。
eg：
p{color:#000000;}   →   p{color: #000;}
p{color:#336699;}   →   p{color: #369;}
----------------------------------------------------------------------------
字體縮寫
eg：
body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋體",sans-serif;
}可簡寫成：
body{
    font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}

注意：
1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用默認值。
2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
----------------------------------------------------------------------------
顏色值
1、英文命令顏色
p{color:red;}

2、RGB顏色
這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。
p{color:rgb(133,45,200);}
每一項的值可以是 0~255 之間的整數，也可以是 0%~100% 的百分數。如：
p{color:rgb(20%,33%,25%);}

3、十六進制顏色
這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。
p{color:#00ffff;}
----------------------------------------------------------------------------
長度值
1、像素 px
CSS規範中假設“90像素=1英寸”

2、em
就是本元素給定字體的 font-size 值，如果元素的 font-size 爲 14px ，那麼 1em = 14px；如果 font-size 爲 18px，那麼 1em = 18px。

3、百分比
p{font-size:12px;line-height:130%}
設置行高（行間距）爲字體的130%（12 * 1.3 = 15.6px）。
----------------------------------------------------------------------------
----------------------------------------------------------------------------
水平居中設置-行內元素
.txtCenter{
   text-align:center;
}
----------------------------------------------------------------------------
水平居中設置-定寬塊狀元素
div{
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}
----------------------------------------------------------------------------
水平居中總結-不定寬塊狀元素方法（一）
加入 table 標籤
----------------------------------------------------------------------------
水平居中總結-不定寬塊狀元素方法（二）
改變塊級元素的 display 爲 inline 類型（設置爲行內元素顯示），然後使用 text-align:center 來實現居中效果。
----------------------------------------------------------------------------
水平居中總結-不定寬塊狀元素方法（三）
通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。
----------------------------------------------------------------------------
隱性改變display類型

當爲元素（不論之前是什麼類型元素，display:none 除外）設置以下 2 個句之一：
1. position : absolute
2. float : left 或 float:right

簡單來說，只要html代碼中出現以上兩句之一，元素的display顯示類型就會自動變爲以 display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不佔滿父元素。
.container a{
    position:absolute;
   width:200px;
   background:#ccc;
}
----------------------------------------------------------------------------

快速入門CSS || 乾貨自整語句大全

CSS（Cascading Style Sheets 是一種用來表現文件樣式的語言）

外部式css樣式

快速掌握HTML基礎||簡潔明瞭

超簡小功能 || 爬取圖片

關於win10的一些簡單的cmd命令

Python讀取文件內容寫入EXCEL表格

關於centos的一些簡單操作語句

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

快速入門CSS || 乾貨 自整語句大全

CSS（Cascading Style Sheets 是一種用來表現文件樣式的語言）

外部式css樣式

快速入門CSS || 乾貨自整語句大全