CSS基礎(chǔ)
使用方式
*內(nèi)聯(lián)方式
將樣式寫在html標(biāo)記的屬性中
<body style="background-color:green;margin:0;padding:0;"></body>
*嵌入方式
將樣式放在<head></head>中
<style type="text/css">
div{...}
</style>
*外部方式
將樣式保存在.css文件中，將引用放在<head></head>中
<link rel="StyleSheet" (type="text/css" 可省略)href="style.css">
選擇器
1.標(biāo)記選擇器：
之前所學(xué)過的標(biāo)記名都是
例：
<p>......</p>
p{屬性：屬性值；屬性1：屬性值1}
<div>......</div>
div{屬性：屬性值；屬性1：屬性值1}
2.類選擇器:名字可以重復(fù)，根據(jù)標(biāo)記中的class屬性進(jìn)行選擇，class的值可以重復(fù)。
類選擇器以“”.“”開始
例：<p class="p">...</p>
.p{屬性：屬性值；屬性1：屬性值1}
快捷鍵：.d1+tab鍵
3.id選擇器：名字不能重復(fù)
選擇器以#號(hào)開頭
例：<p id="p1">.........</p>
<p id="p2">........</p>
<p id="p3"></p>
快捷鍵：#d5+tab鍵
4.并集選擇器：同時(shí)選擇多個(gè)標(biāo)記，多個(gè)標(biāo)記之間使用“，”分隔
例：.d1,.d3,.d7,span p{
color:green;
}
5.派生選擇器:表示選擇某個(gè)標(biāo)記中的子標(biāo)記，父標(biāo)記和子標(biāo)記之間用空格隔開。
例：
div p{ }表示選擇div中的P標(biāo)記，div中的其他標(biāo)記不受影響。
6.通用選擇器
7.偽類選擇器
選擇器優(yōu)先級(jí)的問題：內(nèi)聯(lián)>嵌入>外部
同一選擇器下：
id>class>html
同級(jí)時(shí)，選擇離元素最近一個(gè)（就近原則）
一個(gè)元素被不同選擇器修飾為不同樣式時(shí)，效果會(huì)疊加。
常見的屬性
1.顏色屬性：
color屬性定義文本的顏色
color：green
color：#ff6600
2.字體屬性：
font-size字體大小
例：font-size：14px
font-family定義字體
例：font-family：微軟雅黑，serif
可以使用“，”隔開，以確保當(dāng)字體不存在的時(shí)候直接使用下一個(gè)。
font-weight字體加粗
例：normal（默認(rèn)值），
bold（粗），
bolder（更粗），
lighter(更細(xì))
3.背景屬性
背景顏色background-color
*color指背景顏色
*transparent指定背景顏色應(yīng)該是透明的，這是默認(rèn)
*inherit指定背景顏色，應(yīng)該從父元素繼承
背景圖片background-image
*background-image：url（圖片路徑）
*background-image:none
背景圖片大小background-size
*length設(shè)置高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度，如果只給出一個(gè)值，第二個(gè)默認(rèn)為atuo（自動(dòng)）
*percentage設(shè)置百分比，同上
*cover此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最小大小。
*contain此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。
4.文本屬性：
*text-align橫向排列包含：left，center，right
*line-height首行縮進(jìn)
*text-decoration（文本的下劃線一般用于去除下劃線）添加文本修飾，顏色由color屬性修飾
屬性值none（默認(rèn)）定義標(biāo)準(zhǔn)文本，用于a標(biāo)記時(shí)，隱藏下劃線。
*letter-spacing字符間距：
normal默認(rèn)
length設(shè)置具體的數(shù)值（可以設(shè)置負(fù)值）
inherit繼承
5.邊框?qū)傩裕?/h4>
邊框風(fēng)格border-style
定義某一方向的邊框樣式
：
-border-bottom-style下邊邊框樣式
-border-top-style上邊邊框樣式
-border-left-style左邊邊框樣式
-border-right-style右邊邊框樣式
屬性值：
1.none無(wú)邊框
2.solid直線邊框
3.dashed虛線邊框
4.dotted點(diǎn)狀邊框
5.double雙線邊框
6.groove凸槽邊框
7.ridge壟狀邊框
8.in set inset邊框
9.out set outset邊框
10.inherit繼承
簡(jiǎn)寫方式：border-style
邊框?qū)挾萣order-width：
單獨(dú)方式：
-border-top-width上邊邊框?qū)挾?br>
-border-bottom-width下邊邊框?qū)挾?br>
-border-left-width左邊邊框?qū)挾?br>
-border-right-width右邊邊框?qū)挾?br>
屬性值：
-thin細(xì)邊框
-medium中等邊框
-thick粗邊框
-px固定值的邊框
-inherit繼承
簡(jiǎn)寫方式：border-width：
邊框顏色border-color：
單獨(dú)方式
-border-top-color上邊邊框顏色
-border-bottom-color下邊邊框顏色
-border-left-color左邊邊框顏色
-border-right-color右邊邊框顏色
屬性值
顏色值得名稱red，green
簡(jiǎn)寫方式：border-color
四種方式：
一個(gè)值border-color：（上，下，左，右）
兩個(gè)值border-color：（上下）（左右）
三個(gè)值border-color：（上）（左右）（下）
四個(gè)值border-color：（上）（右）（下）（左）
圓角屬性：
給元素添加圓角的邊框
簡(jiǎn)寫方式：
border-radius
四個(gè)值得順序是：左上角，右上角，右下角，左下角
例如：
border-radius：2em；等價(jià)于border-top-left-radius：2em;....top-right;......bottom-right;.....bottom-left;
簡(jiǎn)寫方式border-方向
可以在top，right，bottom，left四個(gè)方向分別簡(jiǎn)寫
格式：border-方向：border-方向-width border-方向-color
例：border-bottom：1px solid #ff0000;
缺少一個(gè)值沒有關(guān)系
簡(jiǎn)寫方式border
也可以在所有方向上簡(jiǎn)寫
格式：border：border-width border-style border-color；
例：border：solid 2px #f60
缺少一個(gè)值沒有關(guān)系
6.列表屬性
序號(hào)類型list-style-type
例：list-style-type：none不顯示列表前面的小圓點(diǎn)
序號(hào)位置
list-style-position
inside:列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊。
outside默認(rèn)值，保持標(biāo)記位于文本左側(cè)，列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊。
inherit規(guī)定應(yīng)該從父元素繼承l(wèi)ist-style-position屬性的值。
圖像序號(hào)
list-style-image
-URL圖像的路徑
-none默認(rèn)，無(wú)圖像被顯示
-inherit規(guī)定應(yīng)該從父元素繼承l(wèi)ist-style-image屬性的值。
簡(jiǎn)寫方式：
list-style：list-style-type list-style-position list-style-image
list-style:square inside url('/i/arrow.jpg');
未設(shè)置的值使用默認(rèn)值。
7.其他屬性
光標(biāo)cursor
URL自定義光標(biāo)的URL
default 默認(rèn)光標(biāo)（通常是一個(gè)剪頭）
auto 默認(rèn)，瀏覽器設(shè)置的光標(biāo)
crosshair 光標(biāo)呈現(xiàn)為十字線
pointer光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）
move 此光標(biāo)指示某對(duì)象可被移動(dòng)。
text此光標(biāo)指示文本
wait此光標(biāo)指示程序正忙（通常是一只表或沙漏）
help此光標(biāo)指示可用的幫助（通常是一個(gè)問號(hào)或一個(gè)氣球）
div+css布局
div和span
div 和span在整個(gè)HTML標(biāo)記中，沒有任何意義，他們的存在就是為了應(yīng)用css樣式
div和span區(qū)別在于，span是內(nèi)聯(lián)元素，div是塊級(jí)元素
盒模型
*margin
盒子的外邊距
四種方式
-一個(gè)值：（上下左右）
-兩個(gè)值：（上下）（左右）
-三個(gè)值：（上）（左右）（右）
-四個(gè)值：（上）（右）（下）（左）
屬性值
-auto瀏覽器計(jì)算外邊距。左右都是auto時(shí)，相當(dāng)于居中。
-length規(guī)定以具體單位計(jì)的外邊距值，比如像素，厘米。默認(rèn)值是0px
-%規(guī)定基于父元素的寬度的百分比的外邊距
-inherit規(guī)定應(yīng)該從父元素繼承外邊距。
*padding
盒子內(nèi)邊距
四種方式
-一個(gè)值（上下左右）
-兩個(gè)值（上下）（左右）
-三個(gè)值（上）（左右）（下）
-四個(gè)值（上）（右）（下）（左）
屬性值
-length
規(guī)定以具體單位計(jì)的外邊距值，比如像素、厘米等。默認(rèn)值是 0px。
-%% 規(guī)定基于父元素的寬度的百分比的外邊距。
-inherit 規(guī)定應(yīng)該從父元素繼承外邊距。
*border
盒子邊框?qū)挾?br>
屬性值
border-width指定邊框的寬度
border-style指定邊框的樣式
border-color指定邊框的顏色
inherit指定應(yīng)該從弗雷元素繼承border屬性值
*content
盒子的內(nèi)容，顯示文本和圖像
*width
盒子寬度
*height
盒子高度
說明：margin，padding，border可以單獨(dú)設(shè)置某個(gè)方向，使用：
- XXX-top
- XXX-bottom
- XXX-left
- XXX-right
padding和border的值會(huì)加在容器上
彈性布局
Flex是Flexible Box的縮寫，意為“彈性布局”，用來(lái)設(shè)置容器中各種元素的對(duì)齊方式。
注意，設(shè)為Flex布局以后，子元素的float，clear和vertical-align屬性將失效。
Flex容器結(jié)構(gòu)：
格式：任何一個(gè)容器都可以指定為Flex布局
display：flex；
行內(nèi)元素也可以使用Flex布局
display：inline-flex;
#######屬性
1.flex-direction決定主軸的方向（即項(xiàng)目的排列方向）
屬性值：
row（默認(rèn)值）：主軸為水平線，起點(diǎn)在左端。
row-revrese：主軸為水平線，起點(diǎn)在右端。
column：主軸為垂直方向，起點(diǎn)在下沿。
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items定義項(xiàng)目在交叉軸上如何對(duì)齊
屬性值：
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊。（垂直局中）
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。
6.align-content
css3屬性:
box-shadow
border-radius
