Python全棧 Web(CSS常使用樣式大全)

  • 時間:2018-09-09 21:54 作者:云棲科技快訊 來源:云棲科技快訊 閱讀:141
  • 掃一掃,手機訪問
摘要:常使用內聯樣式:func-sizecolorbackground-color內部樣式表:選擇器1{屬性:值;}選擇器2{屬性:值;}...外鏈方式:樣式優先級:默認 選擇器2/標簽{樣式}偽類選擇器:超鏈接偽類選擇器::link訪問前:visited訪問后:active鼠標點按:hover鼠標滑過其
常使用內聯樣式:
func-size
color
background-color
內部樣式表:

外鏈方式:

樣式優先級:
默認 < 穩文檔內嵌/元素選擇器 < 行內
不發生沖突 同步 發生沖突 后來者居上
選擇器:
標簽選擇器:
p{
color: red;
}
類選著器:
.cls{
樣式
}

文本


文本


標簽類結合:
p.cls{
樣式
}
表示在指定標簽中匹配class屬性
id選著器:
#nav{
樣式
}

群組選擇器:
div, p{
樣式
}


后代選擇器:
#nav #npc/div{
樣式
}
子代選擇器:
選擇器1>選擇器2/標簽{
樣式
}
偽類選擇器:
超鏈接偽類選擇器:
:link訪問前
:visited訪問后
:active鼠標點按
:hover鼠標滑過
其余元素偽類選擇器:
:hover鼠標滑過
:active鼠標點按
偽類選擇器只能和其余選擇器/元素結合用
p:hover{
鼠標滑過p元素的新樣式
}
選擇器優先級:
標簽選擇器:1
類/偽類選擇器:10
id選擇器:100
行內選擇器:1000
尺寸單位:
px
%
in英寸 1in 2.54cm
pt榜 1pt = 1/72 in
cm
m
deg角度
顏色單位:
英文單詞(transparent: 透明)
rgb(r,g,b)0~255
rgba(r,g,b,a)透明度
十六進制:#fff
元素分類:
塊元素
獨占一行 支持寬高
div h1 p ul ol table form
行內元素
可以共行 大小由內容決定
span i b label u sub sup
行內塊元素
可以共行 支持寬高
img input
常使用屬性:
img{
width: 300px;
height: 300px;
color: red;
background-color: #fff;
font-size: 24px;
font-weight: normal; 取消字體加粗
text-decoration: none;取消下劃線
vertical-align: top/middle/bottom;
左右元素與其的對齊方式(只能在行內塊元素中用)
}
尺寸:
img{
width: 300px/50%;
height: 300px/50%;
溢出解決:
overflow: visible/hidden/scroll/auto;
默認可見/溢出部分不顯示/始終有滾動條溢出可使用/自動產生滾動條
}
邊框:
div{
border: width style color;
寬度 樣式 顏色 缺一不可
border: 1px solid/dashed/dotted/double;
實線/虛線/點線/雙線
border: none;取消邊框
單獨設置:
border-top: 上
border-right:右
border-bottom:下
border-left:左
border-width:寬度
border-style:樣式
border-color:顏色
三角標:
width: 0px;
height: 0px;
border-top: 100px solid red;
border-right: 100px solid green;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;

}
輪廓線:
div{
outline: width style color;
outline: none;取消輪廓線
}
圓角邊框:
div{
border-radius: 10px/10%;
超過50%就是圓形
border-radius: 10px 20px 30px 40px; 上 右 下 左
一個值:表示是個角相等
兩個值:表示上下、左右相等
三個值:左右相等 其余分別設置
四個值:表示上右下左全不分別設置
}
邊框陰影:
div{
box-shadow: offset-x offset-y blur spread color
水平偏移 垂直偏移 延伸距離(可以省略) 陰影顏色
box-shadow: 10px 10px 10px pink;
}
盒模型:
外邊距:
div{
margin: 10px/10%;
有四個值 最少一個 最多4個
效果同上(圓角邊框)
margin: 0px; 清理外邊距
margin: 0px auto;在父元素內水平居中
margin: -10px;位置微調
單獨設置:
margin-top: 上
margin-right:右
margin-bottom:下
margin-left:左
可以是像素也可以是百分比
默認具備外邊距的元素:
body p h1~h6 ul ol
}
內邊距:
div{
padding: 10px/10%;
有四個值 最少一個 最多4個
效果同上(圓角邊框)
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
具備默認內邊距的元素:
ol ul 文本框 密碼框 按鈕 td
}
公告盒模型計算方式:
div{
box-sizing: border-box/content-box;
內邊距+邊框+內容的共同尺寸/默認值
}
改變元素類型:
div{
display: block/inline/inline-block/none;
轉換為塊元素(顯示元素)/轉換為行內元素/行內塊元素/隱藏元素
}
背景相關屬性:
背景顏色:
background-color:red;
背景圖片:
div{
background-image:url("./1.jpg")
圖片平鋪:
background-repeat: repeat/no-repeat/repeat-x/repeat-y;
水平和垂直平鋪/不重復平鋪/水平平鋪/垂直平鋪
圖片尺寸:
background-size: 10px 10px/10%/cover/contain;
當前元素寬 高/元素比例/將圖片拉伸一律覆蓋元素超出部
分裁剪掉/將圖片拉至恰好被容納 超出部分不論
拉伸:圖片比例不變
圖片的位置:
background-position: x/x% y/y%;水平偏移/垂直偏移
百分比參照尺寸獲取
background-position: 0% 0%;圖片左上角顯示
background-position: 100% 100%;圖片右下角顯示
background-position: 50% 50%;圖片居中顯示
background-position: left/center/right top/center/bottom;
方位值表示:左/中/右 上/中/下
}
簡寫:
div{
background: color/url()/repeat/position;
}
文本相關屬性:
字體:
div{
字體大小:
font-size: 24px;設置字體大小
font-family: "微軟雅黑", "黑體", "KaiTi"; 設置字體類型
字體類型:
font-weight: normal/bold/lighter;
正常顯示/加粗顯示/極細文本
字體加粗:
font-weight: 400/700/100;
數字越大越粗 400=normal/700=bold
字體樣式:
font-style: normal/italic/oblique;
正常顯示/用傾斜顯示/使文本傾斜達到斜體效果
簡寫:
font: style weight size family;
family 必需寫 不寫沒效果
}
文本:
div{
color: green;文本顏色
文本對齊:
text-align: left/center/right/justify;
默認水平左對齊/居中/右對齊/兩端對齊
文本行高:
line-height: 32px/2;
設置行高位32像素/設置行高為字體大小的2倍
文本居中方式:
將行高設置為和元素一樣的高度
一行文本肯定的垂直居中的 上下空隙由瀏覽器默認分配
文本裝飾線:
text-decoration: underline/overline/line-through/none;
下劃線/上劃線/刪除線/取消下劃線
}
表格屬性:
div{
width:;
height:;
background:;
color:;
margin:;
padding:;
邊框合并:
border-collapse: separate/collapse;
默認邊框分離/合并邊框
td不支持外邊距 只能寫在table里
邊框邊距:
border-spacing: h-Value v-Value;
border-spacing: 10px 10px;
只能在表格分離的狀態下用
}
過渡效果:
div{
過渡屬性:
transition-property: width/height;
指定某個屬性增加過渡效果 寬渡過渡/高渡過渡
transition-property: all;將所有能過渡的屬性都進行過渡
能夠增加過渡的屬性:所有顏色相關的、取值為數值的
過渡時長:
transition-duration: 1s/100ms;1秒完成過渡/100毫秒
時間曲率:
transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out;
默認開始結束滿中間塊/勻速/開始慢結束塊/開始塊結束慢/慢開始結束中間加速后減速
過渡推遲:
transition-delay: 1s/100ms;
1秒后開始過渡/100毫秒
過渡時長必需設置其余可以省略 必需寫在默認樣式中
簡寫:
transition:property duration timing-function delay;
duration必需寫
}
布局:
普通流布局:
默認方式 瀏覽器默認布局方式
浮動布局:
div{
float: left/right/none;
元素向左浮動停泊在其余元素便于/向右浮動/默認
特點:
元素飄浮會脫流 后面的元素會補位
所有的元素只需設置浮動都能設置寬高
行內元素或者行內塊元素浮動后 水平方向之間沒有空隙
浮動元素特殊效果:
文字環繞效果 浮動元素會遮擋正常元素 但是不會遮擋內容
處理不占位影響:
1.指定父元素的高度
2.父元素中設置 :overflow: hidden;
3.清理浮動:
clear: none/left/right/both;
默認不解決/清理左浮影響/正常元素左邊不允許出現浮動元素/兩邊都不允許
4.父元素末尾增加空塊元素 設置:clear: both;
}
定位布局:
div{
position: relative/absolute/fixed/static;
相對定位/絕對定位/固定定位/默認文檔流布局
只有設置了非默認屬性 才算是已經定位的元素
偏移屬性:
使用來配合已定位的屬性 進行位置移動
top: 10px;以元素的上邊界向下為正方向
right: 10px;以元素的右邊界向左為正方向
bottom: 100px;以元素的下邊界向上為正方向
left: 10px;以元素的左邊界向右為正方向
}
定位方式:
div{
相對定位:
position: relative;
按照當前位置偏移
絕對定位:
position: absolute;
定位后會脫流 脫流的所有元素都可以設置寬高
按照離他最近的祖先元素偏移 假如沒有按照body位置偏移
一般采使用父元素相對定位 子元素絕對行為方式
浮動 + 外邊距調整元素位置 = 絕對定位 + 偏移屬性
固定定位:
position: fixed;
按照瀏覽器窗口進行定位 配合偏移屬性用 定位后元素都會變成塊元素
層疊次序調整:
z-index: 0~n;默認0 數字越大越靠上
數值相同 后來者居上
只能使用在已經定位的元素上 子元素永遠在父元素之上 不受層次影響
}
顯示方式:
div{
display: none/block/inline/inline-block;
隱藏元素并且不占位/轉換為塊元素/轉換為行內元素/轉換為行內塊元素
}
顯示效果:
div{
visibility: visible/hidden;
默認顯示/隱藏元素并占位
opacity: 0~1;
設置元素的透明度
繼承效果:
子元素最終效果 = 父元素opacity * 自身opacity
vertical-align: top/middle/bottom;
調整垂直對齊方式 常見于行內塊元素
cursor: default/pointer/text/crosshair;
默認值/設置為小手形狀/輸入I形狀/ +形狀
}
轉換屬性:
div{
transform: 轉換函數1 轉換函數2...;
轉換原點設置:
transform-origin: x y;
transform-origin: 像素/百分比/方位值;默認以元素中心為原點
轉換函數:
平移轉換:
transform: transform(x,y);
x:水平方向平移距離 y:垂直方向 一個值等于translateX(value)
transform: translateX(value)水平方向位移
transform: translateY(value)垂直方向位移
縮放變換:
transform: scale(value)/scaleX()/scaleY();
正常縮放/橫向縮放/垂直縮放
value:默認1 大于1會等比放大 0~1會縮小 小于0會翻轉
旋轉變換:
transform: rotate(90deg/-90deg);
順時針旋轉90度/逆時針旋轉90度
transform: rotate3d(45deg/-45deg);
transform: rotateX(ndeg);沿x軸翻轉
transform: rotateY(ndeg);沿y軸翻轉
transform: rotateZ(ndeg);沿z軸旋轉
旋轉原點會影響旋轉效果
假如涉及旋轉操作 會連帶坐標軸一起旋轉,影響后面的位移
}
HTML 會跳動的小心心












澳洲幸运10精准人工计划


本文來自阿里云云棲社區,未經許可禁止轉載。

更多資訊,盡在云棲科技快訊~

來科技快訊看新聞鴨~

快點關注我認識我愛上我啊~~~

Python全棧 Web(CSS常使用樣式大全)

Python全棧 Web(CSS常使用樣式大全)

  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-15 14:52)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
【系統環境|軟件環境】前臺開發WebStorm常用快捷鍵,火速收藏!(2019-12-04 14:25)
【系統環境|軟件環境】微博H5登錄和發微博組件(2019-12-04 14:25)
手機二維碼手機訪問領取大禮包
返回頂部