a、為什麼學習 css（css 的作用）
html 雖然可以在一定程度上修飾頁面，但是頁面的
整體還是不夠美觀。
html 進行網頁的書寫重複的**比較多，後期的維
護性不好。
b、什麼是 css（css 的概念）
英文全稱：cascading style sheets
層疊樣式表（級聯樣式表）
css 的引入的三種方式
在標籤的內部直接使用（不推薦使用）
這個 (.css)檔案是在外部定義好的檔案直接建立csss檔案就可以了
css 中三種引入方式遵循的就近原則 ：
不相同的樣式會進行樣式的疊加，相同的樣式會採用就近的原則。樣式跟隨距離自己近的風格
3、css 中的常用選擇器
常用三種選擇器
標籤選擇器
pid選擇器
id:(唯一性)
id命名：數字、字母、下劃線、中劃線（-），不
能用數字開頭
#p_1
class選擇器
.p_2
三種選擇器的優先順序：
id 選擇器》class 選擇器》標籤選擇器
權重 100 10 1
後代選擇器 只要包含該標籤物件即可
div span
子選擇器 直系子標籤
div>span
兄弟選擇器 只會改變下面相鄰的元素物件
#p_1+p
兄弟選擇器 後面所有的兄弟物件都會改變
#p_1~p
偽類選擇器
a:hover
字型：（font）
/字型的顏色/
color: gray;
/字型的大小/
font-size: 12px;
/字型的加粗/
/font-weight: bold;/
/字型的風格/
/font-family: 宋體;/
/字型傾斜/
/font-style: italic;
文字（text）
/下劃線展示/
text-decoration: underline;
/去除下劃線/
text-decoration: none;
/文字居中/
text-align: center;
border 屬性有三個修飾屬性
border-color
border-color:red;
border-top-color:blue;
border-width
border-width: 1px;
border-left-width: 3px;
border-style
border-style: solid
border-bottom-style: solid；
可以使用border統一設定
border: 1px solid red;
border-right: 5px dotted blue;
行高line-height: 40px;
背景/設定背景/
/設定背景不重複/
background-repeat: no-repeat;
/調整背景的位置 x y/
background-position: center;
/*調整背景的大小 寬 高 */
/background-size: 300px 500px;/
/*背景顏色 red #f0000 rgb(255,0,0)
rgba(255,0,0,.5) */
background-color: rgba(255,0,0,.5);
行元素和塊元素
行內元素：（多個標籤位於同一行）
span font 小標籤 img a 等
塊元素：（標籤可以自動換行的元素是塊元素）
div h1-h6 ul p 等
其他樣式
/調整透明度的屬性 0-1/
opacity: 0.4;
/超出隱藏 hidden/
overflow: hidden;
/行內元素轉塊級元素 inline block none(隱藏)/
display: block;
絕對定位:
absolute :定位離開之後釋放的之前的位置 基於外
層父級標籤來說
相對定位：
relative: 定位離開之後之前的位置沒有釋放 基於之
前的位置來說
固定定位：
fixed ：始終是基於瀏覽器的左上角定位 適合
做廣告預設定位：
static ：初始的定位的操作
生活中的盒模型
盒子模型的介紹示意圖
3 個屬性都可以同時或者分別設定 4 個方向屬性值
margin：1px，2px，3px，4px;(順時針放向：上右下
左4個方向)
margin：1px，2px;
margin：1px;
margin：0px auto ;//塊元素會自動居中
margin-left:1px;
/獲得class名稱是div1下面的第乙個子元素/
.div1>p:first-child
div1>p:last-child
/獲得具體的某乙個子元素/
.div1>p:nth-child(2)
.div1>p:nth-child(even)
div1>p:nth-child(odd)
/獲得空的元素物件/
.div1>p:empty
/獲得焦點執行的樣式/
input:focus
input:checked
偽物件選擇器是在指定的物件之前（或者之後）插入內容
.div1:before
.div1:after{}
選擇器學習
/屬性選擇器/
input[type=『text』]
/屬性 ^用fom開頭的物件 $/
input[name^=『fom』]
選擇器的種類總結：
基礎選擇器
/倒圓角指令/border-radius: 100px;
/* 左上右下 右上左下 /
border-radius:10px 60px;
border-radius:10px 20px 30px 40px;
/旋轉角度/
transform: rotate(45deg);
/放大的倍數/
transform: scale(1.3);
/ x:水平的位移 y ：垂直的位移 負數：上*/
transform: translate(0px,-5px);
/2d角度的旋轉 x y/
transform: skew(40deg,45deg);
/陰影 水平方向的偏移 垂直方向的偏移 模糊度 陰
影的顏色/
box-shadow: 0px 0px 70px #d5093c;
css3 中的動畫標籤
@-ms-keyframes name
to{}
}@-ms-keyframes name
50%{}
100%{}
}
客戶端網頁程式設計 CSS
什麼是css?css指層疊樣式表 css規則由兩個主要的部分構成 選擇器，以及一條或多條宣告 選擇器通常是你需要改變樣式的html元素。css引用樣式表的三種方式 內聯樣式表，內部樣式表，外部樣式表。外部引用的優點？把結構和表現分離，便於修改。1.如果三種樣式表同時作用於乙個元素，優先順序誰高誰低？...
客戶端網頁程式設計03 CSS
客戶端網頁程式設計03 css css偽類 active focus hover link visited first chaild lang 模組1.行級元素和快級元素 塊級元素 獨佔一行，塊級元素的後面無法再放任何內容 從頁面布局和外觀顯示來看，乙個網頁的布局就類似於一篇報紙的排版，首先將網頁分...
CSS 網頁布局
一些布局 行布局 多列布局 聖杯布局 雙飛翼布局 會使用到 html和css基礎 會使用div css進行排版 熟悉 float屬性 position屬性。1 經典的行布局 基礎的行布局 行布局自適應 行布局自適應限制最大寬 行布局垂直水平居中 container 水平與垂直居中 container...