css
1、div標籤
容器標籤
2、語法
3、選擇器
標籤選擇器 p
類選擇器 .class
id選擇器 #id
多個同時選擇（且），各個標籤用，分割
4、css控制方法
1、行內樣式：在標籤中直接用style屬性控制
2、內嵌樣式：在中用宣告
3、外部樣式：引用
@import url（"css路徑"）匯入
5、主要屬性
1、字型屬性
font-size 字型大小
font-family 字型型別，可設定多個用，隔開；有漢字或者空格需""包裹
font-style 字型風格，斜體 normal-正常；italic-斜體；oblique傾斜體
font-weight 字型粗細，bold粗體，normal正常，數字
font 依次設定以上各屬性，用，隔開
2、文字屬性
color 文字顏色 直接設定或rgb顏色
line-height 行高 px，x%，數字。
text-align 文字對齊方式
text-decoration 新增修飾 上下（overline、underline）劃線
3、列表屬性
list-style-type 列表型別 *disc 黑園點，circle空心，square黑方框，none無標識
list-style-image 表象影象 url(...)
list-style-position 列表位置 outside 列表專案不在文字內
inside 列表專案不在文字內
list-style 依次設定以上各屬性，用，隔開
4、浮動屬性
關於浮動：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
float 浮動方向 left，right，*none
clear 不允許浮動方向 left，right，*none，both
5、大小屬性
width
height
6、背景屬性
backgroud-color 顏色 同color屬性,其中用transparent表示透明
backgroud-image 影象 url(...)
backgroud-repeat 重複方式 repeat另個方向 repeat-x水平 repeat-y垂直 no-repeat均不重複
backgroud-position 影象起始位置 xxpx,xxpx
7、盒子模型（位置屬性）
border 邊框
padding 填充 ---內邊距
margin 邊界 ---外邊距
content 內容
實際寬度為以上四個之和
border
top,left,right,bottom四個
color 顏色
width 寬度
style 樣式 none-無；dotted-點狀線（實線）；dashed-虛線；solid-實線；double-雙線
border 依次設定以上個屬性
padding
top,left,right,bottom四個
margin
top,left,right,bottom四個
8、定位
position --定位 static,absolute絕對,relative相對,fixed絕對·
float --浮動
z-index --空間位置
position
和top、right、bottom、left與absolute,relative連用表示
元素邊界離頁面邊框或原來位置的距離
absolute絕對用於隨滾動條滾動的特效
其定位相對於第乙個
relative相對
z-index 各個塊的堆疊順序（z軸位置）
屬性值由大到小，位置由下而上
9、css樣式處理
對超級鏈結
a:link 未訪問連線
a:visited 已訪問連線
a:hover 移動到連線上
a:active 選中啟用連線
[注]a:hover在a:link、a:visited之前才有效
a:active在a:hover之後採有效
對滑鼠cursor控制滑鼠，改變滑鼠效果
cursor:pointer; 手狀
cursor:help; 帶問號
cursor:move; 移動
顯示隱藏
display:none 隱藏
display:block 顯示
web css開發學習路1 0
盒子的製作 1.盒子寬高不能糾結，允許1 2px誤差 2.字型大小不能糾結，允許1 2px誤差 3.顏色拾取不能糾結，允許 值誤差 4.寫盒子的順序 1 從外到內，從上到下，先總體後細節 設定盒子寬高 寬有時不設 設定乙個輔助背景顏色後面注釋刪除掉以便於觀察，2 設定 box sizing bord...
web css中的塌陷問題
css中有一些常見的塌陷問題，尤其是新手遇到之後會很解決，明明 邏輯是正確的，為什麼樣式錯亂了，曾經我也好幾次為這個問題絆倒過，今天做一下記錄總結。lang en charset utf 8 testtitle content box style head class content class b...
WEB CSS實現單行（多行）文字溢位顯示省略號
單行文字溢位部分隱藏顯示省略號.overflow hidden text overflow ellipsis white space nowrap n 行 文字溢位部分隱藏顯示省略號.使用了webkit的css擴充套件屬性，該方法適用於webkit瀏覽器及移動端 webkit 是乙個開源的瀏覽器引擎...