css細化
一、布局
1.浮動 ?→清除浮動
2.定位
css 樣式表
內(nèi)聯(lián)樣式：在html中每個屬性都具備style屬性 如：<h1 style=""></h1>
css語法 允許出現(xiàn)多個屬性：值 對； 每對之間用；隔開 ?如：<h1 style="屬性:值;屬性:值;"></h1> ? 只作用在所定義的標簽內(nèi)，其它標簽不受影響
外部樣式表：將樣式定義到一個外部的css文件中(.css)，在HTML頁面中，引用.css文件
真正意義的體現(xiàn) 樣式重用的效果
使用方式：1.創(chuàng)建外部樣式表
css樣式表特征：1.繼承性 ?2.層疊性 一個選擇器可以被重復定義 在多個不同的定義中，不重復的屬性可以層疊到一起，如果屬性重復的話，以 后定義的為準
3.優(yōu)先級 樣式定義沖突時，按照不同樣式的優(yōu)先級來使用樣式 ：
1.瀏覽器缺省設(shè)置 2.外部樣式表或內(nèi)部樣式表-就近原則 3.內(nèi)聯(lián)樣式(最高) ??☆4.!important：手動調(diào)整樣式屬性的優(yōu)先級(盡量不要使用)☆?
css基礎(chǔ)選擇器：
偽類選擇器：
1.鏈接偽類 ? ?適用于a標簽 ? ?:link(未訪問狀態(tài)下的樣式) ? 如： a:link{ ?} ? ?
:active(鼠標點中 ?激活的狀態(tài)) ? 如：a:active{ ?}
?:visitetd(點擊 ?進入過 ?鏈接頁面的狀態(tài)) ?如： ? a:visited{ ?}
2.動態(tài)偽類 ?:hover (鼠標懸停狀態(tài)下的樣式) ? ?:active (元素被激活時) ? :focus(元素獲取焦點時，多數(shù)用于文本框密碼框表單等表單元素)
css屬性-尺寸
溢出：overflow: 當內(nèi)容溢出元素框時 隱藏超出部分 ?hidden(溢出隱藏) visible(溢出可見) ?scroll:設(shè)置滾動條 ?auto:自動，沒溢出不顯示滾動條，有溢出自動出現(xiàn)滾動條 ? overflow-x:橫向溢出處理方式 ? overflow-y:縱向溢出處理方式
設(shè)置滾動條的樣式：
設(shè)置滾動條寬度 ? ul::-webkit-scollbar{ width=...px; }
設(shè)置滾動條軌道的顏色 ul::-webkit-scollbar-track{ background-color：...; }
設(shè)置滾動條滾動的顏色 ? ul::-webkit-scollbar-thumb{ background-color：...; }
overflow:hidden;與display:none; 的區(qū)別:
?overflow:hidden(超出部分隱藏) ?display:none;(把整個元素隱藏,隱藏之后,不再占據(jù)位置)
邊框 border-屬性 ? width ? ?style ? color ? ? 邊框圓角:border-radius
邊框陰影 ?(新特性) box-shadow: ??
h-shadow:水平陰影距離 ?v-shadow:垂直陰影距離 ?blur:可選，模糊距離 ?spread:可選，陰影的尺寸 ?color:可選，顏色 ?inset:可選值，將當前陰影修改為內(nèi)陰影
圖片邊框:border-image ?border-image-source圖片路徑 ?border-image-width 圖片寬度
背景:background
精靈圖,雪碧圖 一張大圖里邊有很多小圖(用background-position選取圖片位置,省流量)
漸變---------都是通過background-image來設(shè)置的
1.線性漸變:linear-gradient ? ?重復線repeating性：repeating-linear-gradient
取值：
2.徑向漸變:radial-gradient ? ?重復徑向：repeating-radial-gradient
課外知識 ?瀏覽器兼容性：
表格：常見的樣式屬性有padding,width,height,文本、字體格式化屬性。 ??背景屬性：顏色，圖片，邊框
文本垂直對齊: vertical-alian:top/bottom/middle
表格特有樣式屬性：1.邊框合并屬性:border-collapse(合并) 取值：separate(分離邊框)
邊框邊距 ? ?注意：border-collapse 必須為separate的時候才允許使用該屬性
屬性：border-spacing 取值：一個值:表示垂直和水平間間距相等
兩個值：第一個值表示 水平間距，第二個值表示垂直間距 ? ?兩個值分開
列表
1.列表樣式：屬性:list-style-type ??
無序列表取值：none(無標記),disc(實心圓，默認),circle(空心圓),square(實心矩形)
有序列表：none(無標記),decimal(1,2,3),lower-roman: ? upper-roman:
列表項圖像： ? 屬性：list-style-image ? ?取值:url(); ? list-style-image:url();
列表項位置: ?li前邊標識的位置 ?屬性：list-style-position 取值：1.outside:默認值，標識在外 ? 2.inside:標識在內(nèi) ? ? ? ? ? list-style:none;取消列表標識。
?Display:?可以轉(zhuǎn)換?元素的顯示方式
1.顯示方式： 框的默認顯示類型是可以通過display的屬性進行修改
屬性display ? 取值：1.none：讓生成的元素不顯示，隱藏。一旦設(shè)置none，該元素中的所有內(nèi)容都不在顯示，并且不會在占據(jù)文檔空間
2.block：塊 ，讓任何一個元素像塊級元素一樣的去顯示
特點：1.行內(nèi)元素，像塊級元素一樣去顯示 ? ?2.讓塊級元素從隱藏(display:none;)變?yōu)?顯示 (display:block;)
3.inline:讓任何一個元素像行內(nèi)元素一樣去顯示 ?特點：多個元素在一行內(nèi)顯示
場合：1.塊級元素變行內(nèi)元素 ?2.行內(nèi)元素you隱藏變?yōu)轱@示
4.inline-block 行內(nèi)塊級元素 ? ? 元素本身是行內(nèi)元素 ，但是具備塊的特點(能修改寬高)
場合：想改變行內(nèi)元素的寬和高的時候
顯示效果： visibility:實現(xiàn)元素的可見性(顯示/隱藏)
取值：1.visible：默認值，元素可見 ?2.hidden：元素不可見，隱藏，但空間依然占據(jù) ?3.collapse：用在表格上，可以刪一行或一列，不影響表格的布局。
opacity：設(shè)置不透明度級別 ?
屬性opacity 取值0-1之間的數(shù)字(包括0和1) 0完全透明，1完全不透明，值越大越不透明?
vertical-align:設(shè)置圖片和文字垂直對齊方式 取值：top,middle,bottom ?baseline:基線對齊（默認對齊方式）
光標：默認情況，網(wǎng)頁上的光標會根據(jù)不同的元素顯示不同的樣子。
在css中，可以通過cursor屬性改變?光標顯示效果，給客戶一種可視化的暗示。
值： pointer（手狀）crosshair（+）wait（等待）help（?）
