- css樣式表
- css選擇器(簡單，復(fù)雜)
- css屬性
- css布局
CSS樣式表（內(nèi)聯(lián)方式，內(nèi)部樣式表宗收，外部樣式表）
- 內(nèi)聯(lián)樣式
<h1 style="background:silver; color:blue"> - 內(nèi)部樣式表
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color:blue;
background:red;
}
</style>
</head>
<body>
<p>內(nèi)部樣式表</p>
</body>
</html>
- 外部樣式表
1.創(chuàng)建一個單獨的樣式表以css后綴結(jié)尾
2.在HTML頁面上用link引用樣式表文件
<!Doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
<p>第一段落</p>
<h1>外部樣式表</h1>
</body>
</html>
###CSS選擇器
簡單選擇器
- 通用選擇器
- 元素選擇器
- 類選擇器
- id選擇器
- 群組選擇器
- 后代選擇器
- 子代選擇器
- 偽類選擇器
通用選擇器:
通常設(shè)置整個文檔的默認(rèn)樣式芯砸，通常是整篇文章的字體大小和字體
*{
font-size:14px;
font-family:"yahei"
}
元素選擇器：
h1{
color:blue;
font-size:14px;
}
類選擇器：
降元素的class屬性設(shè)置為樣式類別
.myclass{
font-size：14px;
background:silver;
}
p.myclass{
font-size：14px;
background:silver;
}/*分類選擇器只對p設(shè)置樣式*/
<h1 class="myclass">h2文本</h1>
<p class="myclass">段落文本</p>
id選擇器：
#myclass{
font-size：14px;
background:silver;
}
<h1 id="myclass">h2文本</h1>
群組選擇器：
p.myclass，h1.myclass{
font-size：14px;
background:silver;
}
<h1 class="myclass">h2文本</h1>
<p class="myclass">段落文本</p>
后代選擇器：/*只要是h1下面的P元素都可以定義*/
h1.myclass p{
font-size：14px;
background:silver;
}
<h1 class="myclass">h2文本
<p class="myclass">段落文本</p>
</h1>
子代選擇器：/*只存在父子關(guān)系*/
div>span.myclass{
font-size：14px;
background:silver;
}
<div>
<span class="myclass">段落文本</span>/*只對這個span起作用*/
<p>
<span>不是子元素</span>
</p>
</div>
偽類選擇器：
鏈接偽類：
:link：適用于尚未訪問的鏈接
:visited:適用于訪問過得鏈接
動態(tài)偽類：
:hover:鼠標(biāo)停留
:active:元素被激活時
:focus:獲取焦點時
復(fù)雜選擇器
* 兄弟選擇器(相鄰兄弟選擇器阱冶，通用兄弟選擇器)
* 屬性選擇器
* 偽類選擇器(目標(biāo)偽類，元素狀態(tài)偽類,結(jié)構(gòu)偽類滥嘴，否定偽類)
* 偽元素選擇器(::first-letter ::first-line ::selection)
語法解釋：
兄弟選擇器：
相鄰兄弟選擇器:需要選擇緊接在另一個元素后的元素木蹬，而且二者有相同的父元素，用+連接
p+b{font-size:16px;}
<p><p>
<b></b>
通用兄弟選擇器:匹配某元素后面所有的兄弟元素（二者必須有相同的父元素）若皱，用~連接
p~b{font-size:16px;}
<p><p>
<b></b>
<b></b>
屬性選擇器：了解
偽類選擇器：
目標(biāo)偽類 ：E:target(鏈接點擊過后镊叁，實現(xiàn)的樣式)
元素狀態(tài)偽類：
:enabled匹配每個已啟用的元素(大多用在表單元素中)
:disabled匹配每個被禁用的元素(大多數(shù)用在表單上)
:checked匹配每個已被選中的input元素(只用于單選按鈕和復(fù)選按鈕)
input:enabled{background:#ccc;}
input:disabled{background:#ccc;}
input:checked{background:#ccc;}
結(jié)構(gòu)偽類：
P:first-children匹配父元素的第一個子元素P
P:last-children匹配父元素的最后一個子元素P
P :only-children匹配父元素中只有一個子元素P
否定偽類：
input：not(disabled)
偽元素選擇器
p:first-letter:用于指定選擇器的首字母，通常用于首字母下沉
p:first-line:用于指定選擇器的首行
p::selection:匹配被用戶用鼠標(biāo)選取的部分走触，一般會設(shè)置背景色晦譬。
p:before
p:after
content屬性與before，after結(jié)合使用互广，來插入生成內(nèi)容敛腌，常用有：
1）字符串(純文本)
2）圖片，比如p:after{url(images/png.jpg);}用于文字前的小圖標(biāo)
3）計數(shù)器
1. 內(nèi)容生成，還可以解決浮動元素高度問題迎瞧，滿足三個條件
1）塊級元素
2）父元素中最后一個子元素
3）必須設(shè)置clear屬性
#d1：after{
content:"";
display:block;
clear: both;
}
2.內(nèi)容生成解決外邊距溢出問題
下外邊距
#d1：after{
content:"";
display:table;
}
上外邊距
#d1：after{
content:"";
display:table;
}
備注：：和：：區(qū)別
W3C中 :表示偽元素
::表示偽類
為了兼容性考慮夸溶，現(xiàn)在都用:表示偽類和偽元素
#CSS屬性
- 尺寸:
- width min-width max-width
- height min-height max-height
可以設(shè)置尺寸的屬性：
塊級元素:
-p:
-div:
-h1,h2,h3,h4,h5,h6
-ul,ol,li,dl,dt,dd
存在width，height的HTML屬性:
-img
-table
- 邊框?qū)傩?
邊框：border-width border-style border-color 最常用寫法：border：1px solid red;
單邊定義:border-left/right/top/bottom-width/style/color
邊框倒角：border-radius(凶硅，一個值的話就是四個角的邊框倒角一樣缝裁，四個值就是從左上角順時針設(shè)置四個倒角)
border-top-left-radius:邊框左上角
border-top-right-radius:邊框右上角
border-bottom-right-radius:邊框右下角
border-bottom-left-radius:邊框左下角
邊框倒角實例：
#d1{
border-radius:10px 12px 15px 20px;
}
#d2{
border-radius:10px;
}
<!doctype html>
<html>
<head></head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
邊框陰影：box-shadow:h-shadow v-shadow blur spread color insert
h-shadow:必須，水平陰影的位置足绅。
V-shadow:必須捷绑，垂直陰影的位置。
blur:可選氢妈，模糊距離粹污。
spread:可選，陰影的尺寸首量。
color:可選壮吩，陰影的顏色。
輪廓：outline:color style width 位于邊框的外圍加缘，起突出作用
- 盒模型
box-sizing:
content-box:標(biāo)準(zhǔn)盒模型（實際寬度：等于設(shè)置的width值和border鸭叙、 padding之和）
.test1{
box-sizing:content-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
border-box:怪異盒模型代碼與圖示例:對象的實際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實際寬度
.test1{
box-sizing:border-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
padding:內(nèi)容與邊框的距離拣宏，不允許負(fù)值沈贝。
margin：元素與元素之間的距離，可設(shè)置負(fù)值勋乾。默認(rèn)值auto宋下，可實現(xiàn)元素水平位置居中。
取值：
- 背景
- background-color：當(dāng)同時定義了背景顏色和背景圖像時辑莫，背景圖像 覆蓋在背景顏色之上学歧。
- background-image：使用絕對或相對地址指或者創(chuàng)建漸變色來確定 圖像
body{
background-image: url("images/login.png");
}
- background-repeat：
取值：
repeat：水平和垂直上都平鋪，默認(rèn)值各吨。
repeat-X:只在水平上平鋪枝笨。
repeat-y：只在垂直上平鋪。
no-repeat:只顯示一次绅你，不平鋪。
- background-size：
取值：
value1（寬度）value2高度（）
value1%（寬度）value2%高度（）
contain：背景圖像始終在容器內(nèi)
cover：背景圖像有可能超出容器
- background-position：
取值：
xy（左上角是00）
x%y%（右下角是100% 100%）
center：背景圖像橫向和縱向居中/*可實現(xiàn)背景圖像水平垂直居中）*/
left：背景圖像在橫向上填充從左邊開始昭躺。
right：背景圖像在橫向上填充從右邊開始忌锯。
top：背景圖像在縱向上填充從頂部開始。
bottom：背景圖像在縱向上填充從底部開始领炫。
- background:總體屬性
語法結(jié)構(gòu)：color image repeat attachment position
body{
background:#ff0 url("images/login.png") no-repeat fixed center;}
- 字體：[字體demo演示](https://rawgit.com/iamjoel/front-end-note/master/demos/css/rules/font/demo.html)
font-family:
font-size:12px;
font-weight:bold/normal;
font-style:normal/italic;
font:italic small-caps bold 18px;
- 文本：
color：文本顏色
text-align:left/right/center/*它會影響一個元素中的文本行互相之間的對齊方式偶垮，定義一個行內(nèi)內(nèi)容如何相對于他的父元素居中，并不控制塊元素自己的對齊，只控制他的行內(nèi)內(nèi)容對齊*/
text-indent:屬性規(guī)定文本塊中首行文本的縮進(jìn)/*可以設(shè)置為負(fù)值似舵，則文本向左移動*/
<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head>
<body>
<p>
這是段落中的一些文本脚猾。
這是段落中的一些文本。
這是段落中的一些文本砚哗。
這是段落中的一些文本龙助。
這是段落中的一些文本。
這是段落中的一些文本蛛芥。
這是段落中的一些文本提鸟。
這是段落中的一些文本。
這是段落中的一些文本仅淑。
這是段落中的一些文本称勋。
這是段落中的一些文本。
這是段落中的一些文本涯竟。
</p>
</body>
text-d-eco-ration:undeline/none/*通常設(shè)置鏈接下劃線*/
line-height:設(shè)置行高/*不允許使用負(fù)值赡鲜，屬性設(shè)置行之間的距離（行高）。*/
height:30px;
line-height:30px;/*設(shè)置文本垂直居中對齊方式*/
text-shadow:h-shadow v-shadow blur color設(shè)置文本陰影/*取值分別為每個陰影相對于文字的水平和垂直的偏移量庐船，模糊半徑和顏色*/
white-space:normal/nowrap 屬性設(shè)置如何處理元素內(nèi)的空白银酬。
initial letter:制作首字下沉，報紙上經(jīng)常用醉鳖。[簡書整理](http://www.reibang.com/p/8e7d09e94d20)
- 表格
- 常用屬性:width height border padding
- 垂直方向?qū)R：vertical-align:top/middle/bottom/*設(shè)置單元框中捡硅，單元格內(nèi)容的對齊方式,默認(rèn)在中間*/
- 表格特有的樣式屬性:
border-collapse:collspase/seperate
border-spacing:10px 20px;(水平和垂直)/*僅用于Seperate的情況下使用,，相鄰單元格邊框間的距離*/
caption-side：top/bottom屬性設(shè)置表格標(biāo)題的位置盗棵。
#CSS布局：[學(xué)習(xí)CSS布局](http://zh.learnlayout.com/)
定位：普通流定位(按元素本身的順序)壮韭，浮動定位(float)，相對定位纹因，絕對定位
- float（浮動）
- position(定位)
- display（顯示）
- flex(新內(nèi)容)
- table布局(比較老舊的知識)
****
- Float:left/right/none
clear:left/right/none/both (清楚浮動帶來的影響)
overflow:
visible:/*默認(rèn)值喷屋。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外*/
hidden:/*內(nèi)容會被修剪瞭恰，并且其余內(nèi)容是不可見的*/
scroll:/*內(nèi)容會被修剪屯曹，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容,網(wǎng)頁中經(jīng)常會出現(xiàn)*/
auto:跟scroll類似*/
- position:
屬性取值:
absolute:將元素的內(nèi)容從普通流中完全移除，不占據(jù)空間惊畏，相對于最近的已定位的祖先元素
position:absolute;
top/left/right/bottom:20px;
relative:相對于元素本身的位置恶耽，進(jìn)行偏移和定位，原本的空間仍然保留
position:absolute;
top/left/right/bottom:20px;
如果元素只設(shè)置relative屬性颜启，不設(shè)置方位屬性偷俭，跟static顯示一樣。
fixed：相對于瀏覽器頁面進(jìn)行定位缰盏。一個固定定位（position屬性的值為fixed）元素會相對于視窗來定位涌萤，這意味著即便頁面滾動淹遵，它還是會停留在相同的位置(設(shè)置回到頂部按鈕，結(jié)合鏈接錨點一起使用)一個固定定位元素不會保留它原本在頁面應(yīng)有的空隙（脫離文檔流）
position:fixed;
top/left/right/bottom:20px;
代碼演示;
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
static:表示不會被position负溪。
備注：樣式 "left:-20px" 從元素的原始左側(cè)位置減去 20px透揣。樣式 "left:20px" 向元素的原始左側(cè)位置增加 20px。left:-20px跟right：20px,顯示效果一樣川抡。
- display:
取值：
inline：指定對象為行內(nèi)元素辐真。/*span是標(biāo)準(zhǔn)的行內(nèi)元素,可以把有特定語義的元素改成行內(nèi)元素。常見的例子是：把 li 元素修改成 inline猖腕，制作成水平菜單*拆祈。/
block: 讓行內(nèi)元素<a>表現(xiàn)的像塊級元素一樣/*例如div元素*/
inline-block:指定對象為行內(nèi)塊元素。
none:元素不會占據(jù)空間倘感。/*visibility: hidden; 還會占據(jù)空間*/