web前端開發css基礎樣式總結
顏色和單位的使用
顏色用顏色的名字表示顏色,比如:red
用16進製表示演示 比如:#ff0000
用rgb數值表示顏色,rgb(紅,綠,藍),每個值都在0-255之間
一般都用16進製表示顏色
單位px:畫素,與解析度設定相關.
%相對於瀏覽器的百分之多少,可以對寬度width做設定,不可以對height做設定
文字樣式(text)
color:設定文字顏色
text-align:設定文字對齊方式
center
left
right
letter-spacing:字間距/字母間距
word-spacing:單詞間距,有空格就設定,中文看空格.
line-height:行高(第二行的行高=第一行底部到第三行頂部)
text-indent:一般30px就2個
text-decoration:文字裝飾
underline:下劃線
overline:上劃線
line-through:刪除線
blink 閃爍(不會用)
text-transform:大小寫轉換
uppercase:全部大寫
lowercase:全部小寫
capitalize:每個單詞以大寫開頭
text-shadow:建立文字陰影(水平偏移量px,垂直偏移量px,模糊程度px,陰影顏色),模糊程度px值高越模糊.
設定字型:
font-style:字型樣式italic,oblique斜體
font-size:設定字型的大小
font-weight:設定字型的粗細,bolder最粗
font-family:設定文字字型,楷體,隸書等等
font簡寫屬性: style weight size family(空格)順序必須按這個格式,一般用了簡寫屬性之後把行間距letter-spacing放font屬性後邊,不然會覆蓋.
邊框和背景
為元素應用邊框
border-width:邊框寬度
border-style:邊框樣式
none沒有邊框
dashed虛線
solied實線
double雙線
groove槽線
dotted圓點線邊框
inset內嵌 outset外凸
ridge 脊線邊框
bolder-color:邊框顏色
簡寫形式border:width style color 沒有先後順序
單獨設定某一條邊框
border-top/bottom/left/right-width/style/color
簡寫形式:border-top
應用圓角邊框(x半徑,y半徑,xy相同時寫乙個就好了)
border-top/bottom-left/right-radius
簡寫:border-radius
設定元素背景
margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; list-style: disc;">background-image: 背景位址
background-repeat:背景圖重複方式,一般no-repeat
background-size:背景圖尺寸
background-position:背景圖位置
簡寫:background:color image repeat position,尺寸不寫,會衝突
建立盒子陰影
box-shadow:水平偏移量 垂直偏移量 模糊值 陰影的延伸半徑 陰影顏色 10px 10px 5px 0px red;
新增多個陰影,直接第乙個之後用逗號繼續寫第二個,第乙個設定成整數,第二個陰影設定成負數
設定輪廓
邊框和輪廓的區別：輪廓不屬於頁面，不會因為應用輪廓而調整頁面的布局
邊框占有實際大小,輪廓不占有
當設定hover懸停時,輪廓修飾的div不會發生位移,邊框修飾時位移
outline-color:輪廓顏色
outline-style:輪廓樣式
outline-width:輪廓寬度
outline-offset:輪廓距元素邊框偏移量
簡寫: outline
其他樣式(**,列表,透明度,游標)
**border-collapse相鄰單元格邊框處理,合併**=collapse
border-spacing:相鄰單元格間距
caption-side:標題位置
empty-cells:空單元格是否顯示
列表list-style-tyle:列表前邊的標記樣式 圓點,方點等等
list-style-image:列表影象標記
簡寫:list-style:none 取消列表的所有屬性 一般用於導航
橫向導航: li
透明度opacity:設定透明度(0-1之間取值)
游標形狀
cursor:設定游標形狀,當游標放在某個div上邊,設定等待狀,手形狀等等.
day03
盒子模型
盒子模型分為元素,內邊距,邊框,外邊距,
1.設定一定尺寸的元素
1). width:設定元素寬度
2). height:設定元素高度
2.設定內邊距
padding-top/bottom/right/left
padding:簡寫形式
3.設定外邊距(邊框到瀏覽器邊緣或者到下乙個盒子的距離)
margin-top/bottom/left/right
margin:簡寫形式
4.設定最小和最大尺寸(寬度設定為百分比時,擴大或縮小瀏覽器或者換了大屏或小屏顯示器之後,防止元素錯位或溢位)
min-width:最小值為兩div寬度相加值
max-width:最大值
5.處理元素內容溢位
overflow-x/y:x或y軸溢位
overflow:簡寫形式: scroll設定滾動條(溢位處理方式)
6.改變元素型別
1).元素型別分為:
inline行內元素:在頁面中不可設定寬高,也不會獨佔一行,b,span
inline-block行內塊級元素:不能獨佔一行,但能設定寬高.img元素
block塊級元素:獨佔一行,可以設定寬高,p,div元素
2).改變元素型別display:
元素型別可以相互轉換,轉化之後元素性質也隨之改變
div一般不轉化為行內元素,會丟掉,不能設定高
3).隱藏元素: display:none
技巧:為了讓div居中,直接margin:0 auto;
為了初始不執行瀏覽器預設特徵: *
為了防止div塊溢位,設定最大最小值. 最小值就是左右兩邊div相加
文字垂直居中:line-height
做導航,鏈結a標籤加到li標籤外邊
布局樣式
定位方式position
static：預設,元素為普通元素,文件流定位,從上到下
relative(相對的):元素的位置是相對於普通的位置定位的 ,位移之前的位置 其他元素用不了,一般不做太大的改動 ,對某個元素位置進行微調 ,只能使用top,left 我感覺他是相對於他之前的位置移動的
fixed(固定的)：相對於瀏覽器視窗來定位 ,常用!!! ,位移之前位置不會被占用, 上下左右都可以使用, 小廣告常用手法, 滾動條不斷移,他的位置也不變 ,他會脫離文件流,漂浮於文件流上邊,他這個上下左右是相對於邊的位置,比如:top50px 不是向上移動50px ,而是元素相對於頂部邊框距離50px 設定buttom也同樣可以使用,而且拉動滾動條也不會變化位置
absolute(絕對的)：元素相對position值不為static的乙個祖先元素定 子元素依據祖先元素變化 祖先元素不能為static 依據誰變化,誰不可以為static(預設為static),發生在父子 或 祖先元素與後代元素之間的位移定位
定位布局
top/bottom/left/right
z-index
用來設定元素 和 元素 的顯示層數,正數 負數 都可以
必須配合position使用
過渡,變形
過渡過渡:元素由一種樣式逐漸變為另一種樣式
屬性:transition-delay:設定過渡前的延時
transition-duration:設定過渡用時
transition-property:設定過渡參與的屬性
transition-timing-function:過渡速率(linear勻速)
transition:簡寫形式(property duration timing-function delay)
反向過渡:
hover中設定的,貼上到div中,就可以了
變形transform: 指定如何變形
transform: scalex/y(1.5) 縮放1.5倍
transform: rotate(360deg) 旋轉360度 deg代表度數,配合過渡時間 效果很好
transform: skew(x軸角度,y軸角度) 傾斜的角度
transform: translate(x軸距離,y軸距離) 移動的距離
css樣式總結
一 浮動及清除 1.float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框。值描述 left 元素向左浮動 right 元素向右浮動 none 不浮動 預設 inherit 繼承父類的float屬性 2.浮...
css樣式總結
1.div在div中上下居中 父元素 display flex align item center 2.flex布局 display flex flex wrap wrap justify content space between 3.文字劃線 text decoration none 沒有 bl...
常用css樣式總結
1.超出顯示省略號 title 超出兩行顯示.overflow hidden text overflow ellipsis display webkit box webkit line clamp 2 webkit box orient vertical 2.內容局左居中對齊 tip content...