css基礎知識
1.1基本概念
css層疊樣式表（cascadingstyle sheets）
html描述了要呈現的內容，而css則定義了這些內容的呈現形式，比如字型、顏色等。使用css能夠將頁面內容和呈現形式有效分離，有利於分工合作，也有利於快速更換不同的呈現形式
使用樣式表可以有3種方式
同過css方便了管理，對html的快速應用有更好的方式
（1） 內聯樣式
style=
"font-size:24
px;color
: green
">內聯樣式的演示
將樣式定義在style屬性中
內容和表現形式高度耦合，維護困難，不利於分工合作
只能應用於當前標籤
對於普通的實驗方便
（2） 內部樣式
內部樣式的演示
1內部樣式的演示2
在 外部樣式表使得內容和表現形式徹底分離，有利於分工合作及維護。可在多個html中引用
推薦盡量使用外部樣式
外部樣式的對於工作方便
但後面的案例為了方便，還會大量使用內部樣式甚至內聯樣式
1.2顏色
自然界的顏色量是無窮的，但是計算機只能儲存有限的資訊
需要將連續的量（無窮）轉換為離散的量（有限）的
所有的顏色都可以由紅色（red）、綠色（green）和藍色（blue）三種顏色調配而成，這三種顏色俗稱三原色
css中用8位表示乙個顏色，那麼可以表示256（28）種顏色，所以總共可以表示256*256*256種顏色
css中有多種顏色表示形式：
（1）十六進製制形式：
style=
"color
: #ff0000
">十六進製制顏色表現形式
（2）rgb顏色
style=
"color
: rgb
(255,0
,0)">rgb
顏色表現形式
（3）rgba顏色
在rgb顏色基礎上增加了透明度量（alpha），該分量的取值範圍為0（完全透明）—1.0（完全不透明）
style=
"color
: rgba
(255,0
,0,0.5
)">rgba
顏色表現形式
（4）hsl顏色
顏色也可以由另外三個分量來表示，即色調、飽和度、和明度
style=
"color
: hsl
(120,50
%,50%)
">hsl
顏色表現形式
（5）hsla顏色
在hsl顏色的基礎上增加了alpha分量
style=
"color
: hsla
(120,50
%,50%
,0.4
)">hsla
顏色表現形式
（6）預定義顏色
css提供了一些常用的預定義顏色，如red、blue等
style=
"color
: red
">預定義顏色表現形式
1.3尺寸單位
cm：厘公尺
mm：公釐
in：英吋（inch）
px：畫素（pixel）
%：百分比
em：em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。
任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中宣告font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。
em特點
1. em的值並不是固定的；
2. em會繼承父級元素的字型大小。
所以我們在寫em的時候，需要注意兩點：
1. body選擇器中宣告font-size=62.5%；
2. 將你的原來的px數值除以10，然後換上em作為單位；
3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。
vw：vw就是當前螢幕寬度的1%
補充一句，當設定width:100%，被設定元素的寬度是按照父元素的寬度來設定，
但是100vw是相對於螢幕可見寬度來設定的，所以會出現50vw 比50%大的情況
vh：vh就是當前螢幕可見高度的1%，也就是說
height:100vh == height:100%;
但是有個好處是當元素沒有內容時候，設定height:100%該元素不會被撐開，
但是設定height:100vh，該元素會被撐開螢幕高度一致。
px：絕對單位%相對尺寸單位
絕對單位：px，in，cm，mm
相對單位：em，%，vw，vh，em
2.基礎屬性
屬性名：屬性值
background-color：red
p{background-color：red
font-size：24px
2.1字型相關屬性
font-family:字型名稱
font-size：字型大小
font-style:字形如斜體加粗
font-variant：字母變化如大小寫
font-weight：字型的粗細
可以簡寫：
順序font-style font-variant font-weight font-size font-family
前面三個可以省略，使用預設值，font-size和font-family是必須指定特定值得
這種書寫方式更加簡潔
2.2文字相關屬性
文字相關屬性主要包括顏色，對齊方式，修飾效果等
color：設定文字的顏色
text-decoration：
預設值none 下劃線underline 上劃線overline 刪除線line-through
color:red
;text-decoration: line-through;
text-shadow 設定文字陰影，第乙個設定左右平移，正向右負向左，第二個設定上下平移，正向下負向上，在設定顏色
text-shadow:
2px
2px
#0000ff;
左2下2
direction 文字排列方式
ltr從左往右 rtl從右往左
text-align文字對齊的方式
left左對齊
right右對齊
center居住
justify兩端對齊
vertical-align文字垂直對齊方式
top靠上對齊
bottom靠下對齊
middle垂直居中對齊
text-indet文字縮排
letter-spacing字元之間的間距
word-spacing字（單詞）的間距
line-height設定行高，實際上是調整行間距
表單標籤和css基礎
method屬性 請求方式 get post input是表單相關標籤，可以放在form標籤中做資料的提交和重置 type屬性 設定標籤種類 div和span div和span本身無語義，在html中是比較輕量級的標籤 span 用於一行顯示多個內容的時候 div 主要用於介面標籤的分組和分塊 選擇...
UL LI 標籤結合CSS的運用基礎
li 的格式化 a 運用css格式化列表符 ul li 例如下面的 供求資訊 b 如果你想將列表符換成影象，則 ul li 例如下面的 供求資訊 c 為了左對齊，可以用如下 ul例如下面的 供求資訊 d 如果想給列表加背景色，可以用如下 ulul li 例如下面的 供求資訊 e 如果想給列表加mou...
css標籤和html標籤
一,html 標題標籤 h1,h2,h3,h4,h5,h6 段落標籤 水平線標籤 換行標籤 水平線標籤 size 水平粗細線 width 水平線寬度 align 水平線對齊方式 color 水平線顏色 字型標籤 funt size 文字大小 color 字型顏色 face 文字的字型 標籤 src ...