1.css基礎知識
1.1 css的基本概念
css（cascading style sheet） 層疊樣式表，為了實現頁面內容和表現形式的分離。層疊的含義是可以對乙個元素多次設定樣式，最後的結果是多次樣式疊加的結果，如果有衝突，以後面的樣式為準。
1.2 基本語法
標籤：…之類的標籤 使用方式：直接輸入標籤名
類（class）：class名字 使用方式：輸入點+class名
id:id名 使用方式：輸入#+id名
一般來說我們寫css檔案的時候用的都是第二種方法，class名
這是因為id名一般被用作js的選擇器
給class命名也是有規範的，像***-***x 這樣做的好處是讓你的**更清晰
別人也更容易看懂
1.3使用方式
行內樣式（內嵌樣式）：
直接寫在標籤裡，使用style屬性，只對當前標籤有效，頁面內容和表現形式是高度耦合的，不利於分工合作
內部樣式（內聯樣式）：
內部樣式是在head部分使用
外部樣式（外聯樣式）：
外部樣式需要乙個link標籤來與html連線起來，內容與表現形式完全分離，而且任何需要用到改樣式的頁面都可以通過link標籤連線的方式來實現
font-family（字型體系）：「黑體」/「幼圓」
font-style（是否傾斜）: italic（傾斜）^rmal（正常）
font-weight（字型粗細）：100/200^rmal（400）/bold（700）/bolder
font-variant（是否大寫）：normal/small-caps（小型大寫）
案例：望月懷遠
海上公升明月，天涯共此時。 /大小24px 字型楷體 靠左
情人怨遙夜，竟夕起相思。 /顏色紅色，靠右
滅燭憐光滿，披衣覺露滋。 /左半句靠左，右半句靠右
不堪盈手贈，還寢夢佳期。 /大小30px 顏色藍色 字型幼圓 居中
color（字型顏色）：blue/red/pinkÿack/green/#ffffff/#f6f6f6
text-indent(首行縮排):2pxpx
text-decoration(上、下劃線以及刪除線): none（預設格式，無）/underline（下劃線）/overline（上劃線）pne-through
direction(文字方向): ltr(left to right從左到右)/rtl（right to left從右到左）
text-transform(大小寫): none（預設）/capitalize(首字母大寫)/uppercase（全部大寫）/lowercase(全部小寫)
line-height(行高): normal px
letter-spacing(字元間距): 2px/5px xpx
word-spacing(單詞間距)：normal/2px/5pxxpx
案例：江西老表
我是江西小霸王
江西這邊我最狂
要說江西誰最帥
還得江西小霸王
行高5px
自己想乙個題目，標籤h1
第一句黑體，紅色
第二句加刪除線
第三句加上、下劃線 從「西」處斷開，分為「要說江西」 「誰最帥」 間距50px
第四句單詞間距10px
2.3顏色
rgb（red greed bule）（0，10，256）
#0010ff
css中顏色的表示方法
預定義顏色：bule ，red，black。。。
十六進製制顏色：#0f0f0f
rgb顏色（128，0，0）全紅
rgba，在rgb的基礎上又新增了表示透明度的alpha
hsl：用色調，飽和度，和透明度三個分量來表示顏色
hsla：在hsl的基礎上又新增了表示透明度的alpha
**實現：
預定義顏色
rgb顏色
16進製制顏色
2.4背景相關屬性
background-color:背景顏色
background-repeat：複製選項（repeat在水平，垂直兩個方向複製）
（repeat-x/y 在水平/垂直方向進行複製）
（no-repeat 不複製）
background-position：所在位置 上top 下bottom 左left 右right
簡寫：將所有元素放在一起
（2）自適應高度（高度會根據內容的增加而增加）
（3）指定最大高度max-height（內容增加到指定高度的時候就不會再增加）
（4）指定最小高度min-height（開始時高度固定，內容增加到一定地步時開始增加高度）
(2)display：none 不僅隱藏內容，而且隱藏位置
display:inline 將塊級元素以內聯元素形式顯示，此時寬，高等屬性對其無效
display:inline-block 將塊級元素以內聯元素形式顯示並且具有塊級元素的特徵，寬，高屬性依然有效
display：block 將內聯元素以塊級元素的形式展現
2.7盒子模型
margin：外邊距
margin-top(上) margin-bottom（下） margin-left（左） margin-right（右）
使用方式：
margin：30px ，表示上下左右外邊距都設定30px
margin-left：30px ，表示設定距離左方30px
margin： 10px 20px 10px 20px 分別設定上右下左四個邊的邊距，順序按照順時針方向
margin：20px 30px 分別設定上下邊距為20px ，左右邊距為30px
padding：內邊距
與margin類似 上下左右邊距都有
border：邊框
如果想讓兩個盒子在一行內，那麼兩個盒子都要浮動（float）並且給它們的父類清除浮動（overflow: hidden;）
什麼是父類：
box是div1和div2的父類
CSS 基礎知識
選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...
CSS基礎知識
css規則有兩個主要的部分組成 選擇器，以及一條或者多條宣告h1 css內部的注釋以 開始，以 結束p id選擇器，通過 來選擇html元素 username class選擇器，通過 來選擇一組class元素.center 指定特定的html元素使用classp center 引入外部樣式表 rel...
css基礎知識
css基礎 id選擇器 用 定義 結合div class選擇器 用.定義 結合div 背景 background color 背景色 background image 背景影象 background repeat 背景重複 background position 位置 background atta...